@extends('layouts.main')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-lg">
                <div class="card-header bg-gradient-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i>Pembayaran via Midtrans
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Informasi:</strong> Anda akan diarahkan ke halaman pembayaran Midtrans. 
                        Setelah pembayaran selesai, pendaftaran Anda akan otomatis terkonfirmasi.
                    </div>

                    <div class="mb-4">
                        <h5>Detail Pembayaran</h5>
                        <table class="table table-borderless">
                            <tr>
                                <td width="40%"><strong>Kegiatan:</strong></td>
                                <td>{{ $activity->name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Jumlah:</strong></td>
                                <td><strong class="text-primary">Rp {{ number_format($payment->amount, 0, ',', '.') }}</strong></td>
                            </tr>
                            <tr>
                                <td><strong>Status:</strong></td>
                                <td>
                                    <span class="badge bg-warning">
                                        <i class="fas fa-clock me-1"></i>Menunggu Pembayaran
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div id="snap-container" class="text-center">
                        <button id="pay-button" class="btn btn-primary btn-lg">
                            <i class="fas fa-credit-card me-2"></i>Lanjutkan ke Pembayaran
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Midtrans Snap.js -->
@if(config('services.midtrans.is_production'))
<script src="https://app.midtrans.com/snap/snap.js" 
        data-client-key="{{ config('services.midtrans.client_key') }}"></script>
@else
<script src="https://app.sandbox.midtrans.com/snap/snap.js" 
        data-client-key="{{ config('services.midtrans.client_key') }}"></script>
@endif

<script type="text/javascript">
    let snapInvoked = false;
    const payBtn = document.getElementById('pay-button');
    // Hanya tampilkan Snap saat tombol diklik (tidak auto-invoke di halaman load)

    payBtn.onclick = function(){
        if (snapInvoked) { return; }
        if (!window.snap || typeof snap.pay !== 'function') {
            alert('Gagal memuat Midtrans. Mohon refresh halaman dan coba lagi.');
            snapInvoked = false;
            return;
        }
        snapInvoked = true;
        // Trigger Snap popup
        snap.pay('{{ $snapToken }}', {
            onSuccess: function(result){
                
                // Redirect to finish page and back to activity.show
                window.location.href = '{{ route('midtrans.payment.finish') }}?order_id=' + result.order_id + '&activity_id={{ $activity->id }}';
            },
            onPending: function(result){
                
                // Redirect to finish page and back to activity.show
                window.location.href = '{{ route('midtrans.payment.finish') }}?order_id=' + result.order_id + '&activity_id={{ $activity->id }}';
            },
            onError: function(result){
                
                // Redirect to error page and back to activity.show
                window.location.href = '{{ route('midtrans.payment.error') }}?order_id=' + result.order_id + '&activity_id={{ $activity->id }}';
            },
            onClose: function(){
                
                // Redirect to unfinish page and back to activity.show
                window.location.href = '{{ route('midtrans.payment.unfinish') }}?order_id={{ $payment->midtrans_transaction_id }}&activity_id={{ $activity->id }}';
            }
        });
    };
</script>
@endsection