<div>
    <div class="row g-3 g-md-4 justify-content-center" style="display: flex; flex-wrap: wrap;" wire:poll>
        
        @php
            $menus = [
                ['route' => 'admin.statistik', 'icon' => 'bi-bar-chart-fill', 'color' => 'text-primary', 'title' => 'Statistik', 'desc' => 'Laporan Grafik', 'badge' => null],
                ['route' => 'admin.koleksi.index', 'icon' => 'bi-journal-bookmark-fill', 'color' => 'text-success', 'title' => 'Koleksi', 'desc' => 'Kumpulan Koleksi', 'badge' => null],
                ['route' => 'admin.anggota.index', 'icon' => 'bi-people-fill', 'color' => 'text-info', 'title' => 'Anggota', 'desc' => 'Daftar Anggota', 'badge' => $pendingMembers],
                ['route' => 'admin.peminjaman', 'icon' => 'bi-arrow-left-right', 'color' => 'text-warning', 'title' => 'Sirkulasi', 'desc' => 'Kelola Transaksi', 'badge' => $pendingLoans],
                ['route' => 'admin.system', 'icon' => 'bi-gear-wide-connected', 'color' => 'text-secondary', 'title' => 'Sistem', 'desc' => 'Pengaturan Admin', 'badge' => null],
                ['route' => 'admin.system', 'icon' => 'bi-book-half', 'color' => 'text-danger', 'title' => 'Panduan', 'desc' => 'Manual Book', 'badge' => null, 'target' => '_blank', 'asset' => 'pdf/ManualBook.pdf'],
            ];
        @endphp

        @foreach($menus as $menu)

    {{-- Sembunyikan menu Sistem untuk admin biasa --}}
    @if($menu['title'] == 'Sistem' && Auth::user()->role !== 'super_admin')
        @continue
    @endif

<div class="col-6 col-md-4 col-lg-2">
    <a href="{{ isset($menu['asset']) ? asset($menu['asset']) : route($menu['route']) }}" 
       class="text-decoration-none h-100 d-block position-relative" 
       @if(isset($menu['target'])) target="{{ $menu['target'] }}" @endif>
        
        {{-- Badge Notifikasi --}}
        @if($menu['badge'] && $menu['badge'] > 0)
            <span class="badge-floating {{ $menu['title'] == 'Sirkulasi' ? 'bg-warning text-dark' : 'bg-danger text-white' }}">
                {{ $menu['badge'] }}
            </span>
        @endif

        <div class="card-solid d-flex flex-column align-items-center justify-content-center">
            <div class="icon-box mb-2">
                <i class="bi {{ $menu['icon'] }} {{ $menu['color'] }} icon-size"></i>
            </div>
            <h6 class="menu-title">{{ $menu['title'] }}</h6>
            <p class="menu-subtitle">{{ $menu['desc'] }}</p>
        </div>
    </a>
</div>

@endforeach

    </div>

    <style>
        /* Card Solid (Tidak Transparan) */
        .card-solid {
            background: #ffffff; /* Warna putih solid */
            border: 2px solid #e9ecef;
            border-radius: 18px;
            padding: 20px 10px;
            height: 100%;
            min-height: 130px; /* Ukuran dibesarkan */
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .card-solid:hover {
            transform: translateY(-8px);
            border-color: #f89406; /* Warna orange identitas Anda */
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        }

        /* Container Ikon */
        .icon-box {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Ukuran Ikon dibesarkan */
        .icon-size {
            font-size: 2.2rem;
        }

        /* Teks Menu lebih besar */
        .menu-title {
            font-weight: 800;
            color: #212529;
            margin-bottom: 2px;
            font-size: 0.95rem; /* Ukuran naik */
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .menu-subtitle {
            font-size: 0.7rem; /* Ukuran naik */
            color: #6c757d;
            margin-bottom: 0;
            font-weight: 500;
        }

        /* Badge Notifikasi */
        .badge-floating {
            position: absolute;
            top: -8px;
            right: 0px;
            z-index: 10;
            font-size: 0.75rem;
            padding: 5px 10px;
            border-radius: 50px;
            font-weight: 900;
            border: 2px solid #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
.badge-floating {
    /* ... kode sebelumnya ... */
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}
        /* Responsif untuk Mobile agar tetap 2 kolom lurus */
        @media (max-width: 576px) {
            .card-solid { min-height: 110px; padding: 15px 5px; }
            .icon-size { font-size: 1.8rem; }
            .menu-title { font-size: 0.85rem; }
        }
    </style>
</div>

