@extends('layouts.site')

@section('title', 'Secure Payment')

@section('content')
    <section class="container-site py-16">
        <div class="max-w-2xl mx-auto">
            <div class="rounded-3xl border border-slate-200 bg-white shadow-sm p-8">
                <h1 class="text-2xl font-semibold text-slate-900">Secure Payment</h1>

                <p class="mt-2 text-slate-600">
                    Please wait while we redirect you to the secure Seylan Bank payment page.
                </p>

                <div class="mt-6 rounded-2xl bg-slate-50 border border-slate-200 p-4 space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-slate-500">Booking</span>
                        <span class="font-medium">#{{ $booking->id }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-500">Package</span>
                        <span class="font-medium">{{ $package->name }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-500">Advance Due</span>
                        <span class="font-semibold">{{ $payment->currency }}
                            {{ number_format((float) $payment->amount, 2) }}</span>
                    </div>
                </div>

                <div class="mt-6 text-sm text-slate-500">
                    Do not close this page while payment is loading.
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ $checkoutJsUrl }}" data-error="paymentErrorCallback" data-cancel="paymentCancelCallback"></script>

    <script>
        function paymentErrorCallback(error) {
            window.location.href = "{{ route('payments.mpgs.fail') }}";
        }

        function paymentCancelCallback() {
            window.location.href = "{{ route('payments.mpgs.fail') }}";
        }

        document.addEventListener('DOMContentLoaded', function () {
            Checkout.configure({
                merchant: "{{ $merchantId }}",
                session: {
                    id: "{{ $payment->gateway_session_id }}"
                },
                order: {
                    id: "{{ $payment->merchant_order_id }}",
                    amount: "{{ number_format((float) $payment->amount, 2, '.', '') }}",
                    currency: "{{ $payment->currency }}",
                    description: "Tour package advance payment"
                },
                interaction: {
                    merchant: {
                        name: "Visit Sri Lanka 360"
                    },
                    displayControl: {
                        billingAddress: 'HIDE',
                        customerEmail: 'HIDE'
                    }
                }
            });

            Checkout.showPaymentPage();
        });
    </script>
@endpush