<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
    <head>
        @include('partials.head')
        @fluxAppearance
    </head>
    <body class="min-h-screen bg-white dark:bg-zinc-800">
        <!-- Flux Header -->
        <flux:header container class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" />

            <flux:brand href="{{ route('dashboard') }}" name="Auto Repair Shop" class="max-lg:hidden" wire:navigate>
                <x-app-logo />
            </flux:brand>

            <flux:navbar class="-mb-px max-lg:hidden">
                <flux:navbar.item icon="home" href="{{ route('dashboard') }}" :current="request()->routeIs('dashboard')" wire:navigate>Dashboard</flux:navbar.item>
                <flux:navbar.item icon="clipboard-document-list" href="{{ route('job-cards.index') }}" :current="request()->is('job-cards*')" wire:navigate>Job Cards</flux:navbar.item>
                <flux:navbar.item icon="users" href="{{ route('customers.list') }}" :current="request()->routeIs('customers.*')" wire:navigate>Customers</flux:navbar.item>
                <flux:navbar.item icon="wrench-screwdriver" href="/work-orders" :current="request()->is('work-orders*')" wire:navigate>Work Orders</flux:navbar.item>
            </flux:navbar>

            <flux:spacer />

            <flux:navbar class="me-4">
                <flux:navbar.item icon="magnifying-glass" href="#" label="Search" />
                <flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="{{ route('settings.profile') }}" label="Settings" wire:navigate />
            </flux:navbar>

            <flux:dropdown position="top" align="start">
                <flux:profile name="{{ auth()->user()->name }}" avatar="" />

                <flux:menu>
                    <flux:menu.item icon="user" href="{{ route('settings.profile') }}" wire:navigate>Profile</flux:menu.item>
                    <flux:menu.item icon="cog-6-tooth" href="{{ route('settings.profile') }}" wire:navigate>Settings</flux:menu.item>
                    
                    <flux:menu.separator />
                    
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <flux:menu.item icon="arrow-right-start-on-rectangle" type="submit">Logout</flux:menu.item>
                    </form>
                </flux:menu>
            </flux:dropdown>
        </flux:header>

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

            <flux:brand href="{{ route('dashboard') }}" name="Auto Repair Shop" class="px-2" wire:navigate>
                <x-app-logo />
            </flux:brand>

            <flux:navlist variant="outline">
                <flux:navlist.item icon="home" href="{{ route('dashboard') }}" :current="request()->routeIs('dashboard')" wire:navigate>Dashboard</flux:navlist.item>
                <flux:navlist.item icon="clipboard-document-list" href="{{ route('job-cards.index') }}" :current="request()->is('job-cards*')" wire:navigate>Job Cards</flux:navlist.item>
                <flux:navlist.item icon="users" href="{{ route('customers.list') }}" :current="request()->routeIs('customers.*')" wire:navigate>Customers</flux:navlist.item>
                <flux:navlist.item icon="truck" href="/vehicles" :current="request()->is('vehicles*')" wire:navigate>Vehicles</flux:navlist.item>
                <flux:navlist.item icon="calendar" href="/appointments" :current="request()->is('appointments*')" wire:navigate>Appointments</flux:navlist.item>
                <flux:navlist.item icon="clipboard-document-check" href="/inspections" :current="request()->is('inspections*')" wire:navigate>Inspections</flux:navlist.item>
                <flux:navlist.item icon="magnifying-glass-circle" href="/diagnosis" :current="request()->is('diagnosis*')" wire:navigate>Diagnostics</flux:navlist.item>
                <flux:navlist.item icon="wrench-screwdriver" href="/work-orders" :current="request()->is('work-orders*')" wire:navigate>Work Orders</flux:navlist.item>

                <flux:navlist.group expandable heading="Financial">
                    <flux:navlist.item href="/estimates" :current="request()->is('estimates*')" wire:navigate>Estimates</flux:navlist.item>
                    <flux:navlist.item href="/invoices" :current="request()->is('invoices*')" wire:navigate>Invoices</flux:navlist.item>
                </flux:navlist.group>

                <flux:navlist.group expandable heading="Resources">
                    <flux:navlist.item href="{{ route('inventory.dashboard') }}" :current="request()->is('inventory*')" wire:navigate>Inventory</flux:navlist.item>
                    <flux:navlist.item href="/service-items" :current="request()->is('service-items*')" wire:navigate>Service Items</flux:navlist.item>
                    <flux:navlist.item href="/technicians" :current="request()->is('technicians*')" wire:navigate>Technicians</flux:navlist.item>
                </flux:navlist.group>
            </flux:navlist>

            <flux:spacer />

            <flux:navlist variant="outline">
                <flux:navlist.item icon="chart-bar" href="{{ route('reports.index') }}" :current="request()->is('reports*')" wire:navigate>Reports</flux:navlist.item>
                @can('manage-users')
                <flux:navlist.item icon="users" href="{{ route('users.index') }}" :current="request()->routeIs('users.*')" wire:navigate>User Management</flux:navlist.item>
                @endcan
                <flux:navlist.item icon="cog-6-tooth" href="{{ route('settings.profile') }}" wire:navigate>Settings</flux:navlist.item>
            </flux:navlist>
        </flux:sidebar>

        <!-- Main Content with Secondary Sidebar -->
        <flux:main container>
            <div class="flex max-md:flex-col items-start">
                <!-- Secondary Navigation Sidebar -->
                <div class="w-full md:w-[220px] pb-4 me-10">
                    @if(request()->is('job-cards*'))
                        <flux:navlist>
                            <flux:navlist.item href="{{ route('job-cards.index') }}" :current="request()->routeIs('job-cards.index')" wire:navigate>All Job Cards</flux:navlist.item>
                            <flux:navlist.item href="{{ route('job-cards.create') }}" wire:navigate>Create New</flux:navlist.item>
                            <flux:navlist.item href="{{ route('job-cards.index', ['status' => 'received']) }}" wire:navigate>Received</flux:navlist.item>
                            <flux:navlist.item href="{{ route('job-cards.index', ['status' => 'in_diagnosis']) }}" wire:navigate>In Diagnosis</flux:navlist.item>
                            <flux:navlist.item href="{{ route('job-cards.index', ['status' => 'in_progress']) }}" wire:navigate>In Progress</flux:navlist.item>
                            <flux:navlist.item href="{{ route('job-cards.index', ['status' => 'completed']) }}" wire:navigate>Completed</flux:navlist.item>
                        </flux:navlist>
                    @elseif(request()->routeIs('customers.*'))
                        <flux:navlist>
                            <flux:navlist.item href="{{ route('customers.list') }}" :current="request()->routeIs('customers.list')" wire:navigate>All Customers</flux:navlist.item>
                            <flux:navlist.item href="{{ route('customers.create') }}" wire:navigate>Add Customer</flux:navlist.item>
                            <flux:navlist.item href="#" wire:navigate>Recent Customers</flux:navlist.item>
                            <flux:navlist.item href="#" wire:navigate>Customer Reports</flux:navlist.item>
                        </flux:navlist>
                    @elseif(request()->is('work-orders*'))
                        <flux:navlist>
                            <flux:navlist.item href="/work-orders" :current="request()->is('work-orders') && !request()->has('status')" wire:navigate>All Work Orders</flux:navlist.item>
                            <flux:navlist.item href="/work-orders?status=pending" wire:navigate>Pending</flux:navlist.item>
                            <flux:navlist.item href="/work-orders?status=in_progress" wire:navigate>In Progress</flux:navlist.item>
                            <flux:navlist.item href="/work-orders?status=completed" wire:navigate>Completed</flux:navlist.item>
                            <flux:navlist.item href="/work-orders?status=on_hold" wire:navigate>On Hold</flux:navlist.item>
                        </flux:navlist>
                    @elseif(request()->is('inventory*'))
                        <flux:navlist>
                            <flux:navlist.item href="{{ route('inventory.dashboard') }}" :current="request()->routeIs('inventory.dashboard')" wire:navigate>Dashboard</flux:navlist.item>
                            <flux:navlist.item href="/inventory/parts" wire:navigate>Parts</flux:navlist.item>
                            <flux:navlist.item href="/inventory/low-stock" wire:navigate>Low Stock</flux:navlist.item>
                            <flux:navlist.item href="/inventory/orders" wire:navigate>Purchase Orders</flux:navlist.item>
                            <flux:navlist.item href="/inventory/suppliers" wire:navigate>Suppliers</flux:navlist.item>
                        </flux:navlist>
                    @elseif(request()->is('reports*'))
                        <flux:navlist>
                            <flux:navlist.item href="{{ route('reports.index') }}" :current="request()->routeIs('reports.index')" wire:navigate>All Reports</flux:navlist.item>
                            <flux:navlist.item href="/reports/sales" wire:navigate>Sales Reports</flux:navlist.item>
                            <flux:navlist.item href="/reports/technician" wire:navigate>Technician Performance</flux:navlist.item>
                            <flux:navlist.item href="/reports/parts" wire:navigate>Parts Usage</flux:navlist.item>
                            <flux:navlist.item href="/reports/customer" wire:navigate>Customer Reports</flux:navlist.item>
                        </flux:navlist>
                    @else
                        <flux:navlist>
                            <flux:navlist.item href="{{ route('dashboard') }}" :current="request()->routeIs('dashboard')" wire:navigate>Dashboard</flux:navlist.item>
                            <flux:navlist.item href="{{ route('job-cards.index') }}" badge="{{ \App\Models\JobCard::where('status', 'received')->count() ?: null }}" wire:navigate>New Job Cards</flux:navlist.item>
                            <flux:navlist.item href="/work-orders?status=in_progress" wire:navigate>Active Work Orders</flux:navlist.item>
                            <flux:navlist.item href="/estimates?status=pending" wire:navigate>Pending Estimates</flux:navlist.item>
                            <flux:navlist.item href="{{ route('inventory.dashboard') }}" wire:navigate>Inventory Status</flux:navlist.item>
                            <flux:navlist.item href="{{ route('reports.index') }}" wire:navigate>Reports</flux:navlist.item>
                        </flux:navlist>
                    @endif
                </div>

                <flux:separator class="md:hidden" />

                <!-- Main Content Area -->
                <div class="flex-1 max-md:pt-6 self-stretch">
                    {{ $slot }}
                </div>
            </div>
        </flux:main>

        @livewireScripts
        @fluxScripts
    </body>
</html>
