<div>
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <x-stat-card 
            title="Total Paket"
            :value="$totalPackages"
            icon="fa-box"
            subtitle="Semua paket"
        />

        <x-stat-card 
            title="Antrian Matching"
            :value="$queueCount"
            icon="fa-clock"
            subtitle="Menunggu diproses"
        />

        <x-stat-card 
            title="Sedang Matching"
            :value="$matchingPackages"
            icon="fa-robot"
            subtitle="Dalam proses matching"
        />

        <x-stat-card 
            title="Paket Selesai"
            :value="$completedPackages"
            icon="fa-check-double"
            subtitle="Sudah selesai"
        />
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <a href="{{ route('agent.matching.queue') }}" class="bg-[#0b2b4a] text-white p-4 rounded-xl hover:bg-[#1a4a6e] transition text-center">
            <i class="fas fa-robot text-2xl block mb-2"></i>
            <span class="text-sm font-medium">Proses Matching</span>
        </a>
        <a href="{{ route('agent.matching.queue') }}" class="bg-[#0b2b4a] text-white p-4 rounded-xl hover:bg-[#1a4a6e] transition text-center">
            <i class="fas fa-list text-2xl block mb-2"></i>
            <span class="text-sm font-medium">Lihat Antrian</span>
        </a>
        <a href="{{ route('agent.matching.history') }}" class="bg-[#0b2b4a] text-white p-4 rounded-xl hover:bg-[#1a4a6e] transition text-center">
            <i class="fas fa-history text-2xl block mb-2"></i>
            <span class="text-sm font-medium">Riwayat Matching</span>
        </a>
    </div>

    <!-- Recent Matching Activity -->
    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
        <h3 class="text-lg font-semibold text-[#0b2b4a] flex items-center gap-2 mb-4">
            <i class="fas fa-robot text-[#c9a84c]"></i>
            Aktivitas Matching Terakhir
        </h3>
        <div class="space-y-3">
            @forelse($recentMatching as $item)
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
                    <div>
                        <p class="text-sm font-medium text-gray-800">{{ $item['name'] }}</p>
                        <p class="text-xs text-gray-400">
                            <i class="far fa-clock mr-1"></i>
                            {{ \Carbon\Carbon::parse($item['updated_at'])->diffForHumans() }}
                        </p>
                        @if($item['contractor'])
                            <p class="text-xs text-green-600">
                                <i class="fas fa-user-check mr-1"></i>
                                {{ $item['contractor'] }}
                            </p>
                        @endif
                    </div>
                    <span class="text-xs px-2 py-1 rounded-full 
                        {{ $item['status'] === 'matching' ? 'bg-yellow-100 text-yellow-700' : 
                           ($item['status'] === 'selected' ? 'bg-blue-100 text-blue-700' : 
                           'bg-green-100 text-green-700') }}">
                        {{ ucfirst($item['status']) }}
                    </span>
                </div>
            @empty
                <p class="text-gray-500 text-center py-4">Belum ada aktivitas matching</p>
            @endforelse
        </div>
    </div>
</div>