<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? 'Admin Dashboard' }} - {{ $settings['site_name'] ?? config('app.name') }}</title>

    <!-- Favicon -->
    <link rel="icon" href="{{ $settings['site_favicon'] ?? '/favicon.ico' }}" sizes="any">
    <link rel="icon" href="{{ $settings['site_favicon'] ?? '/favicon.ico' }}" type="image/svg+xml">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700&display=swap" rel="stylesheet" />

    @fluxAppearance
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen bg-zinc-50 dark:bg-zinc-950">
    <flux:sidebar sticky collapsible="mobile" class="bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800">
        <flux:sidebar.header>
            <div class="flex items-center gap-3 px-6">
                <img src="{{ $settings['site_logo'] ?? config('branding.default_site_logo') }}" alt="{{ $settings['site_name'] ?? config('app.name') }}" class="w-auto h-8">
            </div>
            <flux:sidebar.collapse class="lg:hidden" />
        </flux:sidebar.header>

        <flux:sidebar.search placeholder="Search..." />

        <flux:sidebar.nav>
            <flux:sidebar.item icon="home" href="{{ route('admin.dashboard') }}" :current="request()->routeIs('admin.dashboard')">
                Dashboard Overview
            </flux:sidebar.item>

            <flux:sidebar.group heading="Blog management" icon="document-text" expandable expanded="false">
                <flux:sidebar.item href="{{ route('admin.blog.posts.index') }}" :current="request()->routeIs('admin.blog.posts.index') || request()->routeIs('admin.blog.posts.edit')">
                    All blog posts
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.blog.posts.create') }}" :current="request()->routeIs('admin.blog.posts.create')">
                    Add new post
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.blog.categories.index') }}" :current="request()->routeIs('admin.blog.categories.*')">
                    Categories
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.blog.tags.index') }}" :current="request()->routeIs('admin.blog.tags.*')">
                    Tags
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.blog.post-reviews.index') }}" :current="request()->routeIs('admin.blog.post-reviews.*')">
                    Post review management
                </flux:sidebar.item>
            </flux:sidebar.group>

            <flux:sidebar.group heading="Trust checks" icon="shield-check" expandable expanded="false">
                <flux:sidebar.item href="{{ route('admin.trust-checks.index') }}" :current="request()->routeIs('admin.trust-checks.*')">
                    Overview
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.reviewed-websites.index') }}" :current="request()->routeIs('admin.reviewed-websites.index') || request()->routeIs('admin.reviewed-websites.edit')">
                    Reviewed websites
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.reviewed-websites.create') }}" :current="request()->routeIs('admin.reviewed-websites.create')">
                    Add website
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.reviewed-websites.community-reviews') }}" :current="request()->routeIs('admin.reviewed-websites.community-reviews')">
                    Trust check reviews
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.reviewed-websites.reviews.moderate') }}" :current="request()->routeIs('admin.reviewed-websites.reviews.moderate')">
                    Website review queue
                </flux:sidebar.item>
            </flux:sidebar.group>
        </flux:sidebar.nav>

        <flux:sidebar.spacer />

        <flux:sidebar.nav>
            <flux:sidebar.group heading="Reports & System" icon="cog-6-tooth" expandable expanded="false">
                <flux:sidebar.item href="{{ route('admin.settings.index') }}" :current="request()->routeIs('admin.settings.index') || request()->routeIs('admin.settings.edit')">
                    Site Settings
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.settings.seo') }}" :current="request()->routeIs('admin.settings.seo')">
                    SEO &amp; search
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.settings.social-auth') }}" :current="request()->routeIs('admin.settings.social-auth')">
                    Social Login Settings
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.payment-methods.index') }}" :current="request()->routeIs('admin.payment-methods.*')">
                    Payment Gateways
                </flux:sidebar.item>
                <flux:sidebar.item href="{{ route('admin.audit-logs.index') }}" :current="request()->routeIs('admin.audit-logs.*') || request()->routeIs('admin.logs.*')">
                    Audit Logs
                </flux:sidebar.item>
            </flux:sidebar.group>
        </flux:sidebar.nav>

        <!-- User Profile -->
        <flux:dropdown position="top" align="start" class="max-lg:hidden">
            <flux:sidebar.profile 
                :avatar="auth()->user()->profile_picture_url" 
                :name="auth()->user()->name" 
            />
            <flux:menu>
                <flux:menu.item href="{{ route('admin.profile.edit') }}" icon="user">{{ auth()->user()->email }}</flux:menu.item>
                <flux:menu.separator />
                <form method="POST" action="{{ route('admin.logout') }}">
                    @csrf
                    <flux:menu.item type="submit" icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>
                </form>
            </flux:menu>
        </flux:dropdown>
    </flux:sidebar>

    <!-- Mobile Header -->
    <flux:header class="lg:hidden px-4!">
        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
        
        <flux:spacer />

        <!-- Page Title on Mobile -->
        <flux:heading size="lg" class="text-zinc-900 dark:text-white">
            {{ $title ?? 'Dashboard' }}
        </flux:heading>

        <flux:spacer />

        <!-- Dark mode toggle -->
        <div class="mr-2">
            @livewire('dark-mode-toggle')
        </div>

        <!-- Mobile Profile -->
        <flux:dropdown position="top" align="start">
            @if (auth()->user()->profile_picture)
                <flux:avatar circle as="button" src="{{ auth()->user()->profile_picture_url }}" />
            @else
                <flux:avatar circle as="button" name="{{ auth()->user()->initials() }}" />
            @endif
            <flux:menu>
                <flux:menu.item href="{{ route('admin.profile.edit') }}" icon="user">{{ auth()->user()->name }}</flux:menu.item>
                <flux:menu.separator />
                <form method="POST" action="{{ route('admin.logout') }}">
                    @csrf
                    <flux:menu.item type="submit" icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>
                </form>
            </flux:menu>
        </flux:dropdown>
    </flux:header>

    <!-- Desktop Header -->
    <flux:header class="hidden lg:flex bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800">
        <!-- Page Title -->
        <flux:heading size="lg" class="text-zinc-900 dark:text-white">
            {{ $title ?? 'Dashboard' }}
        </flux:heading>

        <flux:spacer />

        <!-- Right side actions -->
        <div class="flex items-center gap-3">
            <!-- Dark mode toggle -->
            @livewire('dark-mode-toggle')

            <!-- Notifications (future)
            <button class="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 relative">
                <flux:icon.bell class="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
                <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
            </button>  -->
        </div>
    </flux:header>

    <!-- Main Content -->
    <flux:main class="p-4!">
        {{ $slot }}
    </flux:main>

    @fluxScripts

    @persist('toast')
    <flux:toast position="top end" class="pt-10" />
    @endpersist
</body>
</html>
