@extends('customer.layouts.app')

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

@section('content')
<section class="module-card" style="max-width:620px;margin:40px auto;text-align:center">
    <i class="fa-solid fa-lock" style="font-size:34px;color:#1f8a70"></i>
    <h1>Opening secure payment</h1>
    <p class="muted">Invoice {{ $payment->invoice->invoice_no }} · ₹{{ number_format($payment->amount, 2) }}</p>
    <button class="primary-link" id="cashfree-pay" type="button">Continue to Cashfree</button>
    <p id="payment-message" class="muted" style="margin-top:15px"></p>
</section>
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById('cashfree-pay');
    const message = document.getElementById('payment-message');
    const cashfree = Cashfree({ mode: @json(config('services.cashfree.environment')) });
    const openCheckout = function () {
        button.disabled = true;
        message.textContent = 'Redirecting to secure checkout...';
        cashfree.checkout({ paymentSessionId: @json($payment->payment_session_id), redirectTarget: '_self' })
            .then(function (result) {
                if (result.error) {
                    message.textContent = result.error.message || 'Unable to open checkout.';
                    button.disabled = false;
                }
            });
    };
    button.addEventListener('click', openCheckout);
    openCheckout();
});
</script>
@endsection