@extends('layouts.dash')
@section('title', 'Redirecting to Secure Payment')
@section('content')
<div class="card" style="max-width:640px;margin:40px auto;text-align:center;padding:36px">
  <div style="width:72px;height:72px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px"><i class="fa-solid fa-arrow-right-arrow-left fa-spin"></i></div>
  <h1 style="font-size:24px;font-weight:900">Redirecting to Secure Payment…</h1>
  <p class="text-gray mt" style="font-size:15px">You are being redirected to the secure payment gateway. Your order <b>#{{ $order->id }}</b> for <b>{{ optional($order->package)->name ?? ($order->order_kind === 'wallet_topup' ? 'Wallet top-up' : 'Custom credits') }}</b> ({{ taka($order->amount) }}) is waiting for payment.</p>

  @if($isSandbox)
  <div class="alert alert-warning" style="text-align:left"><i class="fa-solid fa-flask"></i><div><b>TEST MODE (Sandbox)</b> — No real money will be taken. Use a test card / bKash test number if prompted.</div></div>
  @else
  <div class="alert alert-info" style="text-align:left"><i class="fa-solid fa-shield-halved"></i><div><b>Secure Payment</b> — Complete payment using the available methods. Your wallet or credits are updated after verification.</div></div>
  @endif

  <div class="flex center gap mt" style="justify-content:center">
    <div class="spinner" style="width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite"></div>
    <span class="text-sm text-gray">Please wait…</span>
  </div>

  <p class="text-sm text-gray mt">If you are not redirected in 3 seconds, click below:</p>
  <a href="{{ $paymentUrl }}" class="btn btn-primary btn-lg btn-block mt" id="payBtn"><i class="fa-solid fa-credit-card"></i>Continue to Payment</a>
  <div class="flex gap mt" style="justify-content:center">
    <a class="btn btn-outline btn-sm" href="{{ route('user.orders') }}"><i class="fa-solid fa-list"></i>View Orders</a>
    <a class="btn btn-ghost btn-sm" href="{{ route('user.buy', ['service'=>$order->service_id]) }}"><i class="fa-solid fa-xmark"></i>Cancel</a>
  </div>

  <div class="card mt" style="background:var(--bg);text-align:left;padding:16px">
    <div class="card-title" style="font-size:15px"><i class="fa-solid fa-circle-info"></i>What happens next?</div>
    <ul style="font-size:13px;color:var(--gray);margin:8px 0 0 18px;line-height:1.8">
      <li>Complete payment on the secure gateway.</li>
      <li>You will be returned to <b>Payment Success</b> page.</li>
      <li>We verify the payment and update your wallet or credits automatically.</li>
      <li>You will get an invoice PDF via email & can download it.</li>
    </ul>
  </div>
</div>
@push('scripts')
<script>
setTimeout(function(){ window.location.href = @json($paymentUrl); }, 1200);
document.getElementById('payBtn').addEventListener('click', function(){ this.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Redirecting...'; });
</script>
<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
@endpush
@endsection