{{-- Premium Quick Actions Floating Button --}}
<div class="quick-actions-fab" x-data="{ open: false }">
    {{-- Quick Action Menu Items --}}
    <div class="quick-actions-menu" x-show="open" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-2" @click.away="open = false">

        <a href="{{ route('filament.admin.resources.users.create') }}" class="quick-action-item">
            <div class="quick-action-icon blue">
                <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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                </svg>
            </div>
            <span class="quick-action-text">Tambah User Baru</span>
        </a>

        <a href="{{ route('filament.admin.resources.business-trips.create') }}" class="quick-action-item">
            <div class="quick-action-icon purple">
                <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>
            </div>
            <span class="quick-action-text">Buat Perjalanan Dinas</span>
        </a>

        <a href="{{ route('filament.admin.resources.attendances.index') }}?tableFilters[incomplete][isActive]=1" class="quick-action-item">
            <div class="quick-action-icon orange">
                <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>
            </div>
            <span class="quick-action-text">Belum Checkout</span>
        </a>

        <a href="{{ route('filament.admin.resources.users.index') }}?tableFilters[approval_status][value]=pending" class="quick-action-item">
            <div class="quick-action-icon red">
                <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <span class="quick-action-text">Pending Approval</span>
        </a>

        <a href="{{ route('filament.admin.pages.dashboard') }}" class="quick-action-item">
            <div class="quick-action-icon green">
                <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
            </div>
            <span class="quick-action-text">Dashboard</span>
        </a>
    </div>

    {{-- Main FAB Button --}}
    <button class="quick-actions-btn" @click="open = !open" :class="{ 'active': open }">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            class="fab-icon" :class="{ 'rotate-45': open }">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" />
        </svg>
    </button>
</div>

<style>
.quick-actions-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 50;
}

.quick-actions-btn {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    outline: none;
}

.quick-actions-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.6);
}

.quick-actions-btn.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.5);
}

.fab-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
}

.fab-icon.rotate-45 {
    transform: rotate(45deg);
}

.quick-actions-menu {
    position: absolute;
    bottom: 5rem;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.dark .quick-action-item {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.quick-action-item:hover {
    transform: translateX(-8px);
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.15);
}

.quick-action-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-action-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.quick-action-icon.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.quick-action-icon.green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.quick-action-icon.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.quick-action-icon.purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.quick-action-icon.red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.quick-action-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

.dark .quick-action-text {
    color: #f1f5f9;
}

/* Responsive */
@media (max-width: 768px) {
    .quick-actions-fab {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .quick-actions-btn {
        width: 3.25rem;
        height: 3.25rem;
    }

    .quick-action-item {
        padding: 0.625rem 1rem;
    }

    .quick-action-icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .quick-action-text {
        font-size: 0.8rem;
    }
}
</style>