@extends('layouts.public')

@section('content')
@php
/** @var array $order @var string $publicKey @var string $currency @var float $amount @var string $ref
 *  @var string $confirmUrl @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-paypal" aria-hidden="true"></i> PayPal</span>
                        <span class="qm-pay-amount">{{ money($amount) }}</span>
                    </div>
                    <p class="text-muted qm-hint mb-3">{!! t_raw('payment_page.paypal_order_note', [':number' => '<strong>' . e($order['order_number']) . '</strong>']) !!}</p>
                    <div id="qm-pay-error" class="alert alert-danger mb-3" role="alert" hidden><i class="fas fa-times-circle" aria-hidden="true"></i> <span></span></div>
                    <div id="qm-paypal-buttons"></div>
                    <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([
    '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>
@endsection