@extends('storefront.layout')

@section('title', 'Checkout')

@section('content')
    @php
        $enabledMethods = (array) ($checkoutConfig['payment_methods'] ?? ['stripe', 'cash_on_delivery']);
        $methodLabels = [
            'stripe' => 'Credit Card',
            'cash_on_delivery' => 'Cash on Delivery',
            'bank_transfer' => 'Bank Transfer',
            'easypaisa' => 'EasyPaisa',
            'jazzcash' => 'JazzCash',
        ];
        $methodIcons = (array) ($checkoutConfig['payment_icons'] ?? []);
        $paymentAccounts = (array) ($checkoutConfig['payment_accounts'] ?? []);
        $paymentCfg = (array) ($checkoutConfig['payment'] ?? []);
        $shippingCfg = (array) ($checkoutConfig['shipping'] ?? []);
        $shippingOptions = (array) ($checkoutConfig['shipping_options'] ?? []);
        $shippingLookup = (array) ($checkoutConfig['shipping_lookup'] ?? [
            'countries' => [], 'cities_by_country' => [], 'global_cities' => [], 'areas_by_country' => [], 'global_areas' => [],
            'area_hints' => [], 'zip_hints' => [],
        ]);
        $proofRequiredMethods = (array) ($paymentCfg['proof_required_methods'] ?? []);
        $transactionIdRequiredMethods = (array) ($paymentCfg['transaction_id_required_methods'] ?? []);
        $selectedMethod = old('payment_method', in_array('stripe', $enabledMethods, true) ? 'stripe' : ($enabledMethods[0] ?? 'cash_on_delivery'));
        $selectedShipping = old('shipping_option', $summary['selected_shipping_option'] ?? (!empty($shippingCfg['allow_pickup']) ? 'pickup' : (($shippingOptions[0]['key'] ?? ''))));
        $couponConfigJs = $checkoutConfig['coupon'] ?? ['is_active' => false, 'code' => '', 'type' => 'fixed', 'value' => 0];
    @endphp
    <section class="sf-section sf-checkout-page">
        <div class="sf-section-head">
            <h1 class="sf-section-title">Checkout</h1>
        </div>

        @if($errors->any())
            <div class="sf-checkout__alert">
                @foreach($errors->all() as $err)
                    <p>{{ $err }}</p>
                @endforeach
            </div>
        @endif

        <div class="sf-checkout">
            <form method="post" action="{{ route('storefront.checkout.place', ['slug' => $sfStore->slug]) }}" class="sf-checkout__form sf-checkout__form--3col" enctype="multipart/form-data" id="sfCheckoutForm" novalidate>
                @csrf

                <div id="sfCheckoutFormError" class="sf-checkout__alert sf-checkout__alert--ajax" style="display:none;" role="alert"></div>

                @if(!empty($newCustomerDiscount))
                @php
                    $ncd = $newCustomerDiscount;
                    $ncdValue = $ncd->discount_type === 'percentage'
                        ? $ncd->value . '% off'
                        : format_currency($ncd->value) . ' off';
                @endphp
                <div class="sf-new-customer-notice sf-new-customer-notice--fullwidth">
                    <span class="sf-new-customer-notice__icon" aria-hidden="true">🎁</span>
                    <div class="sf-new-customer-notice__body">
                        <strong>New customer?</strong>
                        Create an account and get <strong>{{ $ncdValue }}</strong> on your first order!
                        @if($ncd->is_coupon && $ncd->coupon_code)
                            Use code <code class="sf-coupon-inline">{{ $ncd->coupon_code }}</code> at checkout.
                        @endif
                    </div>
                    <button type="button" class="sf-btn sf-btn--accent sf-btn--sm sf-new-customer-notice__btn" id="sfNewCustomerSignupBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
                        Create Account &amp; Save
                    </button>
                </div>
                @endif

                <aside class="sf-checkout__summary sf-checkout__col sf-checkout__col--summary">
                    <div class="sf-checkout__panel sf-receipt">
                        {{-- Receipt header --}}
                        <div class="sf-receipt-head">
                            <h2>Order Receipt</h2>
                            <p class="sf-receipt-meta">{{ (int) ($summary['unique_item_count'] ?? 0) }} item(s) &bull; {{ (int) ($summary['total_qty'] ?? 0) }} qty</p>
                        </div>

                        {{-- Line items --}}
                        <div class="sf-checkout__lines sf-receipt-items">
                            @foreach($lines as $line)
                                <div class="sf-checkout__line">
                                    <div>
                                        <strong>{{ $line['product']->name }}</strong>
                                        @if(!empty($line['variant']))
                                            <small>{{ $line['variant']->name }}</small>
                                        @endif
                                        <small>{{ $line['qty'] }} &times; {{ format_currency($line['final_unit_price']) }}</small>
                                    </div>
                                    <strong>{{ format_currency($line['line_total']) }}</strong>
                                </div>
                            @endforeach
                        </div>

                        {{-- Totals breakdown --}}
                        <div class="sf-checkout__totals sf-receipt-totals">
                            <p><span>Base Subtotal</span> <strong id="sfCheckoutBase">{{ $summary['formatted_base_subtotal'] ?? format_currency(0) }}</strong></p>
                            <p><span>Subtotal (excl. tax)</span> <strong id="sfCheckoutExcl">{{ $summary['formatted_subtotal_excl'] ?? format_currency(0) }}</strong></p>
                            <p><span>Discount</span> <strong id="sfCheckoutDiscount">-{{ $summary['formatted_discount_total'] ?? format_currency(0) }}</strong></p>
                            <p><span>After Discount</span> <strong id="sfCheckoutAfterDiscount">{{ $summary['formatted_subtotal_after_discount'] ?? format_currency(0) }}</strong></p>
                            <p><span>Tax</span> <strong id="sfCheckoutTax">{{ $summary['formatted_tax_total'] ?? format_currency(0) }}</strong></p>
                            <p><span>Coupon</span> <strong id="sfCheckoutCoupon">-{{ $summary['formatted_coupon_discount'] ?? format_currency(0) }}</strong></p>
                            <p><span>Shipping</span> <strong id="sfCheckoutShipping">{{ $summary['formatted_shipping_fee'] ?? format_currency(0) }}</strong></p>
                        </div>

                        {{-- Grand total --}}
                        <div class="sf-receipt-grand">
                            <p class="sf-receipt-grand__label">Total Payable</p>
                            <p class="sf-checkout__payable-amount sf-receipt-grand__amount" id="sfCheckoutGrand">{{ $summary['formatted_payable_total_after_coupon'] ?? ($summary['formatted_payable_total'] ?? format_currency(0)) }}</p>
                        </div>
                    </div>
                </aside>

                <div class="sf-checkout__col sf-checkout__col--customer">
                    <div class="sf-checkout__panel">
                        <h2>Customer details</h2>
                        <div class="sf-checkout__mode-pills">
                            <label class="sf-mode-pill {{ old('checkout_mode', 'account') === 'guest' ? 'is-active' : '' }}">
                                <input type="radio" name="checkout_mode" value="guest" {{ old('checkout_mode', 'account') === 'guest' ? 'checked' : '' }}>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                Guest Checkout
                            </label>
                            <label class="sf-mode-pill {{ old('checkout_mode', 'account') !== 'guest' ? 'is-active' : '' }}">
                                <input type="radio" name="checkout_mode" value="account" {{ old('checkout_mode', 'account') !== 'guest' ? 'checked' : '' }}>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
                                Create Account &amp; Checkout
                            </label>
                        </div>
                        <span class="sf-input-error" data-err-for="checkout_mode"></span>
                        <div class="sf-checkout__grid">
                            <label>
                                Full name
                                <input type="text" name="name" required minlength="2" maxlength="120" placeholder="Enter full name" value="{{ old('name') }}">
                                <span class="sf-input-error" data-err-for="name"></span>
                            </label>
                            <label>
                                Phone
                                <input type="text" name="phone" inputmode="tel" minlength="8" maxlength="40" placeholder="+92 300 0000000" value="{{ old('phone') }}">
                                <span class="sf-input-error" data-err-for="phone"></span>
                            </label>
                            <label>
                                Email
                                <input type="email" name="email" placeholder="name@email.com" value="{{ old('email') }}">
                                <span class="sf-input-error" data-err-for="email"></span>
                            </label>
                            <label>
                                Note
                                <input type="text" name="note" maxlength="500" placeholder="Order note (optional)" value="{{ old('note') }}">
                                <span class="sf-input-error" data-err-for="note"></span>
                            </label>
                        </div>
                        <div class="sf-checkout__account-fields" id="sfCheckoutAccountFields" {{ old('checkout_mode', 'account') !== 'guest' ? '' : 'hidden' }}>
                            <div class="sf-checkout__grid">
                                <label>
                                    Password
                                    <input type="password" name="password">
                                    <span class="sf-input-error" data-err-for="password"></span>
                                </label>
                                <label>
                                    Confirm password
                                    <input type="password" name="password_confirmation">
                                    <span class="sf-input-error" data-err-for="password_confirmation"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    @if(!empty($shippingCfg['allow_delivery']) || !empty($shippingCfg['allow_pickup']))
                    <div class="sf-checkout__panel">
                        <h2>Shipping</h2>
                        <span class="sf-input-error" data-err-for="shipping_option"></span>

                        {{-- Method selector cards --}}
                        <div class="sf-shipping-tabs" id="sfShippingTabs">
                            @if(!empty($shippingCfg['allow_pickup']))
                            <label class="sf-payment-tab {{ $selectedShipping === 'pickup' ? 'is-active' : '' }}">
                                <input type="radio" name="shipping_option" value="pickup" {{ $selectedShipping === 'pickup' ? 'checked' : '' }}>
                                <span class="sf-shipping-tab-check" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                </span>
                                <span class="sf-payment-tab__icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                                </span>
                                <span>Pickup</span>
                                <span class="sf-payment-tab__sub">Free</span>
                            </label>
                            @endif
                            @foreach($shippingOptions as $opt)
                            <label class="sf-payment-tab {{ $selectedShipping === ($opt['key'] ?? '') ? 'is-active' : '' }}">
                                <input type="radio" name="shipping_option" value="{{ $opt['key'] ?? '' }}" {{ $selectedShipping === ($opt['key'] ?? '') ? 'checked' : '' }} data-is-distance="{{ !empty($opt['is_distance']) ? '1' : '0' }}" data-flat-fee="{{ (float) ($opt['fee'] ?? 0) }}">
                                <span class="sf-shipping-tab-check" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                </span>
                                <span class="sf-payment-tab__icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 5v4h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                                </span>
                                <span>{{ $opt['label'] ?? 'Delivery' }}</span>
                                <span class="sf-payment-tab__sub">{{ format_currency((float)($opt['fee'] ?? 0)) . (!empty($opt['is_distance']) ? '/km' : '') }}</span>
                            </label>
                            @endforeach
                        </div>

                        <div id="sfDeliveryAddressSection" class="sf-checkout__delivery-fields" @if($selectedShipping === 'pickup') hidden @endif>
                        <div id="sfDetectToolbar" class="sf-checkout__detect-toolbar">
                            <div class="sf-location-detect sf-location-detect--toolbar">
                                <span class="sf-location-detect__icon" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
                                </span>
                                <div class="sf-location-detect__body">
                                    <span class="sf-location-detect__title">Locate on map</span>
                                    <span class="sf-location-detect__hint" id="sfLocationHint">Use GPS to complete your address (same as postal lookup).</span>
                                </div>
                                <button type="button" class="sf-btn sf-btn--outline sf-btn--sm" id="sfDetectLocationBtn">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                                    Detect
                                </button>
                            </div>
                            <p class="sf-checkout__km-pricing-note" id="sfKmPricingNote" hidden>Per-kilometer rates use the distance above; other delivery options use a flat package fee.</p>
                        </div>

                        <input type="hidden" name="shipping_customer_lat" id="sfShippingCustomerLat" value="{{ old('shipping_customer_lat') }}">
                        <input type="hidden" name="shipping_customer_lng" id="sfShippingCustomerLng" value="{{ old('shipping_customer_lng') }}">
                        <input type="hidden" name="shipping_distance_km" id="sfShippingDistanceKm" value="{{ old('shipping_distance_km') }}">

                        {{-- Country + ZIP · State/province + City + Area (one row) — packages + OpenStreetMap --}}
                        @php
                        $countryNames = ['af'=>'Afghanistan','al'=>'Albania','dz'=>'Algeria','ao'=>'Angola','ar'=>'Argentina','au'=>'Australia','at'=>'Austria','bd'=>'Bangladesh','be'=>'Belgium','br'=>'Brazil','ca'=>'Canada','cl'=>'Chile','cn'=>'China','co'=>'Colombia','cd'=>'DR Congo','hr'=>'Croatia','cz'=>'Czech Republic','dk'=>'Denmark','eg'=>'Egypt','et'=>'Ethiopia','fi'=>'Finland','fr'=>'France','de'=>'Germany','gh'=>'Ghana','gr'=>'Greece','gt'=>'Guatemala','hn'=>'Honduras','hk'=>'Hong Kong','hu'=>'Hungary','in'=>'India','id'=>'Indonesia','ir'=>'Iran','iq'=>'Iraq','ie'=>'Ireland','il'=>'Israel','it'=>'Italy','jp'=>'Japan','jo'=>'Jordan','ke'=>'Kenya','kr'=>'South Korea','kw'=>'Kuwait','lb'=>'Lebanon','ly'=>'Libya','my'=>'Malaysia','mx'=>'Mexico','ma'=>'Morocco','mm'=>'Myanmar','nl'=>'Netherlands','nz'=>'New Zealand','ng'=>'Nigeria','no'=>'Norway','om'=>'Oman','pk'=>'Pakistan','pe'=>'Peru','ph'=>'Philippines','pl'=>'Poland','pt'=>'Portugal','qa'=>'Qatar','ro'=>'Romania','ru'=>'Russia','sa'=>'Saudi Arabia','sn'=>'Senegal','za'=>'South Africa','es'=>'Spain','lk'=>'Sri Lanka','sd'=>'Sudan','se'=>'Sweden','ch'=>'Switzerland','sy'=>'Syria','tw'=>'Taiwan','tz'=>'Tanzania','th'=>'Thailand','tn'=>'Tunisia','tr'=>'Turkey','ug'=>'Uganda','ae'=>'United Arab Emirates','gb'=>'United Kingdom','us'=>'United States','ve'=>'Venezuela','vn'=>'Vietnam','ye'=>'Yemen','zw'=>'Zimbabwe'];
                        @endphp
                        <div class="sf-checkout__grid sf-checkout__shipping-row">
                            <label>
                                <span class="sf-field-label">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                                    Country
                                </span>
                                <div class="sf-select-wrap">
                                    <select name="shipping_country" id="sfShippingCountry">
                                        <option value="">Select country</option>
                                        @foreach((array) ($shippingLookup['countries'] ?? []) as $countryCode)
                                            <option value="{{ $countryCode }}" {{ old('shipping_country') === $countryCode ? 'selected' : '' }}>{{ $countryNames[strtolower($countryCode)] ?? strtoupper($countryCode) }}</option>
                                        @endforeach
                                    </select>
                                    <svg class="sf-select-wrap__arrow" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
                                </div>
                                <span class="sf-input-error" data-err-for="shipping_country"></span>
                            </label>
                            <label>
                                <span class="sf-field-label">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 14h10M10 11h7M14 17h5"/></svg>
                                    Postal / ZIP
                                </span>
                                <input type="text" name="shipping_zip" id="sfShippingZip" inputmode="text" autocomplete="off" data-lpignore="true" data-1p-ignore maxlength="32"
                                       placeholder="Postal / ZIP — we look up city and region"
                                       value="{{ old('shipping_zip') }}">
                                <span class="sf-input-error" data-err-for="shipping_zip"></span>
                            </label>
                        </div>
                        <div class="sf-checkout__grid sf-checkout__shipping-row sf-checkout__grid--3col sf-checkout__grid--address-locality">
                            <label>
                                <span class="sf-field-label" id="sfRegionLabelWrap">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
                                    <span id="sfRegionLabelText">State / Province</span>
                                </span>
                                <input type="text" name="shipping_state" id="sfShippingState" autocomplete="address-level1" maxlength="120"
                                       placeholder="State or province"
                                       value="{{ old('shipping_state') }}">
                                <span class="sf-input-error" data-err-for="shipping_state"></span>
                            </label>
                            <label>
                                <span class="sf-field-label">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                                    City
                                </span>
                                <input type="text" name="shipping_city" id="sfShippingCity"
                                       list="sfShippingCityList" autocomplete="address-level2"
                                       placeholder="From ZIP or Detect"
                                       value="{{ old('shipping_city') }}">
                                <datalist id="sfShippingCityList">
                                    @foreach((array) ($shippingLookup['global_cities'] ?? []) as $cityName)
                                        <option value="{{ ucwords($cityName) }}">
                                    @endforeach
                                </datalist>
                                <span class="sf-input-error" data-err-for="shipping_city"></span>
                            </label>
                            <label>
                                <span class="sf-field-label">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
                                    Area / locality
                                </span>
                                <input type="text" name="shipping_area" id="sfShippingArea"
                                       list="sfShippingAreaList" autocomplete="address-level3"
                                       placeholder="Neighbourhood, sector, borough…"
                                       value="{{ old('shipping_area') }}">
                                <datalist id="sfShippingAreaList">
                                    @foreach((array) ($shippingLookup['global_areas'] ?? []) as $areaName)
                                        <option value="{{ ucwords($areaName) }}">
                                    @endforeach
                                </datalist>
                                <span class="sf-input-error" data-err-for="shipping_area"></span>
                            </label>
                        </div>
                        <p class="sf-checkout__zip-hint" id="sfPostalLookupHint"></p>
                        <div class="sf-checkout__grid">
                            <label class="sf-checkout__field--full">
                                <span class="sf-field-label">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/></svg>
                                    Street address
                                </span>
                                <div class="sf-input-icon-row">
                                    <span class="sf-input-icon-row__icon" aria-hidden="true">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                                    </span>
                                    <input type="text" name="address" id="sfShippingAddress" autocomplete="street-address" maxlength="600"
                                           placeholder="House / unit, street, landmark"
                                           value="{{ old('address') }}">
                                </div>
                                <span class="sf-input-error" data-err-for="address"></span>
                            </label>
                        </div>
                        <div class="sf-checkout__ship-total-summary" id="sfShipTotalSummary">
                            <span class="sf-checkout__ship-total-summary__part">Shipping <strong id="sfSummaryShippingAmt">{{ $summary['formatted_shipping_fee'] ?? format_currency(0) }}</strong></span>
                            <span class="sf-checkout__ship-total-summary__dot" aria-hidden="true">&middot;</span>
                            <span class="sf-checkout__ship-total-summary__part">Order total <strong id="sfSummaryGrandAmt">{{ $summary['formatted_payable_total_after_coupon'] ?? ($summary['formatted_payable_total'] ?? format_currency(0)) }}</strong></span>
                        </div>
                        </div>{{-- /sfDeliveryAddressSection --}}
                    </div>
                    @endif

                    <div class="sf-checkout__panel">
                        <h2>Coupon</h2>
                        <div class="sf-checkout__grid">
                            <label class="sf-checkout__field--full">
                                Coupon code
                                <div class="sf-checkout__coupon-row">
                                    <input type="text" name="coupon_code" id="sfCouponCode" value="{{ old('coupon_code', request('coupon_code', $summary['coupon_code'] ?? '')) }}" placeholder="Enter coupon code">
                                    <button type="button" class="sf-btn sf-btn--outline sf-btn--sm" id="sfApplyCouponBtn">Apply</button>
                                </div>
                                <small id="sfCouponMsg" class="sf-checkout__coupon-msg"></small>
                                <span class="sf-input-error" data-err-for="coupon_code"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="sf-checkout__col sf-checkout__col--payment">
                    <div class="sf-checkout__panel">
                        <h2>Payment method</h2>
                        <span class="sf-input-error" data-err-for="payment_method"></span>
                        <div class="sf-checkout__mode sf-checkout__mode--payment sf-payment-tabs">
                            @foreach($enabledMethods as $method)
                                @php
                                    $icon = $methodIcons[$method] ?? null;
                                @endphp
                                <label class="sf-payment-tab {{ $selectedMethod === $method ? 'is-active' : '' }}">
                                    <input type="radio" name="payment_method" value="{{ $method }}" {{ $selectedMethod === $method ? 'checked' : '' }}>
                                    <span class="sf-payment-tab__icon" aria-hidden="true">
                                        @if($icon)
                                            <img src="{{ asset('storage/' . ltrim($icon, '/')) }}" alt="">
                                        @else
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none">
                                                <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.6"/>
                                                <path d="M3 10h18" stroke="currentColor" stroke-width="1.6"/>
                                            </svg>
                                        @endif
                                    </span>
                                    <span>{{ $methodLabels[$method] ?? ucfirst(str_replace('_', ' ', $method)) }}</span>
                                </label>
                            @endforeach
                        </div>
                        <div id="sfStripeFields" class="sf-checkout__account-fields" {{ $selectedMethod === 'stripe' ? '' : 'hidden' }}>
                            <div class="sf-checkout__grid">
                                <label class="sf-checkout__field--full">
                                    Name on card
                                    <input type="text" name="card_holder_name" autocomplete="cc-name" maxlength="120" placeholder="Card holder full name" value="{{ old('card_holder_name') }}">
                                    <span class="sf-input-error" data-err-for="card_holder_name"></span>
                                </label>
                                <label class="sf-checkout__field--full">
                                    Card number
                                    <div class="sf-checkout__card-row sf-checkout__card-row--suffix" id="sfCardNumberWrap">
                                        <input type="text" name="card_number" id="sfCardNumber" inputmode="numeric" autocomplete="cc-number" maxlength="19" placeholder="1234 5678 9012 3456" value="{{ old('card_number') }}">
                                        <span class="sf-card-type-badge" id="sfCardType" data-brand="generic" role="img" aria-label="Card network"></span>
                                    </div>
                                    <span class="sf-input-error" data-err-for="card_number"></span>
                                </label>
                                <label>
                                    Expiry (MM/YY)
                                    <input type="text" name="card_expiry" id="sfCardExpiry" inputmode="numeric" maxlength="5" autocomplete="cc-exp" placeholder="MM/YY" value="{{ old('card_expiry') }}">
                                    <span class="sf-input-error" data-err-for="card_expiry"></span>
                                </label>
                                <label>
                                    CVC
                                    <input type="text" name="card_cvc" inputmode="numeric" autocomplete="cc-csc" minlength="3" maxlength="4" placeholder="CVC" value="{{ old('card_cvc') }}">
                                    <span class="sf-input-error" data-err-for="card_cvc"></span>
                                </label>
                            </div>
                            <p class="sf-checkout__hint">Your card will be securely charged using the selected payment gateway.</p>
                        </div>
                        <div id="sfWalletFields" class="sf-checkout__account-fields" {{ in_array($selectedMethod, ['easypaisa','jazzcash'], true) || in_array($selectedMethod, $proofRequiredMethods, true) || in_array($selectedMethod, $transactionIdRequiredMethods, true) ? '' : 'hidden' }}>
                            <p class="sf-checkout__wallet-hint" id="sfWalletHint">Pay to the branch account below, then upload paid screenshot.</p>
                            <div class="sf-account-card" id="sfAccountCard" style="display:none">
                                <p class="sf-account-card__method" id="sfAccountMethod">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
                                    <span id="sfAccountMethodName"></span>
                                </p>
                                <p class="sf-account-card__number" id="sfAccountNumber">—</p>
                                <button type="button" class="sf-account-card__copy" id="sfCopyAccountBtn">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                                    <span id="sfCopyLabel">Copy</span>
                                </button>
                            </div>
                            <div class="sf-checkout__grid">
                                <label class="sf-checkout__field--full">
                                    <span class="sf-txn-label-row">
                                        Transaction ID <span class="text-danger d-none" id="sfTxnRequiredMark">*</span>
                                        <span class="sf-txn-info-wrap">
                                            <button type="button" class="sf-txn-info-btn" id="sfTxnInfoBtn" aria-label="Where do I find my Transaction ID?">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                                                Where do I find this?
                                            </button>
                                            <span class="sf-txn-tooltip" id="sfTxnTooltip" style="display:none">
                                                <span id="sfTxnHint">After completing the payment, open your app &rarr; go to <strong>Transaction History</strong> &rarr; copy the <strong>Transaction ID</strong> shown there.</span>
                                            </span>
                                        </span>
                                    </span>
                                    <input type="text" name="transaction_id" id="sfTxnId" value="{{ old('transaction_id') }}" placeholder="e.g. TXN1234567890">
                                    <span class="sf-input-error" data-err-for="transaction_id"></span>
                                </label>
                                <label class="sf-checkout__field--full sf-proof-upload-label">
                                    <span class="sf-proof-upload-label__header">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                        Attach Payment Screenshot <span class="text-danger d-none" id="sfProofRequiredMark">*</span>
                                    </span>
                                    <span class="sf-proof-upload-label__hint">Tap to select your payment receipt / screenshot</span>
                                    <input type="file" name="payment_proof" id="sfPaymentProof" accept="image/*">
                                    <span class="sf-input-error" data-err-for="payment_proof"></span>
                                </label>
                                <div id="sfProofPreviewWrap" class="sf-checkout__field--full sf-proof-card" style="display:none">
                                    <img id="sfProofPreview" class="sf-proof-card__img" alt="Payment proof">
                                    <div class="sf-proof-card__body">
                                        <p class="sf-proof-card__line1" id="sfProofConfirmLine1">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10"/></svg>
                                            Order amount paid
                                        </p>
                                        <p class="sf-proof-card__line2">Click on Process Order button below.</p>
                                        <button type="button" class="sf-proof-card__clear" id="sfClearProofBtn">✕ Remove</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="sf-checkout__cta-wrap sf-checkout__cta-wrap--right">
                        <button type="submit" class="sf-btn sf-btn--accent sf-checkout__submit sf-checkout__submit--full" id="sfPayBtn">
                            Process My Order {{ $summary['formatted_payable_total_after_coupon'] ?? ($summary['formatted_payable_total'] ?? '') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <script>
        (function () {
            const draftKey = 'sf_checkout_draft_{{ request()->route('slug') }}';
            const sfCsrf = '{{ csrf_token() }}';
            const sfCouponUrl = '{{ route("storefront.checkout.coupon", ["slug" => $sfStore->slug]) }}';
            const sfGeocodeUrl = '{{ route("storefront.checkout.geocode", ["slug" => $sfStore->slug]) }}';
            const sfReverseGeocodeUrl = '{{ route("storefront.checkout.reverse-geocode", ["slug" => $sfStore->slug]) }}';
            const sfBranchDisplayName = @json($sfStore->name ?? 'Store');
            const couponConfig = @json($couponConfigJs);
            const shippingCfg = @json($shippingCfg);
            const shippingOptions = @json($shippingOptions);
            const shippingLookup = @json($shippingLookup);
            const proofRequiredMethods = @json(array_values(array_unique(array_filter((array) $proofRequiredMethods))));
            const transactionIdRequiredMethods = @json(array_values(array_unique(array_filter((array) $transactionIdRequiredMethods))));
            const basePayable = {{ (float) ($summary['payable_total'] ?? 0) }};
            const sfCurrencySymbol = @json($sfStore->business->currency_symbol ?? '$');
            const sfCurrencyPosition = @json($sfStore->business->currency_symbol_position ?? 'before');
            const requestedCouponCode = @json(request()->query('coupon_code', ''));
            const resolvedCouponDiscount = {{ (float) ($summary['coupon_discount'] ?? 0) }};
            const resolvedCouponFormatted = @json($summary['formatted_coupon_discount'] ?? '');
            const guest = document.querySelector('input[name="checkout_mode"][value="guest"]');
            const account = document.querySelector('input[name="checkout_mode"][value="account"]');
            const fields = document.getElementById('sfCheckoutAccountFields');
            const pass = document.querySelector('input[name="password"]');
            const pass2 = document.querySelector('input[name="password_confirmation"]');
            const methodRadios = document.querySelectorAll('input[name="payment_method"]');
            const stripeFields = document.getElementById('sfStripeFields');
            const walletFields = document.getElementById('sfWalletFields');
            const stripeInputs = stripeFields ? stripeFields.querySelectorAll('input') : [];
            const proofInput = document.getElementById('sfPaymentProof');
            const txnIdInput = document.getElementById('sfTxnId');
            const txnReqMark = document.getElementById('sfTxnRequiredMark');
            const proofReqMark = document.getElementById('sfProofRequiredMark');
            const accountCard       = document.getElementById('sfAccountCard');
            const accountMethodName = document.getElementById('sfAccountMethodName');
            const accountNumberEl   = document.getElementById('sfAccountNumber');
            const copyAccountBtn    = document.getElementById('sfCopyAccountBtn');
            const copyLabel         = document.getElementById('sfCopyLabel');
            const walletHint        = document.getElementById('sfWalletHint');
            const methodLabels      = @json($methodLabels);
            const accountNumbers    = {
                jazzcash:  '{{ $paymentAccounts["jazzcash_number"] ?? "" }}',
                easypaisa: '{{ $paymentAccounts["easypaisa_number"] ?? "" }}',
            };
            const proofPreviewWrap = document.getElementById('sfProofPreviewWrap');
            const proofPreview = document.getElementById('sfProofPreview');
            const clearProofBtn = document.getElementById('sfClearProofBtn');
            const couponInput = document.getElementById('sfCouponCode');
            const couponBtn = document.getElementById('sfApplyCouponBtn');
            const couponMsg = document.getElementById('sfCouponMsg');
            const checkoutCouponEl = document.getElementById('sfCheckoutCoupon');
            const checkoutShippingEl = document.getElementById('sfCheckoutShipping');
            const summaryShippingLineEl = document.getElementById('sfSummaryShippingAmt');
            const summaryGrandLineEl = document.getElementById('sfSummaryGrandAmt');
            const checkoutGrandEl = document.getElementById('sfCheckoutGrand');
            const payableTopEl = document.querySelector('.sf-checkout__payable-amount');
            const payBtn = document.getElementById('sfPayBtn');
            const cardInput = document.getElementById('sfCardNumber');
            const cardTypeEl = document.getElementById('sfCardType');
            const expiryInput = document.getElementById('sfCardExpiry');
            const checkoutForm = document.getElementById('sfCheckoutForm');
            const shippingRadios = document.querySelectorAll('input[name="shipping_option"]');
            const deliveryAddressSection = document.getElementById('sfDeliveryAddressSection');
            const kmPricingNote = document.getElementById('sfKmPricingNote');
            const detectLocationBtn = document.getElementById('sfDetectLocationBtn');
            const shippingLatInput = document.getElementById('sfShippingCustomerLat');
            const shippingLngInput = document.getElementById('sfShippingCustomerLng');
            const shippingDistanceInput = document.getElementById('sfShippingDistanceKm');
            const shippingCountrySelect = document.getElementById('sfShippingCountry');
            const shippingCityInput = document.getElementById('sfShippingCity');
            const shippingStateInput = document.getElementById('sfShippingState');
            const shippingAreaInput = document.getElementById('sfShippingArea');
            const shippingZipInput = document.getElementById('sfShippingZip');
            const shippingAddressInput = document.getElementById('sfShippingAddress');
            const postalLookupHint = document.getElementById('sfPostalLookupHint');

            function isPickupShipping() {
                const sel = getSelectedShippingRadio();
                return !!(sel && sel.value === 'pickup');
            }

            function isDistanceShippingRate() {
                const sel = getSelectedShippingRadio();
                return !!(sel && sel.dataset.isDistance === '1');
            }

            function syncDeliveryAddressVisibility() {
                const pickup = isPickupShipping();
                if (deliveryAddressSection) deliveryAddressSection.hidden = pickup;
                if (kmPricingNote) kmPricingNote.hidden = pickup || !isDistanceShippingRate();
            }

            const regionLabelOverrides = {
                pk: 'Province', us: 'State', gb: 'County / region', ca: 'Province', ae: 'Emirate',
                in: 'State', au: 'State / territory', mx: 'State', br: 'State', de: 'State', my: 'State',
            };

            function refreshRegionFieldLabel() {
                const el = document.getElementById('sfRegionLabelText');
                if (!el) return;
                const cc = normLoc(shippingCountrySelect ? shippingCountrySelect.value : '');
                el.textContent = regionLabelOverrides[cc] || 'State / Province';
            }

            function applyStructuredAddressHints(data, options) {
                const o = Object.assign({
                    overwriteZipWith: null,
                    postalTyped: ''
                }, options || {});
                let cityLc = String(data.suggested_city || data.db_city || '').trim();
                let areaLc = String(data.suggested_area || '').trim();
                let stateLc = String(data.suggested_state || '').trim();
                if (!cityLc && areaLc) cityLc = areaLc;
                if (!areaLc && cityLc) areaLc = cityLc;
                if (shippingCityInput && cityLc) {
                    shippingCityInput.value = titleCaseWords(cityLc);
                    refreshAreaOptions();
                }
                if (shippingStateInput && stateLc) {
                    shippingStateInput.value = titleCaseWords(stateLc);
                }
                if (shippingAreaInput && areaLc) {
                    shippingAreaInput.value = titleCaseWords(areaLc);
                }
                if (shippingZipInput && o.overwriteZipWith != null && String(o.overwriteZipWith).trim() !== '') {
                    shippingZipInput.value = String(o.overwriteZipWith).trim().replace(/\s+/g, ' ').toUpperCase();
                } else if (shippingZipInput && o.postalTyped) {
                    shippingZipInput.value = String(o.postalTyped).trim().replace(/\s+/g, ' ').toUpperCase();
                }
                const addrLine = String(data.suggested_address_line || '').trim();
                if (shippingAddressInput && addrLine !== '') {
                    shippingAddressInput.value = addrLine;
                }
                refreshRegionFieldLabel();
            }

            function formatCurrency(value) {
                const n = Number(value || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                return sfCurrencyPosition === 'after' ? n + sfCurrencySymbol : sfCurrencySymbol + n;
            }

            function getAppliedCouponAmount() {
                const txt = (checkoutCouponEl ? checkoutCouponEl.textContent : '').replace(/[^\d.-]/g, '');
                const n = Number(txt || 0);
                return Math.abs(Number.isFinite(n) ? n : 0);
            }

            function getSelectedShippingRadio() {
                return document.querySelector('input[name="shipping_option"]:checked');
            }

            function haversineKm(lat1, lon1, lat2, lon2) {
                const toRad = (v) => (v * Math.PI) / 180;
                const R = 6371;
                const dLat = toRad(lat2 - lat1);
                const dLon = toRad(lon2 - lon1);
                const a = Math.sin(dLat / 2) * Math.sin(dLat / 2)
                    + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2))
                    * Math.sin(dLon / 2) * Math.sin(dLon / 2);
                return 2 * R * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            }

            function calcDistanceFee(distanceKm, perKmRate) {
                const d = Number(distanceKm || 0);
                const r = Number(perKmRate || 0);
                return Math.max(0, d * r);
            }

            function branchDistanceLine(km) {
                if (km == null || Number.isNaN(Number(km))) return '';
                const n = Number(km);
                if (n < 0) return '';
                return 'Your distance (~' + n.toFixed(2) + ' km) from your ' + sfBranchDisplayName + '.';
            }

            function setPostalDistanceHint(km) {
                const el = document.getElementById('sfPostalLookupHint');
                if (!el) return;
                el.textContent = isDistanceShippingRate() ? branchDistanceLine(km) : '';
            }

            function setDetectDistanceHint(km) {
                const el = document.getElementById('sfLocationHint');
                if (!el) return;
                if (isPickupShipping()) return;
                if (isDistanceShippingRate()) {
                    el.textContent = branchDistanceLine(km) || 'Your delivery fee is calculated from your location.';
                } else {
                    el.textContent = km != null && !Number.isNaN(Number(km))
                        ? ('About ' + Number(km).toFixed(2) + ' km from ' + sfBranchDisplayName + ' — flat delivery rate applies.')
                        : 'GPS fills city, region, and postal code (same as ZIP lookup). Your package uses the flat shipping rate.';
                }
            }

            function refreshGrandWithShipping() {
                let shippingFee = 0;
                const selected = getSelectedShippingRadio();
                if (selected) {
                    const isDistance = selected.dataset.isDistance === '1';
                    if (selected.value === 'pickup') {
                        shippingFee = 0;
                    } else if (isDistance) {
                        const distance = Number((shippingDistanceInput && shippingDistanceInput.value) || 0);
                        shippingFee = calcDistanceFee(distance, Number(selected.dataset.flatFee || 0));
                    } else {
                        shippingFee = Number(selected.dataset.flatFee || 0);
                    }
                }
                if (checkoutShippingEl) checkoutShippingEl.textContent = formatCurrency(shippingFee);
                const grand = Math.max(0, Number(basePayable || 0) - getAppliedCouponAmount() + shippingFee);
                if (checkoutGrandEl) checkoutGrandEl.textContent = formatCurrency(grand);
                if (payableTopEl) payableTopEl.textContent = formatCurrency(grand);
                if (summaryShippingLineEl) summaryShippingLineEl.textContent = formatCurrency(shippingFee);
                if (summaryGrandLineEl) summaryGrandLineEl.textContent = formatCurrency(grand);
                return shippingFee;
            }

            function normLoc(s) {
                return String(s || '').toLowerCase().trim();
            }

            function titleCaseWords(s) {
                return String(s || '').trim().replace(/\s+/g, ' ').replace(/\b\w/g, function (m) { return m.toUpperCase(); });
            }

            function hintMatchesCountryCity(h, country, city) {
                const co = normLoc(country);
                const ci = normLoc(city);
                if (h.country != null && String(h.country) !== '' && normLoc(h.country) !== co) return false;
                const hcSet = h.city != null && String(h.city).trim() !== '';
                if (hcSet) {
                    if (!ci) return false;
                    if (normLoc(h.city) !== ci) return false;
                }
                return true;
            }

            function refreshCityOptions() {
                const cityList = document.getElementById('sfShippingCityList');
                if (!cityList) return;
                const selectedCountry = normLoc(shippingCountrySelect && shippingCountrySelect.value);
                const byCountry = (shippingLookup && shippingLookup.cities_by_country) ? shippingLookup.cities_by_country : {};
                const globalCities = (shippingLookup && Array.isArray(shippingLookup.global_cities)) ? shippingLookup.global_cities : [];
                let cities = (selectedCountry && Array.isArray(byCountry[selectedCountry])) ? byCountry[selectedCountry].slice() : [];
                if (!cities.length) cities = globalCities.slice();

                const seen = {};
                (Array.isArray(shippingLookup && shippingLookup.zip_hints) ? shippingLookup.zip_hints : []).forEach(function (h) {
                    if (!hintMatchesCountryCity(h, selectedCountry, '')) return;
                    if (h.city) {
                        const k = normLoc(h.city);
                        if (k && !seen[k]) { seen[k] = true; cities.push(k); }
                    }
                });

                cities = cities.map(function (c) { return normLoc(c); }).filter(Boolean);
                cities = Array.from(new Set(cities));

                cityList.innerHTML = cities.map(function (c) {
                    const v = titleCaseWords(c.replace(/[^\w\s\-']/g, ''));
                    const safe = String(v || c).trim();
                    return '<option value="' + safe.replace(/"/g, '&quot;') + '">';
                }).join('');
            }

            function refreshAreaOptions() {
                const areaList = document.getElementById('sfShippingAreaList');
                if (!areaList) return;
                const selectedCountry = normLoc(shippingCountrySelect && shippingCountrySelect.value);
                const byCountry = (shippingLookup && shippingLookup.areas_by_country) ? shippingLookup.areas_by_country : {};
                const globalAreas = (shippingLookup && Array.isArray(shippingLookup.global_areas)) ? shippingLookup.global_areas : [];
                let areas = (selectedCountry && Array.isArray(byCountry[selectedCountry])) ? byCountry[selectedCountry].slice() : [];
                if (!areas.length) areas = globalAreas.slice();

                const hinted = [];
                const hints = Array.isArray(shippingLookup && shippingLookup.area_hints) ? shippingLookup.area_hints : [];
                hints.forEach(function (h) {
                    if (!h || !h.area) return;
                    if (!hintMatchesCountryCity(h, shippingCountrySelect ? shippingCountrySelect.value : '', shippingCityInput ? shippingCityInput.value : '')) return;
                    hinted.push(normLoc(h.area));
                });

                areas = areas.map(function (a) { return normLoc(a); }).filter(Boolean).concat(hinted);
                areas = Array.from(new Set(areas));

                areaList.innerHTML = areas.map(function (a) {
                    const v = titleCaseWords(a.replace(/[^\w\s\-']/g, ''));
                    const safe = String(v || a).trim();
                    return '<option value="' + safe.replace(/"/g, '&quot;') + '">';
                }).join('');
            }

            function refreshZipSuggestions() {
                if (!shippingZipInput) return;
                shippingZipInput.removeAttribute('list');
                const zipList = document.getElementById('sfShippingZipList');
                if (zipList && zipList.parentNode) zipList.parentNode.removeChild(zipList);
            }

            let postalLookupSeq = 0;
            let zipLookupTimer = null;
            async function lookupPostalDistance() {
                postalLookupSeq++;
                const reqId = postalLookupSeq;
                if (!shippingZipInput || !shippingCountrySelect) return;
                const postal = String(shippingZipInput.value || '').trim();
                const postalNorm = postal.replace(/\s+/g, ' ').toUpperCase();
                const cc = normLoc(shippingCountrySelect.value);
                if (!cc || postal.length < 4) {
                    setPostalDistanceHint(null);
                    if (!postal && postalLookupHint) postalLookupHint.textContent = '';
                    if (!isDistanceShippingRate() && shippingDistanceInput) shippingDistanceInput.value = '';
                    refreshGrandWithShipping();
                    updatePayBtnText();
                    return;
                }
                if (postalLookupHint) postalLookupHint.textContent = 'Looking up postal code…';
                try {
                    const res = await fetch(sfGeocodeUrl, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': sfCsrf, 'X-Requested-With': 'XMLHttpRequest' },
                        body: JSON.stringify({ country: cc, postal: postal }),
                        credentials: 'same-origin',
                    });
                    const data = await res.json().catch(function () { return {}; });
                    if (reqId !== postalLookupSeq) return;
                    if (String(shippingZipInput.value || '').trim().replace(/\s+/g, ' ').toUpperCase() !== postalNorm) return;
                    if (!res.ok) {
                        if (postalLookupHint) postalLookupHint.textContent = data.message || 'Postal lookup unavailable right now.';
                        return;
                    }
                    const zipFromApi = data.postcode != null && String(data.postcode).trim() !== ''
                        ? String(data.postcode).trim().replace(/\s+/g, ' ')
                        : null;
                    applyStructuredAddressHints(data, { overwriteZipWith: zipFromApi, postalTyped: postal });
                    refreshZipSuggestions();
                    refreshCityOptions();
                    refreshAreaOptions();

                    const hasCoords = data.lat != null && data.lng != null && !Number.isNaN(Number(data.lat)) && !Number.isNaN(Number(data.lng));
                    if (hasCoords) {
                        if (shippingLatInput) shippingLatInput.value = Number(data.lat).toFixed(6);
                        if (shippingLngInput) shippingLngInput.value = Number(data.lng).toFixed(6);
                    }
                    const originOk = !!(Number(shippingCfg.origin_lat || 0) && Number(shippingCfg.origin_lng || 0));
                    let kmVal = null;
                    if (isDistanceShippingRate()) {
                        if (data.distance_km != null) kmVal = Number(data.distance_km);
                        else if (hasCoords && originOk) {
                            kmVal = haversineKm(Number(shippingCfg.origin_lat), Number(shippingCfg.origin_lng), Number(data.lat), Number(data.lng));
                        }
                        if (shippingDistanceInput && kmVal != null) {
                            shippingDistanceInput.value = kmVal.toFixed(2);
                        }
                    } else if (shippingDistanceInput) {
                        shippingDistanceInput.value = '';
                    }
                    setPostalDistanceHint(kmVal);
                    if (postalLookupHint) postalLookupHint.textContent = data.source ? 'Address details updated from OpenStreetMap.' : '';
                    refreshGrandWithShipping();
                    updatePayBtnText();
                } catch (_) {
                    if (postalLookupHint) postalLookupHint.textContent = 'Could not look up postal code (offline or rate limit).';
                }
            }

            function schedulePostalLookup() {
                if (zipLookupTimer) clearTimeout(zipLookupTimer);
                zipLookupTimer = setTimeout(lookupPostalDistance, 500);
            }

            function loadDraft() {
                try {
                    const raw = localStorage.getItem(draftKey);
                    if (!raw) return {};
                    return JSON.parse(raw) || {};
                } catch (_) {
                    return {};
                }
            }

            function saveDraft(partial) {
                try {
                    const prev = loadDraft();
                    localStorage.setItem(draftKey, JSON.stringify(Object.assign({}, prev, partial)));
                } catch (_) {}
            }

            function removeDraftKeys(keys) {
                try {
                    const prev = loadDraft();
                    keys.forEach(k => delete prev[k]);
                    localStorage.setItem(draftKey, JSON.stringify(prev));
                } catch (_) {}
            }

            function detectCardType(num) {
                const n = (num || '').replace(/\D/g, '');
                if (/^4/.test(n)) return 'Visa';
                if (/^(5[1-5]|2(2[2-9]|[3-6]|7[01]|720))/.test(n)) return 'Mastercard';
                if (/^3[47]/.test(n)) return 'Amex';
                if (/^6(?:011|5)/.test(n)) return 'Discover';
                if (/^35/.test(n)) return 'JCB';
                return 'Card';
            }

            const sfCardBrandSvg = {
                Visa: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 22" class="sf-card-type-badge__svg" aria-hidden="true"><rect width="56" height="22" rx="4" fill="#1434CB"/><text x="28" y="15.5" text-anchor="middle" fill="#fff" font-family="system-ui,Segoe UI,sans-serif" font-weight="800" font-size="11">VISA</text></svg>',
                Mastercard: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32" class="sf-card-type-badge__svg" aria-hidden="true"><circle cx="18" cy="16" r="11" fill="#EB001B"/><circle cx="30" cy="16" r="11" fill="#F79E1B"/></svg>',
                Amex: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 22" class="sf-card-type-badge__svg" aria-hidden="true"><rect width="56" height="22" rx="4" fill="#016FD0"/><text x="28" y="15.5" text-anchor="middle" fill="#fff" font-family="system-ui,Segoe UI,sans-serif" font-weight="800" font-size="9">AMEX</text></svg>',
                Discover: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 22" class="sf-card-type-badge__svg" aria-hidden="true"><rect width="70" height="22" rx="4" fill="#FF6000"/><text x="35" y="15.5" text-anchor="middle" fill="#fff" font-family="system-ui,Segoe UI,sans-serif" font-weight="800" font-size="8">DISCOVER</text></svg>',
                JCB: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 22" class="sf-card-type-badge__svg" aria-hidden="true"><rect width="56" height="22" rx="4" fill="#0B4EA2"/><text x="28" y="15.5" text-anchor="middle" fill="#fff" font-family="system-ui,Segoe UI,sans-serif" font-weight="800" font-size="10.5">JCB</text></svg>',
                Card: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sf-card-type-badge__svg sf-card-type-badge__svg--generic" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>'
            };

            const sfCardBrandDataset = { Visa: 'visa', Mastercard: 'mastercard', Amex: 'amex', Discover: 'discover', JCB: 'jcb', Card: 'generic' };

            function renderSfCardTypeBadge() {
                if (!cardTypeEl || !cardInput) return;
                const brand = detectCardType(cardInput.value);
                cardTypeEl.innerHTML = sfCardBrandSvg[brand] || sfCardBrandSvg.Card;
                cardTypeEl.dataset.brand = sfCardBrandDataset[brand] || 'generic';
                cardTypeEl.setAttribute('aria-label', brand === 'Card' ? 'Card network not detected' : (brand + ' card'));
            }

            function normalizeCardInput(value) {
                return (value || '').replace(/\D/g, '').slice(0, 16).replace(/(.{4})/g, '$1 ').trim();
            }

            function normalizeExpiry(value) {
                const clean = (value || '').replace(/\D/g, '').slice(0, 4);
                if (clean.length <= 2) return clean;
                return clean.slice(0, 2) + '/' + clean.slice(2, 4);
            }

            async function applyCoupon() {
                const code = (couponInput ? couponInput.value : '').trim();
                if (!code) {
                    if (couponMsg) {
                        couponMsg.textContent = 'Enter coupon code first.';
                        couponMsg.className = 'sf-checkout__coupon-msg is-error';
                    }
                    return;
                }
                if (couponBtn) { couponBtn.disabled = true; couponBtn.textContent = '…'; }
                if (couponMsg) { couponMsg.textContent = 'Checking…'; couponMsg.className = 'sf-checkout__coupon-msg'; }
                try {
                    const emailEl = document.querySelector('input[name="email"]');
                    const res  = await fetch(sfCouponUrl, {
                        method:  'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': sfCsrf },
                        body:    JSON.stringify({ coupon_code: code, email: emailEl ? emailEl.value.trim() : '' }),
                    });
                    const data = await res.json().catch(() => ({}));
                    if (data.ok) {
                        if (checkoutCouponEl) checkoutCouponEl.textContent = '-' + data.formatted_coupon_discount;
                        refreshGrandWithShipping();
                        const activeMethod = (document.querySelector('input[name="payment_method"]:checked') || {}).value || '';
                        updateWalletHint(activeMethod);
                        updatePayBtnText();
                        if (couponMsg) {
                            couponMsg.textContent = '🎉 Coupon applied — ' + data.formatted_coupon_discount + ' off!';
                            couponMsg.className = 'sf-checkout__coupon-msg is-success';
                        }
                    } else {
                        if (couponMsg) {
                            couponMsg.textContent = data.message || 'Coupon code is invalid or not applicable.';
                            couponMsg.className = 'sf-checkout__coupon-msg is-error';
                        }
                    }
                } catch (_) {
                    if (couponMsg) {
                        couponMsg.textContent = 'Could not validate coupon. Try again.';
                        couponMsg.className = 'sf-checkout__coupon-msg is-error';
                    }
                } finally {
                    if (couponBtn) { couponBtn.disabled = false; couponBtn.textContent = 'Apply'; }
                }
            }

            const checkSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';

            function updatePayBtn() {
                if (!payBtn || !payableTopEl) return;
                const method       = (document.querySelector('input[name="payment_method"]:checked') || {}).value || '';
                const proofActuallyRequired = !!(proofInput && proofInput.required === true && !proofInput.disabled);
                const txnActuallyRequired = !!(txnIdInput && txnIdInput.required === true && !txnIdInput.disabled);
                const hasProof      = !!(proofInput && proofInput.files && proofInput.files.length > 0);
                const hasTxn        = !!(txnIdInput && String(txnIdInput.value || '').trim() !== '');
                const amount        = payableTopEl.textContent.trim();

                const readyProof = proofActuallyRequired ? hasProof : true;
                const readyTxn = txnActuallyRequired ? hasTxn : true;
                const baseLabel = method === 'stripe' ? 'Charge' : 'Process My Order';
                if ((proofActuallyRequired || txnActuallyRequired) && readyProof && readyTxn) {
                    payBtn.classList.add('sf-checkout__submit--ready');
                    payBtn.innerHTML = checkSVG + ' ' + baseLabel + ' ' + amount;
                } else {
                    payBtn.classList.remove('sf-checkout__submit--ready');
                    payBtn.innerHTML = baseLabel + ' ' + amount;
                }
            }

            function updatePayBtnText() { updatePayBtn(); }

            function toggle() {
                if (!fields || !account) return;
                const on = account.checked;
                fields.hidden = !on;
                if (pass) pass.required = on;
                if (pass2) pass2.required = on;
            }
            function updateWalletHint(method) {
                const label = methodLabels[method] || method.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());

                if (walletHint && payableTopEl) {
                    const amount = payableTopEl.textContent.trim();
                    walletHint.innerHTML = 'Pay <strong>' + amount + '</strong> into <strong>' + label + '</strong> to place order.';
                }

                const txnHint = document.getElementById('sfTxnHint');
                if (txnHint) {
                    txnHint.innerHTML = 'After completing the payment, open your <strong>' + label + '</strong> app &rarr; go to <strong>Transaction History</strong> &rarr; copy the <strong>Transaction ID</strong> shown there.';
                }

                const number = accountNumbers[method] || '';
                if (accountCard) {
                    if (number) {
                        if (accountMethodName) accountMethodName.textContent = label;
                        if (accountNumberEl)   accountNumberEl.textContent   = number;
                        accountCard.style.display = 'flex';
                    } else {
                        accountCard.style.display = 'none';
                    }
                }
            }

            function toggleStripe() {
                const selected = document.querySelector('input[name="payment_method"]:checked');
                const method = selected ? selected.value : '';
                const stripeOn = method === 'stripe';

                if (stripeFields) {
                    stripeFields.hidden = !stripeOn;
                    stripeInputs.forEach(function (input) {
                        const name = input.getAttribute('name');
                        if (!name) return;
                        if (['card_holder_name', 'card_number', 'card_expiry', 'card_cvc'].indexOf(name) !== -1) {
                            input.required = stripeOn;
                        }
                    });
                }

                const walletOn = method === 'easypaisa' || method === 'jazzcash';
                const proofOn = !!method && (proofRequiredMethods.includes(method) || walletOn);
                const txnOn = !!method && transactionIdRequiredMethods.includes(method);
                const showWalletSection = !!(proofOn || txnOn);

                if (walletFields) {
                    walletFields.hidden = !showWalletSection;
                }

                if (proofInput) {
                    if (!showWalletSection) {
                        proofInput.required = false;
                        proofInput.removeAttribute('required');
                        proofInput.disabled = true;
                        try {
                            proofInput.value = '';
                        } catch (_) { /* noop */ }
                        if (proofPreviewWrap) proofPreviewWrap.style.display = 'none';
                    } else {
                        proofInput.disabled = false;
                        proofInput.required = !!proofOn;
                    }
                }

                if (txnIdInput) {
                    if (!showWalletSection) {
                        txnIdInput.required = false;
                        txnIdInput.removeAttribute('required');
                        txnIdInput.disabled = true;
                        txnIdInput.value = '';
                    } else {
                        txnIdInput.disabled = false;
                        txnIdInput.required = !!txnOn;
                    }
                }

                if (proofReqMark) proofReqMark.classList.toggle('d-none', !proofOn || !showWalletSection);
                if (txnReqMark) txnReqMark.classList.toggle('d-none', !txnOn || !showWalletSection);
                updateWalletHint(method);
                updatePayBtnText();
                if (stripeOn) {
                    renderSfCardTypeBadge();
                }
            }
            function syncModePills() {
                document.querySelectorAll('.sf-mode-pill').forEach(function (pill) {
                    const radio = pill.querySelector('input[type="radio"]');
                    pill.classList.toggle('is-active', !!(radio && radio.checked));
                });
            }
            if (guest) guest.addEventListener('change', function () { toggle(); syncModePills(); });
            if (account) account.addEventListener('change', function () { toggle(); syncModePills(); });
            methodRadios.forEach(function (el) { el.addEventListener('change', toggleStripe); });
            methodRadios.forEach(function (el) {
                el.addEventListener('change', function () {
                    document.querySelectorAll('input[name="payment_method"]').forEach(function (r) {
                        const tab = r.closest('.sf-payment-tab');
                        if (tab) tab.classList.remove('is-active');
                    });
                    const holder = el.closest('.sf-payment-tab');
                    if (holder) holder.classList.add('is-active');
                });
            });
            shippingRadios.forEach(function (el) {
                el.addEventListener('change', function () {
                    document.querySelectorAll('input[name="shipping_option"]').forEach(function (r) {
                        const wrap = r.closest('.sf-payment-tab');
                        if (wrap) wrap.classList.toggle('is-active', r.checked);
                    });
                    syncDeliveryAddressVisibility();
                    refreshRegionFieldLabel();
                    const distanceOn = el.checked && el.dataset.isDistance === '1';
                    if (distanceOn) lookupPostalDistance();
                    refreshGrandWithShipping();
                    updatePayBtnText();
                });
            });
            const shippingTabsWrap = document.getElementById('sfShippingTabs');
            if (shippingTabsWrap) {
                shippingTabsWrap.addEventListener('click', function (e) {
                    const tab = e.target.closest('.sf-payment-tab');
                    if (!tab || !shippingTabsWrap.contains(tab)) return;
                    const radio = tab.querySelector('input[type="radio"][name="shipping_option"]');
                    if (!radio || radio.disabled) return;
                    if (radio.checked) return;
                    radio.checked = true;
                    radio.dispatchEvent(new Event('change', { bubbles: true }));
                });
            }
            if (shippingCountrySelect) {
                shippingCountrySelect.addEventListener('change', function () {
                    postalLookupSeq++;
                    refreshCityOptions();
                    refreshAreaOptions();
                    refreshZipSuggestions();
                    schedulePostalLookup();
                    refreshGrandWithShipping();
                    refreshRegionFieldLabel();
                });
            }
            if (shippingCityInput) {
                shippingCityInput.addEventListener('input', function () {
                    refreshAreaOptions();
                    refreshZipSuggestions();
                    refreshGrandWithShipping();
                });
            }
            if (shippingAreaInput) {
                shippingAreaInput.addEventListener('input', function () {
                    refreshGrandWithShipping();
                });
            }
            if (shippingZipInput) {
                shippingZipInput.addEventListener('input', function () {
                    schedulePostalLookup();
                });
                shippingZipInput.addEventListener('blur', function () { lookupPostalDistance(); });
            }
            if (detectLocationBtn) {
                detectLocationBtn.addEventListener('click', function () {
                    if (!navigator.geolocation) {
                        const lh = document.getElementById('sfLocationHint');
                        if (lh) lh.textContent = 'Geolocation is not supported on this device.';
                        return;
                    }
                    const lh0 = document.getElementById('sfLocationHint');
                    if (lh0) lh0.textContent = 'Detecting location…';
                    navigator.geolocation.getCurrentPosition(async function (pos) {
                        const pricingDistance = isDistanceShippingRate();
                        const lat = Number(pos.coords.latitude || 0);
                        const lng = Number(pos.coords.longitude || 0);
                        if (shippingLatInput) shippingLatInput.value = lat.toFixed(6);
                        if (shippingLngInput) shippingLngInput.value = lng.toFixed(6);

                        const originLat = Number(shippingCfg.origin_lat || 0);
                        const originLng = Number(shippingCfg.origin_lng || 0);
                        let kmClient = null;
                        if (pricingDistance && originLat && originLng) {
                            kmClient = haversineKm(originLat, originLng, lat, lng);
                            if (shippingDistanceInput) shippingDistanceInput.value = kmClient.toFixed(2);
                        } else if (shippingDistanceInput) {
                            shippingDistanceInput.value = '';
                        }
                        const kmApprox = pricingDistance ? kmClient : (originLat && originLng ? haversineKm(originLat, originLng, lat, lng) : null);
                        setDetectDistanceHint(kmApprox);
                        refreshGrandWithShipping();

                        try {
                            const res = await fetch(sfReverseGeocodeUrl, {
                                method: 'POST',
                                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': sfCsrf, 'X-Requested-With': 'XMLHttpRequest' },
                                body: JSON.stringify({ lat: lat, lng: lng, pricing_distance: pricingDistance }),
                                credentials: 'same-origin',
                            });
                            const data = await res.json().catch(function () { return {}; });
                            if (res.ok && data.ok) {
                                let priorZip = shippingZipInput ? String(shippingZipInput.value || '').trim() : '';
                                if (shippingCountrySelect && data.country_code) {
                                    const cc = normLoc(data.country_code);
                                    for (let i = 0; i < shippingCountrySelect.options.length; i++) {
                                        if (normLoc(shippingCountrySelect.options[i].value) === cc) {
                                            shippingCountrySelect.selectedIndex = i;
                                            break;
                                        }
                                    }
                                }
                                const zipFromApi = data.postcode != null && String(data.postcode).trim() !== ''
                                    ? String(data.postcode).trim().replace(/\s+/g, ' ')
                                    : null;
                                applyStructuredAddressHints(data, {
                                    overwriteZipWith: zipFromApi,
                                    postalTyped: priorZip,
                                });
                                refreshCityOptions();
                                refreshAreaOptions();
                                refreshZipSuggestions();
                                if (pricingDistance && data.distance_km != null && shippingDistanceInput) {
                                    shippingDistanceInput.value = Number(data.distance_km).toFixed(2);
                                } else if (!pricingDistance && shippingDistanceInput) {
                                    shippingDistanceInput.value = '';
                                }
                                const kmShow = pricingDistance && data.distance_km != null
                                    ? Number(data.distance_km)
                                    : kmApprox;
                                setDetectDistanceHint(kmShow);
                                if (postalLookupHint) postalLookupHint.textContent = data.source ? 'Address details updated from OpenStreetMap.' : '';
                            }
                        } catch (_) { /* keep client km + coords */ }
                        refreshGrandWithShipping();
                        updatePayBtnText();
                    }, function () {
                        const lh = document.getElementById('sfLocationHint');
                        if (lh) lh.textContent = 'Location permission denied.';
                    }, { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 });
                });
            }
            if (couponBtn) couponBtn.addEventListener('click', applyCoupon);
            if (couponInput) couponInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); applyCoupon(); } });
            if (cardInput) {
                cardInput.addEventListener('input', function () {
                    cardInput.value = normalizeCardInput(cardInput.value);
                    renderSfCardTypeBadge();
                });
            }
            if (expiryInput) {
                expiryInput.addEventListener('input', function () {
                    expiryInput.value = normalizeExpiry(expiryInput.value);
                });
            }
            if (proofInput) {
                proofInput.addEventListener('change', function () {
                    const file = this.files && this.files[0] ? this.files[0] : null;
                    if (!file) {
                        if (proofPreviewWrap) proofPreviewWrap.style.display = 'none';
                        removeDraftKeys(['payment_proof_preview']);
                        updatePayBtn();
                        return;
                    }
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const dataUrl = String(e.target?.result || '');
                        if (proofPreview) proofPreview.src = dataUrl;
                        if (proofPreviewWrap) proofPreviewWrap.style.display = 'flex';
                        const line1 = document.getElementById('sfProofConfirmLine1');
                        if (line1 && payableTopEl) {
                            const svg = line1.querySelector('svg');
                            line1.textContent = 'Order amount ' + payableTopEl.textContent.trim() + ' paid';
                            if (svg) line1.prepend(svg);
                        }
                        saveDraft({ payment_proof_preview: dataUrl });
                        updatePayBtn();
                    };
                    reader.readAsDataURL(file);
                });
            }
            if (txnIdInput) txnIdInput.addEventListener('input', updatePayBtn);
            const txnInfoBtn     = document.getElementById('sfTxnInfoBtn');
            const txnTooltip     = document.getElementById('sfTxnTooltip');
            if (txnInfoBtn && txnTooltip) {
                txnInfoBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    const open = txnTooltip.style.display !== 'none';
                    txnTooltip.style.display = open ? 'none' : 'block';
                });
                document.addEventListener('click', function (e) {
                    if (!txnInfoBtn.contains(e.target) && !txnTooltip.contains(e.target)) {
                        txnTooltip.style.display = 'none';
                    }
                });
            }
            if (copyAccountBtn && accountNumberEl) {
                copyAccountBtn.addEventListener('click', function () {
                    const num = accountNumberEl.textContent.trim();
                    navigator.clipboard.writeText(num).then(function () {
                        if (copyLabel) copyLabel.textContent = 'Copied!';
                        copyAccountBtn.classList.add('is-copied');
                        setTimeout(function () {
                            if (copyLabel) copyLabel.textContent = 'Copy';
                            copyAccountBtn.classList.remove('is-copied');
                        }, 2000);
                    });
                });
            }
            if (clearProofBtn && proofInput) {
                clearProofBtn.addEventListener('click', function () {
                    proofInput.value = '';
                    if (proofPreview) proofPreview.src = '';
                    if (proofPreviewWrap) proofPreviewWrap.style.display = 'none';
                    removeDraftKeys(['payment_proof_preview']);
                    updatePayBtn();
                });
            }

            // Persist guest checkout fields so first-time customers do not lose entries on reload.
            const persistFields = ['name', 'phone', 'email', 'note', 'address', 'coupon_code', 'transaction_id', 'checkout_mode', 'payment_method', 'shipping_option', 'shipping_country', 'shipping_city', 'shipping_state', 'shipping_area', 'shipping_zip', 'shipping_customer_lat', 'shipping_customer_lng', 'shipping_distance_km'];
            persistFields.forEach((field) => {
                const nodes = document.querySelectorAll(`[name="${field}"]`);
                if (!nodes.length) return;
                nodes.forEach((node) => {
                    const eventName = (node.type === 'radio' || node.type === 'checkbox' || node.tagName === 'SELECT') ? 'change' : 'input';
                    node.addEventListener(eventName, function () {
                        if (node.type === 'radio') {
                            const checked = document.querySelector(`[name="${field}"]:checked`);
                            saveDraft({ [field]: checked ? checked.value : '' });
                        } else if (node.type === 'checkbox') {
                            saveDraft({ [field]: !!node.checked });
                        } else {
                            saveDraft({ [field]: node.value || '' });
                        }
                    });
                });
            });

            const draft = loadDraft();
            persistFields.forEach((field) => {
                if (typeof draft[field] === 'undefined') return;
                const nodes = document.querySelectorAll(`[name="${field}"]`);
                if (!nodes.length) return;
                if (nodes[0].type === 'radio') {
                    const node = Array.from(nodes).find(n => n.value === draft[field]);
                    if (node) {
                        node.checked = true;
                    }
                } else if (nodes[0].type === 'checkbox') {
                    nodes[0].checked = !!draft[field];
                } else if (!nodes[0].value) {
                    nodes[0].value = draft[field];
                }
            });

            const restoredShippingOpt = document.querySelector('input[name="shipping_option"]:checked');
            if (restoredShippingOpt) {
                restoredShippingOpt.dispatchEvent(new Event('change', { bubbles: true }));
            }

            // File inputs can't survive a page reload — always clear stale preview
            removeDraftKeys(['payment_proof_preview']);
            if (proofPreview) proofPreview.src = '';
            if (proofPreviewWrap) proofPreviewWrap.style.display = 'none';

            // Show coupon status message when page loaded after Apply redirect
            if (requestedCouponCode && couponMsg) {
                couponMsg.classList.remove('is-success', 'is-error');
                if (resolvedCouponDiscount > 0) {
                    couponMsg.textContent = '🎉 Coupon applied — ' + resolvedCouponFormatted + ' off!';
                    couponMsg.classList.add('is-success');
                } else {
                    couponMsg.textContent = 'Coupon code is invalid or not applicable.';
                    couponMsg.classList.add('is-error');
                }
            }

            const newCustomerSignupBtn = document.getElementById('sfNewCustomerSignupBtn');
            if (newCustomerSignupBtn && account) {
                newCustomerSignupBtn.addEventListener('click', function () {
                    account.checked = true;
                    account.dispatchEvent(new Event('change', { bubbles: true }));
                    const customerPanel = document.querySelector('.sf-checkout__col--customer');
                    if (customerPanel) customerPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
            }

            // Ensure UI highlights and required-field toggles match restored radios.
            const restoredPayment = document.querySelector('input[name="payment_method"]:checked');
            if (restoredPayment) restoredPayment.dispatchEvent(new Event('change', { bubbles: true }));
            const restoredMode = document.querySelector('input[name="checkout_mode"]:checked');
            if (restoredMode) restoredMode.dispatchEvent(new Event('change', { bubbles: true }));

            function clearCheckoutFieldErrors() {
                document.querySelectorAll('.sf-input-error[data-err-for]').forEach(function (el) {
                    el.textContent = '';
                    el.style.display = 'none';
                });
                const topErr = document.getElementById('sfCheckoutFormError');
                if (topErr) {
                    topErr.style.display = 'none';
                    topErr.textContent = '';
                }
            }

            function showCheckoutFieldErrors(errors) {
                clearCheckoutFieldErrors();
                if (!errors || typeof errors !== 'object') return;
                Object.keys(errors).forEach(function (key) {
                    const msgs = errors[key];
                    const text = Array.isArray(msgs) ? msgs.join(' ') : String(msgs);
                    if (key === 'checkout') {
                        const topErr = document.getElementById('sfCheckoutFormError');
                        if (topErr) {
                            topErr.textContent = text;
                            topErr.style.display = 'block';
                        }
                        return;
                    }
                    const el = document.querySelector('.sf-input-error[data-err-for="' + key + '"]');
                    if (el) {
                        el.textContent = text;
                        el.style.display = 'block';
                    }
                });
                const firstErr = Array.from(document.querySelectorAll('.sf-input-error[data-err-for]')).find(function (el) {
                    return (el.textContent || '').trim().length > 0;
                });
                const topVis = document.getElementById('sfCheckoutFormError');
                if (topVis && topVis.style.display === 'block') {
                    topVis.scrollIntoView({ behavior: 'smooth', block: 'center' });
                } else if (firstErr) {
                    firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }

            if (checkoutForm) {
                checkoutForm.addEventListener('submit', async function (e) {
                    e.preventDefault();
                    clearCheckoutFieldErrors();
                    if (payBtn) {
                        payBtn.disabled = true;
                        payBtn.dataset._prevHtml = payBtn.innerHTML;
                        payBtn.innerHTML = '<span class="sf-checkout__spinner" aria-hidden="true"></span> Processing…';
                    }
                    try {
                        const res = await fetch(checkoutForm.action, {
                            method: 'POST',
                            body: new FormData(checkoutForm),
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': sfCsrf,
                            },
                            credentials: 'same-origin',
                        });
                        const data = await res.json().catch(function () { return {}; });
                        if (res.status === 422 && data.errors) {
                            showCheckoutFieldErrors(data.errors);
                            if (payBtn) {
                                payBtn.disabled = false;
                                payBtn.innerHTML = payBtn.dataset._prevHtml || 'Process My Order';
                            }
                            updatePayBtn();
                            return;
                        }
                        if (res.ok && data.redirect) {
                            removeDraftKeys(['coupon_code']);
                            window.location.href = data.redirect;
                            return;
                        }
                        const msg = data.message || data.errors?.checkout?.[0] || 'Could not place order. Please try again.';
                        showCheckoutFieldErrors({ checkout: [msg] });
                    } catch (err) {
                        showCheckoutFieldErrors({ checkout: ['Network error. Please check your connection and try again.'] });
                    }
                    if (payBtn) {
                        payBtn.disabled = false;
                        payBtn.innerHTML = payBtn.dataset._prevHtml || 'Process My Order';
                    }
                    updatePayBtn();
                });
            }
            syncDeliveryAddressVisibility();
            refreshRegionFieldLabel();
            refreshCityOptions();
            refreshAreaOptions();
            refreshZipSuggestions();
            refreshGrandWithShipping();
            toggle();
            toggleStripe();
            renderSfCardTypeBadge();
        })();
    </script>
@endsection