<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Notificaciones - Profesional</title>
    <script>
        (function () {
            const root = document.documentElement;
            root.classList.add('sidebar-nav-pending');

            const releasePending = function () {
                root.classList.remove('sidebar-nav-pending');
            };

            const timeoutId = window.setTimeout(releasePending, 1200);

            if (document.querySelector('.admin-sidebar')) {
                window.clearTimeout(timeoutId);
                releasePending();
                return;
            }

            const observer = new MutationObserver(function () {
                if (!document.querySelector('.admin-sidebar')) {
                    return;
                }

                observer.disconnect();
                window.clearTimeout(timeoutId);
                releasePending();
            });

            observer.observe(document.documentElement, {
                childList: true,
                subtree: true,
            });
        })();
    </script>
    <style>
        @media (min-width: 992px) {
            html.sidebar-nav-pending main {
                visibility: hidden;
            }
        }
    </style>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body id="top" class="d-flex flex-column min-vh-100 bg-light">
    <header class="app-navbar">
        <nav class="navbar navbar-expand-lg">
            <div class="container">
                @php
                    $nombreSesion = trim((string) session('personal_nombre', 'Profesional'));
                    $nombreSaludo = $nombreSesion !== '' ? explode(' ', $nombreSesion)[0] : 'Profesional';
                @endphp
                <a class="navbar-brand d-flex align-items-center gap-2" href="/profesional/dashboard">
                    <div class="d-flex align-items-center justify-content-center" style="width: 130px; height: 52px;">
                        <img src="{{ asset('images/logo.png') }}" alt="Logo" class="img-fluid" style="max-height: 70px; width: auto; object-fit: contain;">
                    </div>
                    <span class="fw-semibold">¡Hola, {{ $nombreSaludo }}!</span>
                </a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuPrincipal" aria-controls="menuPrincipal" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="menuPrincipal">
                    <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                        <li class="nav-item"><a class="btn app-navbar-link" href="/profesional/dashboard">Mi Agenda</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/profesional/clientes">Mis Clientes</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/profesional/mis-datos">Mis Datos</a></li>
                        <li class="nav-item">
                            <a class="btn app-navbar-link position-relative" href="/profesional/formularios">
                                Revisar Formularios
                                @if(($formulariosPendientesCount ?? 0) > 0)
                                    <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle js-notificaciones-badge">
                                        <span class="visually-hidden">Hay formularios pendientes</span>
                                    </span>
                                @endif
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="btn app-navbar-link active position-relative" href="/profesional/notificaciones" data-notificaciones-claves='@json($notificacionesClaves ?? [])'>
                                Notificaciones
                                @if(($notificacionesCount ?? 0) > 0)
                                    <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle js-notificaciones-badge d-none">
                                        <span class="visually-hidden">Hay notificaciones</span>
                                    </span>
                                @endif
                            </a>
                        </li>
                    </ul>

                    <a class="btn app-navbar-link" href="/logout">Cerrar Sesion</a>
                </div>
            </div>
        </nav>
    </header>

    <main class="container py-4 flex-grow-1">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h4 mb-0">Notificaciones</h1>
            <a href="/profesional/dashboard" class="btn btn-outline-secondary btn-sm">Volver</a>
        </div>

        @php $totalNotificaciones = count($notificaciones ?? []); @endphp

        <div id="contenedorNotificaciones">
            @if($totalNotificaciones === 0)
                <div class="alert alert-secondary" id="mensajeSinNotificaciones">No tenés notificaciones pendientes.</div>
            @else
                <div class="d-flex flex-column gap-3" id="listaNotificaciones">
                    @foreach($notificaciones as $index => $notif)
                        @php
                            $iconoClase = match($notif['tipo']) {
                                'turno_hoy'       => 'bg-primary text-white',
                                'turno_manana'    => 'bg-info text-dark',
                                'turno_cancelado' => 'bg-danger text-white',
                                default           => 'bg-light text-dark',
                            };
                            $icono = match($notif['tipo']) {
                                'turno_hoy'       => 'Hoy',
                                'turno_manana'    => 'Manana',
                                'turno_cancelado' => 'X',
                                default           => 'Aviso',
                            };
                            $claveNotif = $notif['clave'] ?? base64_encode($notif['tipo'] . '|' . $notif['titulo'] . '|' . $notif['fecha']);
                        @endphp
                        <div class="card border shadow-sm notif-card" data-clave="{{ $claveNotif }}">
                            <div class="card-body d-flex align-items-start gap-3">
                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 {{ $iconoClase }}" style="width:42px;height:42px;font-size:1.2rem;">
                                    {{ $icono }}
                                </div>
                                <div class="flex-grow-1">
                                    <p class="fw-semibold mb-1">{{ $notif['titulo'] }}</p>
                                    <p class="text-muted small mb-2">{{ $notif['descripcion'] }}</p>
                                    @if(!empty($notif['enlace']))
                                        <a href="{{ $notif['enlace'] }}" class="btn btn-sm btn-outline-primary">Ver detalle</a>
                                    @endif
                                </div>
                                <div class="d-flex flex-column align-items-end gap-2 flex-shrink-0">
                                    <span class="text-muted small">{{ $notif['fecha'] }}</span>
                                    <button type="button"
                                            class="btn btn-outline-secondary btn-sm btn-cerrar-notif"
                                            data-clave="{{ $claveNotif }}"
                                            title="Cerrar notificación">
                                        &times;
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="alert alert-secondary mt-3 d-none" id="mensajeSinNotificaciones">No tenés notificaciones pendientes.</div>
            @endif
        </div>
    </main>

    @include('partials.reportar-falla-boton')

    <script>
    (function () {
        const STORAGE_KEY = 'notif_cerradas_profesional';
        const STORAGE_KEY_VISTAS = 'notif_vistas_profesional';

        function getCerradas() {
            try {
                return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
            } catch {
                return [];
            }
        }

        function guardarCerradas(arr) {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(arr));
        }

        function getVistas() {
            try {
                return JSON.parse(localStorage.getItem(STORAGE_KEY_VISTAS) || '[]');
            } catch {
                return [];
            }
        }

        function guardarVistas(arr) {
            localStorage.setItem(STORAGE_KEY_VISTAS, JSON.stringify(Array.from(new Set(arr))));
        }

        function ocultarCerradas() {
            const cerradas = getCerradas();
            if (!cerradas.length) return;
            document.querySelectorAll('.notif-card').forEach(function (card) {
                if (cerradas.includes(card.dataset.clave)) {
                    card.remove();
                }
            });
            verificarVacio();
            if (typeof window.actualizarBadgeNotificaciones === 'function') {
                window.actualizarBadgeNotificaciones();
            }
        }

        function verificarVacio() {
            const lista = document.getElementById('listaNotificaciones');
            const mensaje = document.getElementById('mensajeSinNotificaciones');
            if (lista && lista.querySelectorAll('.notif-card').length === 0 && mensaje) {
                lista.classList.add('d-none');
                mensaje.classList.remove('d-none');
            }
        }

        function marcarActualesComoVistas() {
            const clavesActuales = Array.from(document.querySelectorAll('.notif-card'))
                .map((card) => card.dataset.clave)
                .filter(Boolean);

            if (!clavesActuales.length) {
                if (typeof window.actualizarBadgeNotificaciones === 'function') {
                    window.actualizarBadgeNotificaciones();
                }
                return;
            }

            const vistas = getVistas();
            guardarVistas([...vistas, ...clavesActuales]);

            if (typeof window.actualizarBadgeNotificaciones === 'function') {
                window.actualizarBadgeNotificaciones();
            }
        }

        // Ocultar al cargar
        ocultarCerradas();
        marcarActualesComoVistas();

        // Botones de cierre
        document.querySelectorAll('.btn-cerrar-notif').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const clave = btn.dataset.clave;
                const cerradas = getCerradas();
                if (!cerradas.includes(clave)) {
                    cerradas.push(clave);
                    guardarCerradas(cerradas);
                }

                const vistas = getVistas();
                if (!vistas.includes(clave)) {
                    vistas.push(clave);
                    guardarVistas(vistas);
                }

                const card = document.querySelector('.notif-card[data-clave="' + clave + '"]');
                if (card) {
                    card.style.transition = 'opacity 0.2s';
                    card.style.opacity = '0';
                    setTimeout(function () {
                        card.remove();
                        verificarVacio();
                        if (typeof window.actualizarBadgeNotificaciones === 'function') {
                            window.actualizarBadgeNotificaciones();
                        }
                    }, 200);
                }
            });
        });
    })();
    </script>
</body>
</html>




