@extends('app')

@section('title', 'Admin - Nails Salon')

@section('content')
    @php
        $routeName = request()->route()?->getName() ?? '';

        $isActive = function (string $name) use ($routeName): bool {
            return $routeName === $name || str_starts_with($routeName, $name.'.');
        };
    @endphp

    <style>
        [x-cloak] { display: none !important; }
    </style>

    <div x-data="{ open: false }" class="min-h-screen bg-white text-zinc-900 dark:bg-black dark:text-white/90" @keydown.escape.window="open = false">
        <div class="flex">
            <!-- Desktop sidebar -->
            <aside class="hidden md:flex md:w-64 md:flex-col md:border-r md:border-zinc-200 dark:md:border-zinc-800">
                <div class="p-4">
                    <div class="text-lg font-bold tracking-tight">Nails Salon</div>
                    <div class="text-xs text-zinc-500 dark:text-zinc-400">Admin Command Center</div>
                </div>

                <nav class="flex-1 px-2 pb-4">
                    <a href="{{ route('admin.dashboard') }}"
                       class="block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.dashboard') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}">
                        Dashboard
                    </a>

                    <a href="{{ route('admin.bookings.index') }}"
                       class="mt-1 block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.bookings') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}">
                        Bookings
                    </a>

                    <a href="{{ route('admin.stylists.index') }}"
                       class="mt-1 block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.stylists') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}">
                        Stylists
                    </a>

                    <a href="{{ route('admin.ai-log') }}"
                       class="mt-1 block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.ai-log') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}">
                        AI Audit Log
                    </a>

                    <a href="{{ route('admin.settings') }}"
                       class="mt-1 block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.settings') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}">
                        System Settings
                    </a>
                </nav>

                <div class="p-4 border-t border-zinc-200 dark:border-zinc-800">
                    <form method="POST" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit"
                                class="w-full rounded-lg bg-zinc-900 px-3 py-2 text-sm font-semibold text-white hover:opacity-90 dark:bg-white dark:text-zinc-900">
                            Logout
                        </button>
                    </form>
                </div>
            </aside>

            <!-- Mobile header + content -->
            <div class="flex-1">
                <header class="flex items-center justify-between gap-3 border-b border-zinc-200 p-4 dark:border-zinc-800">
                    <div class="flex items-center gap-2">
                        <button type="button"
                                class="md:hidden inline-flex items-center justify-center rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-semibold dark:border-zinc-800 dark:bg-zinc-950"
                                @click="open = true">
                            Menu
                        </button>
                        <div class="text-sm font-semibold">Admin</div>
                    </div>
                    <div class="hidden md:block">
                        <div class="text-xs text-zinc-500 dark:text-zinc-400">Premium Booking Platform</div>
                    </div>
                </header>

                <main class="p-4 md:p-6">
                    @yield('admin-content')
                </main>
            </div>
        </div>

        <!-- Mobile sidebar overlay -->
        <div
            class="fixed inset-0 z-50 md:hidden"
            x-show="open"
            x-transition.opacity.duration.150
            aria-hidden="true"
        >
            <div class="absolute inset-0 bg-black/50" @click="open = false"></div>
            <div class="relative h-full w-80 max-w-[85vw] bg-white dark:bg-zinc-950 border-r border-zinc-200 dark:border-zinc-800">
                <div class="p-4">
                    <div class="text-lg font-bold tracking-tight">Nails Salon</div>
                    <div class="text-xs text-zinc-500 dark:text-zinc-400">Admin Command Center</div>
                </div>

                <nav class="px-3 pb-4">
                    <a href="{{ route('admin.dashboard') }}"
                       class="block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.dashboard') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}"
                       @click="open = false">
                        Dashboard
                    </a>

                    <a href="{{ route('admin.bookings.index') }}"
                       class="mt-1 block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.bookings') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}"
                       @click="open = false">
                        Bookings
                    </a>

                    <a href="{{ route('admin.stylists.index') }}"
                       class="mt-1 block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.stylists') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}"
                       @click="open = false">
                        Stylists
                    </a>

                    <a href="{{ route('admin.ai-log') }}"
                       class="mt-1 block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.ai-log') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}"
                       @click="open = false">
                        AI Audit Log
                    </a>

                    <a href="{{ route('admin.settings') }}"
                       class="mt-1 block rounded-lg px-3 py-2 text-sm font-medium {{ $isActive('admin.settings') ? 'bg-[#FF2D20]/10 text-[#FF2D20]' : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-900' }}"
                       @click="open = false">
                        System Settings
                    </a>
                </nav>

                <div class="px-3 pb-4 mt-auto">
                    <form method="POST" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit"
                                class="w-full rounded-lg bg-zinc-900 px-3 py-2 text-sm font-semibold text-white hover:opacity-90 dark:bg-white dark:text-zinc-900">
                            Logout
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection