@php
    $doctor = $doctor ?? auth()->user();
    $currentRoute = \Illuminate\Support\Facades\Route::currentRouteName();
	$user = auth()->user();
$role = $user?->role;

$isAdmin = $role === \App\Models\User::ROLE_ADMIN;
$isSecretary = $role === \App\Models\User::ROLE_SECRETARY;

$routeProfile = $isAdmin
    ? route('admin.doctor.profile', $doctor->id)
    : ($isSecretary
        ? route('secretary.doctor.profile', $doctor->id)
        : route('doctor.profile'));

$routeServices = $isAdmin
    ? route('admin.doctor.services', $doctor->id)
    : ($isSecretary
        ? route('secretary.doctor.services', $doctor->id)
        : route('doctor.services'));

$routeAvailability = $isAdmin
    ? route('admin.doctor.availability', $doctor->id)
    : ($isSecretary
        ? route('secretary.doctor.availability', $doctor->id)
        : route('doctor.availability'));

$routeCalendar = $isAdmin
    ? route('admin.doctor.agenda', $doctor->id)
    : ($isSecretary
        ? route('secretary.doctor.agenda', $doctor->id)
        : route('doctor.book'));

$routeAgenda = $isAdmin
    ? route('admin.doctor.agenda', $doctor->id)
    : ($isSecretary
        ? route('secretary.doctor.agenda', $doctor->id)
        : route('doctor.appointments'));

$routePatients = $isAdmin
    ? route('admin.doctor.agenda', $doctor->id)
    : ($isSecretary
        ? route('secretary.doctor.agenda', $doctor->id)
        : route('doctor.patients'));

$routeMessages = $isAdmin
    ? route('admin.doctor.agenda', $doctor->id)
    : ($isSecretary
        ? route('secretary.doctor.agenda', $doctor->id)
        : route('doctor.messages'));
@endphp

<div class="doctor-header-shell space-y-3 w-full max-w-full overflow-x-hidden">

    {{-- RIGA 1: CARD MEDICO --}}
    <div class="bg-white dark:bg-gray-900 shadow rounded-xl p-4 flex flex-col sm:flex-row items-start sm:items-center gap-4 border border-transparent dark:border-gray-800 w-full max-w-full">
        {{-- Avatar --}}
        @if (!empty($doctor->avatar_path))
            <img
                src="{{ asset('storage/'.$doctor->avatar_path) }}"
                alt="Foto di {{ $doctor->name }}"
                class="w-16 h-16 rounded-full object-cover"
            >
        @else
            <div class="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-100 flex items-center justify-center text-xl font-semibold shrink-0">
                {{ strtoupper(mb_substr($doctor->name, 0, 1)) }}
            </div>
        @endif

        <div class="flex flex-col min-w-0 w-full">
            <span class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Medico</span>
            <span class="text-lg font-semibold text-gray-900 dark:text-gray-100 truncate">{{ $doctor->name }}</span>
            @if (!empty($doctor->specialty))
                <span class="text-sm text-gray-600 dark:text-gray-300 truncate">{{ $doctor->specialty }}</span>
            @endif
            @if (!empty($doctor->public_title))
                <span class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $doctor->public_title }}</span>
            @endif
        </div>
    </div>

     {{-- RIGA 2: TAB + AZIONI ALLINEATE --}}
    <div class="bg-white dark:bg-gray-900 shadow rounded-xl px-4 border border-transparent dark:border-gray-800 w-full max-w-full">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">

            {{-- MENU TAB --}}
            <div class="w-full overflow-x-auto scrollbar-hide">
                <nav class="flex min-w-max items-center gap-3 text-sm whitespace-nowrap py-3">
                    <a href="{{ route('doctor.profile') }}"
                       class="px-3 py-2 border-b-2 -mb-px transition whitespace-nowrap
                            {{ $currentRoute === 'doctor.profile'
                                ? 'border-blue-600 text-blue-600 font-semibold'
                                : 'border-transparent text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white' }}">
                        Profilo
                    </a>

                    <a href="{{ $routeServices }}"
                       class="px-3 py-2 border-b-2 -mb-px transition whitespace-nowrap
                            {{ $currentRoute === 'doctor.services'
                                ? 'border-blue-600 text-blue-600 font-semibold'
                                : 'border-transparent text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white' }}">
                        Prestazioni
                    </a>

                    <a href="{{ $routeAvailability }}"
                       class="px-3 py-2 border-b-2 -mb-px transition whitespace-nowrap
                            {{ $currentRoute === 'doctor.availability'
                                ? 'border-blue-600 text-blue-600 font-semibold'
                                : 'border-transparent text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white' }}">
                        Disponibilità
                    </a>

                    <a href="{{ $routeCalendar }}"
                       class="px-3 py-2 border-b-2 -mb-px transition whitespace-nowrap
                            {{ $currentRoute === 'doctor.book'
                                ? 'border-blue-600 text-blue-600 font-semibold'
                                : 'border-transparent text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white' }}">
                        Calendario
                    </a>

                    <a href="{{ $routeAgenda }}"
                       class="px-3 py-2 border-b-2 -mb-px transition whitespace-nowrap
                            {{ $currentRoute === 'doctor.appointments'
                                ? 'border-blue-600 text-blue-600 font-semibold'
                                : 'border-transparent text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white' }}">
                        Agenda
                    </a>

                    <a href="{{ $routePatients }}"
                        class="px-3 py-2 border-b-2 -mb-px transition whitespace-nowrap
                            {{ $currentRoute === 'doctor.patients'
                                ? 'border-blue-600 text-blue-600 font-semibold'
                                : 'border-transparent text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white' }}">
                        Pazienti
                    </a>

                    <a href="{{ $routeMessages }}"
                        class="px-3 py-2 border-b-2 -mb-px transition whitespace-nowrap
                            {{ $currentRoute === 'doctor.messages'
                                ? 'border-blue-600 text-blue-600 font-semibold'
                                : 'border-transparent text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white' }}">
                        Messaggi
                    </a>
                </nav>
            </div>

            {{-- AZIONI A DESTRA --}}
            <div class="flex items-center justify-end gap-4 py-3 shrink-0">
                <button
                    type="button"
                    data-theme-toggle
                    class="w-9 h-9 rounded-full border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition flex items-center justify-center"
                    title="Tema chiaro/scuro"
                    aria-label="Tema chiaro/scuro"
                >
                    <svg data-theme-icon="light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="w-4 h-4">
                        <circle cx="12" cy="12" r="4.2"></circle>
                        <path d="M12 2.75v2.1M12 19.15v2.1M21.25 12h-2.1M4.85 12h-2.1M18.54 5.46l-1.49 1.49M6.95 17.05l-1.49 1.49M18.54 18.54l-1.49-1.49M6.95 6.95L5.46 5.46"></path>
                    </svg>
                    <svg data-theme-icon="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="w-4 h-4 hidden">
                        <path d="M20.2 14.2A8.5 8.5 0 0 1 9.8 3.8a8.9 8.9 0 1 0 10.4 10.4Z"></path>
                    </svg>
                </button>

                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit"
                            class="text-sm text-red-600 hover:underline dark:text-red-400">
                        Esci
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
    (function () {
        const root = document.documentElement;

        function getPreferredTheme() {
            const saved = localStorage.getItem('doctor-theme');
            if (saved === 'dark' || saved === 'light') return saved;
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }

        function syncToggleIcons() {
            document.querySelectorAll('[data-theme-toggle]').forEach((button) => {
                const isDark = root.classList.contains('dark');
                const lightIcon = button.querySelector('[data-theme-icon="light"]');
                const darkIcon = button.querySelector('[data-theme-icon="dark"]');
                if (lightIcon) lightIcon.classList.toggle('hidden', isDark);
                if (darkIcon) darkIcon.classList.toggle('hidden', !isDark);
            });
        }

        function applyTheme(theme) {
            const isDark = theme === 'dark';
            root.classList.toggle('dark', isDark);
            localStorage.setItem('doctor-theme', isDark ? 'dark' : 'light');
            syncToggleIcons();
        }

        window.applyDoctorTheme = applyTheme;
        applyTheme(getPreferredTheme());

        if (!window.__doctorThemeToggleBound) {
            document.addEventListener('click', function (event) {
                const button = event.target.closest('[data-theme-toggle]');
                if (!button) return;
                applyTheme(root.classList.contains('dark') ? 'light' : 'dark');
            });
            window.__doctorThemeToggleBound = true;
        }
    })();
    </script>

<style>
/* =========================
   DARK MODE - PANNELLO MEDICO
   ========================= */

html.dark body {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

/* superfici principali */
html.dark .bg-white {
    background-color: #111827 !important;
}

html.dark .bg-gray-50 {
    background-color: #0f172a !important;
}

html.dark .bg-gray-100 {
    background-color: #1f2937 !important;
}

html.dark .bg-gray-200 {
    background-color: #374151 !important;
}

html.dark .bg-slate-50 {
    background-color: #0f172a !important;
}

html.dark .bg-slate-100 {
    background-color: #1f2937 !important;
}

/* testi */
html.dark .text-black {
    color: #f9fafb !important;
}

html.dark .text-gray-900 {
    color: #f3f4f6 !important;
}

html.dark .text-gray-800 {
    color: #e5e7eb !important;
}

html.dark .text-gray-700 {
    color: #d1d5db !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: #9ca3af !important;
}

html.dark .text-gray-400 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-300 {
    color: #d1d5db !important;
}

/* titoli e testo base */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark label,
html.dark th,
html.dark strong {
    color: #f9fafb !important;
}

html.dark p,
html.dark span,
html.dark li,
html.dark td,
html.dark small {
    color: inherit;
}

/* bordi */
html.dark * {
    border-color: #374151;
}

html.dark .border,
html.dark .border-gray-50,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 {
    border-color: #374151 !important;
}

/* divider */
html.dark .divide-y > :not([hidden]) ~ :not([hidden]),
html.dark .divide-x > :not([hidden]) ~ :not([hidden]) {
    border-color: #374151 !important;
}

/* form controls */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94a3b8 !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35) !important;
    outline: none !important;
}

/* select option fallback */
html.dark option {
    background-color: #111827;
    color: #f3f4f6;
}

/* bottoni chiari / neutrali */
html.dark button:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600),
html.dark .hover\:bg-gray-50:hover {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

html.dark .hover\:text-gray-800:hover {
    color: #ffffff !important;
}

/* shadow */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28) !important;
}

/* tabelle */
html.dark table {
    color: #e5e7eb !important;
}

html.dark thead {
    background-color: #0f172a !important;
}

html.dark tbody tr {
    background-color: transparent;
}

html.dark tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* link */
html.dark a:not(.text-red-600):not(.text-blue-600) {
    color: inherit;
}

/* stati e alert comuni */
html.dark .bg-green-100 {
    background-color: rgba(22, 101, 52, 0.18) !important;
}

html.dark .border-green-200 {
    border-color: rgba(34, 197, 94, 0.28) !important;
}

html.dark .text-green-800 {
    color: #86efac !important;
}

html.dark .bg-red-100 {
    background-color: rgba(127, 29, 29, 0.20) !important;
}

html.dark .border-red-200 {
    border-color: rgba(248, 113, 113, 0.28) !important;
}

html.dark .text-red-800 {
    color: #fca5a5 !important;
}

html.dark .bg-yellow-100 {
    background-color: rgba(120, 53, 15, 0.20) !important;
}

html.dark .border-yellow-200 {
    border-color: rgba(250, 204, 21, 0.28) !important;
}

html.dark .text-yellow-800 {
    color: #fde68a !important;
}

html.dark .bg-rose-50 {
    background-color: rgba(190, 24, 93, 0.12) !important;
}

html.dark .text-rose-700,
html.dark .text-rose-500 {
    color: #fda4af !important;
}

/* utili per le card header medico */
html.dark .doctor-header-shell .bg-green-100 {
    background-color: rgba(22, 101, 52, 0.18) !important;
}

html.dark .doctor-header-shell .border-green-200 {
    border-color: rgba(34, 197, 94, 0.28) !important;
}

html.dark .doctor-header-shell .text-green-800 {
    color: #86efac !important;
}

html.dark .doctor-header-shell .bg-rose-50 {
    background-color: rgba(190, 24, 93, 0.12) !important;
}

html.dark .doctor-header-shell .text-rose-700,
html.dark .doctor-header-shell .text-rose-500 {
    color: #fda4af !important;
}

/* scrollbar nascosta per menu orizzontali */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
</style>

</div>