@php
    $staffMenu = isset($staffMenu) ? $staffMenu : [];

    function canSeeMenu($key, $staffMenu) {
        return in_array($key, $staffMenu);
    }
@endphp

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap" rel="stylesheet">
<style>
    .brand-name {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        letter-spacing: 1px;
    }
</style>

<aside id="layout-menu" class="layout-menu menu-vertical menu">
    <div class="app-brand demo mt-4">
        <a href="#" class="app-brand-link">
            <span class="app-brand-logo demo">
                <span class="d-flex justify-content-center align-items-center">
                    <img src="{{ asset('/assets/img') }}/logo.png" height="40px" alt="Logo">
                    <span class="text-primary fs-4 fw-bold brand-name">CHRISLIN</span>
                </span>
            </span>
        </a>
        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
            <i class="icon-base ti menu-toggle-icon d-none d-xl-block"></i>
            <i class="icon-base ti tabler-x d-block d-xl-none"></i>
        </a>
    </div>

    {{-- Staff Info Badge --}}
    <div style="padding:12px 16px;margin:8px 16px;background:rgba(105,108,255,0.1);
                border-radius:10px;border:1px solid rgba(105,108,255,0.2);">
        <div style="font-size:11px;color:#696cff;font-weight:600;text-transform:uppercase;">Staff Portal</div>
        <div style="font-size:13px;font-weight:600;">{{ $staffUser->name }}</div>
        <div style="font-size:11px;color:#888;">{{ $staffUser->role ?? $staffUser->department }}</div>
    </div>

    <ul class="menu-inner py-1">

        {{-- Dashboard --}}
        @if(canSeeMenu('dashboard', $staffMenu))
        <li class="menu-item @if(Route::is('staff.dashboard')) active @endif">
            <a href="{{ route('staff.dashboard') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-smart-home"></i>
                <div>Dashboard</div>
            </a>
        </li>
        @endif

        {{-- Product --}}
        @if(canSeeMenu('product', $staffMenu))
        <li class="menu-item @if(Route::is('product') || Route::is('create_product') || Route::is('edit_product')) active @endif">
            <a href="{{ route('product') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-box"></i>
                <div>Product</div>
            </a>
        </li>
        @endif

        {{-- Billing --}}
        @if(canSeeMenu('billing', $staffMenu))
        <li class="menu-item @if(Route::is('billing')) active @endif">
            <a href="{{ route('billing') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-file-invoice"></i>
                <div>Billing</div>
            </a>
        </li>
        @endif

        {{-- Patient --}}
        @if(canSeeMenu('patient', $staffMenu))
        <li class="menu-item @if(Route::is('patient') || Route::is('create_patient') || Route::is('view_patient')) active @endif">
            <a href="{{ route('patient') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-users"></i>
                <div>Patient Management</div>
            </a>
        </li>
        @endif

        {{-- Follow Up --}}
        @if(canSeeMenu('follow_ups', $staffMenu))
        <li class="menu-item @if(Route::is('follow_ups') || Route::is('follow_up_report')) active @endif">
            <a href="{{ route('follow_ups') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-report"></i>
                <div>Follow Up</div>
            </a>
        </li>
        @endif

        {{-- Doctor --}}
        @if(canSeeMenu('doctor', $staffMenu))
        <li class="menu-item @if(Route::is('doctor') || Route::is('create_doctor')) active @endif">
            <a href="{{ route('doctor') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-stethoscope"></i>
                <div>Doctor</div>
            </a>
        </li>
        @endif

        {{-- Staff List --}}
        @if(canSeeMenu('staff_list', $staffMenu))
        <li class="menu-item @if(Route::is('staff_list')) active @endif">
            <a href="{{ route('staff_list') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-id-badge"></i>
                <div>Staff</div>
            </a>
        </li>
        @endif

        {{-- Treatments --}}
        @if(canSeeMenu('treatments', $staffMenu))
        <li class="menu-item @if(Route::is('treatments') || Route::is('add_treetments')) active @endif">
            <a href="{{ route('treatments') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-vaccine"></i>
                <div>Treatments</div>
            </a>
        </li>
        @endif

        {{-- Attendance --}}
        @if(canSeeMenu('attendance', $staffMenu))
        <li class="menu-item @if(Route::is('attendance') || Route::is('add_attendance')) active @endif">
            <a href="{{ route('attendance') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-calendar"></i>
                <div>Attendance</div>
            </a>
        </li>
        @endif

        {{-- Appointment --}}
        @if(canSeeMenu('appointment', $staffMenu))
        <li class="menu-item @if(Route::is('appointment_report') || Route::is('appointment')) active @endif">
            <a href="{{ route('appointment_report') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-calendar-check"></i>
                <div>Appointment</div>
            </a>
        </li>
        @endif

        {{-- My Profile --}}
        <li class="menu-item @if(Route::is('staff.profile')) active @endif">
            <a href="{{ route('staff.profile') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-user-circle"></i>
                <div>My Profile</div>
            </a>
        </li>

        {{-- Logout --}}
        <li class="menu-item">
            <a href="#" class="menu-link" data-bs-toggle="modal" data-bs-target="#staffLogoutModal">
                <i class="menu-icon icon-base ti tabler-logout"></i>
                <div>Logout</div>
            </a>
        </li>

    </ul>
</aside>

<div class="menu-mobile-toggler d-xl-none rounded-1">
    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large text-bg-secondary p-2 rounded-1">
        <i class="ti tabler-menu icon-base"></i>
        <i class="ti tabler-chevron-right icon-base"></i>
    </a>
</div>

{{-- Staff Logout Modal --}}
<div class="modal fade" id="staffLogoutModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure?</h5>
            <p class="text-muted">Confirm to logout from Staff Portal</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <form action="{{ route('staff.logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-danger p-3 fw-semibold">
                        Yes, Logout
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>