<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 Subscription Architecture -->
            <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">Konfigurasi Paket Layanan</h2>
                    <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none text-balance">Subscription Module Management — Intelligence Monetization v2.5</p>
                </div>
                <a href="{{ route('admin.plans.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 Plan 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 Plan</th>
                                <th class="px-12 py-8">Role Tier</th>
                                <th class="px-12 py-8">Valuasi Rate</th>
                                <th class="px-12 py-8">Siklus Hidup</th>
                                <th class="px-12 py-8">Security Status</th>
                                <th class="px-12 py-8 text-center">Module Command</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5">
                            @forelse($plans as $plan)
                                <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">{{ $plan->name }}</div>
                                        <div class="text-[9px] font-black text-slate-600 uppercase tracking-[0.3em] leading-none italic">Verified Subscription Model</div>
                                    </td>
                                    <td class="px-12 py-10">
                                        <span class="inline-flex items-center px-4 py-1.5 bg-white/5 border border-white/10 text-slate-400 rounded-xl text-[9px] font-black uppercase tracking-widest italic shadow-2xl group-hover:border-indigo-500/30 group-hover:text-white transition-all">
                                            {{ $plan->role_type }}
                                        </span>
                                    </td>
                                    <td class="px-12 py-10">
                                        <div class="text-2xl font-display font-black text-indigo-400 tracking-tighter italic leading-none tabular-nums">Rp {{ number_format($plan->price, 0, ',', '.') }}</div>
                                    </td>
                                    <td class="px-12 py-10">
                                        <div class="text-[11px] font-bold text-slate-400 uppercase italic tracking-widest tabular-nums">{{ $plan->duration_days }} Hari Aktif</div>
                                    </td>
                                    <td class="px-12 py-10">
                                        @if($plan->is_active)
                                            <span class="inline-flex items-center gap-2.5 text-emerald-400 font-black text-[9px] uppercase tracking-widest italic group-hover:animate-pulse">
                                                <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full shadow-[0_0_10px_rgba(16,185,129,0.5)]"></span> OPERATIONAL
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-2.5 text-slate-700 font-black text-[9px] uppercase tracking-widest italic">
                                                <span class="w-1.5 h-1.5 bg-slate-800 rounded-full"></span> DEACTIVATED
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-12 py-10 text-center">
                                        <a href="{{ route('admin.plans.edit', $plan) }}" class="inline-flex items-center h-12 px-8 bg-white/5 border border-white/10 rounded-2xl text-white font-black text-[9px] uppercase tracking-widest hover:bg-white hover:text-slate-950 hover:border-white transition-all duration-500 shadow-2xl active:scale-95 italic">
                                            Modify →
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                                        </div>
                                        <h4 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter mb-4 leading-none text-balance">Subscription Registry Zero</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 plan langganan yang dikonfigurasi dalam arsitektur komersial Anda.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
