@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor plan-renewal payment page. A self-contained mirror of the customer
 * pay-stripe.php / pay-paypal.php views, rendered inside the dashboard layout so it
 * reuses assets/js/pay-stripe.js / pay-paypal.js + assets/css/pay.css UNCHANGED.
 *
 * It branches on $provider and emits the SAME #qm-pay-config JSON keys + DOM ids the
 * shared pay JS expects (#qm-payment-element / #qm-paypal-buttons, #qm-pay-form,
 * #qm-pay-error, #qm-pay-btn). The provider SDK <script> is loaded inline here and
 * only ever reaches the browser when the gateway is enabled + keyed.
 *
 * @var array $order ['order_number' => 'Plan renewal — <plan>']
 * @var string $provider 'stripe' | 'paypal'
 * @var string $ref provider session/order reference
 * @var string $clientSecret Stripe client secret (Stripe only)
 * @var string $publicKey Stripe publishable key / PayPal client id
 * @var string $currency ISO currency code
 * @var float $amount amount to charge
 * @var string $confirmUrl @var string $callbackUrl @var string $cancelUrl @var string $trackUrl
 */
@endphp
<div class="qm-pay-card">
    <div class="qm-pay-head">
        @if ($provider === 'paypal')
            <span class="qm-pay-brand"><i class="fab fa-paypal" aria-hidden="true"></i> PayPal</span>
        @else
            <span class="qm-pay-brand"><i class="fab fa-cc-stripe" aria-hidden="true"></i> {!! t('checkout.card') !!}</span>
        @endif
        <span class="qm-pay-amount">{!! money($amount) !!}</span>
    </div>
    <p class="text-muted qm-hint mb-3"><strong>{{ $order['order_number'] }}</strong>.
        @if ($provider === 'paypal')
            {!! t('vendor.billing.paypal_approve_note') !!}
        @else
            {!! t('vendor.billing.stripe_secure_note') !!}
        @endif
    </p>

    @if ($provider === 'paypal')
        <div id="qm-pay-error" class="qm-min-warn mb-3" role="alert" hidden><i class="fas fa-exclamation-circle" aria-hidden="true"></i> <span></span></div>
        <div id="qm-paypal-buttons"></div>
    @else
        <form id="qm-pay-form" novalidate>
            <div id="qm-payment-element" class="qm-pay-element"></div>
            <div id="qm-pay-error" class="qm-min-warn mt-3" role="alert" hidden><i class="fas fa-exclamation-circle" aria-hidden="true"></i> <span></span></div>
            <button type="submit" id="qm-pay-btn" class="qm-btn w-100 mt-3">{!! t('vendor.billing.pay_amount_btn', [':amount' => money($amount)]) !!}</button>
        </form>
    @endif

    <a href="{{ $cancelUrl }}" class="qm-pay-cancel">{!! t('vendor.billing.cancel_back_link') !!}</a>
</div>
@if ($provider === 'paypal')
<script id="qm-pay-config" type="application/json">{!! json_encode([
    'ref' => $ref,
    'confirmUrl' => $confirmUrl,
    'cancelUrl' => $cancelUrl,
    'trackUrl' => $trackUrl,
], JSON_UNESCAPED_SLASHES | JSON_HEX_TAG) !!}</script>
<script src="https://www.paypal.com/sdk/js?client-id={!! rawurlencode($publicKey) !!}&amp;currency={!! rawurlencode($currency) !!}"></script>
@else
<script id="qm-pay-config" type="application/json">{!! json_encode([
    'publicKey' => $publicKey,
    'clientSecret' => $clientSecret,
    'confirmUrl' => $confirmUrl,
    'callbackUrl' => $callbackUrl,
    'cancelUrl' => $cancelUrl,
    'trackUrl' => $trackUrl,
], JSON_UNESCAPED_SLASHES | JSON_HEX_TAG) !!}</script>
<script src="https://js.stripe.com/v3/"></script>
@endif
@endsection