<div class="sidebar d-flex flex-column flex-shrink-0" id="sidebar">
    <!-- Sidebar Header / Logo -->
    <div class="p-4 d-flex align-items-center gap-3">
        <div class="bg-primary rounded-3 d-flex align-items-center justify-content-center text-white flex-shrink-0"
            style="width: 40px; height: 40px;">
            @php $logo = \App\Models\SystemSetting::getValue('site_logo'); @endphp
            @if ($logo)
                <img src="{{ url($logo) }}" alt="Logo" style="max-width: 24px; max-height: 24px;">
            @else
                <span class="material-symbols-outlined fs-5">calendar_month</span>
            @endif
        </div>
        <div>
            <h1 class="mb-0 fw-bold lh-1 text-dark" style="font-size: 1.125rem;">Roznama</h1>
            <p class="mb-0 fw-medium text-secondary" style="font-size: 0.75rem;">Admin Panel</p>
        </div>
    </div>

    <!-- Navigation Menu -->
    <div class="px-3 py-2 flex-grow-1 overflow-auto">
        <ul class="nav flex-column gap-1 sidebar-nav-list m-0 p-0">
            <li class="nav-item">
                <a href="{{ url('/admin/dashboard') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/dashboard') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/dashboard') ? 'text-fill' : '' }}">dashboard</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">Dashboard</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url('/admin/attendance') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/attendance*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/attendance*') ? 'text-fill' : '' }}">event_available</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">Attendance</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url('/admin/reports') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/reports*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/reports*') ? 'text-fill' : '' }}">description</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">Work Reports</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url('/admin/projects') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/projects*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/projects*') ? 'text-fill' : '' }}">task_alt</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">Tasks & Projects</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url('/admin/leaves') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/leaves*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/leaves*') ? 'text-fill' : '' }}">calendar_add_on</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">Leave Requests</span>
                </a>
            </li>
        </ul>

        <p class="text-uppercase fw-extrabold text-secondary opacity-50 mb-2 mt-4 px-3"
            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Administration</p>

        <ul class="nav flex-column gap-1 sidebar-nav-list m-0 p-0">
            <li class="nav-item">
                <a href="{{ url('/admin/users') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/users*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/users*') ? 'text-fill' : '' }}">group</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">User Management</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url('/admin/departments') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/departments*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/departments*') ? 'text-fill' : '' }}">account_tree</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">Departments</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url('/admin/announcements') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/announcements*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/announcements*') ? 'text-fill' : '' }}">campaign</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">Announcements</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url('/admin/activity-logs') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/activity-logs*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/activity-logs*') ? 'text-fill' : '' }}">history</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">System Logs</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url('/admin/settings') }}"
                    class="nav-link d-flex align-items-center gap-3 transition-colors {{ Request::is('admin/settings*') ? 'active' : '' }}">
                    <span
                        class="material-symbols-outlined {{ Request::is('admin/settings*') ? 'text-fill' : '' }}">settings</span>
                    <span class="fw-medium" style="font-size: 0.875rem;">System Settings</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- Sidebar Footer / User Profile -->
    <div class="p-4 border-top">
        <div
            class="d-flex align-items-center gap-3 p-2 border border-transparent rounded-3 hover-bg-light transition-all">
            <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold shadow-sm bg-light text-dark"
                style="width: 32px; height: 32px; font-size: 0.75rem;">
                {{ substr(auth()->user()->name, 0, 1) }}{{ substr(strrchr(auth()->user()->name, ' '), 1, 1) ?: '' }}
            </div>
            <div class="flex-1 overflow-hidden" style="flex: 1;">
                <p class="mb-0 fw-bold text-dark text-truncate" style="font-size: 0.75rem;">{{ auth()->user()->name }}
                </p>
                <p class="mb-0 text-secondary text-truncate" style="font-size: 0.625rem;">{{ auth()->user()->role }}
                </p>
            </div>
            <a href="#"
                class="text-secondary opacity-75 hover-opacity-100 transition-all d-flex align-items-center"
                title="Logout"
                onclick="event.preventDefault(); document.getElementById('logout-form-sidebar').submit();">
                <span class="material-symbols-outlined text-secondary hover-text-danger"
                    style="font-size: 1.125rem;">logout</span>
            </a>
            <form id="logout-form-sidebar" action="{{ url('/logout') }}" method="POST" class="d-none">@csrf</form>
        </div>
    </div>
</div>

<style>
    .sidebar-nav-list {
        list-style: none;
    }

    .sidebar-nav-list .nav-link {
        color: #475569 !important;
        border-radius: 0.5rem;
        padding: 0.6rem 0.875rem;
    }

    .sidebar-nav-list .nav-link:hover {
        background-color: #f1f5f9;
        color: #1e293b !important;
    }

    .sidebar-nav-list .nav-link.active {
        background-color: rgba(13, 110, 253, 0.1) !important;
        color: var(--primary-color) !important;
    }

    .sidebar-nav-list .nav-link.active span {
        color: var(--primary-color) !important;
    }

    .text-fill {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    }

    .hover-bg-light:hover {
        background-color: #f8fafc !important;
        border-color: #e2e8f0 !important;
    }

    .hover-text-danger:hover {
        color: #dc3545 !important;
    }

    .transition-colors {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .overflow-auto::-webkit-scrollbar {
        width: 4px;
    }

    .overflow-auto::-webkit-scrollbar-thumb {
        background: #e2e8f0;
        border-radius: 4px;
    }
</style>
