@extends('layouts.public')

@section('content')
@php
/** @var array $order @var string $clientSecret @var string $publicKey @var float $amount
 *  @var string $confirmUrl @var string $callbackUrl @var string $cancelUrl @var string $trackUrl */
@endphp
<div class="qm-page-head">
    <div class="container-fluid">
        <h1 class="qm-page-title">{{ t_raw('payment_page.title') }}</h1>
        <nav class="breadcrumb" aria-label="{{ t_raw('common.breadcrumb_aria') }}"><a href="{{ route('home') }}">{{ t_raw('common.home') }}</a><span class="mx-2" aria-hidden="true">/</span><span class="active">{{ t_raw('payment_page.crumb') }}</span></nav>
    </div>
</div>
@php /* The page's messages belong UNDER its title band, inside the page the reader is
         looking at — not floating above it. getFlashes() consumes, so the layout's own
         call further out finds nothing and does not draw it twice. */
@endphp
<div class="container-fluid">@partial('flash')</div>

<section class="qm-section">
    <div class="container-fluid">
        <div class="row g-4 justify-content-center">
            <div class="col-lg-6">
                <div class="qm-checkout-section qm-pay-shell">
                    <div class="qm-pay-head">
                        <span class="qm-pay-brand"><i class="fab fa-cc-stripe" aria-hidden="true"></i> {{ t_raw('payment_page.card_payment_label') }}</span>
                        <span class="qm-pay-amount">{{ money($amount) }}</span>
                    </div>
                    <p class="text-muted qm-hint mb-3">{!! t_raw('payment_page.stripe_order_note', [':number' => '<strong>' . e($order['order_number']) . '</strong>']) !!}</p>
                    <form id="qm-pay-form" novalidate>
                        <div id="qm-payment-element" class="qm-pay-element qm-co-stripe-el"></div>
                        <div id="qm-pay-error" class="alert alert-danger mt-3" role="alert" hidden><i class="fas fa-times-circle" aria-hidden="true"></i> <span></span></div>
                        <button type="submit" id="qm-pay-btn" class="qm-btn w-100 mt-3">{{ t_raw('payment_page.pay_amount_btn', [':amount' => money($amount)]) }}</button>
                    </form>
                    <a href="{{ $cancelUrl }}" class="qm-pay-cancel">{{ t_raw('payment_page.cancel_pay_later') }}</a>
                </div>
            </div>
        </div>
    </div>
</section>
<script id="qm-pay-config" type="application/json">{!! json_encode([
    'publicKey'    => $publicKey,
    'clientSecret' => $clientSecret,
    // The reference this page's session was created with. Posted back on confirm so the server
    // captures the intent the customer actually approved, rather than whatever orders.payment_ref
    // happens to hold by then — see the note in pay-stripe.js.
    'ref'          => $ref,
    'confirmUrl'   => $confirmUrl,
    'callbackUrl'  => $callbackUrl,
    'cancelUrl'    => $cancelUrl,
    'trackUrl'     => $trackUrl,
], JSON_UNESCAPED_SLASHES | JSON_HEX_TAG) !!}</script>
<script src="https://js.stripe.com/v3/"></script>
@endsection