<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'SMART Academy LMS' }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="font-poppins antialiased bg-gray-100">

{{-- Mobile bottom nav + Desktop sidebar layout --}}
<div class="flex min-h-screen">

    {{-- ── Desktop Sidebar (hidden on mobile) ── --}}
    <aside class="hidden lg:flex w-64 min-h-screen bg-[#111] flex-col shrink-0 sticky top-0 border-r border-white/[0.06]">
        <div class="px-6 py-7 border-b border-white/[0.06]">
            <x-smart.logo :white="true" />
            @if(auth()->user()->isTeacher())
                <div class="mt-4 text-center text-[11px] font-bold tracking-widest text-red-300 bg-red-900/20 rounded-lg py-1.5">TEACHER MODE</div>
            @elseif(auth()->user()->isAdmin())
                <div class="mt-4 text-center text-[11px] font-bold tracking-widest text-red-300 bg-red-900/20 rounded-lg py-1.5">ADMIN MODE</div>
            @endif
        </div>
        <nav class="flex-1 px-3 py-4 overflow-y-auto">
            @foreach($sidebarNav ?? [] as $item)
                <a href="{{ $item['route'] }}"
                   class="flex items-center gap-3 px-4 py-3 rounded-xl mb-0.5 text-sm font-medium transition-all
                          {{ request()->routeIs($item['active'] ?? '') ? 'bg-red-600/10 text-[#ED1C24] font-bold' : 'text-white/50 hover:text-white/80 hover:bg-white/5' }}">
                    <svg class="w-[18px] h-[18px] shrink-0" fill="none" stroke="currentColor" stroke-width="1.8"
                         stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <path d="{{ $item['icon'] }}"/>
                    </svg>
                    {{ $item['label'] }}
                    @if(isset($item['badge']) && $item['badge'] > 0)
                        <span class="ml-auto bg-[#ED1C24] text-white text-[10px] font-bold rounded-full w-4 h-4 flex items-center justify-center">{{ $item['badge'] }}</span>
                    @endif
                </a>
            @endforeach
        </nav>
        <div class="px-4 py-5 border-t border-white/[0.06]">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm text-white/40 hover:text-white/70 border border-white/10 hover:border-white/20 transition-all">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" viewBox="0 0 24 24">
                        <path 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>
                    Sign Out
                </button>
            </form>
        </div>
    </aside>

    {{-- ── Main content column ── --}}
    <div class="flex-1 flex flex-col min-w-0">

        {{-- Top header bar --}}
        <header class="sticky top-0 z-40 bg-white border-b border-gray-100 h-16 flex items-center px-4 lg:px-6 gap-3 shrink-0 shadow-sm">
            {{-- Mobile: logo --}}
            <div class="lg:hidden">
                <x-smart.logo />
            </div>
            {{-- Desktop: search --}}
            <div class="hidden lg:flex flex-1 max-w-md">
                <div class="relative w-full">
                    <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                    <input type="text" placeholder="Search subjects, lessons, teachers…"
                           class="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 focus:border-red-400 transition">
                </div>
            </div>
            <div class="ml-auto flex items-center gap-2">
                {{-- Mobile hamburger --}}
                <button x-data x-on:click="$dispatch('open-mobile-menu')"
                        class="lg:hidden p-2 rounded-xl text-gray-500 hover:bg-gray-100">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                </button>
                {{-- Notifications --}}
                <button class="relative p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
                    <svg class="w-5 h-5 text-[#ED1C24]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"/></svg>
                </button>
                {{-- Avatar --}}
                <div class="w-9 h-9 rounded-full bg-gradient-to-br from-[#ED1C24] to-red-800 flex items-center justify-center text-white font-black text-sm cursor-pointer">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
            </div>
        </header>

        {{-- Page content --}}
        <main class="flex-1 p-5 lg:p-8 pb-24 lg:pb-8 overflow-y-auto">
            {{ $slot }}
        </main>

    </div>{{-- end main column --}}
</div>{{-- end flex wrapper --}}

{{-- ── Mobile bottom navigation ── --}}
<nav class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex h-16 z-50 shadow-[0_-4px_20px_rgba(0,0,0,0.08)]">
    @foreach($mobileNav ?? [] as $item)
        <a href="{{ $item['route'] }}"
           class="flex-1 flex flex-col items-center justify-center gap-1 transition-colors relative
                  {{ request()->routeIs($item['active'] ?? '') ? 'text-[#ED1C24]' : 'text-gray-400' }}">
            <svg class="w-5 h-5" fill="none" stroke="currentColor"
                 stroke-width="{{ request()->routeIs($item['active'] ?? '') ? '2.5' : '1.8' }}"
                 stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                <path d="{{ $item['icon'] }}"/>
            </svg>
            <span class="text-[10px] font-{{ request()->routeIs($item['active'] ?? '') ? 'bold' : 'medium' }}">{{ $item['label'] }}</span>
            @if(request()->routeIs($item['active'] ?? ''))
                <span class="absolute bottom-0 w-8 h-0.5 bg-[#ED1C24] rounded-full"></span>
            @endif
        </a>
    @endforeach
</nav>

@livewireScripts
<script>
// Alpine.js light – just for mobile menu toggle
document.addEventListener('open-mobile-menu', () => {
    const el = document.getElementById('mobile-drawer');
    if (el) el.classList.toggle('translate-x-full');
});
</script>
</body>
</html>
