<div>
    <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 yang dibuat"
        />

        <x-stat-card 
            title="Paket Aktif"
            :value="$activePackages"
            icon="fa-check-circle"
            subtitle="Sedang dalam proses"
        />

        <x-stat-card 
            title="Kontrak Draft"
            :value="$draftContracts"
            icon="fa-file-signature"
            subtitle="Menunggu tanda tangan"
        />

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

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <a href="{{ route('ppk.packages.create') }}" class="bg-[#0b2b4a] text-white p-4 rounded-xl hover:bg-[#1a4a6e] transition text-center">
            <i class="fas fa-plus-circle text-2xl block mb-2"></i>
            <span class="text-sm font-medium">Buat Paket</span>
        </a>
        <a href="{{ route('ppk.contracts.create') }}" class="bg-[#0b2b4a] text-white p-4 rounded-xl hover:bg-[#1a4a6e] transition text-center">
            <i class="fas fa-file-contract text-2xl block mb-2"></i>
            <span class="text-sm font-medium">Buat Kontrak</span>
        </a>
        <a href="{{ route('ppk.packages.index') }}" class="bg-gray-600 text-white p-4 rounded-xl hover:bg-gray-700 transition text-center">
            <i class="fas fa-list text-2xl block mb-2"></i>
            <span class="text-sm font-medium">Lihat Paket</span>
        </a>
        <a href="{{ route('ppk.contracts.index') }}" class="bg-purple-600 text-white p-4 rounded-xl hover:bg-purple-700 transition text-center">
            <i class="fas fa-file-signature text-2xl block mb-2"></i>
            <span class="text-sm font-medium">Lihat Kontrak</span>
        </a>
    </div>

    <!-- Recent Activity -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Recent Packages -->
        <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-box text-[#c9a84c]"></i>
                Paket Terakhir
            </h3>
            <div class="space-y-3">
                @forelse($recentPackages as $package)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
                        <div>
                            <p class="text-sm font-medium text-gray-800">{{ $package['name'] }}</p>
                            <p class="text-xs text-gray-400">
                                <i class="far fa-clock mr-1"></i>
                                {{ \Carbon\Carbon::parse($package['created_at'])->diffForHumans() }}
                            </p>
                        </div>
                        <span class="text-xs px-2 py-1 rounded-full 
                            {{ $package['status'] === 'active' ? 'bg-green-100 text-green-700' : 
                               ($package['status'] === 'draft' ? 'bg-gray-100 text-gray-700' : 
                               'bg-yellow-100 text-yellow-700') }}">
                            {{ ucfirst($package['status']) }}
                        </span>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-4">Belum ada paket</p>
                @endforelse
            </div>
        </div>

        <!-- Recent Contracts -->
        <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-file-signature text-[#c9a84c]"></i>
                Kontrak Terakhir
            </h3>
            <div class="space-y-3">
                @forelse($recentContracts as $contract)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
                        <div>
                            <p class="text-sm font-medium text-gray-800">{{ $contract['contract_number'] }}</p>
                            <p class="text-xs text-gray-400">
                                <i class="far fa-clock mr-1"></i>
                                {{ \Carbon\Carbon::parse($contract['created_at'])->diffForHumans() }}
                            </p>
                        </div>
                        <span class="text-xs px-2 py-1 rounded-full 
                            {{ $contract['status'] === 'completed' ? 'bg-green-100 text-green-700' : 
                               ($contract['status'] === 'draft' ? 'bg-gray-100 text-gray-700' : 
                               ($contract['status'] === 'signed' ? 'bg-blue-100 text-blue-700' : 
                               'bg-yellow-100 text-yellow-700')) }}">
                            {{ ucfirst($contract['status']) }}
                        </span>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-4">Belum ada kontrak</p>
                @endforelse
            </div>
        </div>
    </div>
</div>