<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="theme-color" content="#7bd300">
        <link rel="icon" type="image/png" sizes="512x512" href="{{asset('images/desxpert-icon.png')}}">
        <link rel="apple-touch-icon" href="{{asset('images/desxpert-icon.png')}}">
        <title>@yield('title') · Desxpert Admin</title>
        <script>document.documentElement.dataset.theme=localStorage.getItem('desxpert-admin-theme')||'light';</script>
        @vite(['resources/css/app.css','resources/js/app.js'])
    </head>
    <body data-admin-shell>
        <aside class="sidebar"><a class="brand" href="{{route('dashboard')}}"><img src="{{asset('images/desxpert-logo.png')}}" alt="Desxpert"></a>
            <div class="admin-card">
                <div class="avatar">{{strtoupper(substr(auth()->user()->name??'A',0,1))}}</div>
                <div><b>{{auth()->user()->name??'Administrator'}}</b><span>{{auth()->user()->roleLabel()}}</span></div>
            </div>
 <nav><a class="{{request()->routeIs('dashboard')?'active':''}}" href="{{route('dashboard')}}"><i data-lucide="layout-grid"></i>Dashboard</a><a class="{{request()->routeIs('bookings*')?'active':''}}" href="{{route('bookings')}}"><i data-lucide="calendar-check-2"></i>Booking Management</a><a class="{{request()->routeIs('users*')?'active':''}}" href="{{route('users')}}"><i data-lucide="users-round"></i>Users Management</a>@if(auth()->user()->isSystemAdmin())<a class="{{request()->routeIs('admin-users*')?'active':''}}" href="{{route('admin-users')}}"><i data-lucide="shield-check"></i>Admin Users</a>@endif<a class="{{request()->routeIs('applications*')?'active':''}}" href="{{route('applications')}}"><i data-lucide="file-check-2"></i>Applications</a><a class="{{request()->routeIs('professions*')?'active':''}}" href="{{route('professions')}}"><i data-lucide="briefcase-business"></i>Professions</a><a class="{{request()->routeIs('payments.*')?'active':''}}" href="{{route('payments.management')}}"><i data-lucide="credit-card"></i>Payment Management</a><a class="{{request()->routeIs('disbursements*')?'active':''}}" href="{{route('disbursements')}}"><i data-lucide="hand-coins"></i>Disbursements</a></nav>
            <div class="sidebar-bottom"><a href="mailto:support@desxpert.com"><i data-lucide="circle-help"></i>Support</a>
                <form method="post" action="{{route('logout')}}">@csrf<button><i data-lucide="log-out"></i>Sign out</button></form>
            </div>
        </aside>
        <main>
            <header><button class="menu-button" aria-label="Open menu"><i data-lucide="menu"></i></button>
                <div>
                    <h1>@yield('title')</h1>
                    <p>@yield('subtitle')</p>
                </div>
                <div class="header-actions">
                    <form class="global-search" action="{{route('users')}}"><i data-lucide="search"></i><input name="q" placeholder="Search experts or clients..."></form>
                    <button class="theme-toggle" type="button" aria-label="Switch color theme" title="Switch color theme"><i class="theme-sun" data-lucide="sun"></i><i class="theme-moon" data-lucide="moon"></i></button>
                    <div class="notification-menu">
                        <button class="bell" type="button" aria-label="Notifications" aria-expanded="false"> <i data-lucide="bell"></i>@if($headerUnreadNotifications)<span>{{$headerUnreadNotifications>99?'99+':$headerUnreadNotifications}}</span>@endif</button>
                        <div class="notification-dropdown">
                            <header><div><strong>Notifications</strong><small>{{$headerUnreadNotifications}} unread</small></div>@if($headerUnreadNotifications)<form method="post" action="{{route('notifications.read-all')}}">@csrf @method('patch')<button>Mark all read</button></form>@endif</header>
                            <div>@forelse($headerNotifications as $notification)<article class="{{$notification->read_at?'':'unread'}}"><span><i data-lucide="{{($notification->data['type']??null)==='professional_application_submitted'?'file-check-2':'bell'}}"></i></span><form method="post" action="{{route('notifications.read',$notification)}}">@csrf @method('patch')<button><b>{{$notification->title}}</b><p>{{$notification->body}}</p><small>{{$notification->created_at?->diffForHumans()}}</small></button></form></article>@empty<div class="notification-dropdown-empty"><i data-lucide="bell-off"></i><span>No notifications yet</span></div>@endforelse</div>
                            <a href="{{route('notifications')}}">View all notifications <i data-lucide="arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </header>
            <section class="content">@if(session('success'))<div class="notice"><i data-lucide="circle-check"></i>{{session('success')}}</div>@endif @if($errors->any())<div class="notice error"><i data-lucide="circle-alert"></i>{{$errors->first()}}</div>@endif @yield('content')</section>
        </main>
        <script src="https://unpkg.com/lucide@0.468.0"></script>
    </body>
</html>
