@extends('layouts.main')

@section('content')
<div class="container py-5 text-center">
    <h3>Complete Your Payment</h3>
    <button id="rzp-button" class="btn btn-success mt-4">Pay ₹{{ $amount }}</button>
</div>
@php
    $user = Auth::user();
@endphp

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    var options = {
        "key": "{{ $razorpayKey }}", // from controller or config
        "amount": "{{ $order['amount'] }}",
        "currency": "INR",
        "name": "{{ config('app.name') }}",
        "description": "{{$description}}",
        "image": "{{ $nav_site_logo }}",
        "order_id": "{{ $order['id'] }}", // Razorpay Order ID
        "handler": function(response) {
            // Send the payment response to backend for verification
            fetch("/{{$page}}/topup/success", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify(response)
                })
                .then(res => res.json())
                .then(data => {
                    // console.log(data)
                    if (data.status === 'success') {
                        window.location.href = "{{ route($page.'.thankyou') }}"; // ✅ success page
                    } else {
                        window.location.href = "{{ route($page.'.failed') }}"; // ❌ failed page
                    }
                });
        },
        "modal": {
            "ondismiss": function() {
                window.location.href = "{{ route($page.'.paymentCancel') }}";
            }
        },
        "prefill": {
            "name": "{{ $user->name }}",
            "email": "{{ $user->email }}",
            "contact": "{{ $user->mobile }}" // ✅ use DB value here
        },
        "theme": {
            "color": "#0d6efd"
        }
    };

    var rzp = new Razorpay(options);
    rzp.open();

    document.getElementById('rzp-button').onclick = function(e){
        rzp.open();
        e.preventDefault();
    };
</script>

@endsection