@extends('layouts.admin')

@section('title', 'Checkout - ' . $plan->name)

@section('content')
    <div class="min-h-[80vh] flex items-center justify-center p-6">
        <div class="premium-card rounded-[3rem] p-12 w-full max-w-4xl grid md:grid-cols-2 gap-12">
            <!-- Details Column -->
            <div class="space-y-8">
                <div>
                    <h1 class="text-4xl font-black text-white tracking-tighter mb-2">Checkout</h1>
                    <p class="text-white/40">Lengkapi data untuk membuat akun admin anda.</p>
                </div>

                <div class="p-8 rounded-[2rem] bg-indigo-600/10 border border-indigo-500/20">
                    <h2 class="text-xs font-black text-indigo-400 uppercase tracking-widest mb-4">Ringkasan Paket</h2>
                    <div class="flex justify-between items-end">
                        <div>
                            <p class="text-2xl font-bold text-white">{{ $plan->name }}</p>
                            <p class="text-sm text-white/40">{{ $plan->duration_days }} Hari Akses Penuh</p>
                        </div>
                        <p class="text-3xl font-black text-indigo-500">Rp {{ number_format($plan->price) }}</p>
                    </div>
                </div>

                <ul class="space-y-4">
                    <li class="flex items-center gap-3 text-white/60 text-sm">
                        <i class="fas fa-check-circle text-indigo-500"></i>
                        Akses {{ $plan->file_limit ?: 'Unlimited' }} Upload File
                    </li>
                    <li class="flex items-center gap-3 text-white/60 text-sm">
                        <i class="fas fa-check-circle text-indigo-500"></i>
                        Penyimpanan {{ $plan->storage_limit_mb ?: 'Unlimited' }} MB
                    </li>
                    <li class="flex items-center gap-3 text-white/60 text-sm">
                        <i class="fas fa-check-circle text-indigo-500"></i>
                        Integrasi Bot Telegram Custom
                    </li>
                </ul>
            </div>

            <!-- Form Column -->
            <div>
                <form id="payment-form" class="space-y-6">
                    @csrf
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-white/20 uppercase tracking-[0.2em] ml-4">Nama
                            Lengkap</label>
                        <input type="text" id="name" name="name" required
                            class="w-full bg-white/5 border border-white/10 rounded-2xl p-4 text-white placeholder-white/20 focus:outline-none focus:border-indigo-500 transition-all font-medium"
                            placeholder="Contoh: Budi Santoso">
                    </div>

                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-white/20 uppercase tracking-[0.2em] ml-4">Email
                            Aktif</label>
                        <input type="email" id="email" name="email" required
                            class="w-full bg-white/5 border border-white/10 rounded-2xl p-4 text-white placeholder-white/20 focus:outline-none focus:border-indigo-500 transition-all font-medium"
                            placeholder="email@anda.com">
                    </div>

                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-white/20 uppercase tracking-[0.2em] ml-4">Password
                            Login</label>
                        <input type="password" id="password" name="password" required
                            class="w-full bg-white/5 border border-white/10 rounded-2xl p-4 text-white placeholder-white/20 focus:outline-none focus:border-indigo-500 transition-all font-medium"
                            placeholder="••••••••">
                    </div>

                    <p class="text-[10px] text-white/30 italic px-4">
                        * Akun akan langsung aktif setelah pembayaran berhasil diverifikasi oleh sistem.
                    </p>

                    <button type="submit" id="pay-button"
                        class="w-full py-5 bg-indigo-600 hover:bg-indigo-500 rounded-2xl text-white font-black text-lg transition-all active:scale-95 shadow-lg shadow-indigo-600/20 flex items-center justify-center gap-3">
                        Bayar Sekarang <i class="fas fa-arrow-right opacity-50"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Midtrans Snap Script -->
    @php
        $midtransMode = \App\Models\SiteSetting::where('key', 'midtrans_mode')->first()?->value ?? 'sandbox';
        $snapUrl = ($midtransMode === 'production') ? 'https://app.midtrans.com/snap/snap.js' : 'https://app.sandbox.midtrans.com/snap/snap.js';
    @endphp
    <script src="{{ $snapUrl }}" data-client-key="{{ $clientKey }}"></script>
    <script>
        const form = document.getElementById('payment-form');
        const payButton = document.getElementById('pay-button');

        form.addEventListener('submit', async (e) => {
            e.preventDefault();

            payButton.disabled = true;
            payButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';

            const formData = new FormData(form);

            try {
                const response = await fetch("{{ route('pay.process', $plan->id) }}", {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        'Accept': 'application/json'
                    }
                });

                const data = await response.json();

                if (data.snap_token) {
                    window.snap.pay(data.snap_token, {
                        onSuccess: function (result) {
                            window.location.href = "{{ route('login') }}?success=1";
                        },
                        onPending: function (result) {
                            alert("Menunggu pembayaran anda!");
                        },
                        onError: function (result) {
                            alert("Pembayaran gagal!");
                            payButton.disabled = false;
                            payButton.innerText = 'Bayar Sekarang';
                        },
                        onClose: function () {
                            alert('Anda menutup popup pembayaran sebelum selesai.');
                            payButton.disabled = false;
                            payButton.innerText = 'Bayar Sekarang';
                        }
                    });
                } else {
                    let errorMessage = "Terjadi kesalahan.";
                    if (data.error) {
                        errorMessage = data.error;
                    } else if (data.errors) {
                        // Handle Laravel validation errors
                        errorMessage = Object.values(data.errors).flat().join("\n");
                    } else if (data.message) {
                        errorMessage = data.message;
                    }

                    alert(errorMessage);
                    payButton.disabled = false;
                    payButton.innerText = 'Bayar Sekarang';
                }
            } catch (err) {
                console.error(err);
                alert("Terjadi kesalahan koneksi atau server.");
                payButton.disabled = false;
                payButton.innerText = 'Bayar Sekarang';
            }
        });
    </script>
@endsection