@extends('layouts.app')
@section('title', 'Complete Direct Payment')
@section('content')
<div class="wrap page" style="max-width:760px">
  <div class="page-head"><div><h1>Complete Payment</h1><p>Send the exact payable amount, then submit the provider TrxID.</p></div><span class="badge badge-{{ $isSandbox ? 'warning' : 'success' }}">{{ $isSandbox ? 'SANDBOX' : 'LIVE' }}</span></div>
  <div class="card direct-payment-card">
    <div class="alert alert-info"><i class="fa-solid fa-shield-halved"></i><div>Use the payment number and exact <b>Payable Amount</b> shown below. The gateway verifies the TrxID and amount before adding credits or wallet balance.</div></div>
    <div class="direct-payment-grid">
      <div><span class="text-gray text-sm">Payment Number</span><strong class="mono copy-value">{{ $payment['payment_number'] }}</strong></div>
      <div><span class="text-gray text-sm">Payable Amount</span><strong class="payable-amount">{{ taka($payment['pay_amount']) }}</strong></div>
      <div><span class="text-gray text-sm">Payment ID</span><strong class="mono copy-value">{{ $payment['payment_id'] }}</strong></div>
      @if(!empty($payment['expires_at']))<div><span class="text-gray text-sm">Expires</span><strong>{{ $payment['expires_at'] }}</strong></div>@endif
    </div>
    <hr style="border:none;border-top:1px solid var(--border);margin:20px 0">
    <form method="POST" action="{{ route('payments.nagorikpay.submit', $order) }}">
      @csrf
      <div class="form-group"><label>Provider Transaction ID / TrxID <span class="req">*</span></label><input class="form-control mono" name="transaction_id" required maxlength="120" placeholder="Enter the TrxID from bKash/Nagad/Rocket/etc."></div>
      <button class="btn btn-primary btn-block btn-lg" type="submit"><i class="fa-solid fa-paper-plane"></i>Submit TrxID for Verification</button>
    </form>
    <p class="text-gray text-sm mt" style="text-align:center">Payment ID: <span class="mono">{{ $payment['payment_id'] }}</span> • Order #{{ $order->id }}</p>
  </div>
</div>
@endsection
@push('styles')
<style>
.direct-payment-card{max-width:700px;margin:auto;border-radius:20px}.direct-payment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.direct-payment-grid>div{padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--bg);display:flex;flex-direction:column;gap:6px}.direct-payment-grid strong{font-size:16px}.direct-payment-grid .payable-amount{font-size:24px;color:var(--primary)}.copy-value{word-break:break-all}@media(max-width:560px){.direct-payment-grid{grid-template-columns:1fr}.direct-payment-grid .payable-amount{font-size:22px}}
</style>
@endpush