<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen">
        <div class="max-w-5xl mx-auto space-y-12">
            <!-- Phase 15: Premium Payment Hub Header -->
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-10">
                <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 underline decoration-indigo-500/50 decoration-8 underline-offset-[12px]">Konfirmasi Aktivasi</h2>
                    <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none mt-6">Secure Payment Verification Loop — {{ $subscription->plan->name }}</p>
                </div>
                <div class="bg-white/5 border border-white/10 rounded-3xl px-8 py-4 backdrop-blur-md">
                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-widest italic mb-1">Total Tagihan:</p>
                    <p class="text-2xl font-black text-white italic tracking-tighter">Rp {{ number_format($subscription->plan->price, 0, ',', '.') }}</p>
                </div>
            </div>

            @php
                $latestPayment = $subscription->payments()->latest()->first();
                $isPending = $latestPayment && $latestPayment->payment_status === 'pending';
                $isRejected = $latestPayment && $latestPayment->payment_status === 'rejected';
                $canUpload = !$latestPayment || $isRejected;
            @endphp

            @if($isPending)
                <!-- Pending State UI -->
                <div class="bg-white/5 rounded-[48px] p-20 text-center border border-white/5 shadow-3xl relative overflow-hidden group">
                    <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent opacity-100"></div>
                    <div class="relative z-10 w-24 h-24 bg-white/5 rounded-[40px] flex items-center justify-center mx-auto mb-10 border border-white/10 animate-pulse">
                        <svg class="w-12 h-12 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                    <h3 class="text-4xl font-display font-black text-white uppercase italic tracking-tighter mb-6 leading-none">Menunggu Verifikasi</h3>
                    <p class="text-slate-500 text-[11px] font-black uppercase tracking-[0.3em] max-w-sm mx-auto leading-relaxed italic mb-12">
                        Pembayaran Anda sedang dalam tinjauan tim audit <span class="text-white">Leasing Pro</span>. Kami akan segera mengaktifkan akses Anda dalam waktu singkat.
                    </p>
                    <div class="inline-flex items-center gap-3 px-8 py-3 bg-white/5 border border-white/10 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest italic">
                        <span class="w-2 h-2 bg-amber-500 rounded-full shadow-[0_0_10px_rgba(245,158,11,0.5)]"></span>
                        Status: Pending Review
                    </div>
                </div>
            @else
                <div class="grid lg:grid-cols-12 gap-12">
                    <!-- Bank Instructions -->
                    <div class="lg:col-span-4 space-y-8">
                        <div class="bg-slate-900 rounded-[48px] p-12 text-white border border-white/5 shadow-3xl relative overflow-hidden group hover:border-indigo-500/30 transition-all duration-700">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 blur-3xl -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-1000"></div>
                            <h4 class="text-xl font-display font-black italic uppercase tracking-tighter mb-10 underline decoration-indigo-500 decoration-4">Tujuan Transfer</h4>
                            <div class="space-y-10 relative z-10">
                                <div>
                                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-[0.4em] italic mb-2">Internal Bank Node:</p>
                                    <p class="text-2xl font-black tracking-tighter italic uppercase">Bank BCA</p>
                                </div>
                                <div>
                                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-[0.4em] italic mb-2">Encryption ID / Account:</p>
                                    <p class="text-2xl font-black tracking-widest italic">1234-567-890</p>
                                </div>
                                <div>
                                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-[0.4em] italic mb-2">Authorized Beneficiary:</p>
                                    <p class="text-base font-black uppercase italic leading-tight">PT LEASINGPRO INDONESIA</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Section -->
                    <div class="lg:col-span-8">
                        <div class="bg-white/5 rounded-[48px] border border-white/5 p-12 lg:p-20 shadow-3xl relative">
                            @if($isRejected)
                                <div class="mb-12 p-8 bg-rose-500/10 border border-rose-500/20 rounded-3xl animate-in slide-in-from-top-4 duration-700">
                                    <div class="flex items-center gap-4 mb-4">
                                        <div class="w-10 h-10 bg-rose-500 text-white rounded-xl flex items-center justify-center shadow-lg shadow-rose-500/20">
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>
                                        </div>
                                        <h4 class="text-lg font-black text-white uppercase italic tracking-tighter">Pembayaran Ditolak</h4>
                                    </div>
                                    <p class="text-slate-400 text-xs font-bold leading-relaxed italic">Alasan: <span class="text-rose-400 underline decoration-rose-400/30 underline-offset-4 decoration-2">"{{ $latestPayment->review_notes }}"</span></p>
                                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-widest italic mt-4">Silakan unggah rincian baru dengan data yang benar.</p>
                                </div>
                            @endif

                            <form action="{{ route('leasing.payment.store') }}" method="POST" enctype="multipart/form-data" class="space-y-10">
                                @csrf
                                <input type="hidden" name="amount" value="{{ $subscription->plan->price }}">

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                                    <div class="space-y-4">
                                        <label class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em] italic ml-2">Nama Pengirim</label>
                                        <input type="text" name="sender_name" required value="{{ old('sender_name') }}"
                                            class="w-full h-16 bg-white/5 border border-white/10 rounded-2xl px-6 text-white font-bold focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all placeholder:text-slate-800 italic"
                                            placeholder="Sesuai buku tabungan...">
                                    </div>
                                    <div class="space-y-4">
                                        <label class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em] italic ml-2">Tanggal Transfer</label>
                                        <input type="date" name="transfer_date" required value="{{ old('transfer_date', date('Y-m-d')) }}"
                                            class="w-full h-16 bg-white/5 border border-white/10 rounded-2xl px-6 text-white font-bold focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all [color-scheme:dark] italic">
                                    </div>
                                </div>

                                <div class="space-y-6">
                                    <label class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em] italic ml-2">Digital Proof (Bukti Transfer)</label>
                                    <div class="relative group/upload">
                                        <input type="file" name="proof" required accept="image/*"
                                            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                                        <div class="w-full border-2 border-dashed border-white/10 rounded-3xl p-12 text-center group-hover/upload:border-indigo-500/50 group-hover/upload:bg-white/5 transition-all duration-700">
                                            <div class="w-16 h-16 bg-white/5 rounded-2xl flex items-center justify-center mx-auto mb-6 border border-white/5 group-hover/upload:scale-110 group-hover/upload:bg-indigo-600 group-hover/upload:text-white transition-all duration-700">
                                                <svg class="w-8 h-8 text-slate-500 group-hover/upload:text-inherit" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                                            </div>
                                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-widest italic leading-none">Klik atau Seret Bukti Transfer</p>
                                            <p class="text-[8px] text-slate-700 uppercase tracking-widest mt-2">JPG, PNG, PDF (Max 2MB)</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="pt-6">
                                    <button type="submit" class="w-full h-20 bg-white text-slate-950 rounded-2xl shadow-3xl shadow-indigo-500/10 font-black uppercase tracking-[0.3em] italic hover:bg-indigo-600 hover:text-white transition-all transform hover:scale-[1.01] active:scale-95 flex items-center justify-center gap-4">
                                        <span>Konfirmasi Token Pembayaran</span>
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</x-app-layout>
