{{-- Premium Sidebar Header with User Profile --}}
<div class="premium-sidebar-header">
    {{-- Brand Logo --}}
    <div class="brand-section">
        <div class="brand-logo">
            <div class="logo-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 10a2 2 0 100-4 2 2 0 000 4z"/>
                    <path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM3 12c0 2.09.713 4.014 1.908 5.542A8.986 8.986 0 0112.065 14a8.984 8.984 0 017.092 3.458A8.991 8.991 0 003 12zm9 9a8.963 8.963 0 01-5.672-2.012A6.992 6.992 0 0112.065 16a6.991 6.991 0 015.689 2.92A8.964 8.964 0 0112 21z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="brand-text">
                <span class="brand-name">Presensi</span>
                <span class="brand-tagline">Admin Panel</span>
            </div>
        </div>
    </div>

    {{-- User Profile Card --}}
    <div class="user-profile-card">
        <div class="profile-avatar">
            @if(auth()->user()->avatar)
                <img src="{{ Storage::url(auth()->user()->avatar) }}" alt="{{ auth()->user()->name }}">
            @else
                <div class="avatar-placeholder">
                    {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
                </div>
            @endif
            <div class="online-indicator"></div>
        </div>
        <div class="profile-info">
            <span class="profile-name">{{ auth()->user()->name }}</span>
            <span class="profile-role">
                @if(auth()->user()->roles->first())
                    {{ auth()->user()->roles->first()->name }}
                @else
                    Administrator
                @endif
            </span>
        </div>
        <div class="profile-actions">
            <a href="{{ route('filament.admin.pages.dashboard') }}" class="profile-action-btn" title="Dashboard">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
            </a>
        </div>
    </div>

    {{-- Quick Navigation --}}
    <div class="quick-nav">
        <a href="{{ route('filament.admin.resources.attendances.index') }}" class="quick-nav-item" title="Kehadiran">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </a>
        <a href="{{ route('filament.admin.resources.users.index') }}" class="quick-nav-item" title="Users">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
        </a>
        <a href="{{ route('filament.admin.resources.business-trips.index') }}" class="quick-nav-item" title="Perjalanan Dinas">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
            </svg>
        </a>
        <a href="#" class="quick-nav-item" title="Pengaturan" onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: { id: 'settings-modal' } }))">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
        </a>
    </div>
</div>

<style>
.premium-sidebar-header {
    padding: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
}

/* Brand Section */
.brand-section {
    margin-bottom: 1.25rem;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.logo-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.025em;
}

.brand-tagline {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.7);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* User Profile Card */
.user-profile-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 1rem;
}

.profile-avatar {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar img,
.avatar-placeholder {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    object-fit: cover;
}

.avatar-placeholder {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.75rem;
    height: 0.75rem;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #1e293b;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.profile-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-role {
    font-size: 0.7rem;
    color: #60a5fa;
    font-weight: 500;
    text-transform: capitalize;
}

.profile-actions {
    flex-shrink: 0;
}

.profile-action-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.profile-action-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.profile-action-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Quick Navigation */
.quick-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.quick-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 0.75rem;
    color: #94a3b8;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.quick-nav-item:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.quick-nav-item svg {
    width: 1.125rem;
    height: 1.125rem;
}
</style>