<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
    <head>
        @include('partials.head')
        @stack('styles')
        <style>
            @media (min-width: 1024px) {
                ui-sidebar[data-flux-sidebar] {
                    position: fixed !important;
                    top: 0 !important;
                    left: 0 !important;
                    height: 100vh !important;
                    width: 16rem !important;
                    z-index: 40 !important;
                }
                [dir="rtl"] ui-sidebar[data-flux-sidebar] {
                    left: auto !important;
                    right: 0 !important;
                }
                [data-flux-main] {
                    margin-inline-start: 16rem !important;
                }
            }
        </style>
    </head>
    <body class="min-h-screen bg-white" 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 text-zinc-800">
            <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.item
                            icon="user-plus"
                            :href="route('admin.potential-clients.index')"
                            :current="request()->routeIs('admin.potential-clients.*')"
                            wire:navigate
                        >
                            {{ __('navigation.potential_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 />

            <!-- Language Toggle -->
            <div class="px-3 py-2">
                <x-language-toggle variant="light" />
            </div>
        </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"
                    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 variant="light" />

            <flux:dropdown position="top" align="end">
                <flux:profile
                    :initials="auth()->user()->initials()"
                    icon-trailing="chevron-down"
                >
                    <x-slot name="avatar">
                        <flux:avatar class="bg-white text-zinc-700 ring-1 ring-zinc-200" :initials="auth()->user()->initials()" />
                    </x-slot>
                </flux:profile>

                <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-white text-zinc-700 ring-1 ring-zinc-200"
                                    >
                                        {{ 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>

        <!-- Desktop Top Bar -->
        <div class="hidden lg:flex fixed top-0 items-center justify-end gap-4 px-6 py-3 border-b border-zinc-200 bg-white z-30 ltr:left-64 ltr:right-0 rtl:right-64 rtl:left-0">
            @if (auth()->user()->isAdmin())
                @php
                    $pendingCount = \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"
                    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>
            @endif

            <!-- Desktop User Menu -->
            <flux:dropdown position="bottom" align="end">
                <flux:profile
                    :name="auth()->user()->full_name"
                    :initials="auth()->user()->initials()"
                    icon:trailing="chevron-down"
                    data-test="sidebar-menu-button"
                >
                    <x-slot name="avatar">
                        <flux:avatar class="bg-white text-zinc-700 ring-1 ring-zinc-200" :initials="auth()->user()->initials()" />
                    </x-slot>
                </flux:profile>

                <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-white text-zinc-700 ring-1 ring-zinc-200"
                                    >
                                        {{ 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>
        </div>

        <div class="lg:pt-14">
            {{ $slot }}
        </div>

        @fluxScripts
        @stack('scripts')
    </body>
</html>
