@extends('frontend.app')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl mb-6 flex items-center gap-3">
        <svg class="w-6 h-6 text-green-500" 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>
        <span class="font-medium text-sm">{{ session('success') }}</span>
    </div>
    @endif

    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden max-w-2xl mx-auto">
        
        <!-- HEADER STATUS -->
        @php
            $headerColor = match($transaction->status) {
                'lunas' => 'bg-green-500',
                'menunggu_konfirmasi' => 'bg-blue-500',
                'batal' => 'bg-red-500',
                default => 'bg-amber-500' // pending
            };
            
            $headerTitle = match($transaction->status) {
                'lunas' => 'Pembayaran Berhasil (Lunas)',
                'menunggu_konfirmasi' => 'Menunggu Verifikasi Admin',
                'batal' => 'Transaksi Dibatalkan',
                default => 'Selesaikan Pembayaran'
            };
        @endphp

        <div class="{{ $headerColor }} p-8 flex flex-col items-center justify-center text-center transition-colors duration-500">
            <h2 class="text-2xl font-extrabold text-white tracking-tight">{{ $headerTitle }}</h2>
            <div class="mt-4 bg-white/20 backdrop-blur-md px-4 py-1.5 rounded-full text-white text-xs font-bold tracking-widest border border-white/30">
                INVOICE: {{ $transaction->invoice_code }}
            </div>
        </div>

        <!-- JIKA MASIH PENDING (TAMPILKAN INSTRUKSI TRANSFER) -->
        @if($transaction->status === 'pending')
            <div class="p-6 sm:p-8 border-b border-gray-100 bg-amber-50/30">
                <div class="bg-red-50 border border-red-100 rounded-2xl p-6 text-center mb-6 shadow-sm">
                    <p class="text-red-500 text-sm font-bold uppercase tracking-wider mb-2">Batas Waktu Pembayaran</p>
                    
                    <div x-data="{ 
                        expiry: new Date('{{ $transaction->expired_at }}').getTime(),
                        remaining: 'Menghitung...',
                        updateTimer() {
                            let now = new Date().getTime();
                            let distance = this.expiry - now;
                            if (distance < 0) {
                                this.remaining = 'WAKTU HABIS';
                                return;
                            }
                            let h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                            let m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                            let s = Math.floor((distance % (1000 * 60)) / 1000);
                            this.remaining = h + ' Jam ' + m + ' Menit ' + s + ' Detik';
                        }
                    }" x-init="updateTimer(); setInterval(() => updateTimer(), 1000);">
                        <span x-text="remaining" class="text-2xl sm:text-3xl font-extrabold text-red-600 mb-4 block tracking-tight"></span>
                    </div>

                    <p class="text-gray-500 text-sm mb-4">Transfer tepat sebesar nominal di bawah ini:</p>
                    <div class="text-4xl font-black text-gray-900">
                        Rp {{ number_format((float)$transaction->price, 0, ',', '.') }}
                    </div>
                </div>

                <div class="mb-6 border border-gray-200 rounded-xl p-5 bg-white">
                    <h3 class="font-bold text-gray-900 mb-4 border-b border-gray-100 pb-2">Transfer ke Rekening Berikut:</h3>
                    <div class="flex items-center gap-4">
                        <div class="bg-blue-100 text-blue-800 font-bold px-3 py-1.5 rounded-lg border border-blue-200">BCA</div>
                        <div>
                            <p class="font-mono text-lg font-bold text-gray-900">123 456 7890</p>
                            <p class="text-xs text-gray-500 uppercase">a.n PT Ngekos Yuk Indonesia</p>
                        </div>
                    </div>
                </div>
                
                <!-- FORM UPLOAD BUKTI -->
                <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
                    <h3 class="font-bold text-gray-900 mb-4">Sudah Transfer? Upload Buktinya Disini</h3>
                    <form action="{{ route('owner.quota.upload', $transaction->invoice_code) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div x-data="{ fileName: '' }">
                            <label class="block cursor-pointer">
                                <span class="sr-only">Pilih File</span>
                                <input type="file" name="payment_proof" accept="image/*" required @change="fileName = $event.target.files[0].name" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-amber-50 file:text-amber-700 hover:file:bg-amber-100 transition">
                            </label>
                            @error('payment_proof') <span class="text-xs text-red-500 mt-2 block">{{ $message }}</span> @enderror
                        </div>
                        <button type="submit" class="mt-4 w-full bg-gray-900 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded-xl transition">
                            Kirim Bukti Transfer
                        </button>
                    </form>
                </div>
            </div>
        @endif

        <!-- INFORMASI DETAIL PAKET -->
        <div class="p-6 sm:p-8 bg-white">
            <h3 class="font-extrabold text-gray-900 text-lg mb-6 border-b border-gray-100 pb-3">Detail Pembelian</h3>
            
            <div class="space-y-4">
                <div class="flex justify-between items-center border-b border-gray-50 pb-4">
                    <span class="text-gray-500 text-sm">Pembeli (Mitra)</span>
                    <span class="font-bold text-gray-900 text-sm text-right">{{ $transaction->user->name }}</span>
                </div>
                <div class="flex justify-between items-center border-b border-gray-50 pb-4">
                    <span class="text-gray-500 text-sm">Paket Dipilih</span>
                    <span class="font-bold text-gray-900 text-sm text-right">{{ $transaction->package_name }}</span>
                </div>
                <div class="flex justify-between items-center border-b border-gray-50 pb-4">
                    <span class="text-gray-500 text-sm">Kuota Didapat</span>
                    <span class="font-bold text-gray-900 text-sm text-right">+{{ $transaction->quota_added }} Slot Properti</span>
                </div>
                <div class="flex justify-between items-center border-b border-gray-50 pb-4">
                    <span class="text-gray-500 text-sm">Tanggal Transaksi</span>
                    <span class="font-bold text-gray-900 text-sm text-right">{{ $transaction->created_at->translatedFormat('d F Y, H:i') }}</span>
                </div>
            </div>

            <!-- JIKA SUDAH UPLOAD BUKTI -->
            @if($transaction->payment_proof)
                <div class="mt-8 pt-6 border-t border-gray-100 text-center">
                    <p class="text-xs font-bold text-gray-500 mb-3 uppercase tracking-wider">Bukti Transfer Anda:</p>
                    <a href="{{ asset('storage/' . $transaction->payment_proof) }}" data-fancybox class="inline-block rounded-xl border border-gray-200 overflow-hidden shadow-sm hover:border-amber-400 transition">
                        <img src="{{ asset('storage/' . $transaction->payment_proof) }}" class="h-32 w-auto object-cover" alt="Bukti Transfer">
                    </a>
                </div>
            @endif

            <div class="pt-8 mt-8 text-center">
                <a href="/admin/quota-transactions" class="text-gray-500 hover:text-gray-900 font-bold text-sm transition flex items-center justify-center gap-2">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
    Kembali ke Riwayat Transaksi
</a>
            </div>
        </div>

    </div>
</div>
@endsection