<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Sistema de Inventario - Perfumería')</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url('/css/app.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    @stack('styles')
</head>

<body>
    <div class="layout-container-horizontal">
        <!-- Top Header with Navigation -->
        <header class="top-header">
            <div class="header-brand">
                <i class="fa-solid fa-spray-can-sparkles" style="font-size: 1.5rem; color: var(--primary-color);"></i>
                <div>
                    <h2 class="brand-title">Perfumería</h2>
                    <p class="brand-subtitle">Sistema de Inventario</p>
                </div>
            </div>

            <nav class="horizontal-nav">
                <a href="{{ route('proveedores.index') }}"
                    class="nav-link {{ request()->routeIs('proveedores.*') ? 'active' : '' }}">
                    <i class="fa-solid fa-truck"></i>
                    <span>Proveedores</span>
                </a>
                <a href="{{ route('categorias.index') }}"
                    class="nav-link {{ request()->routeIs('categorias.*') ? 'active' : '' }}">
                    <i class="fa-solid fa-folder-open"></i>
                    <span>Categorías</span>
                </a>
                <a href="{{ route('productos.index') }}"
                    class="nav-link {{ request()->routeIs('productos.*') ? 'active' : '' }}">
                    <i class="fa-solid fa-spray-can-sparkles"></i>
                    <span>Productos</span>
                </a>
            </nav>

            <div class="header-user-actions">
                <div style="position: relative;">
                    <button class="btn-icon" id="notificacionesBtn" title="Notificaciones">
                        <i class="fa-regular fa-bell"></i>
                        <span id="notificacionesBadge" class="notification-badge" style="display: none;">0</span>
                    </button>

                    <!-- Dropdown de notificaciones -->
                    <div id="notificacionesDropdown" class="notifications-dropdown" style="display: none;">
                        <div class="notifications-header">
                            <h4>Notificaciones de Stock Bajo</h4>
                            <button id="cerrarNotificaciones" class="btn-close-notifications">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                        <div id="notificacionesContent" class="notifications-content">
                            <div class="notification-loading">
                                <i class="fa-solid fa-spinner fa-spin"></i> Cargando...
                            </div>
                        </div>
                    </div>
                </div>
                <button class="btn-icon" title="Configuración">
                    <i class="fa-solid fa-gear"></i>
                </button>
                <div class="user-menu">
                    <span class="user-icon"><i class="fa-solid fa-user-circle"></i></span>
                    <span class="user-name">Admin</span>
                </div>
            </div>
        </header>

        <!-- Sub Header -->
        <div class="sub-header">
            <h1 class="page-title">@yield('header', 'Panel de Control')</h1>
        </div>

        <!-- Main Content -->
        <main class="content-horizontal">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-error">
                    {{ session('error') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-error">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @yield('content')
        </main>
    </div>

    <script src="{{ url('/js/app.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 11px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .notifications-dropdown {
            position: fixed;
            top: 70px;
            right: 20px;
            width: 380px;
            max-height: 500px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            z-index: 99999;
            overflow: hidden;
        }

        .top-header {
            position: relative;
            z-index: 100;
        }

        .notifications-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            border-bottom: 2px solid var(--border-color);
            background: var(--bg-secondary);
        }

        .notifications-header h4 {
            margin: 0;
            font-size: 1rem;
            color: var(--text-primary);
        }

        .btn-close-notifications {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1.25rem;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .btn-close-notifications:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-primary);
        }

        .notifications-content {
            max-height: 440px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .notifications-content::-webkit-scrollbar {
            width: 6px;
        }

        .notifications-content::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .notifications-content::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

        .notifications-content::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .notification-loading {
            padding: 3rem;
            text-align: center;
            color: var(--text-secondary);
        }

        .notification-empty {
            padding: 3rem 1.5rem;
            text-align: center;
            color: var(--text-secondary);
        }

        .notification-empty i {
            font-size: 3rem;
            color: #10b981;
            margin-bottom: 1rem;
            display: block;
        }

        .notification-item {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.2s;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .notification-item:hover {
            background: var(--bg-secondary);
        }

        .notification-item:last-child {
            border-bottom: none;
        }

        .notification-icon {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.25rem;
            margin-right: 1rem;
            float: left;
        }

        .notification-body {
            overflow: hidden;
        }

        .notification-title {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
            display: block;
        }

        .notification-text {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.4;
        }

        .notification-badge-warning {
            display: inline-block;
            background: #fef3c7;
            color: #d97706;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 0.25rem;
        }
    </style>

    <script>
        // Función global para confirmación de eliminación con SweetAlert2
        function confirmarEliminacion(event, mensaje) {
            event.preventDefault();
            const form = event.target;

            Swal.fire({
                title: '¿Estás seguro?',
                text: mensaje || "Esta acción no se puede deshacer",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });

            return false;
        }

        // Sistema de notificaciones de stock bajo
        (function() {
            const notificacionesBtn = document.getElementById('notificacionesBtn');
            const notificacionesBadge = document.getElementById('notificacionesBadge');
            const notificacionesDropdown = document.getElementById('notificacionesDropdown');
            const notificacionesContent = document.getElementById('notificacionesContent');
            const cerrarNotificaciones = document.getElementById('cerrarNotificaciones');

            let dropdownAbierto = false;
            const STORAGE_KEY = 'notificaciones_leidas';

            // Obtener notificaciones leídas del localStorage
            function getNotificacionesLeidas() {
                const leidas = localStorage.getItem(STORAGE_KEY);
                return leidas ? JSON.parse(leidas) : [];
            }

            // Guardar notificación como leída
            function marcarComoLeida(productoId) {
                const leidas = getNotificacionesLeidas();
                if (!leidas.includes(productoId)) {
                    leidas.push(productoId);
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(leidas));
                }
            }

            // Limpiar notificaciones leídas que ya no están en stock bajo
            function limpiarNotificacionesLeidas(productosActuales) {
                const leidas = getNotificacionesLeidas();
                const idsActuales = productosActuales.map(p => p.id);
                const leidasActualizadas = leidas.filter(id => idsActuales.includes(id));
                localStorage.setItem(STORAGE_KEY, JSON.stringify(leidasActualizadas));
            }

            // Función para obtener notificaciones
            async function obtenerNotificaciones() {
                try {
                    const response = await fetch('{{ route("api.notificaciones.stock-bajo") }}');
                    const data = await response.json();

                    // Limpiar notificaciones leídas de productos que ya no tienen stock bajo
                    limpiarNotificacionesLeidas(data.productos);

                    // Filtrar productos no leídos
                    const leidas = getNotificacionesLeidas();
                    const productosNoLeidos = data.productos.filter(p => !leidas.includes(p.id));

                    actualizarBadge(productosNoLeidos.length);
                    actualizarDropdown(productosNoLeidos);
                } catch (error) {
                    console.error('Error al obtener notificaciones:', error);
                }
            }

            // Actualizar badge
            function actualizarBadge(total) {
                if (total > 0) {
                    notificacionesBadge.textContent = total > 99 ? '99+' : total;
                    notificacionesBadge.style.display = 'flex';
                } else {
                    notificacionesBadge.style.display = 'none';
                }
            }

            // Actualizar contenido del dropdown
            function actualizarDropdown(productos) {
                if (productos.length === 0) {
                    notificacionesContent.innerHTML = `
                        <div class="notification-empty">
                            <i class="fa-solid fa-circle-check"></i>
                            <p style="margin: 0; font-weight: 500;">Todo bien!</p>
                            <p style="margin: 0.5rem 0 0; font-size: 0.875rem;">No hay productos con stock bajo</p>
                        </div>
                    `;
                } else {
                    let html = '';
                    productos.forEach(producto => {
                        const deficit = producto.stock_minimo - producto.stock_actual;
                        html += `
                            <a href="${producto.url}" class="notification-item" data-producto-id="${producto.id}">
                                <div class="notification-icon">
                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                </div>
                                <div class="notification-body">
                                    <span class="notification-title">${producto.nombre}</span>
                                    <p class="notification-text">
                                        Stock: ${producto.stock_actual} unidades (Mínimo: ${producto.stock_minimo})
                                        <br>
                                        <span class="notification-badge-warning">Falta: ${deficit} ${deficit === 1 ? 'unidad' : 'unidades'}</span>
                                    </p>
                                </div>
                            </a>
                        `;
                    });
                    notificacionesContent.innerHTML = html;

                    // Agregar event listeners a cada notificación
                    document.querySelectorAll('.notification-item').forEach(item => {
                        item.addEventListener('click', function(e) {
                            const productoId = parseInt(this.getAttribute('data-producto-id'));
                            marcarComoLeida(productoId);
                            // La navegación continuará normalmente al href
                        });
                    });
                }
            }

            // Toggle dropdown
            notificacionesBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                dropdownAbierto = !dropdownAbierto;
                notificacionesDropdown.style.display = dropdownAbierto ? 'block' : 'none';

                if (dropdownAbierto) {
                    obtenerNotificaciones();
                }
            });

            // Cerrar dropdown
            cerrarNotificaciones.addEventListener('click', function(e) {
                e.stopPropagation();
                dropdownAbierto = false;
                notificacionesDropdown.style.display = 'none';
            });

            // Cerrar al hacer clic fuera
            document.addEventListener('click', function(e) {
                if (dropdownAbierto && !notificacionesDropdown.contains(e.target) && e.target !== notificacionesBtn) {
                    dropdownAbierto = false;
                    notificacionesDropdown.style.display = 'none';
                }
            });

            // Polling cada 30 segundos
            obtenerNotificaciones(); // Carga inicial
            setInterval(obtenerNotificaciones, 30000); // Actualizar cada 30 segundos
        })();
    </script>
    @stack('scripts')
</body>

</html>
