@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 class="card shadow-lg border-0" style="border-radius: 1rem;">
      <div class="card-body text-center p-4">
        <div class="mb-3">
          <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">Loading...</span>
          </div>
        </div>
        <h4 class="fw-bold text-primary">Payment in Progress</h4>
        <p class="text-muted mb-4">
          I am starting payment... Please wait while your payment is being processed.
        </p>
        <div class="progress" style="height: 8px; border-radius: 4px;">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 65%;"></div>
        </div>
      </div>
    </div>
  </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