@extends('layouts.app')

@section('title', 'Make a payment')

@section('content')
    @php
        $currentYear = (int) date('Y');
        $expYears = range($currentYear, $currentYear + 15);
    @endphp

    <style>
        .pay-page {
            --pay-accent: var(--wr-maroon, #a71e22);
            --pay-accent-mid: var(--wr-maroon-dark, #8c2433);
            --pay-accent-soft: var(--wr-maroon-soft, rgba(167, 30, 34, 0.08));
            --pay-accent-ring: var(--wr-maroon-ring, rgba(167, 30, 34, 0.18));
            --pay-ink: var(--wr-ink, #252525);
            --pay-label: #372e2c;
            --pay-muted: var(--wr-muted, #6c757d);
            --pay-border: var(--wr-border, #dee2e6);
            --pay-radius: 4px;
            --pay-radius-sm: 4px;
            --pay-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            --pay-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
            max-width: 44rem;
            margin: 0 auto;
        }
        .pay-page::before { display: none; }
        .pay-form { position: relative; }
        .pay-hero {
            margin-bottom: 1.65rem;
            padding: 0 0 1.35rem 0;
            border-bottom: 1px solid var(--pay-border);
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            position: relative;
            overflow: visible;
        }
        .pay-hero::after { display: none; }
        .pay-hero__inner { position: relative; padding-top: 0; }
        .pay-hero__badge { display: none; }
        .pay-hero h2 {
            margin: 0 0 .55rem 0;
            font-family: var(--wr-serif, Georgia, serif);
            font-size: clamp(1.5rem, 4vw, 1.875rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--pay-ink);
            line-height: 1.25;
            text-transform: none;
        }
        .pay-hero p.pay-hero__lead {
            margin: 0;
            line-height: 1.65;
            max-width: 38rem;
            color: var(--pay-muted);
            font-size: .9375rem;
        }
        .pay-hero .pay-hero__lead strong { color: var(--pay-label); font-weight: 600; }
        .pay-hero__chips { display: none; }
        .pay-panel {
            background: #fff;
            border: 1px solid var(--pay-border);
            border-left: 3px solid var(--pay-accent);
            border-radius: var(--pay-radius-sm);
            padding: 1.35rem 1.4rem 1.5rem;
            margin-bottom: 1rem;
            box-shadow: none;
            transition: border-color .15s ease;
        }
        .pay-panel:hover {
            box-shadow: none;
            border-color: #ced4da;
        }
        .pay-panel--lookup { background: #fff; }
        .pay-panel--card { background: #fff; }
        @media (min-width: 640px) {
            .pay-panel { padding: 1.4rem 1.5rem 1.55rem; }
        }
        .pay-panel h3 {
            margin: 0 0 1.125rem 0;
            padding-bottom: .75rem;
            border-bottom: 1px solid var(--pay-border);
            font-family: var(--wr-serif, Georgia, serif);
            font-size: 1.0625rem;
            font-weight: 700;
            letter-spacing: 0;
            text-transform: none;
            color: var(--pay-ink);
            display: flex;
            align-items: center;
            gap: .65rem;
        }
        .pay-panel h3 .pay-h3-icon { display: none; }
        .pay-panel__note {
            margin: -.25rem 0 1rem 0;
            font-size: .8125rem;
            color: var(--pay-muted);
            line-height: 1.55;
        }
        .pay-panel label:not(.pay-sublabel) {
            margin-top: 1.05rem;
            font-size: .8125rem;
            font-weight: 600;
            color: var(--pay-label);
            letter-spacing: .01em;
        }
        .pay-panel label:first-of-type,
        .pay-panel h3 + label { margin-top: 0; }
        .pay-sublabel {
            display: block;
            margin-top: .75rem;
            font-size: .8125rem;
            font-weight: 500;
            color: var(--pay-muted);
        }
        .pay-panel .field .pay-sublabel { margin-top: 0; margin-bottom: .35rem; }
        .pay-panel label.pay-sublabel {
            font-weight: 500;
            font-size: .8125rem;
            color: var(--pay-muted);
            margin-bottom: .35rem;
            margin-top: 0;
        }
        span.pay-sublabel {
            display: block;
            font-size: .8125rem;
            font-weight: 600;
            color: #475569;
            margin-top: 1rem;
            margin-bottom: .2rem;
        }
        .pay-panel .field { margin-top: 0; }
        .pay-panel .row2 { margin-top: .35rem; }
        .req { color: #dc2626; font-weight: 700; margin-left: .15rem; }
        .row2 { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
        .row2 > .field { flex: 1; min-width: 11rem; }
        .field-hint { font-size: .8125rem; color: var(--pay-muted); margin: .35rem 0 0 0; line-height: 1.45; }
        .pay-panel input[type="text"],
        .pay-panel input[type="email"],
        .pay-panel input[type="number"],
        .pay-panel textarea,
        .pay-panel select {
            border-radius: 11px;
            border: 1px solid #d1d9e6;
            min-height: 2.75rem;
            padding: .65rem .85rem;
            font-size: .9375rem;
            transition: border-color .18s ease, box-shadow .18s ease;
        }
        .pay-panel textarea { min-height: 5.5rem; padding-top: .7rem; }
        .pay-panel input::placeholder,
        .pay-panel textarea::placeholder { color: #94a3b8; }
        .pay-panel input:focus,
        .pay-panel textarea:focus,
        .pay-panel select:focus {
            outline: none;
            border-color: var(--pay-accent-mid);
            box-shadow: 0 0 0 4px var(--pay-accent-ring);
        }
        .input-readonly {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
            color: #1e293b !important;
            border: 1px solid #e2e8f0 !important;
            cursor: default;
            font-weight: 500;
        }
        .amount-wrap {
            display: flex;
            align-items: stretch;
            max-width: 100%;
            border: 1px solid #d1d9e6;
            border-radius: 11px;
            overflow: hidden;
            background: #fff;
            min-height: 2.75rem;
            transition: box-shadow .2s ease, border-color .2s ease;
        }
        .amount-wrap:focus-within {
            box-shadow: 0 0 0 4px var(--pay-accent-ring);
            border-color: var(--pay-accent-mid);
        }
        .amount-wrap input {
            border: 0 !important;
            border-radius: 0;
            flex: 1;
            max-width: none !important;
            box-shadow: none !important;
            min-height: 2.75rem !important;
            padding-left: .85rem !important;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .amount-wrap input:focus {
            box-shadow: none !important;
        }
        .amount-wrap .suffix {
            display: flex;
            align-items: center;
            padding: 0 1.15rem;
            background: linear-gradient(180deg, #f1f5f9, #e8edf4);
            color: #1e293b;
            font-size: .8125rem;
            font-weight: 800;
            letter-spacing: .04em;
            border-left: 1px solid var(--pay-border);
        }
        .pay-form select { max-width: 100%; }
        .pay-form .row2 select { max-width: none; width: 100%; }
        .pay-actions {
            margin-top: 1.35rem;
            padding: 1.25rem 0 0;
            background: transparent;
            border: 0;
            border-top: 1px solid var(--pay-border);
            border-radius: 0;
            box-shadow: none;
        }
        .pay-actions__trust {
            margin: 0 0 1rem 0;
            text-align: center;
            font-size: .8125rem;
            font-weight: 500;
            color: var(--pay-muted);
        }
        .pay-actions__trust span { color: var(--pay-accent); font-weight: 600; }
        .btn-submit {
            background: var(--pay-accent) !important;
            width: 100%;
            max-width: 100%;
            padding: .95rem 1.5rem !important;
            font-size: .9375rem !important;
            font-weight: 700 !important;
            letter-spacing: .04em;
            text-transform: uppercase;
            border-radius: var(--pay-radius) !important;
            box-shadow: none !important;
            border: 0 !important;
            transition: background .15s ease !important;
        }
        .btn-submit:hover {
            background: var(--pay-accent-mid) !important;
            filter: none;
            box-shadow: none !important;
        }
        .btn-submit:active {
            transform: translateY(1px);
        }
        .btn-submit .anet-pay-btn__inner {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
            width: 100%;
        }
        .btn-submit .anet-pay-btn__spinner {
            display: none;
            width: 1.2rem;
            height: 1.2rem;
            flex-shrink: 0;
            border: 2.5px solid rgba(255, 255, 255, 0.22);
            border-top-color: #fff;
            border-radius: 50%;
            animation: anet-pay-spin 0.7s linear infinite;
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
        }
        .btn-submit.is-loading .anet-pay-btn__spinner {
            display: inline-block;
        }
        .btn-submit:disabled,
        .btn-submit.is-loading {
            cursor: wait;
            pointer-events: none;
            opacity: 0.85;
            transform: none;
            box-shadow: none !important;
        }
        .btn-submit.is-loading:hover,
        .btn-submit:disabled:hover {
            filter: none;
        }
        @keyframes anet-pay-spin {
            to { transform: rotate(360deg); }
        }
        .pay-gpay-link {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            margin-top: .35rem;
            margin-bottom: 1.15rem;
            padding: .5rem 1rem;
            font-size: .8125rem;
            font-weight: 700;
            color: #1e40af !important;
            background: linear-gradient(180deg, #eff6ff, #dbeafe);
            border: 1px solid #93c5fd;
            border-radius: 999px;
            text-decoration: none !important;
            transition: background .15s ease, box-shadow .15s ease;
            box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
        }
        .pay-gpay-link:hover {
            background: linear-gradient(180deg, #dbeafe, #bfdbfe);
            text-decoration: none !important;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
        }
        .pay-card-fields {
            margin-top: .25rem;
            padding: 1.05rem 1.05rem 1.15rem;
            background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%);
            border: 1px solid #e8ecf1;
            border-radius: 12px;
        }
        .pay-card-fields .pay-sublabel:first-of-type { margin-top: 0; }
        .pay-card-fields input,
        .pay-card-fields select {
            background: #fff;
        }
        .pay-alert-ok, .pay-alert-err {
            border-radius: 12px;
            padding: 1rem 1.15rem;
            margin-bottom: 1rem;
            font-size: .9rem;
            line-height: 1.5;
            border: 1px solid;
        }
        .pay-alert-ok {
            background: linear-gradient(180deg, #ecfdf5, #d1fae5);
            color: #065f46;
            border-color: #6ee7b7;
        }
        .pay-alert-err {
            background: linear-gradient(180deg, #fef2f2, #fee2e2);
            color: #991b1b;
            border-color: #fca5a5;
        }
        .pay-alert-err code {
            font-size: .8em;
            background: rgba(255,255,255,.55);
            padding: .1rem .35rem;
            border-radius: 4px;
        }
        .pay-alert-err ul { margin: 0; padding-left: 1.2rem; }
        #payment-form .pay-panel input[type="text"],
        #payment-form .pay-panel input[type="email"],
        #payment-form .pay-panel input[type="number"],
        #payment-form .pay-panel textarea,
        #payment-form .pay-panel select { max-width: none; }
        #lookup-form.pay-panel { margin-bottom: 1.1rem; }
    </style>

    <div class="pay-page">
    <div class="pay-form">
        <div class="pay-hero">
            <div class="pay-hero__inner">
                <h2>Make a payment</h2>
                <p class="pay-hero__lead">Enter your <strong>Record ID</strong> and/or <strong>invoice / order number</strong> to load your order. Your payment amount cannot exceed the outstanding balance shown.</p>
            </div>
        </div>

        @if($anetEnabled && ! $anetReady)
            <div class="ok pay-alert-ok">
                Card payments are in <strong>test mode</strong> until Authorize.Net sandbox keys are added in <code>.env</code>.
                You can still submit — the payment will be saved to the local database for tracking.
                Sandbox test card: <strong>4111111111111111</strong>, any future expiry, any CVV.
            </div>
        @endif

        @if(session('status'))
            <div class="ok pay-alert-ok">{{ session('status') }}</div>
        @endif

        @if($errors->any())
            <div class="err pay-alert-err">
                <ul style="margin:0;padding-left:1.25rem;">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if($error)
            <div class="err pay-alert-err">{{ $error }}</div>
        @endif

        <form id="lookup-form" method="get" action="{{ route('payments.create') }}" class="stack pay-panel pay-panel--lookup">
            <h3>Find your order</h3>
            <p class="pay-panel__note">Enter <strong>Record ID</strong> and/or <strong>invoice / order number</strong>. Your order will load automatically.</p>
            <label for="lookup_record_id">Record ID</label>
            <input type="text" id="lookup_record_id" name="record_id" value="{{ $queryRecordId }}"
                   autocomplete="off" placeholder="e.g. 58254498203">

            @if(! $order || $queryInvoiceNumber !== '')
            <label for="lookup_invoice_number">Invoice / order number</label>
            <input type="text" id="lookup_invoice_number" name="invoice_number" value="{{ $queryInvoiceNumber }}"
                   autocomplete="off" placeholder="e.g. 2025-04143375">
            @endif

            <p class="field-hint">You can use Record ID alone, invoice number alone, or both together.</p>
            <noscript>
                <button type="submit" class="btn" style="margin-top:.75rem;">Load order</button>
            </noscript>
        </form>
        <script>
        (function () {
            var form = document.getElementById('lookup-form');
            if (!form) return;
            var record = document.getElementById('lookup_record_id');
            var invoice = document.getElementById('lookup_invoice_number');
            if (!record) return;
            var debounceMs = 700;
            var t = null;

            function currentSearchParams() {
                return new URLSearchParams(window.location.search);
            }

            function formSearchParams() {
                var p = new URLSearchParams();
                var r = (record.value || '').trim();
                var i = invoice ? (invoice.value || '').trim() : '';
                if (r) p.set('record_id', r);
                if (i) p.set('invoice_number', i);
                return p;
            }

            function paramSig(sp) {
                return (sp.get('record_id') || '') + '\t' + (sp.get('invoice_number') || '');
            }

            function navigateIfNeeded() {
                var cur = currentSearchParams();
                var next = formSearchParams();
                var r = (record.value || '').trim();
                var inv = invoice ? (invoice.value || '').trim() : '';
                if (r === '' && inv === '') {
                    if (paramSig(cur) !== '\t') {
                        window.location.href = form.action.split('?')[0];
                    }
                    return;
                }
                if (paramSig(cur) === paramSig(next)) {
                    return;
                }
                var q = next.toString();
                window.location.href = q ? form.action.split('?')[0] + '?' + q : form.action.split('?')[0];
            }

            function schedule() {
                clearTimeout(t);
                t = setTimeout(navigateIfNeeded, debounceMs);
            }

            record.addEventListener('input', schedule);
            if (invoice) invoice.addEventListener('input', schedule);
        })();
        </script>

        @if($order)
        <form id="payment-form" method="post" action="{{ route('payments.store') }}" class="stack">
            @csrf

                @php
                    $hidRecord = (string) old('record_id', $queryRecordId);
                    $hidOrder = (string) old('order_id', $queryOrderId);
                    $hidInvoice = (string) old('invoice_number', $queryInvoiceNumber);
                    if ($hidRecord === '' && ! empty($order['recordID'])) {
                        $hidRecord = (string) $order['recordID'];
                    }
                    if ($hidOrder === '' && ! empty($order['orderID'])) {
                        $hidOrder = (string) $order['orderID'];
                    }
            if ($hidInvoice === '') {
                $inv = $order['InvoiceNumber'] ?? $order['invoiceNumber'] ?? null;
                if ($inv !== null) {
                    $hidInvoice = trim((string) $inv);
                }
            }
                    if (trim($hidInvoice) === '0') {
                        $hidInvoice = '';
                    }
                    $displayRecordId = $hidRecord;
                    $displayInvoiceNumber = $hidInvoice;
                    $hidOrderLineItemId = (string) old('order_line_item_id', '');
                    if ($hidOrderLineItemId === '') {
                        $items = $order['lineItems'] ?? $order['lineitems'] ?? null;
                        if (is_array($items) && $items !== []) {
                            $first = $items[0];
                            if (is_array($first)) {
                                $oli = $first['orderLineItemID'] ?? $first['orderLineItemId'] ?? null;
                                if ($oli !== null && $oli !== '') {
                                    $hidOrderLineItemId = (string) $oli;
                                }
                            }
                        }
                    }
                @endphp
                <input type="hidden" name="record_id" value="{{ $hidRecord }}">
                <input type="hidden" name="order_id" value="{{ $hidOrder }}">
                <input type="hidden" name="invoice_number" value="{{ $hidInvoice }}">
                <input type="hidden" name="order_line_item_id" value="{{ $hidOrderLineItemId }}">

            <div class="pay-panel pay-panel--order">
                <h3>Order details</h3>

                <label for="display_client_name">Client name <span class="req">*</span></label>
                <input type="text" id="display_client_name" class="input-readonly" readonly
                       value="{{ $clientName }}"
                       placeholder="—">

                <div class="row2">
                    <div class="field">
                        <label for="display_record_id">Record ID <span class="req">*</span></label>
                        <input type="text" id="display_record_id" class="input-readonly" readonly
                               value="{{ $displayRecordId }}"
                               placeholder="—">
                    </div>
                    @if($displayInvoiceNumber !== '')
                    <div class="field">
                        <label for="display_invoice_number">Invoice / order number <span class="req">*</span></label>
                        <input type="text" id="display_invoice_number" class="input-readonly" readonly
                               value="{{ $displayInvoiceNumber }}"
                               placeholder="—">
                    </div>
                    @endif
                </div>

                <span class="pay-sublabel" style="margin-top:1rem;">Purchaser's name</span>
                <div class="row2">
                    <div class="field">
                        <label for="purchaser_first_name" class="pay-sublabel">First name</label>
                        <input type="text" id="purchaser_first_name" name="purchaser_first_name"
                               value="{{ $purchaserFirst }}" autocomplete="given-name" placeholder="First name">
                    </div>
                    <div class="field">
                        <label for="purchaser_last_name" class="pay-sublabel">Last name</label>
                        <input type="text" id="purchaser_last_name" name="purchaser_last_name"
                               value="{{ $purchaserLast }}" autocomplete="family-name" placeholder="Last name">
                    </div>
                </div>

                <label for="purchaser_email">Email <span class="req">*</span></label>
                <input type="email" id="purchaser_email" name="purchaser_email" required
                       value="{{ $purchaserEmail }}" autocomplete="email" placeholder="example@example.com">
                <p class="field-hint">Pre-filled from your order when available.</p>

                <label for="display_property_address">Subject property address <span class="req">*</span></label>
                <input type="text" id="display_property_address" class="input-readonly" readonly
                       value="{{ $order ? $propertyAddress : '' }}"
                       placeholder="Street address">
                <p class="field-hint">Street address</p>
                @if($order && $propertyAddress === '')
                    <p class="field-hint muted">No address returned for this order.</p>
                @endif

                @php
                    $maxPaymentUsd = isset($order['balanceAmount']) ? round((float) $order['balanceAmount'], 2) : null;
                @endphp
                <label for="amount">Payment amount <span class="req">*</span></label>
                <div class="amount-wrap">
                    <input type="number" step="0.01" min="0.01" id="amount" name="amount" required
                           inputmode="decimal"
                           @if($maxPaymentUsd !== null) max="{{ sprintf('%.2f', $maxPaymentUsd) }}" @endif
                           value="{{ old('amount', $order && isset($order['balanceAmount']) ? $order['balanceAmount'] : '') }}">
                    <span class="suffix">USD</span>
                </div>
                <p class="field-hint">You may pay any amount up to the outstanding balance. Partial payments are allowed.</p>
                @if($maxPaymentUsd !== null)
                <script>
                (function () {
                    var inp = document.getElementById('amount');
                    if (!inp) return;
                    var max = {{ json_encode($maxPaymentUsd) }};
                    var debounceTimer = null;
                    var alertedWhileOverMax = false;
                    var msg = 'Payment amount cannot exceed $' + max.toFixed(2) + ' USD (outstanding balance). Partial payment up to that amount is allowed.';

                    function sync() {
                        var v = parseFloat(inp.value, 10);
                        if (!isFinite(v) || !isFinite(max)) {
                            inp.setCustomValidity('');
                            alertedWhileOverMax = false;
                            clearTimeout(debounceTimer);
                            return;
                        }
                        if (v > max) {
                            inp.setCustomValidity(msg);
                            clearTimeout(debounceTimer);
                            debounceTimer = setTimeout(function () {
                                var v2 = parseFloat(inp.value, 10);
                                if (!isFinite(v2) || v2 <= max) return;
                                if (!alertedWhileOverMax) {
                                    alertedWhileOverMax = true;
                                    alert(msg);
                                }
                            }, 350);
                        } else {
                            inp.setCustomValidity('');
                            alertedWhileOverMax = false;
                            clearTimeout(debounceTimer);
                        }
                    }

                    inp.addEventListener('input', sync);
                    inp.addEventListener('change', sync);
                    inp.addEventListener('keyup', sync);

                    var form = inp.closest('form');
                    if (form) {
                        form.addEventListener('submit', function (e) {
                            var v = parseFloat(inp.value, 10);
                            if (isFinite(v) && isFinite(max) && v > max) {
                                e.preventDefault();
                                alert(msg);
                                inp.focus();
                            }
                        });
                    }
                    sync();
                })();
                </script>
                @endif
            </div>

            @if($order)
            <div class="pay-panel pay-panel--card">
                <h3>Credit card</h3>
                @if($anetReady)
                <p class="pay-panel__note">Your card information is encrypted and processed securely through Authorize.Net.</p>
                @else
                <p class="pay-panel__note">Enter card details below. With sandbox credentials configured, charges run through Authorize.Net. Otherwise submit saves a <strong>pending</strong> record in the database.</p>
                @endif

                    <input type="hidden" name="payment_descriptor" id="payment_descriptor" value="{{ old('payment_descriptor') }}">
                    <input type="hidden" name="payment_nonce" id="payment_nonce" value="{{ old('payment_nonce') }}">

                    <div class="pay-card-fields">
                    <span class="pay-sublabel">Name on card</span>
                    <div class="row2">
                        <div class="field">
                            <label for="card_first" class="pay-sublabel">First name</label>
                            <input type="text" id="card_first" name="card_first" autocomplete="cc-given-name" placeholder="First name">
                        </div>
                        <div class="field">
                            <label for="card_last" class="pay-sublabel">Last name</label>
                            <input type="text" id="card_last" name="card_last" autocomplete="cc-family-name" placeholder="Last name">
                        </div>
                    </div>

                    <span class="pay-sublabel" style="margin-top:1rem;">Card details</span>
                    <div class="row2">
                        <div class="field" style="flex:2;min-width:14rem;">
                            <label for="cardNumber" class="pay-sublabel">Credit card number</label>
                            <input type="text" id="cardNumber" name="cardNumber" autocomplete="cc-number" maxlength="19" inputmode="numeric" placeholder="4111111111111111">
                        </div>
                        <div class="field" style="min-width:6rem;">
                            <label for="cardCode" class="pay-sublabel">Security code</label>
                            <input type="text" id="cardCode" name="cardCode" maxlength="4" placeholder="123" autocomplete="cc-csc">
                        </div>
                    </div>

                    <span class="pay-sublabel" style="margin-top:1rem;">Expiration date</span>
                    <div class="row2">
                        <div class="field">
                            <label for="expMonth" class="pay-sublabel">Month</label>
                            <select id="expMonth" name="expMonth" autocomplete="cc-exp-month">
                                <option value="">Month</option>
                                @for($m = 1; $m <= 12; $m++)
                                    @php $mv = str_pad((string) $m, 2, '0', STR_PAD_LEFT); @endphp
                                    <option value="{{ $mv }}">{{ $mv }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="field">
                            <label for="expYear" class="pay-sublabel">Year</label>
                            <select id="expYear" name="expYear" autocomplete="cc-exp-year">
                                <option value="">Year</option>
                                @foreach($expYears as $y)
                                    <option value="{{ $y }}">{{ $y }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    </div>
            </div>
            @endif

            <div class="pay-panel pay-panel--billing">
                <h3>Billing address</h3>

                <label for="billing_street">Street address</label>
                <input type="text" id="billing_street" name="billing_street" value="{{ old('billing_street') }}" autocomplete="billing street-address" placeholder="Street address">

                <label for="billing_street2">Street address line 2</label>
                <input type="text" id="billing_street2" name="billing_street2" value="{{ old('billing_street2') }}" autocomplete="billing address-line2" placeholder="Apartment, suite, unit…">

                <div class="row2">
                    <div class="field">
                        <label for="billing_city">City</label>
                        <input type="text" id="billing_city" name="billing_city" value="{{ old('billing_city') }}" autocomplete="billing address-level2" placeholder="City">
                    </div>
                    <div class="field">
                        <label for="billing_state">State / province</label>
                        <input type="text" id="billing_state" name="billing_state" value="{{ old('billing_state') }}" autocomplete="billing address-level1" placeholder="State or province">
                    </div>
                </div>

                <div class="row2">
                    <div class="field">
                        <label for="billing_postal">Postal / zip code</label>
                        <input type="text" id="billing_postal" name="billing_postal" value="{{ old('billing_postal') }}" autocomplete="billing postal-code" placeholder="ZIP or postal code">
                    </div>
                    <div class="field">
                        <label for="billing_country">Country</label>
                        <select id="billing_country" name="billing_country" autocomplete="billing country">
                            <option value="" @selected(old('billing_country', '') === '')>Please Select</option>
                            @foreach(config('payment_countries') as $country)
                                @php
                                    $label = $country === 'other' ? 'Other' : $country;
                                @endphp
                                <option value="{{ $country }}" @selected(old('billing_country') === $country)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="pay-panel pay-panel--notes">
                <h3>Notes</h3>
                <label for="notes">Additional notes <span class="muted" style="font-weight:500;">(optional)</span></label>
                <textarea id="notes" name="notes" placeholder="Reference, memo…">{{ old('notes') }}</textarea>
            </div>

            @if($anetReady)
                <div class="pay-actions">
                    <p class="pay-actions__trust">Secure payment · Your card details are never stored on our servers</p>
                    <button type="button" id="anet-pay-btn" class="btn btn-submit" aria-busy="false">
                        <span class="anet-pay-btn__inner">
                            <span class="anet-pay-btn__spinner" aria-hidden="true"></span>
                            <span class="anet-pay-btn__label">Submit payment</span>
                        </span>
                    </button>
                </div>
            @else
                <div class="pay-actions">
                    <p class="pay-actions__trust">Payment will be recorded in the database (status: pending until Authorize.Net is configured)</p>
                    <button type="submit" class="btn btn-submit">Submit payment</button>
                </div>
            @endif
        </form>
        @endif
    </div>
    </div>

    @if($order && $anetReady)
        <script src="{{ $anetAcceptJsUrl }}" charset="utf-8"></script>
        <script>
        (function () {
            var btn = document.getElementById('anet-pay-btn');
            var form = document.getElementById('payment-form');
            if (!btn || !form || typeof Accept === 'undefined') return;

            var clientKey = @json($anetPublicClientKey);
            var apiLoginID = @json($anetApiLoginId);
            var labelEl = btn.querySelector('.anet-pay-btn__label');
            var defaultLabel = labelEl ? labelEl.textContent : 'Submit payment';
            var loadingLabel = 'Processing payment…';

            function setAnetLoading(on) {
                if (on) {
                    btn.disabled = true;
                    btn.classList.add('is-loading');
                    btn.setAttribute('aria-busy', 'true');
                    if (labelEl) labelEl.textContent = loadingLabel;
                } else {
                    btn.disabled = false;
                    btn.classList.remove('is-loading');
                    btn.setAttribute('aria-busy', 'false');
                    if (labelEl) labelEl.textContent = defaultLabel;
                }
            }

            btn.addEventListener('click', function () {
                var cardNumber = document.getElementById('cardNumber').value.replace(/\s/g, '');
                var month = document.getElementById('expMonth').value.trim();
                var year = document.getElementById('expYear').value.trim();
                var cardCode = document.getElementById('cardCode').value.trim();

                if (!cardNumber || !month || !year) {
                    alert('Enter card number, expiration month, and year.');
                    return;
                }

                setAnetLoading(true);

                var authData = {};
                authData.clientKey = clientKey;
                authData.apiLoginID = apiLoginID;

                var cardData = {};
                cardData.cardNumber = cardNumber;
                cardData.month = month.length === 1 ? '0' + month : month;
                cardData.year = year.length === 4 ? year.slice(-2) : year;
                cardData.cardCode = cardCode;

                var secureData = {};
                secureData.authData = authData;
                secureData.cardData = cardData;

                Accept.dispatchData(secureData, function (response) {
                    if (response.messages.resultCode === 'Error') {
                        setAnetLoading(false);
                        var msg = 'Tokenization failed.';
                        if (response.messages.message && response.messages.message[0]) {
                            msg = response.messages.message[0].text || msg;
                        }
                        alert(msg);
                        return;
                    }
                    var od = response.opaqueData;
                    document.getElementById('payment_descriptor').value = od.dataDescriptor;
                    document.getElementById('payment_nonce').value = od.dataValue;
                    document.getElementById('cardNumber').value = '';
                    document.getElementById('expMonth').selectedIndex = 0;
                    document.getElementById('expYear').selectedIndex = 0;
                    document.getElementById('cardCode').value = '';
                    document.getElementById('card_first').value = '';
                    document.getElementById('card_last').value = '';
                    form.submit();
                });
            });
        })();
        </script>
    @endif
@endsection