@php
/**
 * SAVED PAYMENT METHODS — the one manager in the product.
 *
 * Rendered on the customer's payment page and inside the dashboard account page, because a diner
 * keeping a card for ordering and an owner keeping one for placements are the same thing and must
 * not become two screens that drift apart. The forms post to /account/payment/*, which any signed-in
 * role may reach and which scopes every row to the signed-in user.
 *
 * THE RULES LIVE IN THE MODEL, NOT HERE. Whether a method can be removed, whether it still works,
 * which one leads the list — all of that is PaymentMethod's, and this asks rather than restates it.
 * A screen that keeps its own copy of a rule is a screen that will disagree with the server.
 *
 * @var array $methods  this user's methods, best first
 * @var array $savable  Stripe payment_method_types this site can keep on file
 */
$methods = $methods ?? [];
$savable = $savable ?? [];

$cardModel = new \App\Models\PaymentMethod();
$hasPaypal = false;
foreach ($methods as $m) {
    if ((string) ($m['gateway'] ?? '') === 'paypal') { $hasPaypal = true; }
}
// A method belongs in the add list only if it can be charged again later with the payer absent.
$canCard   = $savable !== [];
$canPaypal = \App\Services\Payment::isEnabled('paypal') && !$hasPaypal;
@endphp
            @if (count($methods) > 0)
            <div class="qm-card">
                @php /* The shared card anatomy the rest of this page uses — a .qm-card-head over a
                         .qm-card-body — so these sections sit on the same rhythm as Profile details
                         rather than inventing their own spacing. */
@endphp
                <div class="qm-card-head">
                    <h2 class="mb-0">{{ t_raw('account.saved_cards_title') }}</h2>
                </div>
                <div class="qm-card-body">
                @php /* ONE LINE PER METHOD, and only what identifies it. A brand, what distinguishes
                         this one from the next, and when it runs out. The controls sit at the end of
                         the line rather than under it, so five methods read as a list instead of five
                         competing panels. */
@endphp
                @partial('payment-method-rows', ['methods' => $methods])
                </div>
            </div>
            @endif

            <div class="qm-card">
                <div class="qm-card-head">
                    <h2 class="mb-0">{{ t_raw('account.add_method_title') }}</h2>
                </div>
                <div class="qm-card-body">
                @if ($canCard || $canPaypal)
                @php /* A NAME AND A MARK IS THE WHOLE ROW. Explaining each method in a sentence
                         underneath tripled the height of this list and told the reader what the name
                         already told them; anything genuinely method-specific belongs in the step
                         that follows, where it applies. */
@endphp
                <div class="qm-addpay" role="group" aria-label="{{ t_raw('account.add_method_title') }}">
                    @foreach ($savable as $pmType)
@php $row = payment_method_row($pmType); @endphp
                    <button type="button" class="qm-addpay-choice" data-add-method="{{ $pmType }}">
                        <span class="qm-addpay-mark">{!! $row['mark'] !!}</span>
                        <span class="qm-addpay-text">{{ $row['label'] }}</span>
                        <i class="fas fa-chevron-right qm-addpay-go" aria-hidden="true"></i>
                    </button>
                    @endforeach

                    @if ($canPaypal)
                    @php /* PayPal is a link because connecting one is a journey to PayPal and back;
                             it changes nothing here until the payer returns having agreed. */
@endphp
                    <a href="{{ route('account.payment.paypal') }}" class="qm-addpay-choice" data-add-paypal>
                        <span class="qm-addpay-mark">{!! card_brand_mark('paypal', 20) !!}</span>
                        <span class="qm-addpay-text">{{ t_raw('account.add_method_paypal') }}</span>
                        <i class="fas fa-chevron-right qm-addpay-go" aria-hidden="true"></i>
                    </a>
                    @endif
                </div>
                @else
                <div class="qm-empty">
                    <i class="fas fa-credit-card d-block" aria-hidden="true"></i>
                    <p>{!! $hasPaypal && !\App\Services\Payment::isEnabled('stripe') ? t('account.add_method_all_added') : t('account.add_card_unavailable') !!}</p>
                </div>
                @endif
                <div id="qm-card-error" class="alert alert-danger mt-3" role="alert" hidden><i class="fas fa-times-circle" aria-hidden="true"></i> <span></span></div>
                </div>
            </div>

@if ($canCard)
@php /* THE ENTRY STEP IS A DIALOG OVER THE PAGE, not a section that replaces the list.
         Adding a method is a short errand: you come from the list and you go back to it, and swapping
         the page out underneath made a two-field job feel like a departure. It uses body.modal-open,
         which the dashboard chrome already understands. */
@endphp
<div class="qm-pm-modal" id="qm-add-modal" role="dialog" aria-modal="true" aria-labelledby="qm-add-title" hidden>
    <div class="qm-pm-modal-backdrop" data-add-cancel></div>
    <div class="qm-pm-modal-box">
        <div class="qm-pm-modal-head">
            <h3 class="qm-pm-modal-title" id="qm-add-title"></h3>
            <button type="button" class="qm-pm-modal-close" data-add-cancel aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
        </div>
        <div class="qm-pm-modal-body">
            <form method="post" action="{{ route('account.payment.save') }}" id="qm-card-form">
                @csrf
                <input type="hidden" name="payment_method_id" id="payment_method_id" value="">
                @php /* A CARD IS FOUR THINGS, ASKED ONE AT A TIME.
                         Stripe's combined field packs number, expiry, code and postcode into a single
                         row, which at dialog width leaves each of them a few characters wide and
                         nothing labelled. These are Stripe's own fields still — the number never
                         reaches this server — just mounted separately so each gets a label and a line,
                         the way every other form in this product asks for things. */
@endphp
                <div id="qm-card-fields" hidden>
                    <div class="mb-3">
                        <label class="form-label" for="qm-el-number">{{ t_raw('account.card_number_label') }}</label>
                        <div id="qm-el-number" class="form-control qm-el-field"></div>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-6">
                            <label class="form-label" for="qm-el-expiry">{{ t_raw('account.expiry_label') }}</label>
                            <div id="qm-el-expiry" class="form-control qm-el-field"></div>
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="qm-el-cvc">{{ t_raw('account.cvc_label') }}</label>
                            <div id="qm-el-cvc" class="form-control qm-el-field"></div>
                        </div>
                    </div>
                    <div class="mb-1">
                        <label class="form-label" for="qm-zip">{{ t_raw('account.postcode_label') }}</label>
                        <input type="text" id="qm-zip" class="form-control" inputmode="numeric" autocomplete="postal-code" maxlength="10" placeholder="12345">
                    </div>
                </div>
                @php /* Everything that is not a card mounts here — its provider decides what it needs. */
@endphp
                <div id="qm-payment-element" class="qm-pay-element"></div>
                <div id="qm-modal-error" class="alert alert-danger mt-3" role="alert" hidden><i class="fas fa-times-circle" aria-hidden="true"></i> <span></span></div>
                <div class="qm-pm-modal-foot" data-form-only>
                    <button type="submit" id="qm-card-btn" class="qm-btn w-100"
                            data-label-card="{{ t_raw('account.save_card_btn') }}"
                            data-label-other="{{ t_raw('account.continue_method_btn') }}">{{ t_raw('account.save_card_btn') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@if ($canCard)
@php /* WHERE A STRAIGHT-THROUGH METHOD MOUNTS.
         Cash App and Amazon Pay ask this page for nothing — the gateway takes over with a QR to scan
         or a page to sign into. Opening our own dialog first put two boxes on screen, one of which
         said only "you are about to see a box". The element still has to exist for the gateway to be
         confirmed against, so it lives here, off-screen, and the gateway's own window is the only
         thing the reader meets. */
@endphp
<div id="qm-headless-element" class="qm-el-offscreen" aria-hidden="true"></div>
@endif

@if ($savable !== [])
@php /* Stripe.js and the mount script travel WITH the manager, so wherever it is rendered the
         fields work. Loaded only when this site can save something — a site with no card gateway
         never contacts Stripe at all. The client secret is fetched per method when one is picked,
         so nothing is minted for a page that is only glanced at. */
@endphp
<script id="qm-card-config" type="application/json">{!! json_encode([
    'setupUrl'  => route('account.payment.setup'),
    // Needed to FINISH a method that approved on its own provider's page and sent the payer back
    // here — see the redirect-return handler in account-payment.js. Publishable by definition.
    'publicKey' => (string) ($publicKey ?? ''),
], JSON_UNESCAPED_SLASHES | JSON_HEX_TAG) !!}</script>
<script src="https://js.stripe.com/v3/"></script>
<script src="{!! asset('js/account-payment.js') !!}"></script>
@endif