@extends('layouts.auth')

@section('content')
@php
/**
 * The approval step that stands between the signup form and an account existing.
 *
 * Public, because there is nobody to authenticate yet: the applicant's details are held in the
 * session and nothing has been written. Approving the agreement here is what causes the user, the
 * restaurant and the paid term to be created — abandoning it leaves no trace.
 *
 * Markup mirrors vendor/pay.php and feeds the SAME assets/js/pay-<provider>.js the rest of the
 * product uses, so there is one payment client rather than a second one for this page. The provider
 * SDK only ever reaches the browser when that gateway is enabled and keyed.
 *
 * @var array  $plan       the plan being subscribed to
 * @var string $provider   'paypal' | 'stripe'
 * @var string $planRef    the gateway's own id for this plan — the agreement is made against it
 * @var string $publicKey  PayPal client id / Stripe publishable key
 * @var string $currency   ISO currency code
 * @var float  $amount     what the plan costs per cycle
 * @var int    $trialDays  free days before the first charge (0 = none)
 * @var string $ref          the subscription the server opened, when the gateway works that way
 * @var string $clientSecret what the browser confirms it with (Stripe only)
 * @var string $confirmUrl @var string $callbackUrl @var string $cancelUrl
 */
/* WHAT THE FIGURE IS MADE OF. $amount is a GROSS — VendorSignupController hands this page
   Invoice::grossFor(), the same figure the gateway plan is published at — and this is the last
   screen before an account exists, which makes it the one place the charge has to be fully
   explained: list price and annual discount when one applies, the tax line, the total. All of
   that is partials/pay-summary.php, shared with vendor/pay.php so the two checkouts and the first
   invoice can never disagree. @var float|null $listAmount @var float $discountPct */
@endphp
<div class="qm-page-head">
    <div class="container-fluid">
        <h1>{{ t_raw('vendor.billing.pay_page_title') }}</h1>
    </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>


@php /* container-fluid, not the boxed container: the cart, the vendor checkouts and every
         other payment surface run full-width, and the boxed variant made this one page read
         narrower than the product around it. */
@endphp
<section class="qm-section">
<div class="container-fluid">
    @php /* THE 8/4 SHAPE EVERY VENDOR PAYMENT USES: how it is paid on the left; what is being
             paid — net, tax, total — on the right, beside the button that acts on it. The method
             itself was chosen back on the signup form, so the left column carries ONE tender row,
             not a list; it keeps its checked radio so the row reads exactly like a chosen row on
             the vendor checkout. ONE form wraps both columns, or the button could not submit the
             element it sits beside. */
@endphp
    <form id="qm-pay-form" novalidate>
    <div class="row g-4 qm-vpay">

        <div class="col-lg-8">
            <div class="qm-pay-card">
                <h2 class="h6 mb-3">{{ t_raw('checkout.payment_method') }}</h2>
                <div class="qm-pay-methods">
                    <div class="qm-pay-option">
                        <input type="radio" id="vpay_{{ $provider }}" name="method" value="{{ $provider }}" checked>
                        <label for="vpay_{{ $provider }}">
                            <span class="qm-pay-label">
                                @if ($provider === 'paypal')
                                    <span class="qm-pm-mark">{!! card_brand_mark('paypal', 24) !!}</span> {{ t_raw('status.payment_method.paypal') }}
                                @else
                                    <span class="qm-pm-mark"><i class="fab fa-cc-stripe" aria-hidden="true"></i></span> {{ t_raw('vendor.billing.card_stripe_label') }}
                                @endif
                            </span>
                            <span class="qm-pay-desc d-block">
                                @php /* A trial changes WHEN the first charge lands, not whether the
                                         card is taken now — where there is one, the row says so. */
@endphp
                                @if ($trialDays > 0)
                                    {{ t_raw('auth.signup_checkout_trial_note', [':days' => number_format($trialDays)]) }}
                                @elseif ($provider === 'paypal')
                                    {{ t_raw('vendor.billing.paypal_approve_note') }}
                                @else
                                    {{ t_raw('vendor.billing.stripe_secure_note') }}
                                @endif
                            </span>
                        </label>
                        @if ($provider !== 'paypal')
                        <div class="qm-vpay-widget">
                            <div id="qm-payment-element" class="qm-pay-element"></div>
                        </div>
                        @endif
                    </div>
                </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>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="qm-pay-card qm-vpay-summary">
                <h2 class="h6 mb-3">{{ t_raw('cart.summary') }}</h2>
                @partial('pay-summary', [
                    'label'       => (string) $plan['name'],
                    'amount'      => (float) $amount,
                    'listAmount'  => $listAmount ?? null,
                    'discountPct' => (float) ($discountPct ?? 0),
                ])
                @php $termCycle = (string) ($termCycle ?? '');
@endphp
                @if ($termCycle === 'yearly')
                <p class="qm-pay-term-note">{{ t_raw('vendor.billing.term_yearly_note') }}</p>
                @elseif ($termCycle === 'monthly')
                <p class="qm-pay-term-note">{{ t_raw('vendor.billing.term_monthly_note') }}</p>
                @endif

                <button type="submit" id="qm-pay-btn" class="qm-btn w-100 mt-3">{{ t_raw('vendor.billing.complete_payment_btn') }}</button>
                @if ($provider === 'paypal')
                @php /* Shown while the PayPal window is open: the only thing this page used to do
                         was grey its button out, which reads as "stuck" to someone approving in
                         another window. */
@endphp
                <p id="qm-pay-wait" class="qm-pay-wait" hidden><i class="fas fa-circle-notch fa-spin" aria-hidden="true"></i> {{ t_raw('vendor.billing.popup_waiting') }}</p>
                @endif

                @php /* Back to the FORM — nothing exists yet, so there is nothing to cancel. */
@endphp
                <div class="qm-pay-exits mt-3">
                    <a href="{{ $cancelUrl }}" class="qm-btn qm-btn-outline w-100"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('common.back') }}</a>
                </div>
            </div>
        </div>

    </div>
    </form>

    @php /* WHAT THE BUYER SEES ONCE THE GATEWAY HAS SAID YES. The confirm call answers with the
             facts of what was just created and the page shows them HERE, in place of the payment
             card — not a redirect into a dashboard with a one-line flash. The markup and its
             labels are rendered now; the scripts fill the values from the JSON and swap it in. */
@endphp
    <div id="qm-pay-thanks" class="qm-pay-thanks" hidden>
        <div class="qm-pay-card qm-pay-thanks-card">
            <div class="qm-pay-thanks-icon"><i class="fas fa-check-circle" aria-hidden="true"></i></div>
            <h2 class="qm-pay-thanks-title">{{ t_raw('auth.thanks_title') }}</h2>
            <p class="qm-pay-thanks-sub">{{ t_raw('auth.thanks_sub') }}</p>
            <dl class="qm-pay-thanks-facts">
                <div data-th-row="restaurant"><dt>{{ t_raw('common.restaurant') }}</dt><dd data-th="restaurant"></dd></div>
                <div data-th-row="plan"><dt>{{ t_raw('common.plan') }}</dt><dd data-th="plan"></dd></div>
                <div data-th-row="amount"><dt>{{ t_raw('auth.thanks_amount') }}</dt><dd><span data-th="amount"></span> <small class="qm-pay-thanks-tax" data-th="tax"></small></dd></div>
                <div data-th-row="renews"><dt data-th="renews_label">{{ t_raw('auth.thanks_renews') }}</dt><dd data-th="renews"></dd></div>
                <div data-th-row="method"><dt>{{ t_raw('checkout.payment_method') }}</dt><dd data-th="method"></dd></div>
                <div data-th-row="invoice"><dt>{{ t_raw('auth.thanks_invoice') }}</dt><dd data-th="invoice"></dd></div>
                <div data-th-row="email"><dt>{{ t_raw('auth.thanks_email') }}</dt><dd data-th="email"></dd></div>
            </dl>
            <p class="qm-pay-thanks-note" data-th-row="pending"><i class="fas fa-info-circle" aria-hidden="true"></i> {{ t_raw('auth.thanks_pending_note') }}</p>
            <div class="qm-pay-thanks-actions">
                <a class="qm-btn" data-th-link="dashboard" href="{{ route('vendor') }}">{{ t_raw('auth.thanks_dashboard_btn') }} <i class="fas fa-arrow-right ms-1" aria-hidden="true"></i></a>
                <a class="qm-btn qm-btn-outline" data-th-link="invoice" href="#" hidden><i class="fas fa-file-invoice me-1" aria-hidden="true"></i> {{ t_raw('auth.thanks_invoice_btn') }}</a>
            </div>
        </div>
    </div>
</div>
</section>
<script>
/* Fills the panel from the confirm call's answer and swaps it in for the payment card. Both
   checkout scripts call this when the answer carries `thanks`; without it they redirect exactly
   as before, so the customer pay pages that share pay-stripe.js are untouched. */
window.qmSignupThanks = function (res) {
    var panel = document.getElementById('qm-pay-thanks');
    var data = res && res.thanks;
    if (!panel || !data) { return false; }
    function put(key, val) {
        var row = panel.querySelector('[data-th-row="' + key + '"]');
        var cell = panel.querySelector('[data-th="' + key + '"]');
        if (cell) { cell.textContent = val || ''; }
        if (row) { row.hidden = !val; }
    }
    put('restaurant', data.restaurant);
    put('plan', data.plan);
    put('amount', data.amount);
    var tax = panel.querySelector('[data-th="tax"]');
    if (tax) { tax.textContent = data.tax || ''; }
    var renewsLabel = panel.querySelector('[data-th="renews_label"]');
    if (renewsLabel && data.renews_label) { renewsLabel.textContent = data.renews_label; }
    put('renews', data.renews);
    put('method', data.method);
    put('invoice', data.invoice);
    put('email', data.email);
    var pending = panel.querySelector('[data-th-row="pending"]');
    if (pending) { pending.hidden = !data.pending; }
    var dash = panel.querySelector('[data-th-link="dashboard"]');
    if (dash && (data.dashboard_url || res.redirect)) { dash.href = data.dashboard_url || res.redirect; }
    var inv = panel.querySelector('[data-th-link="invoice"]');
    if (inv) { inv.hidden = !data.invoice_url; if (data.invoice_url) { inv.href = data.invoice_url; } }
    var form = document.getElementById('qm-pay-form');
    if (form) { form.hidden = true; }
    var head = document.querySelector('.qm-page-head h1');
    if (head && data.title) { head.textContent = data.title; }
    panel.hidden = false;
    try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch (e) { window.scrollTo(0, 0); }
    return true;
};
</script>

@php /* BOTH providers get a config block and their SDK. Only PayPal's was ever emitted, so the
          Stripe branch above rendered its Payment Element and its Pay button into a page with no
          Stripe.js and nothing to confirm — a button wired to nothing. The two carry different
          things because the providers work differently: PayPal is handed the published plan and
          opens the agreement itself, Stripe is handed the secret of a subscription the server has
          already opened. Both post the same id back to the same confirmUrl. */
@endphp
<script id="qm-pay-config" type="application/json">{!! json_encode([
    'ref'          => (string) ($ref ?? ''),
    'planRef'      => $planRef,
    'clientSecret' => (string) ($clientSecret ?? ''),
    'approve'      => (string) ($approve ?? ''),
    'publicKey'    => $publicKey,
    'confirmUrl'   => $confirmUrl,
    'callbackUrl'  => $callbackUrl,
    'cancelUrl'    => $cancelUrl,
    'trackUrl'     => $cancelUrl,
], JSON_UNESCAPED_SLASHES | JSON_HEX_TAG) !!}</script>
@php /* No PayPal SDK: the approval link was minted server-side and the signup's own script
          opens it — nothing on this page talks to PayPal directly any more. */
@endphp
@if ($provider !== 'paypal')
<script src="https://js.stripe.com/v3/"></script>
@endif
@endsection