<!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>Admin Dashboard - DIAGNOSTIKA</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-100 font-sans">
    <div id="mobileMenu" class="hidden fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"></div>
    
    <div class="flex h-screen bg-gray-200">
        <!-- Sidebar (Hidden on mobile, visible on md and up) -->
        <div id="sidebar" class="fixed md:relative w-64 h-screen bg-blue-950 text-white shadow-lg transform -translate-x-full md:translate-x-0 transition-transform duration-300 z-40">
            <div class="p-6 text-center">
                    <a href="{{ route('admin.dashboard') }}">
                        <img src="{{ asset('images/logo.gif') }}" alt="Logo" class="h-12 mx-auto mb-4 hover:cursor-pointer">
                    </a>
                <h2 class="text-lg md:text-xl font-bold uppercase tracking-widest">Admin Panel</h2>
            </div>
            <nav class="mt-10">
                <a href="{{ route('admin.dashboard') }}" class="flex items-center py-3 px-6 {{ request()->routeIs('admin.dashboard') ? 'bg-blue-800' : 'hover:bg-blue-900' }} transition">
                    <i class="fas fa-chart-line mr-3"></i> <span>Dashboard</span>
                </a>
                <a href="{{ route('admin.users.index') }}" class="flex items-center py-3 px-6 {{ request()->routeIs('admin.users.*') ? 'bg-blue-800' : 'hover:bg-blue-900' }} transition border-l-4 {{ request()->routeIs('admin.users.*') ? 'border-l-yellow-400' : 'border-l-transparent' }}">
                    <i class="fas fa-users mr-3"></i> <span class="font-semibold">Usuarios</span>
                </a>
                <a href="{{ route('admin.orders.dashboard') }}" class="flex items-center py-3 px-6 {{ request()->routeIs('admin.orders.*') ? 'bg-blue-800' : 'hover:bg-blue-900' }} transition">
                    <i class="fas fa-shopping-cart mr-3"></i> <span>Órdenes</span>
                </a>
                <form action="{{ route('logout') }}" method="POST" class="mt-auto">
                    @csrf
                    <button type="submit" class="w-full text-left flex items-center py-3 px-6 hover:bg-red-800 transition text-red-300">
                        <i class="fas fa-sign-out-alt mr-3"></i> <span>Cerrar Sesión</span>
                    </button>
                </form>
            </nav>
            
            <!-- Close button for mobile -->
            <button id="closeMenu" class="absolute top-6 right-6 md:hidden text-white text-2xl">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Content -->
        <div class="flex-1 flex flex-col overflow-hidden w-full">
            <!-- Header -->
            <header class="bg-white shadow px-4 md:px-6 py-4 flex justify-between items-center">
                <div class="flex items-center gap-4">
                    <!-- Menu toggle for mobile -->
                    <button id="menuToggle" class="md:hidden text-gray-800 text-2xl">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h1 class="text-lg md:text-2xl font-bold text-gray-800">@yield('title', 'Resumen General')</h1>
                </div>
                <div class="flex items-center gap-3 md:gap-4">
                    <span class="text-xs md:text-base text-gray-600 font-medium hidden sm:inline">{{ Auth::user()->name }}</span>
                    <div class="h-10 w-10 bg-blue-900 rounded-full flex items-center justify-center text-white text-sm">
                        <i class="fas fa-user-shield"></i>
                    </div>
                </div>
            </header>

            <!-- Main -->
            <main class="flex-1 overflow-x-hidden overflow-y-auto p-4 md:p-6">
                @if(session('error'))
                    <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 shadow-md" role="alert">
                        <p>{{ session('error') }}</p>
                    </div>
                @endif
                
                @yield('content')
            </main>
        </div>
    </div>

    <script>
        const menuToggle = document.getElementById('menuToggle');
        const closeMenu = document.getElementById('closeMenu');
        const sidebar = document.getElementById('sidebar');
        const mobileMenu = document.getElementById('mobileMenu');

        // Abrir menú
        menuToggle?.addEventListener('click', () => {
            sidebar.classList.remove('-translate-x-full');
            mobileMenu.classList.remove('hidden');
        });

        // Cerrar menú (botón X)
        closeMenu?.addEventListener('click', () => {
            sidebar.classList.add('-translate-x-full');
            mobileMenu.classList.add('hidden');
        });

        // Cerrar menú al hacer click en el overlay
        mobileMenu?.addEventListener('click', () => {
            sidebar.classList.add('-translate-x-full');
            mobileMenu.classList.add('hidden');
        });

        // Cerrar menú cuando se hace click en un enlace
        const navLinks = sidebar?.querySelectorAll('a, button');
        navLinks?.forEach(link => {
            link.addEventListener('click', () => {
                sidebar.classList.add('-translate-x-full');
                mobileMenu.classList.add('hidden');
            });
        });
    </script>
</body>
</html>
