<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}" class="dark">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen bg-white dark:bg-zinc-800" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
        <!-- Skip to content link for keyboard accessibility -->
        <a href="#main-content" class="skip-link" data-test="skip-to-content">
            {{ __('accessibility.skip_to_content') }}
        </a>

        <flux:sidebar sticky stashable class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
            <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />

            @php
                $dashboardRoute = auth()->user()->isAdmin() ? route('admin.dashboard') : route('client.dashboard');
                $isDashboard = request()->routeIs('admin.dashboard') || request()->routeIs('client.dashboard');
            @endphp
            <a href="{{ $dashboardRoute }}" class="me-5 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
                <x-app-logo />
            </a>

            <flux:navlist variant="outline">
                <flux:navlist.group :heading="__('Platform')" class="grid">
                    <flux:navlist.item icon="home" :href="$dashboardRoute" :current="$isDashboard" wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
                </flux:navlist.group>

                @if (auth()->user()->isAdmin())
                    <flux:navlist.group :heading="__('navigation.bookings')" class="grid">
                        <flux:navlist.item
                            icon="calendar"
                            :href="route('admin.bookings.pending')"
                            :current="request()->routeIs('admin.bookings.*')"
                            wire:navigate
                        >
                            {{ __('navigation.pending_bookings') }}
                        </flux:navlist.item>
                        <flux:navlist.item
                            icon="clipboard-document-list"
                            :href="route('admin.consultations.index')"
                            :current="request()->routeIs('admin.consultations.*')"
                            wire:navigate
                        >
                            {{ __('navigation.all_consultations') }}
                        </flux:navlist.item>
                    </flux:navlist.group>

                    <flux:navlist.group :heading="__('navigation.user_management')" class="grid">
                        <flux:navlist.item
                            icon="user"
                            :href="route('admin.clients.individual.index')"
                            :current="request()->routeIs('admin.clients.individual.*')"
                            wire:navigate
                        >
                            {{ __('navigation.individual_clients') }}
                        </flux:navlist.item>
                        <flux:navlist.item
                            icon="building-office"
                            :href="route('admin.clients.company.index')"
                            :current="request()->routeIs('admin.clients.company.*')"
                            wire:navigate
                        >
                            {{ __('navigation.company_clients') }}
                        </flux:navlist.item>
                    </flux:navlist.group>

                    <flux:navlist.group :heading="__('navigation.case_management')" class="grid">
                        <flux:navlist.item
                            icon="clock"
                            :href="route('admin.timelines.index')"
                            :current="request()->routeIs('admin.timelines.*')"
                            wire:navigate
                        >
                            {{ __('navigation.timelines') }}
                        </flux:navlist.item>
                    </flux:navlist.group>

                    <flux:navlist.group :heading="__('navigation.content')" class="grid">
                        <flux:navlist.item
                            icon="document-text"
                            :href="route('admin.posts.index')"
                            :current="request()->routeIs('admin.posts.*')"
                            wire:navigate
                        >
                            {{ __('navigation.posts') }}
                        </flux:navlist.item>
                    </flux:navlist.group>

                    <flux:navlist.group :heading="__('navigation.reports')" class="grid">
                        <flux:navlist.item
                            icon="arrow-down-tray"
                            :href="route('admin.users.export')"
                            :current="request()->routeIs('admin.users.export')"
                            wire:navigate
                        >
                            {{ __('navigation.export_users') }}
                        </flux:navlist.item>
                        <flux:navlist.item
                            icon="arrow-down-tray"
                            :href="route('admin.consultations.export')"
                            :current="request()->routeIs('admin.consultations.export')"
                            wire:navigate
                        >
                            {{ __('navigation.export_consultations') }}
                        </flux:navlist.item>
                        <flux:navlist.item
                            icon="arrow-down-tray"
                            :href="route('admin.timelines.export')"
                            :current="request()->routeIs('admin.timelines.export')"
                            wire:navigate
                        >
                            {{ __('navigation.export_timelines') }}
                        </flux:navlist.item>
                    </flux:navlist.group>

                    <flux:navlist.group :heading="__('navigation.settings')" class="grid">
                        <flux:navlist.item
                            icon="clock"
                            :href="route('admin.settings.working-hours')"
                            :current="request()->routeIs('admin.settings.working-hours')"
                            wire:navigate
                        >
                            {{ __('navigation.working_hours') }}
                        </flux:navlist.item>
                        <flux:navlist.item
                            icon="calendar-days"
                            :href="route('admin.settings.blocked-times')"
                            :current="request()->routeIs('admin.settings.blocked-times')"
                            wire:navigate
                        >
                            {{ __('navigation.blocked_times') }}
                        </flux:navlist.item>
                        <flux:navlist.item
                            icon="scale"
                            :href="route('admin.pages.index')"
                            :current="request()->routeIs('admin.pages.*')"
                            wire:navigate
                        >
                            {{ __('navigation.legal_pages') }}
                        </flux:navlist.item>
                    </flux:navlist.group>
                @else
                    {{-- Client Navigation --}}
                    <flux:navlist.group :heading="__('navigation.my_services')" class="grid">
                        <flux:navlist.item
                            icon="plus-circle"
                            :href="route('client.consultations.book')"
                            :current="request()->routeIs('client.consultations.book')"
                            wire:navigate
                        >
                            {{ __('navigation.book_now') }}
                        </flux:navlist.item>
                        <flux:navlist.item
                            icon="calendar"
                            :href="route('client.consultations.index')"
                            :current="request()->routeIs('client.consultations.index')"
                            wire:navigate
                        >
                            {{ __('navigation.my_consultations') }}
                        </flux:navlist.item>
                        <flux:navlist.item
                            icon="folder"
                            :href="route('client.timelines.index')"
                            :current="request()->routeIs('client.timelines.*')"
                            wire:navigate
                        >
                            {{ __('client.my_cases') }}
                        </flux:navlist.item>
                    </flux:navlist.group>
                @endif
            </flux:navlist>

            <flux:spacer />

            @if (auth()->user()->isAdmin())
                @php
                    $pendingCount = \App\Models\Consultation::pending()->count();
                @endphp
                <div class="px-3 py-2">
                    <a
                        href="{{ route('admin.bookings.pending') }}"
                        class="relative inline-flex items-center rounded-lg p-2 text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800"
                        wire:navigate
                    >
                        <flux:icon name="bell" class="h-5 w-5" />
                        @if ($pendingCount > 0)
                            <span class="absolute -top-1 end-0 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-medium text-white">
                                {{ $pendingCount > 99 ? '99+' : $pendingCount }}
                            </span>
                        @endif
                    </a>
                </div>
            @endif

            <flux:navlist variant="outline">
                <flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
                {{ __('Repository') }}
                </flux:navlist.item>

                <flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
                {{ __('Documentation') }}
                </flux:navlist.item>
            </flux:navlist>

            <!-- Language Toggle -->
            <div class="px-3 py-2">
                <x-language-toggle />
            </div>

            <!-- Desktop User Menu -->
            <flux:dropdown class="hidden lg:block" position="bottom" align="start">
                <flux:profile
                    :name="auth()->user()->full_name"
                    :initials="auth()->user()->initials()"
                    icon:trailing="chevrons-up-down"
                    data-test="sidebar-menu-button"
                />

                <flux:menu class="w-[220px]">
                    <flux:menu.radio.group>
                        <div class="p-0 text-sm font-normal">
                            <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
                                <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
                                    <span
                                        class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
                                    >
                                        {{ auth()->user()->initials() }}
                                    </span>
                                </span>

                                <div class="grid flex-1 text-start text-sm leading-tight">
                                    <span class="truncate font-semibold">{{ auth()->user()->full_name }}</span>
                                    <span class="truncate text-xs">{{ auth()->user()->email }}</span>
                                </div>
                            </div>
                        </div>
                    </flux:menu.radio.group>

                    <flux:menu.separator />

                    <flux:menu.radio.group>
                        <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
                    </flux:menu.radio.group>

                    <flux:menu.separator />

                    <form method="POST" action="{{ route('logout') }}" class="w-full">
                        @csrf
                        <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full" data-test="logout-button">
                            {{ __('Log Out') }}
                        </flux:menu.item>
                    </form>
                </flux:menu>
            </flux:dropdown>
        </flux:sidebar>

        <!-- Mobile User Menu -->
        <flux:header class="lg:hidden">
            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />

            <flux:spacer />

            @if (auth()->user()->isAdmin())
                @php
                    $mobilePendingCount = \App\Models\Consultation::pending()->count();
                @endphp
                <a
                    href="{{ route('admin.bookings.pending') }}"
                    class="relative inline-flex items-center rounded-lg p-2 text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800"
                    wire:navigate
                >
                    <flux:icon name="bell" class="h-5 w-5" />
                    @if ($mobilePendingCount > 0)
                        <span class="absolute -top-1 end-0 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-medium text-white">
                            {{ $mobilePendingCount > 99 ? '99+' : $mobilePendingCount }}
                        </span>
                    @endif
                </a>
            @endif

            <!-- Mobile Language Toggle -->
            <x-language-toggle />

            <flux:dropdown position="top" align="end">
                <flux:profile
                    :initials="auth()->user()->initials()"
                    icon-trailing="chevron-down"
                />

                <flux:menu>
                    <flux:menu.radio.group>
                        <div class="p-0 text-sm font-normal">
                            <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
                                <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
                                    <span
                                        class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
                                    >
                                        {{ auth()->user()->initials() }}
                                    </span>
                                </span>

                                <div class="grid flex-1 text-start text-sm leading-tight">
                                    <span class="truncate font-semibold">{{ auth()->user()->full_name }}</span>
                                    <span class="truncate text-xs">{{ auth()->user()->email }}</span>
                                </div>
                            </div>
                        </div>
                    </flux:menu.radio.group>

                    <flux:menu.separator />

                    <flux:menu.radio.group>
                        <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
                    </flux:menu.radio.group>

                    <flux:menu.separator />

                    <form method="POST" action="{{ route('logout') }}" class="w-full">
                        @csrf
                        <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full" data-test="logout-button">
                            {{ __('Log Out') }}
                        </flux:menu.item>
                    </form>
                </flux:menu>
            </flux:dropdown>
        </flux:header>

        {{ $slot }}

        @fluxScripts
    </body>
</html>
