@extends('layouts.app')

@section('title', 'Pembayaran')
@section('body-class', 'pt-24 bg-gray-50')

@section('content')
<div class="max-w-xl mx-auto py-16 px-4">
    <div class="text-center mb-10">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Konfirmasi Pembayaran</h1>
        <p class="text-gray-500">Tagihan ID: <span class="font-mono text-sm text-brand-maroon">{{ $transaction->order_id }}</span></p>
    </div>

    <div class="bg-white p-8 rounded-xl shadow-xl border border-gray-200">
        <h2 class="text-xl font-bold text-gray-800 mb-6 border-b pb-3">Ringkasan Tagihan</h2>
        
        <div class="space-y-3 mb-6">
            <div class="flex justify-between text-gray-700">
                <span>Layanan</span>
                <span class="font-semibold">{{ $transaction->service_name }}</span>
            </div>
            <div class="flex justify-between pt-3 border-t border-dashed">
                <span class="font-bold text-lg text-brand-maroon">TOTAL TAGIHAN</span>
                <span class="font-bold text-lg text-brand-maroon">Rp {{ number_format($transaction->amount, 0, ',', '.') }}</span>
            </div>
        </div>

        <button id="pay-button" class="w-full bg-[#AF1740] hover:bg-[#921233] text-white font-bold py-3 rounded-xl transition shadow-lg transform hover:-translate-y-1 flex justify-center items-center gap-2">
            <i class="fa-solid fa-wallet"></i> Bayar Sekarang
        </button>

        <p class="text-xs text-gray-500 mt-4 text-center">Anda akan diarahkan ke halaman pembayaran Midtrans.</p>
        
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript" 
        src="https://app.sandbox.midtrans.com/snap/snap.js" 
        data-client-key="{{ env('MIDTRANS_CLIENT_KEY') }}">
</script>

<script type="text/javascript">
    document.getElementById('pay-button').onclick = function(){
        // Memanggil pop-up Midtrans dengan Snap Token
        snap.pay('{{ $transaction->snap_token }}', {
            onSuccess: function(result){
                alert("Pembayaran berhasil! Status akan diupdate di dashboard.");
                window.location.href = "{{ route('user.dashboard') }}";
            },
            onPending: function(result){
                alert("Menunggu pembayaran!");
                window.location.href = "{{ route('user.dashboard') }}";
            },
            onError: function(result){
                alert("Pembayaran gagal!");
                window.location.href = "{{ route('user.dashboard') }}";
            },
            onClose: function(){
                console.log('Pop-up ditutup.');
            }
        });
    };
</script>
@endsection