<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'DispararPro')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        .sidebar-gradient {
            background: #0a0f1a;
            border-right: 1px solid rgba(51, 65, 85, 0.3);
        }
        .nav-item-active {
            background: rgba(51, 65, 85, 0.6);
            border-left: 3px solid #10b981;
        }
        .nav-item:hover {
            transform: translateX(4px);
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-in {
            animation: slideIn 0.3s ease-out;
        }
    </style>
</head>
<body class="bg-slate-950 min-h-screen">
    <div class="flex h-screen overflow-hidden">
        <aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-72 sidebar-gradient transform -translate-x-full transition-all duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0 shadow-2xl">
            <div class="flex flex-col h-full">
                <div class="flex items-center justify-between px-6 py-6 border-b border-slate-800">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <div>
                            <h1 class="text-lg font-bold text-white tracking-tight">DispararPro</h1>
                            <p class="text-xs text-slate-500">v1.0</p>
                        </div>
                    </div>
                    <button id="closeSidebar" class="lg:hidden text-gray-400 hover:text-white transition">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <nav class="flex-1 px-3 py-6 space-y-2 overflow-y-auto">
                    <a href="{{ route('notificacao') }}" class="nav-item flex items-center px-3 py-3 text-slate-400 rounded-lg transition-all duration-200 {{ request()->routeIs('notificacao') ? 'nav-item-active text-white font-medium' : 'hover:bg-slate-800/50' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->routeIs('notificacao') ? 'text-green-500' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                        </svg>
                        <span class="text-sm">Notificações</span>
                    </a>

                    <a href="{{ route('credencial') }}" class="nav-item flex items-center px-3 py-3 text-slate-400 rounded-lg transition-all duration-200 {{ request()->routeIs('credencial') ? 'nav-item-active text-white font-medium' : 'hover:bg-slate-800/50' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->routeIs('credencial') ? 'text-green-500' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                        </svg>
                        <span class="text-sm">Credenciais</span>
                    </a>

                    <a href="{{ route('produtos') }}" class="nav-item flex items-center px-3 py-3 text-slate-400 rounded-lg transition-all duration-200 {{ request()->routeIs('produtos') ? 'nav-item-active text-white font-medium' : 'hover:bg-slate-800/50' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->routeIs('produtos') ? 'text-green-500' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                        </svg>
                        <span class="text-sm">Produtos</span>
                    </a>
                </nav>

                <div class="p-4 border-t border-slate-800">
                    <div class="bg-slate-900/50 rounded-xl p-3 border border-slate-800">
                        <div class="flex items-center space-x-3 mb-3">
                            <div class="w-10 h-10 bg-slate-700 rounded-lg flex items-center justify-center">
                                <span class="text-white font-semibold">{{ substr(Auth::user()->name, 0, 1) }}</span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-white truncate">{{ Auth::user()->name }}</p>
                                <p class="text-xs text-slate-500 truncate">{{ Auth::user()->email }}</p>
                            </div>
                        </div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="w-full px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg transition-all duration-200 text-sm font-medium flex items-center justify-center space-x-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                </svg>
                                <span>Sair</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </aside>

        <div id="overlay" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden hidden"></div>

        <div class="flex-1 flex flex-col overflow-hidden">
            <header class="bg-slate-900 border-b border-slate-800 lg:hidden">
                <div class="flex items-center justify-between h-16 px-4">
                    <button id="openSidebar" class="text-gray-400 hover:text-white transition">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                    <h1 class="text-lg font-bold text-white">@yield('title', 'DispararPro')</h1>
                    <div class="w-6"></div>
                </div>
            </header>

            <main class="flex-1 overflow-y-auto p-6 lg:p-10 bg-slate-950">
                @if (session('success'))
                    <div class="mb-6 animate-slide-in bg-slate-900 border border-green-900/50 text-green-100 px-5 py-4 rounded-lg flex items-center space-x-3">
                        <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span>{{ session('success') }}</span>
                    </div>
                @endif

                @if (session('error'))
                    <div class="mb-6 animate-slide-in bg-slate-900 border border-red-900/50 text-red-100 px-5 py-4 rounded-lg flex items-center space-x-3">
                        <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span>{{ session('error') }}</span>
                    </div>
                @endif

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

    <script>
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        const openSidebar = document.getElementById('openSidebar');
        const closeSidebar = document.getElementById('closeSidebar');

        openSidebar.addEventListener('click', () => {
            sidebar.classList.remove('-translate-x-full');
            overlay.classList.remove('hidden');
        });

        closeSidebar.addEventListener('click', () => {
            sidebar.classList.add('-translate-x-full');
            overlay.classList.add('hidden');
        });

        overlay.addEventListener('click', () => {
            sidebar.classList.add('-translate-x-full');
            overlay.classList.add('hidden');
        });
    </script>
</body>
</html>
