<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen">
        <div class="max-w-7xl mx-auto space-y-12">
            <!-- Phase 15: Strategic Product Catalog -->
            <header class="flex flex-col md:flex-row md:items-end justify-between gap-10 animate-in fade-in slide-in-from-top-4 duration-1000">
                <div class="space-y-4 border-l-4 border-white/20 pl-6">
                    <h2 class="font-display text-4xl font-black text-white tracking-tighter italic uppercase leading-none">Katalog Paket Layanan</h2>
                    <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none">Manajemen Produk & Valuasi — Sistem Commerce Pro v2.5</p>
                </div>
                <a href="{{ route('admin.packages.create') }}" class="h-14 px-10 bg-white text-slate-950 rounded-2xl font-black text-[10px] uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all transform active:scale-95 shadow-2xl italic flex items-center gap-3">
                    <span class="text-lg font-light text-indigo-500 group-hover:text-white transition-colors">+</span> Inisialisasi Paket Baru
                </a>
            </header>

            <div class="bg-white/5 rounded-[48px] border border-white/5 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.6)] overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-white/5 border-b border-white/5 text-slate-500 text-[9px] font-black uppercase tracking-[0.4em] italic">
                            <tr>
                                <th class="px-12 py-8">Varian Produk</th>
                                <th class="px-12 py-8">Valuasi Enterprise</th>
                                <th class="px-12 py-8">Siklus Validitas</th>
                                <th class="px-12 py-8 text-right">Instrument Command</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5">
                            @forelse($packages as $package)
                                <tr class="hover:bg-white/5 transition-all duration-300 group">
                                    <td class="px-12 py-10">
                                        <div class="font-display font-black text-white text-[15px] mb-1.5 uppercase italic tracking-tight group-hover:text-indigo-400 transition-colors">{{ $package->name }}</div>
                                        <div class="text-[9px] font-black text-slate-600 uppercase tracking-[0.3em] leading-none italic">Verified Service Module</div>
                                    </td>
                                    <td class="px-12 py-10">
                                        <div class="text-3xl font-display font-black text-indigo-400 tracking-tighter italic leading-none">Rp {{ number_format($package->price, 0, ',', '.') }}</div>
                                        <div class="text-[8px] font-black text-slate-700 uppercase tracking-[0.2em] mt-3 italic leading-none">Net Enterprise Price</div>
                                    </td>
                                    <td class="px-12 py-10">
                                        <div class="text-[12px] font-black text-white uppercase italic tracking-tighter group-hover:translate-x-1 transition-transform tabular-nums">{{ $package->duration_days }} Hari Kalender</div>
                                        <div class="text-[9px] font-black text-slate-600 uppercase tracking-widest mt-2 italic leading-none">Full Access Window</div>
                                    </td>
                                    <td class="px-12 py-10 text-right">
                                        <div class="flex justify-end items-center gap-6 tabular-nums">
                                            <a href="{{ route('admin.packages.edit', $package) }}" class="text-[10px] font-black uppercase tracking-widest text-indigo-400 hover:text-white transition-colors italic">Koreksi</a>
                                            <form action="{{ route('admin.packages.destroy', $package) }}" method="POST" class="inline" onsubmit="return confirm('Terminasi modul paket?')">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="text-[10px] font-black uppercase tracking-widest text-rose-500/50 hover:text-rose-500 transition-colors italic">Terminasi</button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-12 py-40 text-center">
                                        <div class="w-24 h-24 bg-white/5 rounded-[40px] flex items-center justify-center mx-auto mb-10 border border-white/10 shadow-3xl">
                                            <svg class="w-12 h-12 text-slate-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                                        </div>
                                        <h4 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter mb-4 leading-none text-balance">Katalog Kosong</h4>
                                        <p class="text-slate-700 text-[10px] font-black uppercase tracking-[0.3em] max-w-sm mx-auto leading-relaxed italic text-balance">Belum ada varian paket yang dikonfigurasi dalam arsitektur komersial Anda.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
