@extends('layouts.app')

@section('title', 'Pembayaran Undangan - Janoer Koening')

@push('scripts')
@if(!empty($snapEnabled) && !empty($snapJsUrl))
    <script type="text/javascript"
            src="{{ $snapJsUrl }}"
            @if(!empty($snapClientKey)) data-client-key="{{ $snapClientKey }}" @endif></script>
@endif

@if(!empty($order->snap_token))
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        const payButton = document.getElementById('pay-button');
        const payButtonText = document.getElementById('pay-button-text');
        let snapTriggered = false;

        function triggerPayment() {
            if (typeof snap === 'undefined') {
                console.warn('Midtrans Snap JS belum selesai dimuat.');
                @if(!empty($snapRedirectUrl))
                    window.location.href = "{{ $snapRedirectUrl }}";
                @else
                    alert('Gagal memuat modul pembayaran. Silakan refresh halaman.');
                @endif
                return;
            }

            if (payButtonText) {
                payButtonText.textContent = 'Membuka Pembayaran...';
            }

            snap.pay('{{ $order->snap_token }}', {
                onSuccess: function (result) {
                    window.location.href = "{{ route('client.dashboard') }}?payment=success&order={{ $order->order_code }}";
                },
                onPending: function (result) {
                    window.location.reload();
                },
                onError: function (result) {
                    alert('Pembayaran gagal atau dibatalkan.');
                    if (payButtonText) {
                        payButtonText.textContent = 'Buka Jendela Pembayaran';
                    }
                },
                onClose: function () {
                    if (payButtonText) {
                        payButtonText.textContent = 'Buka Jendela Pembayaran';
                    }
                }
            });
        }

        if (payButton) {
            payButton.addEventListener('click', function () {
                triggerPayment();
            });
        }

        // Buka popup Snap otomatis setelah halaman siap
        setTimeout(function () {
            if (!snapTriggered && typeof snap !== 'undefined') {
                snapTriggered = true;
                triggerPayment();
            }
        }, 600);
    });
</script>
@endif
@endpush

@section('content')
<div class="py-16 bg-[#FAF7F0] min-h-[80vh] flex items-center">
    <div class="max-w-xl mx-auto px-4 sm:px-6 w-full">

        <div class="bg-white p-6 sm:p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-xl text-center">
            
            <!-- Status Badge -->
            <div class="inline-flex items-center gap-2 px-3 py-1 bg-amber-50 text-amber-700 border border-amber-200 rounded-full text-xs font-semibold mb-4">
                <span class="w-2 h-2 rounded-full bg-amber-500 animate-ping"></span>
                Menunggu Pembayaran
            </div>

            <h1 class="font-heading text-3xl font-bold text-charcoal">Pembayaran Pesanan</h1>
            <p class="text-xs text-charcoal/70 mt-1">Kode Transaksi: <strong class="font-mono text-deepsage">{{ $order->order_code }}</strong></p>

            <!-- Order Summary Pill -->
            <div class="my-6 p-4 rounded-2xl bg-[#FAF7F0] border border-[#A8BBA6]/20 text-left flex justify-between items-center text-sm">
                <div>
                    <span class="text-xs text-charcoal/60 block">Paket &amp; Template:</span>
                    <strong class="text-charcoal font-semibold">{{ $order->package->name }} ({{ $order->template->name }})</strong>
                    @if($order->promo_code && $order->discount_amount > 0)
                        <span class="inline-block mt-1 px-2 py-0.5 bg-emerald-100 text-emerald-800 text-[10px] font-bold rounded-full">
                            Kupon: {{ $order->promo_code }} (Hemat Rp {{ number_format($order->discount_amount, 0, ',', '.') }})
                        </span>
                    @endif
                </div>
                <div class="text-right">
                    @if($order->discount_amount > 0)
                        <span class="text-xs text-charcoal/40 line-through block">Rp {{ number_format($order->original_amount, 0, ',', '.') }}</span>
                    @endif
                    <span class="text-xs text-charcoal/60 block">Total Tagihan:</span>
                    <strong class="text-lg font-bold text-deepsage">Rp {{ number_format($order->total_amount, 0, ',', '.') }}</strong>
                </div>
            </div>

            <!-- AUTOMATED PAYMENT GATEWAY (MIDTRANS / PG-HUB SNAP) -->
            @if(!empty($order->snap_token))
                <div class="py-6 px-5 bg-gradient-to-b from-emerald-50/70 to-emerald-50/20 rounded-2xl border border-emerald-200/70 mb-6 text-center space-y-4">
                    <div class="w-12 h-12 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center mx-auto shadow-sm">
                        <i data-lucide="shield-check" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="font-heading text-xl font-bold text-charcoal">
                            Pembayaran Online Otomatis
                        </h3>
                        <p class="text-xs text-charcoal/70 max-w-sm mx-auto mt-1 leading-relaxed">
                            Pilih metode pembayaran favorit Anda di jendela popup. Transaksi diverifikasi secara otomatis dan instan.
                        </p>
                    </div>

                    <!-- Payment Channels Supported Icons -->
                    <div class="flex flex-wrap items-center justify-center gap-1.5 py-1 text-[11px] font-semibold text-charcoal/70">
                        <span class="px-2.5 py-1 bg-white border border-[#A8BBA6]/30 rounded-lg shadow-2xs">QRIS</span>
                        <span class="px-2.5 py-1 bg-white border border-[#A8BBA6]/30 rounded-lg shadow-2xs">GoPay</span>
                        <span class="px-2.5 py-1 bg-white border border-[#A8BBA6]/30 rounded-lg shadow-2xs">ShopeePay</span>
                        <span class="px-2.5 py-1 bg-white border border-[#A8BBA6]/30 rounded-lg shadow-2xs">BCA VA</span>
                        <span class="px-2.5 py-1 bg-white border border-[#A8BBA6]/30 rounded-lg shadow-2xs">Mandiri VA</span>
                        <span class="px-2.5 py-1 bg-white border border-[#A8BBA6]/30 rounded-lg shadow-2xs">BNI VA</span>
                        <span class="px-2.5 py-1 bg-white border border-[#A8BBA6]/30 rounded-lg shadow-2xs">BRI VA</span>
                    </div>

                    <!-- Main Pay Button -->
                    <button type="button" id="pay-button" class="w-full py-4 px-6 bg-deepsage text-ivory font-bold text-sm uppercase tracking-wider rounded-2xl hover:bg-opacity-95 shadow-xl transition transform hover:scale-[1.01] active:scale-[0.99] flex items-center justify-center gap-2 cursor-pointer">
                        <i data-lucide="credit-card" class="w-4 h-4 text-brandgold"></i>
                        <span id="pay-button-text">Buka Jendela Pembayaran</span>
                    </button>

                    <!-- Direct Redirect Fallback -->
                    @if(!empty($snapRedirectUrl))
                        <div class="pt-1">
                            <a href="{{ $snapRedirectUrl }}" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-deepsage hover:text-emerald-800 font-semibold underline">
                                <span>Popup terblokir? Bayar di tab baru</span>
                                <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
                            </a>
                        </div>
                    @endif

                    <div class="flex items-center justify-center gap-2 text-[11px] text-charcoal/50 pt-2 border-t border-emerald-100">
                        <i data-lucide="lock" class="w-3.5 h-3.5 text-emerald-600"></i>
                        <span>Enkripsi 256-bit SSL • Verifikasi Instan 24/7</span>
                    </div>
                </div>
            @else
                <!-- Fallback if token failed to generate -->
                <div class="py-8 px-6 bg-amber-50/70 rounded-2xl border border-amber-200 mb-6 text-center space-y-3">
                    <div class="w-12 h-12 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center mx-auto">
                        <i data-lucide="alert-circle" class="w-6 h-6"></i>
                    </div>
                    <h3 class="font-heading text-lg font-bold text-charcoal">Sedang Menghubungkan ke Gateway...</h3>
                    <p class="text-xs text-charcoal/70 max-w-sm mx-auto">
                        Sistem sedang memuat token pembayaran online Anda. Silakan muat ulang halaman jika jendela pembayaran belum terbuka.
                    </p>
                    <button type="button" onclick="window.location.reload()" class="mt-2 py-2.5 px-6 bg-deepsage text-ivory text-xs font-bold uppercase rounded-full hover:bg-opacity-90 transition">
                        Muat Ulang Halaman
                    </button>
                </div>
            @endif

            <div class="flex items-center justify-center gap-4 text-xs text-charcoal/60 mt-4">
                <a href="{{ route('client.dashboard') }}" class="hover:text-deepsage transition flex items-center gap-1">
                    <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
                    Kembali ke Dashboard Saya
                </a>
            </div>

            <!-- Simulator for testing without waiting real webhook (Local/Testing/Admin only) -->
            @if(app()->environment('local', 'testing') || (auth()->check() && auth()->user()->isAdmin()))
                <div class="pt-6 border-t border-[#A8BBA6]/20 mt-6 text-left">
                    <p class="text-[11px] text-gray-400 mb-2 font-mono">Development Tools:</p>
                    <form action="{{ route('checkout.simulatePay', $order->order_code) }}" method="POST">
                        @csrf
                        <button type="submit" class="w-full py-2.5 px-4 bg-gray-100 hover:bg-gray-200 text-charcoal/70 font-semibold text-xs rounded-xl transition flex items-center justify-center gap-2 border border-gray-300">
                            <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
                            Simulasi Pembayaran Berhasil (Developer Only)
                        </button>
                    </form>
                </div>
            @endif

        </div>

    </div>
</div>
@endsection