<x-filament-panels::page>
    <style>
        .quota-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
        .quota-card { background: white; border-radius: 1rem; border: 1px solid #e5e7eb; padding: 2rem 1.5rem; text-align: center; position: relative; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: transform 0.2s; }
        .quota-card:hover { transform: translateY(-5px); border-color: #f59e0b; }
        .dark .quota-card { background: #1f2937; border-color: #374151; }
        .quota-title { font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem; color: #111827; }
        .dark .quota-title { color: #ffffff; }
        .quota-price { font-size: 2rem; font-weight: 900; margin: 1rem 0; color: #d97706; }
        .icon-svg { width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: middle; margin-right: 0.75rem; color: #10b981; }
        .feature-list { text-align: left; margin: 1.5rem 0 2rem 0; font-size: 0.875rem; line-height: 2.5; color: #4b5563; }
        .dark .feature-list { color: #9ca3af; }
        
        /* Modifikasi CSS Tombol untuk Livewire */
        .btn-buy { display: flex; justify-content: center; align-items: center; gap: 0.5rem; width: 100%; padding: 0.875rem; background: #f59e0b; color: white; font-weight: bold; border-radius: 0.5rem; text-decoration: none; cursor: pointer; border: none; font-size: 1rem; transition: background 0.2s; }
        .btn-buy:hover:not(:disabled) { background: #d97706; }
        .btn-buy:disabled { opacity: 0.7; cursor: not-allowed; }
        
        .badge-best { position: absolute; top: 0; right: 0; background: #f59e0b; color: white; font-size: 0.7rem; font-weight: bold; padding: 0.35rem 1rem; border-bottom-left-radius: 0.75rem; }
        
        /* Animasi Loading Spinner */
        @keyframes spin { to { transform: rotate(360deg); } }
        .animate-spin { animation: spin 1s linear infinite; }
    </style>

    <div style="text-align: center; max-width: 600px; margin: 0 auto; padding-top: 1rem;">
        <h2 style="font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; line-height: 1.2;">Tingkatkan Jangkauan Bisnis Anda</h2>
        <p style="color: #6b7280; margin-bottom: 1.5rem;">Pilih paket kuota properti yang sesuai dengan skala bisnis kos-kosan Anda.</p>
        
        <div style="display: inline-block; background: #fef3c7; color: #b45309; padding: 0.5rem 1.25rem; border-radius: 999px; font-weight: bold; border: 1px solid #fde68a;">
            Sisa Kuota Anda Saat Ini: {{ auth()->user()->listing_quota ?? 0 }} Slot
        </div>
    </div>

    <div class="quota-grid">
        @forelse ($packages as $package)
            <div class="quota-card">
                @if($package->quota_amount > 1)
                    <div class="badge-best">LEBIH HEMAT</div>
                @endif
                
                <div class="quota-title">{{ $package->name }}</div>
                <div style="color: #6b7280; font-size: 0.875rem;">Tambahan {{ $package->quota_amount }} properti</div>
                
                <div class="quota-price">Rp {{ number_format($package->price, 0, ',', '.') }}</div>
                
                <div class="feature-list">
                    <div style="display: flex; align-items: center; margin-bottom: 0.5rem;">
                        <svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg> 
                        Tambah {{ $package->quota_amount }} data properti
                    </div>
                    
                    @if(is_array($package->features))
                        @foreach($package->features as $feature)
                            <div style="display: flex; align-items: center; margin-bottom: 0.5rem;">
                                <svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg> 
                                {{ $feature }}
                            </div>
                        @endforeach
                    @endif
                </div>

                <!-- INTEGRASI LIVEWIRE PADA TOMBOL -->
                <button 
                    wire:click="purchasePackage({{ $package->id }})" 
                    wire:loading.attr="disabled"
                    class="btn-buy"
                >
                    <!-- Teks Tampil Normal -->
                    <span wire:loading.remove wire:target="purchasePackage({{ $package->id }})">
                        Beli Paket Ini
                    </span>

                    <!-- Teks Tampil Saat Loading (Diperbaiki) -->
                    <span wire:loading wire:target="purchasePackage({{ $package->id }})">
                        <!-- Flex style dibungkus di dalam span agar tidak bentrok dengan wire:loading -->
                        <span style="display: flex; align-items: center; gap: 0.5rem;">
                            <svg class="animate-spin" style="height: 1.25rem; width: 1.25rem; color: white;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            Memproses...
                        </span>
                    </span>
                </button>

            </div>
        @empty
            <div style="grid-column: 1 / -1; text-align: center; padding: 4rem; color: #6b7280; background: white; border-radius: 1rem; border: 1px dashed #e5e7eb;">
                Belum ada paket kuota yang tersedia saat ini.
            </div>
        @endforelse
    </div>
</x-filament-panels::page>