@extends('layouts.app')

@section('title', 'Mis Notificaciones — OnAPB')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">
            <i class="bi bi-bell-fill text-warning me-2"></i>
            Mis Notificaciones
            @if($totalNoLeidas > 0)
                <span class="badge bg-danger ms-2">{{ $totalNoLeidas }} nuevas</span>
            @endif
        </h2>
        </h2>
        <div class="d-flex gap-2">
            @if($totalNoLeidas > 0)
                <button type="button" class="btn btn-outline-secondary btn-sm px-3 fw-bold" onclick="marcarTodasLeidas()">
                    <i class="bi bi-check2-all me-1"></i>MARCAR LEÍDAS
                </button>
            @endif
            @if(!$notificaciones->isEmpty())
                <button type="button" class="btn btn-outline-danger btn-sm px-3 fw-bold" onclick="eliminarTodas()">
                    <i class="bi bi-trash me-1"></i>BORRAR TODAS
                </button>
            @endif
        </div>
    </div>

    @if($notificaciones->isEmpty())
        <div class="text-center py-5">
            <i class="bi bi-bell-slash display-1 text-muted"></i>
            <p class="mt-3 text-muted">No tenés notificaciones todavía.</p>
            <a href="{{ route('panel.usuario') }}" class="btn btn-primary mt-2">Ir a mi panel</a>
        </div>
    @else
        <div class="list-group shadow-sm">
            @foreach($notificaciones as $notif)
                <div class="list-group-item list-group-item-action d-flex gap-3 py-3 {{ !$notif->leida ? 'border-start border-4 border-primary bg-light' : '' }}"
                     id="notif-{{ $notif->id }}">
                    {{-- Ícono según tipo --}}
                    <div class="flex-shrink-0 mt-1">
                        @php
                            $iconos = [
                                'partido'     => ['class' => 'bi-calendar-event', 'color' => 'text-primary'],
                                'resultado'   => ['class' => 'bi-trophy-fill',    'color' => 'text-warning'],
                                'sistema'     => ['class' => 'bi-info-circle-fill','color' => 'text-secondary'],
                                'seguimiento' => ['class' => 'bi-star-fill',      'color' => 'text-success'],
                            ];
                            $icono = $iconos[$notif->tipo] ?? ['class' => 'bi-bell-fill', 'color' => 'text-muted'];
                        @endphp
                        <i class="bi {{ $icono['class'] }} {{ $icono['color'] }} fs-4"></i>
                    </div>

                    {{-- Contenido --}}
                    <div class="flex-grow-1">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1 {{ !$notif->leida ? 'fw-bold' : '' }}">{{ $notif->titulo }}</h6>
                            <small class="text-muted text-nowrap ms-2">{{ $notif->creada_en->diffForHumans() }}</small>
                        </div>
                        <p class="mb-1 text-secondary small">{{ $notif->mensaje }}</p>
                        <div class="d-flex gap-2 mt-1">
                            @if($notif->url_accion)
                                <a href="{{ $notif->url_accion }}" class="btn btn-sm btn-outline-primary py-0 px-2"
                                   onclick="marcarLeida({{ $notif->id }})">
                                    Ver detalle <i class="bi bi-arrow-right ms-1"></i>
                                </a>
                            @endif
                            @if(!$notif->leida)
                                <button class="btn btn-sm btn-outline-secondary py-0 px-2"
                                        onclick="marcarLeida({{ $notif->id }}, true)">
                                    <i class="bi bi-check2 me-1"></i>Marcar leída
                                </button>
                            @endif
                            <button class="btn btn-sm btn-link text-danger p-0 ms-auto"
                                    onclick="eliminarNotificacion({{ $notif->id }})" title="Eliminar">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Paginación --}}
        <div class="mt-4">
            {{ $notificaciones->links() }}
        </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

function marcarLeida(id, soloMarcar = false) {
    fetch(`/notificaciones/${id}/leer`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    }).then(r => r.json())
    .then(data => {
        const el = document.getElementById('notif-' + id);
        if (el) {
            el.classList.remove('border-start', 'border-4', 'border-primary', 'bg-light');
            const titulo = el.querySelector('h6');
            if (titulo) titulo.classList.remove('fw-bold');
            const btnLeida = el.querySelector('button[onclick*="marcarLeida"]');
            if (btnLeida) btnLeida.remove();
        }
        actualizarBadge();
    });
}

function marcarTodasLeidas() {
    Swal.fire({
        title: '¿Marcar todas como leídas?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#b00000',
        confirmButtonText: 'Sí, marcar todas',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch('{{ route("notificaciones.leer.todas") }}', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => {
                location.reload();
            });
        }
    });
}

function eliminarNotificacion(id) {
    Swal.fire({
        title: '¿Eliminar notificación?',
        text: 'Esta acción no se puede deshacer.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`/notificaciones/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => {
                const el = document.getElementById('notif-' + id);
                if (el) el.remove();
                actualizarBadge();
            });
        }
    });
}

function eliminarTodas() {
    Swal.fire({
        title: '¿Eliminar TODO el historial?',
        text: 'Se borrarán todas tus notificaciones permanentemente.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        confirmButtonText: 'Sí, borrar todo',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch('{{ route("notificaciones.eliminar.todas") }}', {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => {
                location.reload();
            });
        }
    });
}

function actualizarBadge() {
    fetch('/notificaciones/count')
        .then(r => r.json())
        .then(data => {
            const badge = document.getElementById('notif-badge');
            if (!badge) return;
            if (data.count > 0) {
                badge.textContent = data.count > 99 ? '99+' : data.count;
                badge.classList.remove('d-none');
            } else {
                badge.classList.add('d-none');
            }
        });
}
</script>
@endsection