@extends('website.partials.app')
@section('canonical', route('website.checkout'))
@section('content')
    <section class="checkout-page-section">
        <div class="container ">
            <h1 class="section-title text-center mb-5">Checkout</h1>

            <form id="checkoutForm" class="checkout-form w-100" method="post" action="">
            <div class="row g-4 justify-content-center">
                {{-- Section 1: Your details (customer only) --}}
                <div class="col-lg-6 col-xl-6">
                    <div class="checkout-section checkout-section--form">
                        <h2 class="checkout-section-heading">Your details</h2>
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $productId }}">
                        <input type="hidden" name="type" value="{{ $type }}">
                        <input type="hidden" name="price" value="{{ $price }}">
                        <input type="hidden" name="address" value="{{ $address }}">
                        <input type="hidden" name="loc" value="{{ $loc ?? '' }}">
                        <input type="hidden" name="avc_id" id="checkout-avc-id" value="">
                        <input type="hidden" name="avc_verified" id="checkout-avc-verified" value="">

                        <div class="checkout-form-section">
                            <h3 class="checkout-section-title">Customer Details</h3>
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-customer-type">Customer Type <span>*</span></label>
                                        <select id="checkout-customer-type" name="customer_type" class="contact-select" required>
                                            <option value="">Select…</option>
                                            <option value="Residential">Residential</option>
                                            <option value="Business">Business</option>
                                        </select>
                                        <span class="checkout-field-error" id="checkout-error-customer-type"></span>
                                    </div>
                                </div>
                                {{-- <div class="col-md-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-customer-name">Customer Name <span>*</span></label>
                                        <input type="text" id="checkout-customer-name" name="customer_name" class="contact-input" required maxlength="255" placeholder="Customer name">
                                        <span class="checkout-field-error" id="checkout-error-customer-name"></span>
                                    </div>
                                </div> --}}
                                {{-- <div class="col-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-order-reference">Order Reference</label>
                                        <input type="text" id="checkout-order-reference" name="order_reference" class="contact-input" maxlength="255" placeholder="Optional">
                                    </div>
                                </div> --}}
                                <div class="col-md-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-site-contact-name">Full Name <span>*</span></label>
                                        <input type="text" id="checkout-site-contact-name" name="site_contact_name" class="contact-input" required maxlength="255" placeholder="Enter Full Name">
                                        <span class="checkout-field-error" id="checkout-error-site-contact-name"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-site-contact-number">Contact Number <span>*</span></label>
                                        <input type="text" id="checkout-site-contact-number" name="site_contact_number" class="contact-input" required maxlength="255" placeholder="Enter Contact Number">
                                        <span class="checkout-field-error" id="checkout-error-site-contact-number"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-site-contact-email">Email address <span>*</span></label>
                                        <input type="email" id="checkout-site-contact-email" name="site_contact_email" class="contact-input" required placeholder="Enter Email Address">
                                        <span class="checkout-field-error" id="checkout-error-site-contact-email"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-date-of-birth">Date of Birth <span class="text-danger">*</span></label>
                                        <div class="checkout-datetime-wrap">
                                            <input type="text" id="checkout-date-of-birth" name="date_of_birth" class="contact-input" placeholder="DD-MM-YYYY" autocomplete="off" maxlength="10" inputmode="numeric" required>
                                            <i class="fas fa-calendar-alt checkout-datetime-icon" aria-hidden="true"></i>
                                        </div>
                                        <span class="checkout-field-error" id="checkout-error-date-of-birth"></span>
                                    </div>
                                </div>
                                <div class="col-md-12" id="checkout-abn-wrapper" style="display:none;">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-abn">ABN <span>*</span></label>
                                        <input type="text" id="checkout-abn" name="abn" class="contact-input" maxlength="14" placeholder="e.g. 51 824 753 556">
                                        <span class="checkout-field-error" id="checkout-error-abn"></span>
                                    </div>
                                    <div class="form-field-group mt-3">
                                        <label class="form-field-label" for="checkout-registered-company-name">Registered Company Name <span>*</span></label>
                                        <input type="text" id="checkout-registered-company-name" name="registered_company_name" class="contact-input" maxlength="255" placeholder="Enter registered company name">
                                        <span class="checkout-field-error" id="checkout-error-registered-company-name"></span>
                                    </div>
                                </div>
                                <!-- @if($type === 'nbn')
                                <div class="col-md-12" style="display: none;">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-avc-id">AVC ID <span class="checkout-field-optional">(optional)</span></label>
                                        <input type="text" id="checkout-avc-id" name="avc_id" class="contact-input" maxlength="64" placeholder="e.g. AVC_ or last 5 digits (verify via modal if port used)">
                                        <span class="checkout-field-error" id="checkout-error-avc-id"></span>
                                        <div class="checkout-avc-info-trigger" id="checkout-avc-info-trigger" role="button" tabindex="0" aria-label="What is an AVC ID? Open help">
                                            <span class="checkout-avc-info-icon" aria-hidden="true"><i class="fas fa-info-circle"></i></span>
                                            <span class="checkout-avc-info-text">What's an AVC ID?</span>
                                        </div>
                                    </div>
                                    <input type="hidden" name="avc_verified" id="checkout-avc-verified" value="">
                                </div>
                                @endif -->
                            </div>
                        </div>

                    </div>
                </div>

                {{-- Section 2: Order summary (plan + service details + card details) --}}
                <div class="col-lg-6 col-xl-6">
                    <div class="checkout-section checkout-section--summary">
                        <h2 class="checkout-section-heading">Order summary</h2>
                        <div class="checkout-product-card">
                            <div class="checkout-product-name">{{ $description ?: 'Broadband plan' }}</div>
                            <div class="checkout-product-type">{{ $serviceTypeLabel }}</div>
                            @if($address)
                                <div class="checkout-product-address"><i class="fas fa-map-marker-alt me-2"></i>{{ $address }}</div>
                            @endif
                            <div class="checkout-product-price">
                                @if($price !== '')
                                    ${{ $price }}/month
                                @else
                                    —
                                @endif
                            </div>
                        </div>

                        {{-- Router Option (NBN only) --}}
                        @if($type === 'nbn')
                        <div class="checkout-form-section mt-4">
                            <div class="form-field-group">
                                <label class="form-field-label">Router Option</label>
                                <div class="checkout-router-options">
                                    <label class="checkout-router-option">
                                        <input type="radio" name="router_option" value="own" id="checkout-router-own" class="checkout-router-radio">
                                        <span class="checkout-router-option-label">I have an NBN compatible router</span>
                                    </label>
                                    <label class="checkout-router-option checkout-router-option--buy">
                                        <input type="radio" name="router_option" value="buy" id="checkout-router-buy" class="checkout-router-radio" checked>
                                        <span class="checkout-router-option-label">
                                            I'd like to buy a router
                                            <span class="checkout-add-on-badge">Popular</span>
                                        </span>
                                        <span class="checkout-router-option-price">+$145</span>
                                    </label>
                                </div>
                                <input type="hidden" name="ship_router" id="checkout-ship-router-hidden" value="1">
                                <div class="checkout-add-on-description mt-2">
                                    <small><i class="fas fa-truck me-1"></i>Get your router delivered directly to your doorstep. Professional setup included.</small>
                                </div>
                            </div>
                        </div>
                        @endif

                        {{-- Do you have an existing NTD? (NBN only) --}}
                        <!-- @if($type === 'nbn')
                        <div class="checkout-form-section mt-4">
                            <div class="form-field-group">
                                <label class="form-field-label">Do you have an existing NTD?</label>
                                <div class="checkout-activation-tabs checkout-ntd-tabs" role="tablist" aria-label="Existing NTD">
                                    <input type="radio" name="has_ntd_choice" value="1" id="checkout-has-ntd-yes" checked class="checkout-activation-tab-input" aria-controls="checkout-ntd-panel">
                                    <input type="radio" name="has_ntd_choice" value="0" id="checkout-has-ntd-no" class="checkout-activation-tab-input" aria-controls="checkout-ntd-panel">
                                    <label for="checkout-has-ntd-yes" class="checkout-activation-tab" role="tab" aria-selected="true" tabindex="0">Yes, I have an NTD</label>
                                    <label for="checkout-has-ntd-no" class="checkout-activation-tab" role="tab" aria-selected="false" tabindex="0">No, I need an NTD</label>
                                </div>
                                <input type="hidden" name="has_ntd" id="checkout-has-ntd" value="1">
                            </div>
                        </div>
                        @endif -->

                        

                        <div class="checkout-form-section mt-4">
                            <h3 class="checkout-section-title">Service Details</h3>
                            <div class="row g-3">
                                <div class="col-12">
                                    <div class="form-field-group mb-0">
                                        <label class="form-field-label" id="checkout-current-provider-label" for="checkout-current-provider-trigger">Current Provider</label>
                                        <div class="checkout-provider-search-wrap" id="checkout-current-provider-wrap">
                                            <div class="checkout-provider-trigger-row">
                                                <button type="button" class="checkout-provider-trigger contact-input" id="checkout-current-provider-trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="checkout-current-provider-listbox" aria-labelledby="checkout-current-provider-label">
                                                    <span class="checkout-provider-trigger-text" id="checkout-current-provider-trigger-text">Select current provider…</span>
                                                    <span class="checkout-provider-trigger-chevron" aria-hidden="true">
                                                </button>
                                                <button type="button" class="checkout-provider-clear" id="checkout-current-provider-clear" aria-label="Clear current provider selection" title="Clear selection" hidden>
                                                    <i class="fas fa-times" aria-hidden="true"></i>
                                                </button>
                                            </div>
                                            <input type="hidden" id="checkout-current-provider" name="current_provider" value="">
                                            <div class="checkout-provider-panel" id="checkout-current-provider-panel" hidden>
                                                <div class="checkout-provider-panel-search">
                                                    <input type="text" id="checkout-current-provider-filter" class="checkout-provider-filter-input" autocomplete="off" placeholder="Search…" aria-label="Search providers">
                                                    <span class="checkout-provider-filter-icon" aria-hidden="true"><i class="fas fa-search"></i></span>
                                                </div>
                                                <ul class="checkout-provider-dropdown" id="checkout-current-provider-listbox" role="listbox" aria-label="Current provider options"></ul>
                                            </div>
                                        </div>
                                        <span class="checkout-field-error" id="checkout-error-current-provider"></span>
                                    </div>
                                </div>
                                {{-- <div class="col-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-nbn-service-profile">NBN Service Profile <span>*</span></label>
                                        <select id="checkout-nbn-service-profile" name="nbn_service_profile" class="contact-select" required>
                                            <option value="Default" selected>Default</option>
                                            <option value="Tagged">Tagged</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-field-group">
                                        <label class="form-field-label" for="checkout-ipv4-allocation">IPv4 Allocation <span>*</span></label>
                                        <select id="checkout-ipv4-allocation" name="ipv4_allocation" class="contact-select" required>
                                            <option value="CGNAT" selected>CGNAT</option>
                                            <option value="VRF">VRF</option>
                                            <option value="Static">Static</option>
                                        </select>
                                    </div>
                                </div> --}}
                                {{-- Supporting Resources (NTD) for NBN --}}
                        @if($type === 'nbn' && count($ntds ?? []) > 0)
                        <div class="checkout-form-section mt-4 checkout-resource-section">
                            
                            <!-- <div class="checkout-ntd-guidelines-banner">
                                To learn more about the guidelines for installing and locating the NTD and connection box please <a href="{{ url('/') }}#contact" class="checkout-ntd-guidelines-link">click here</a>.
                            </div> -->
                            <h4 class="checkout-select-port-heading">SELECT A PORT</h4>
                            <label for="checkout-auto-select-port" class="checkout-auto-select-wrap" id="checkout-auto-select-label">
                                <input type="checkbox" id="checkout-auto-select-port" class="checkout-auto-select-toggle" aria-describedby="checkout-auto-select-label">
                                <span class="checkout-auto-select-label">AUTOMATICALLY SELECT NEXT AVAILABLE PORT?</span>
                            </label>
                            <div id="checkout-ntd-section">
                                <h3 class="checkout-section-title">Supporting Resources (NTD)</h3>
                            </div>
                            <div id="checkout-auto-selected-ntd" class="checkout-auto-selected-ntd" style="display: none;" aria-live="polite"></div>
                            <div id="checkout-ntd-table" class="checkout-table-card" style="display:none;">
                                <div class="table-responsive">
                                    <table class="checkout-resource-table">
                                        <thead>
                                            <tr>
                                                <th>Supporting Resources</th>
                                                <th>UNI-D Port Number</th>
                                                <th>Status</th>
                                                <th>Select</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($ntds as $ntd)
                                                @php
                                                    $unidPorts = $ntd['unid_ports'] ?? [];
                                                    if (count($unidPorts) === 0 && !empty($ntd['port'])) {
                                                        $unidPorts = [['id' => $ntd['port'], 'in_use' => false, 'is_auto_select' => false]];
                                                    }
                                                @endphp
                                                @foreach($unidPorts as $idx => $port)
                                                    @php
                                                        $portNum = $port['id'] ?? ($idx + 1);
                                                        $portNumber = is_numeric($portNum) ? (int)$portNum : (int)(($idx + 1));
                                                        $status = !empty($port['in_use']) ? 'Used' : 'Available';
                                                        $resourceId = $ntd['id'] ?? '—';
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $resourceId }}</td>
                                                        <td>Port {{ $portNum }}</td>
                                                        <td><span class="checkout-port-status {{ !empty($port['in_use']) ? 'checkout-port-used' : 'checkout-port-available' }}">{{ $status }}</span></td>
                                                        <td><input type="radio" name="checkout_resource" value="ntd" data-ntd-id="{{ $resourceId }}" data-port-number="{{ $portNumber }}" data-in-use="{{ !empty($port['in_use']) ? '1' : '0' }}"></td>
                                                    </tr>
                                                @endforeach
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <input type="hidden" name="ntd_id" id="checkout-ntd-id" value="">
                            <input type="hidden" name="port" id="checkout-port" value="">
                        </div>
                        @endif

                        {{-- Copper Pairs: NBN only (when API returned copper_pairs for this location) --}}
                        @if($type === 'nbn' && count($copperPairs ?? []) > 0)
                        <div class="checkout-form-section mt-4 checkout-resource-section checkout-copper-section">
                            <h4 class="checkout-select-port-heading">SELECT A PORT</h4>
                            <label for="checkout-auto-select-port-copper" class="checkout-auto-select-wrap" id="checkout-auto-select-copper-label">
                                <input type="checkbox" id="checkout-auto-select-port-copper" class="checkout-auto-select-toggle" aria-describedby="checkout-auto-select-copper-label">
                                <span class="checkout-auto-select-label">AUTOMATICALLY SELECT NEXT AVAILABLE PORT?</span>
                            </label>
                            <h3 class="checkout-section-title">Copper Pairs</h3>
                            <div id="checkout-auto-selected-copper" class="checkout-auto-selected-ntd" style="display: none;" aria-live="polite"></div>
                            <div id="checkout-copper-table" class="checkout-table-card" style="display:none;">
                                <div class="table-responsive">
                                    <table class="checkout-resource-table">
                                        <thead>
                                            <tr>
                                                <th>Copper Pair ID</th>
                                                <th>Line Status</th>
                                                <th>Service Class</th>
                                                <th>Expected Upstream</th>
                                                <th>Expected Downstream</th>
                                                <th>Last Active</th>
                                                <th>Select</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($copperPairs as $cp)
                                                @php
                                                    $cpId = $cp['id'] ?? ($cp['copper_pair_id'] ?? '—');
                                                    $lineStatus = isset($cp['nbn_service_status']) ? (string)$cp['nbn_service_status'] : '—';
                                                    $lineInUse = (stripos($lineStatus, 'line not in use') !== false) ? false : (stripos($lineStatus, 'in use') !== false || strtolower(trim($lineStatus)) === 'line in use');
                                                    $serviceClass = isset($cp['service_class_number']) ? (string)$cp['service_class_number'] : '—';
                                                    $upstream = isset($cp['tc4_upstream_upper_rate']) ? (string)$cp['tc4_upstream_upper_rate'] : '—';
                                                    $downstream = isset($cp['tc4_downstream_upper_rate']) ? (string)$cp['tc4_downstream_upper_rate'] : '—';
                                                    $lastActive = !empty($cp['last_active']) ? (string)$cp['last_active'] : 'N/A';
                                                @endphp
                                                <tr>
                                                    <td>{{ $cpId }}</td>
                                                    <td>{{ $lineStatus }}</td>
                                                    <td>{{ $serviceClass }}</td>
                                                    <td>{{ $upstream }}</td>
                                                    <td>{{ $downstream }}</td>
                                                    <td>{{ $lastActive }}</td>
                                                    <td><input type="radio" name="checkout_resource" value="copper" data-copper-id="{{ $cpId }}" data-line-in-use="{{ $lineInUse ? '1' : '0' }}"></td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <input type="hidden" name="copper_pair_id" id="checkout-copper-pair-id" value="">
                        </div>
                        @endif
                        @if($type === 'nbn' && (count($ntds ?? []) > 0 || count($copperPairs ?? []) > 0))
                        <div class="checkout-form-section mt-3" id="checkout-inline-avc-wrap" style="display:none; margin-bottom: 0;">
                            <div class="form-field-group mb-0">
                                <label class="form-field-label" for="checkout-inline-avc-input">AVC ID <span>*</span></label>
                                <div class="checkout-inline-avc-row">
                                    <input type="text" id="checkout-inline-avc-input" class="contact-input checkout-inline-avc-input" maxlength="20" inputmode="numeric" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="AVC + 12 digits or last 5 digits">
                                    <button type="button" class="btn-gives" id="checkout-inline-avc-verify">Verify</button>
                                </div>
                                <span class="checkout-field-error" id="checkout-inline-avc-error"></span>
                            </div>
                        </div>
                        @endif
                        {{-- AVC hidden fields: only at top of form (lines 19–20). Duplicate here sent empty avc_id/avc_verified (PHP/Laravel use last duplicate key). --}}
                                <div class="col-12">
                                    @php
                                        $minActivation = now()->addDays(7)->startOfDay();
                                        $defaultActivation = now()->addDays(7)->startOfDay();
                                    @endphp
                                    <div class="form-field-group">
                                        <label class="form-field-label">Service Activation <span>*</span></label>
                                        <div class="checkout-activation-tabs" role="tablist" aria-label="Service activation type">
                                            <input type="radio" name="activation_type" value="asap" id="checkout-activation-asap" checked class="checkout-activation-tab-input" aria-controls="checkout-date-wrap">
                                            <input type="radio" name="activation_type" value="date" id="checkout-activation-date" class="checkout-activation-tab-input" aria-controls="checkout-date-wrap">
                                            <label  for="checkout-activation-asap" class="checkout-activation-tab " role="tab" aria-selected="true" tabindex="0">ASAP</label>
                                            <label  for="checkout-activation-date" class="checkout-activation-tab " role="tab" aria-selected="false" tabindex="0">Select date</label>
                                        </div>
                                        <input type="hidden" name="asap" id="checkout-asap" value="1">
                                        <div id="checkout-date-wrap" class="checkout-datetime-wrap checkout-activation-panel" role="tabpanel" style="display:none;">
                                            <input type="text" id="checkout-service-activation-date" name="service_activation_date" class="contact-input"
                                                data-min-date="{{ $minActivation->format('Y-m-d') }}"
                                                value="{{ $defaultActivation->format('d-m-Y') }}"
                                                placeholder="DD-MM-YYYY" autocomplete="off" maxlength="10" inputmode="numeric">
                                            <i class="fas fa-calendar-alt checkout-datetime-icon" aria-hidden="true"></i>
                                        </div>
                                        <span class="checkout-field-hint" id="checkout-activation-hint">When ASAP is selected, activation will be scheduled as soon as possible (earliest 7 days).</span>
                                        <span class="checkout-field-hint checkout-field-hint-date" id="checkout-activation-hint-date" style="display:none;">Must be at least 7 days in the future.</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="checkout-form-section">
                            <h3 class="checkout-section-title">Card Details</h3>
                            <div class="checkout-payment-section">
                                <input type="hidden" name="payment_type" id="payment_type_hidden" value="subscription">
                                <div id="checkout-card-element" class="checkout-card-element"></div>
                                <span class="checkout-card-error" id="checkoutCardError"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="checkout-form-actions mt-4 pt-3">
                @php
    $plansParams = ['address' => $address];
    $hasDualLocs = (($locNbn ?? '') !== '' || ($locCf ?? '') !== '');
    if ($hasDualLocs) {
        if (($locNbn ?? '') !== '') $plansParams['loc_nbn'] = $locNbn;
        if (($locCf ?? '') !== '') $plansParams['loc_cf'] = $locCf;
    } else {
        $plansParams['type'] = $type;
        if (($loc ?? '') !== '') $plansParams['loc'] = $loc;
    }
    if (($productId ?? '') !== '') $plansParams['selected_product_id'] = $productId;
    if (($type ?? '') !== '') $plansParams['selected_type'] = $type;
    $plansBackUrl = route('website.plans') . '?' . http_build_query($plansParams);
@endphp
                <a href="{{ $plansBackUrl }}" class="btn-gives-outline me-2"><i class="fas fa-arrow-left me-2"></i> Back to plans</a>
                <button type="submit" form="checkoutForm" class="btn-gives checkout-submit-btn" id="checkoutSubmitBtn"><i class="fas fa-check me-2"></i> Place order</button>
            </div>
            </form>
        </div>
    </section>

    {{-- Toaster for AVC success message --}}
    @if($type === 'nbn' && (count($ntds ?? []) > 0 || count($copperPairs ?? []) > 0))
    <div id="checkout-toaster-container" class="checkout-toaster-container" aria-live="polite"></div>
    @endif
    {{-- AVC verification modal (Used NTD port or Line In Use copper pair) --}}
    @if($type === 'nbn' && (count($ntds ?? []) > 0 || count($copperPairs ?? []) > 0))
    <div id="checkout-avc-modal" class="checkout-avc-modal" role="dialog" aria-labelledby="checkout-avc-modal-title" aria-modal="true" style="display: none;">
        <div class="checkout-avc-modal-backdrop"></div>
        <div class="checkout-avc-modal-content">
            <h2 id="checkout-avc-modal-title" class="checkout-avc-modal-title">AVC</h2>
            <p class="checkout-avc-modal-hint" id="checkout-avc-modal-hint">e.g , AVC followed by 12 digits or last 5 digits.</p>

            <div class="checkout-avc-modal-body mb-0">
                <p id="checkout-avc-aria-desc" class="visually-hidden">AVC ID: 12 digits after AVC, or exactly 5 digits for the last five only.</p>
                <label class="checkout-avc-widget-label" for="checkout-avc-input">AVC ID</label>
                <div class="checkout-avc-mask-row">
                    <input type="text" id="checkout-avc-input" class="checkout-avc-mask-input" name="checkout_avc_modal_input" maxlength="20" inputmode="numeric" autocomplete="off" autocapitalize="off" spellcheck="false" aria-describedby="checkout-avc-modal-hint checkout-avc-error checkout-avc-aria-desc" aria-invalid="false">
                    <span class="checkout-avc-mask-status" id="checkout-avc-mask-status" aria-hidden="true">
                        <i class="fas fa-check checkout-avc-mask-ok" id="checkout-avc-mask-ok" style="display:none;" title="Valid"></i>
                        <i class="fas fa-times checkout-avc-mask-bad" id="checkout-avc-mask-bad" style="display:none;" title="Invalid"></i>
                    </span>
                </div>
                <span class="checkout-avc-error" id="checkout-avc-error" role="alert"></span>
            </div>
            <div class="">
                <button type="button" class="checkout-avc-info-trigger mt-0 mb-2" id="checkout-avc-modal-info-trigger" aria-label="What is an AVC ID? Open help">
                    <span class="checkout-avc-info-icon" aria-hidden="true"><i class="fas fa-info-circle"></i></span>
                    <span class="">What's an AVC ID?</span>
                </button>
            </div>
            <div class="checkout-avc-modal-actions">
                <button type="button" class="btn-gives checkout-avc-verify" id="checkout-avc-verify" disabled>Verify</button>
                <button type="button" class="btn-gives-outline checkout-avc-cancel" id="checkout-avc-cancel">Cancel</button>
            </div>
        </div>
    </div>
    @endif

    {{-- AVC ID info/help modal (What is an AVC ID?) --}}
    @if($type === 'nbn')
    <div id="checkout-avc-info-modal" class="checkout-avc-info-modal" role="dialog" aria-labelledby="checkout-avc-info-modal-title" aria-modal="true" style="display: none;">
        <div class="checkout-avc-info-modal-backdrop"></div>
        <div class="checkout-avc-info-modal-content">
            <button type="button" class="checkout-avc-info-modal-close" id="checkout-avc-info-modal-close" aria-label="Close"><i class="fas fa-times"></i></button>
            <h2 id="checkout-avc-info-modal-title" class="checkout-avc-info-modal-title">What is an AVC ID?</h2>
            <div class="checkout-avc-info-modal-body">
                <p>The AVC ID, or "access virtual circuit identifier," helps ensure a smooth transfer of services. This unique number identifies specific nbn® connections and is provided by nbn co. to telcos.</p>
                <p>Each active broadband connection on the nbn network has its own AVC ID, including the connection at your home or workplace. If you move or switch providers, your new connection will have a different AVC ID to uniquely identify it.</p>
                <p>If you don't have an AVC ID, there might be a slight delay in setting up your service, and you may be asked to provide proof of occupancy.</p>
                <h3 class="checkout-avc-info-modal-section-title">Where can I find the AVC ID?</h3>
                <p>You can find this on your current provider's invoice and it is <strong>15 characters long</strong>.</p>
            </div>
            <div class="checkout-avc-info-modal-actions">
                <a href="{{ route('home') }}#contact" target="_blank" class="btn-gives checkout-avc-info-help-btn" id="checkout-avc-info-help-btn">Need some help!</a>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
.checkout-provider-search-wrap { position: relative; }
.checkout-provider-trigger-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}
.checkout-provider-trigger {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
    /* X button ko andar rakhne ke liye right side par space */
    padding-right: 2.75rem;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
}
.checkout-provider-trigger-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1a1a1a;
}
.checkout-provider-trigger.is-placeholder .checkout-provider-trigger-text {
    color: #6b7280;
}
.checkout-provider-trigger-chevron {
    flex-shrink: 0;
    color: #6b7280;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}
.checkout-provider-trigger-row.is-open .checkout-provider-trigger-chevron {
    transform: rotate(180deg);
}
.checkout-provider-clear {
    /* X button trigger (input) ke andar, right end par */
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgb(218, 27, 43);
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s, background 0.15s, filter 0.15s;
    z-index: 2;
}
.checkout-provider-clear:hover {
    color: rgb(200, 22, 38);
    background: transparent;
    filter: brightness(1.05);
}
.checkout-provider-clear:focus {
    outline: 2px solid rgb(218, 27, 43);
    outline-offset: 2px;
}
.checkout-provider-clear[hidden] { display: none !important; }
.checkout-provider-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
}
.checkout-provider-panel-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.checkout-provider-filter-input {
    width: 100%;
    padding: 10px 38px 10px 12px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
}
.checkout-provider-filter-input:focus {
    outline: none;
    border-color: rgb(218, 27, 43);
    box-shadow: 0 0 0 2px rgba(218, 27, 43, 0.15);
}
.checkout-provider-filter-icon {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    font-size: 0.9rem;
}
.checkout-provider-dropdown {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}
.checkout-provider-dropdown li {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 1rem;
    color: #1a1a1a;
    border-bottom: 1px solid #f0f0f0;
}
.checkout-provider-dropdown li:last-child { border-bottom: none; }
.checkout-provider-dropdown li:hover,
.checkout-provider-dropdown li[aria-selected="true"] {
    background: #f8f9fa;
}
.checkout-provider-dropdown li.checkout-provider-no-match {
    cursor: default;
    color: #6c757d;
    font-style: italic;
}

/* AVC ID info trigger (icon + "What's an AVC ID?") */
.checkout-avc-info-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color:rgb(218, 27, 43);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.checkout-avc-info-trigger:hover { color:rgb(218, 27, 43); text-decoration: underline; }
.checkout-avc-info-icon { font-size: 1rem; }
.checkout-avc-info-text { font-weight: 500; }

/* AVC ID info modal */
.checkout-avc-info-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.checkout-avc-info-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.checkout-avc-info-modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 1.5rem 2rem;
    min-width: 320px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.checkout-avc-info-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 1.25rem;
    border-radius: 6px;
}
.checkout-avc-info-modal-close:hover { color: #1a1a1a; background: #f3f4f6; }
.checkout-avc-info-modal-title {
    margin: 0 2rem 1rem 0;
    font-size: 1.25rem;
    color: #1a1a1a;
}
.checkout-avc-info-modal-body {
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #374151;
}
.checkout-avc-info-modal-body p { margin: 0 0 0.75rem; }
.checkout-avc-info-modal-body p:last-of-type { margin-bottom: 0; }
.checkout-avc-info-modal-section-title {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}
.checkout-avc-info-modal-actions { display: flex; justify-content: flex-end; }
.checkout-avc-info-help-btn { text-decoration: none; padding: 0.5rem 1.25rem; }
@media (max-width: 576px) {
    .checkout-avc-info-modal-content { padding: 1.25rem 1.5rem; }
    .checkout-avc-info-modal-close { top: 0.5rem; right: 0.5rem; }
}

/* Router Shipping Add-on Styles */
.checkout-add-on-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.checkout-add-on-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red) 0%, #f5a623 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.checkout-add-on-wrap:hover {
    border-color: var(--red);
    background: linear-gradient(135deg, #fff8f8 0%, #fff0f0 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 25, 44, 0.15);
}

.checkout-add-on-wrap:hover::before {
    transform: scaleX(1);
}

.checkout-add-on-checkbox {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.125rem;
    accent-color: var(--red);
    cursor: pointer;
}

.checkout-add-on-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.checkout-add-on-title {
    font-weight: 700;
    color: var(--dark);
    font-size: 1rem;
    line-height: 1.4;
}

.checkout-add-on-price {
    font-weight: 800;
    color: var(--red);
    font-size: 1.25rem;
    white-space: nowrap;
    background: rgba(232, 25, 44, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(232, 25, 44, 0.2);
}

.checkout-add-on-wrap:has(.checkout-add-on-checkbox:checked) {
    border-color: var(--red);
    background: linear-gradient(135deg, #fff0f0 0%, #fff8f8 100%);
    box-shadow: 0 4px 15px rgba(232, 25, 44, 0.2);
}

.checkout-add-on-wrap:has(.checkout-add-on-checkbox:checked)::before {
    transform: scaleX(1);
}

.checkout-add-on-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--red) 0%, #c0121f 100%);
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.5rem;
}

.checkout-add-on-description {
    margin-top: 0.75rem;
    padding-left: 2.25rem;
}

.checkout-add-on-description small {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.4;
}

.checkout-add-on-description i {
    color: var(--orange);
}

/* Router Option Radio Buttons */
.checkout-router-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.checkout-router-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    transition: all 0.2s ease;
    position: relative;
    flex-wrap: wrap;
}
.checkout-router-option:hover {
    border-color: var(--red);
    background: #fff8f8;
}
.checkout-router-radio {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--red);
    cursor: pointer;
}
.checkout-router-option:has(.checkout-router-radio:checked) {
    border-color: var(--red);
    background: linear-gradient(135deg, #fff0f0 0%, #fff8f8 100%);
    box-shadow: 0 4px 15px rgba(232, 25, 44, 0.15);
}
.checkout-router-option-label {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--dark);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.checkout-router-option-price {
    font-weight: 800;
    color: var(--red);
    font-size: 1.1rem;
    white-space: nowrap;
    background: rgba(232, 25, 44, 0.1);
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
    border: 1px solid rgba(232, 25, 44, 0.2);
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .checkout-router-option {
        align-items: flex-start;
        padding: 0.875rem 1rem;
    }
    .checkout-router-radio {
        margin-top: 0.15rem;
    }
    .checkout-router-option-label {
        font-size: 0.875rem;
        gap: 0.4rem;
    }
    .checkout-router-option-price {
        font-size: 1rem;
        padding: 0.15rem 0.55rem;
    }
    .checkout-add-on-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

/* What's an AVC ID? block inside AVC (used port) modal */
.checkout-avc-modal-what-is {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid rgb(218, 27, 43);
}
.checkout-avc-modal-what-is .checkout-avc-info-modal-body { margin-bottom: 0; }
.checkout-avc-modal-what-is-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.checkout-avc-modal-what-is-title .checkout-avc-info-icon { color: rgb(218, 27, 43); }

/* NTD port selection: guidelines banner, heading, auto-select toggle */
.checkout-resource-section,
.checkout-copper-section {
    display: none !important;
}
.checkout-resource-section .checkout-select-port-heading,
.checkout-resource-section .checkout-auto-select-wrap,
.checkout-resource-section #checkout-ntd-section,
.checkout-resource-section #checkout-ntd-table,
.checkout-resource-section #checkout-auto-selected-ntd,
.checkout-copper-section .checkout-section-title,
.checkout-copper-section #checkout-copper-table,
.checkout-copper-section #checkout-auto-selected-copper {
    display: none !important;
}
.checkout-inline-avc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.checkout-inline-avc-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
#checkout-inline-avc-verify {
    margin-left: auto;
    white-space: nowrap;
}
@media (max-width: 576px) {
    .checkout-inline-avc-row {
        flex-direction: column;
        align-items: stretch;
    }
    #checkout-inline-avc-verify {
        margin-left: 0;
        width: 100%;
    }
}
.checkout-ntd-guidelines-banner {
    background: #e0f2fe;
    color: #0c4a6e;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.checkout-ntd-guidelines-link { color: #0369a1; font-weight: 500; text-decoration: underline; }
.checkout-ntd-guidelines-link:hover { color: #075985; }
.checkout-select-port-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem;
}
.checkout-auto-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
}
.checkout-auto-select-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.checkout-auto-select-label {
    font-size: 0.8125rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    order: 2;
}
.checkout-auto-select-wrap::before {
    content: '';
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #d1d5db;
    transition: background 0.2s;
    flex-shrink: 0;
    order: 1;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.checkout-auto-select-wrap::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    transform: translateY(-50%);
}
.checkout-auto-select-wrap {
    position: relative;
    min-height: 28px;
}
.checkout-auto-select-wrap::before {
    order: 0;
}
.checkout-auto-select-toggle {
    order: 1;
}
.checkout-auto-select-label {
    order: 2;
}
.checkout-auto-select-toggle:checked + .checkout-auto-select-label {
    color: #059669;
}
.checkout-auto-select-wrap:has(.checkout-auto-select-toggle:checked)::before {
    background: #10b981;
}
.checkout-auto-select-wrap::after {
    left: 2px;
    top: 50%;
    margin-left: 0;
}
.checkout-auto-select-wrap:has(.checkout-auto-select-toggle:checked)::after {
    transform: translate(22px, -50%);
}
.checkout-auto-selected-ntd {
    font-size: 0.9rem;
    color: #374151;
    margin-bottom: 0.75rem;
}
.checkout-resource-table tbody tr.port-row-selected {
    outline: 2px solid #10b981;
    outline-offset: -2px;
    background: #f0fdf4;
}
.checkout-resource-table tbody tr.port-row-selected:hover {
    background: #dcfce7;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.checkout-avc-modal-hint {
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0 0 0.75rem;
    line-height: 1.45;
}
.checkout-avc-widget-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
}
.checkout-avc-mask-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}
.checkout-avc-mask-input {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-family: ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    padding: 0.65rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    letter-spacing: 0.02em;
}
.checkout-avc-mask-input:focus {
    border-color: rgb(218, 27, 43);
    box-shadow: 0 0 0 2px rgba(218, 27, 43, 0.15);
    outline: none;
}
.checkout-avc-mask-status {
    flex-shrink: 0;
    width: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.checkout-avc-mask-ok { color: #059669; }
.checkout-avc-mask-bad { color: #dc2626; }
.checkout-avc-verify:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
(function () {
    var stripePublishableKey = @json($stripePublishableKey ?? '');
    var paymentIntentUrl = @json(route('website.checkout.payment-intent'));
    var submitUrl = @json(route('website.checkout.submit'));
    var confirmSubscriptionUrl = @json(route('qualification.confirm-subscription-order'));
    var thankYouUrlTemplate = @json(route('website.checkout.thank-you', ['order_id' => '__ID__']));
    var validateAvcUrl = @json(route('website.validate-avc'));
    var checkoutLoc = @json($loc ?? '');
    // Avoid mixed content: use same origin/protocol as the page (HTTPS when page is HTTPS)
    function sameOriginUrl(url) {
        if (!url) return url;
        try {
            var u = new URL(url);
            return window.location.origin + u.pathname + (u.search || '');
        } catch (e) { return url; }
    }
    paymentIntentUrl = sameOriginUrl(paymentIntentUrl);
    submitUrl = sameOriginUrl(submitUrl);
    var form = document.getElementById('checkoutForm');

    function parseCheckoutDmy(str) {
        var s = (str || '').trim();
        var p = s.split(/[-\/]/);
        if (p.length !== 3) return null;
        var day = parseInt(p[0], 10), mon = parseInt(p[1], 10), y = parseInt(p[2], 10);
        if (!y || mon < 1 || mon > 12 || day < 1 || day > 31) return null;
        var d = new Date(y, mon - 1, day);
        if (d.getFullYear() !== y || d.getMonth() !== mon - 1 || d.getDate() !== day) return null;
        d.setHours(0, 0, 0, 0);
        return d;
    }

    var fpCheckoutDob = null;
    var fpCheckoutActivation = null;
    if (typeof flatpickr !== 'undefined') {
        var dobInputEl = document.getElementById('checkout-date-of-birth');
        if (dobInputEl) {
            var yest = new Date();
            yest.setDate(yest.getDate() - 1);
            fpCheckoutDob = flatpickr(dobInputEl, { dateFormat: 'd-m-Y', maxDate: yest, allowInput: true });
        }
        var svcActEl = document.getElementById('checkout-service-activation-date');
        if (svcActEl) {
            var minAct = svcActEl.getAttribute('data-min-date');
            fpCheckoutActivation = flatpickr(svcActEl, {
                dateFormat: 'd-m-Y',
                minDate: minAct || undefined,
                defaultDate: svcActEl.value || undefined,
                allowInput: true
            });
        }
    }
    var submitBtn = document.getElementById('checkoutSubmitBtn');
    var cardErrorEl = document.getElementById('checkoutCardError');
    var stripe = null;
    var cardElement = null;

    function getCsrfHeaders() {
        var token = document.querySelector('input[name="_token"]');
        return {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': token ? token.value : ''
        };
    }

    function setLoading(loading) {
        if (submitBtn) {
            submitBtn.disabled = loading;
            if (loading) {
                submitBtn.classList.add('is-loading');
                submitBtn.innerHTML = '<span class="checkout-btn-loader" aria-hidden="true"></span> Placing order…';
            } else {
                submitBtn.classList.remove('is-loading');
                submitBtn.innerHTML = '<i class="fas fa-check me-2"></i> Place order';
            }
        }
    }

    function showCardError(msg) {
        if (cardErrorEl) cardErrorEl.textContent = msg || '';
    }

    if (stripePublishableKey && window.Stripe) {
        stripe = window.Stripe(stripePublishableKey);
        var elements = stripe.elements();
        var style = { base: { fontSize: '16px', color: '#1a1a1a', '::placeholder': { color: '#999' } }, invalid: { color: '#dc3545' } };
        cardElement = elements.create('card', { style: style, hidePostalCode: true });
        cardElement.mount('#checkout-card-element');
        cardElement.on('change', function (ev) { showCardError(ev.error ? ev.error.message : ''); });
    } else {
        var cardEl = document.getElementById('checkout-card-element');
        if (cardEl) {
            cardEl.innerHTML = '<p style="color:#dc3545;font-size:0.875rem;margin:0;">Card payment could not be loaded. Please refresh the page or check your internet connection.</p>';
        }
        console.error('Stripe not loaded. Key present:', !!stripePublishableKey, '| window.Stripe:', !!window.Stripe);
    }

    // Sync hidden inputs when user selects NTD or Copper pair; open AVC modal when "Used" port selected
    var avcModal = document.getElementById('checkout-avc-modal');
    var avcInput = document.getElementById('checkout-avc-input');
    var avcError = document.getElementById('checkout-avc-error');
    var AVC_DIGITS_VALID = /^(\d{5}|\d{12})$/;
    var MSG_AVC_EMPTY = 'Please enter AVC ID!';
    var MSG_AVC_WRONG_LEN = 'Invalid AVC ID! Enter only numbers: exactly 5 digits or exactly 12 digits.';
    var AVC_PREFIX_LEN = 3;
    var AVC_PLACEHOLDER_SUFFIX = '____________';
    var checkoutAvcMaskDigits = '';

    function checkoutAvcMaskFormat(d) {
        d = d || '';
        if (d.length === 0) return 'AVC' + AVC_PLACEHOLDER_SUFFIX;
        return 'AVC' + d;
    }

    function checkoutAvcMaskIsPlaceholderState() {
        return checkoutAvcMaskDigits.length === 0;
    }

    function checkoutAvcMaskValid() {
        return AVC_DIGITS_VALID.test(checkoutAvcMaskDigits);
    }

    function checkoutAvcMaskUpdateUi() {
        var okEl = document.getElementById('checkout-avc-mask-ok');
        var badEl = document.getElementById('checkout-avc-mask-bad');
        var btn = document.getElementById('checkout-avc-verify');
        var v = checkoutAvcMaskValid();
        var has = checkoutAvcMaskDigits.length > 0;
        if (okEl) okEl.style.display = v ? 'inline' : 'none';
        if (badEl) badEl.style.display = (has && !v) ? 'inline' : 'none';
        if (btn && !btn.getAttribute('data-avc-requesting')) btn.disabled = !v;
        if (avcInput) avcInput.setAttribute('aria-invalid', (has && !v) ? 'true' : 'false');
    }

    function checkoutAvcMaskApplyValue(caretPos) {
        if (!avcInput) return;
        avcInput.value = checkoutAvcMaskFormat(checkoutAvcMaskDigits);
        var len = avcInput.value.length;
        var c = typeof caretPos === 'number' ? caretPos : AVC_PREFIX_LEN + checkoutAvcMaskDigits.length;
        c = Math.max(AVC_PREFIX_LEN, Math.min(c, len));
        try {
            avcInput.setSelectionRange(c, c);
        } catch (er) { /* ignore */ }
        checkoutAvcMaskUpdateUi();
    }

    /** API: digits only (5 or 12). */
    function checkoutAvcMaskApiPayload() {
        return checkoutAvcMaskDigits;
    }

    function checkoutAvcMaskOpen(prefillRaw) {
        checkoutAvcMaskDigits = '';
        if (prefillRaw) {
            var t = String(prefillRaw).trim();
            var m = t.match(/^AVC/i);
            var rest = m ? t.slice(m[0].length) : t;
            var dig = rest.replace(/\D/g, '').slice(0, 12);
            if (AVC_DIGITS_VALID.test(dig)) checkoutAvcMaskDigits = dig;
        }
        checkoutAvcMaskApplyValue(AVC_PREFIX_LEN);
        if (avcError) avcError.textContent = '';
        setTimeout(function () {
            if (!avcInput) return;
            if (checkoutAvcMaskDigits.length === 0) {
                try { avcInput.setSelectionRange(AVC_PREFIX_LEN, AVC_PREFIX_LEN); } catch (e2) {}
            } else {
                var p = AVC_PREFIX_LEN + checkoutAvcMaskDigits.length;
                try { avcInput.setSelectionRange(p, p); } catch (e3) {}
            }
        }, 10);
    }

    function initCheckoutAvcMask() {
        if (!avcInput) return;

        avcInput.addEventListener('paste', function (e) {
            e.preventDefault();
            var clip = (e.clipboardData || window.clipboardData).getData('text') || '';
            var s = clip.replace(/\s/g, '');
            if (/^AVC/i.test(s)) s = s.replace(/^AVC/i, '');
            var dig = s.replace(/\D/g, '').slice(0, 12);
            checkoutAvcMaskDigits = dig;
            checkoutAvcMaskApplyValue(AVC_PREFIX_LEN + checkoutAvcMaskDigits.length);
            if (avcError) avcError.textContent = '';
        });

        avcInput.addEventListener('keydown', function (e) {
            if (e.ctrlKey || e.metaKey || e.altKey) return;
            var k = e.key;
            var el = avcInput;
            var start = el.selectionStart;
            var end = el.selectionEnd;
            var d = checkoutAvcMaskDigits;

            if (k === 'ArrowLeft') {
                if (start <= AVC_PREFIX_LEN) {
                    e.preventDefault();
                    try { el.setSelectionRange(AVC_PREFIX_LEN, end > AVC_PREFIX_LEN ? end : AVC_PREFIX_LEN); } catch (x) {}
                }
                return;
            }
            if (k === 'Home') {
                e.preventDefault();
                try { el.setSelectionRange(AVC_PREFIX_LEN, AVC_PREFIX_LEN); } catch (x2) {}
                return;
            }

            if (k === 'Backspace') {
                e.preventDefault();
                if (d.length === 0) return;
                var ds = Math.max(0, start - AVC_PREFIX_LEN);
                var de = Math.min(d.length, end - AVC_PREFIX_LEN);
                if (end <= AVC_PREFIX_LEN) {
                    try { el.setSelectionRange(AVC_PREFIX_LEN, AVC_PREFIX_LEN); } catch (x3) {}
                    return;
                }
                if (start !== end) {
                    checkoutAvcMaskDigits = d.slice(0, ds) + d.slice(de);
                } else {
                    if (start <= AVC_PREFIX_LEN) return;
                    var di = start - AVC_PREFIX_LEN - 1;
                    checkoutAvcMaskDigits = d.slice(0, di) + d.slice(di + 1);
                }
                var nc = AVC_PREFIX_LEN + Math.min(ds, checkoutAvcMaskDigits.length);
                checkoutAvcMaskApplyValue(nc);
                if (avcError) avcError.textContent = '';
                return;
            }

            if (k === 'Delete') {
                e.preventDefault();
                if (d.length === 0) return;
                if (start < AVC_PREFIX_LEN) {
                    try { el.setSelectionRange(AVC_PREFIX_LEN, AVC_PREFIX_LEN); } catch (x4) {}
                    return;
                }
                var ds2 = Math.max(0, start - AVC_PREFIX_LEN);
                var de2 = Math.min(d.length, end - AVC_PREFIX_LEN);
                if (start !== end) {
                    checkoutAvcMaskDigits = d.slice(0, ds2) + d.slice(de2);
                } else {
                    if (ds2 >= d.length) return;
                    checkoutAvcMaskDigits = d.slice(0, ds2) + d.slice(ds2 + 1);
                }
                checkoutAvcMaskApplyValue(AVC_PREFIX_LEN + Math.min(ds2, checkoutAvcMaskDigits.length));
                if (avcError) avcError.textContent = '';
                return;
            }

            // Only allow digits; block letters and other characters so they never enter
            if (k.length === 1 && !/^\d$/.test(k)) {
                e.preventDefault();
                return;
            }

            if (k.length === 1 && /^\d$/.test(k)) {
                e.preventDefault();
                if (d.length >= 12) return;
                if (d.length === 0 && checkoutAvcMaskIsPlaceholderState()) {
                    checkoutAvcMaskDigits = k;
                    checkoutAvcMaskApplyValue(AVC_PREFIX_LEN + 1);
                } else {
                    var ins = Math.max(0, Math.min(start - AVC_PREFIX_LEN, d.length));
                    if (start < AVC_PREFIX_LEN) ins = 0;
                    if (end > AVC_PREFIX_LEN && start !== end) {
                        var a = Math.max(0, start - AVC_PREFIX_LEN);
                        var b = Math.min(d.length, end - AVC_PREFIX_LEN);
                        checkoutAvcMaskDigits = d.slice(0, a) + k + d.slice(b);
                    } else {
                        checkoutAvcMaskDigits = d.slice(0, ins) + k + d.slice(ins);
                    }
                    checkoutAvcMaskDigits = checkoutAvcMaskDigits.slice(0, 12);
                    var newCaret = AVC_PREFIX_LEN + Math.min(ins + 1, checkoutAvcMaskDigits.length);
                    checkoutAvcMaskApplyValue(newCaret);
                }
                if (avcError) avcError.textContent = '';
            }
        });

        avcInput.addEventListener('input', function () {
            if (!avcInput.value || avcInput.value.toUpperCase().indexOf('AVC') !== 0) {
                var raw = avcInput.value.replace(/\D/g, '').slice(0, 12);
                checkoutAvcMaskDigits = raw;
                checkoutAvcMaskApplyValue(AVC_PREFIX_LEN + checkoutAvcMaskDigits.length);
                if (avcError) avcError.textContent = '';
                return;
            }
            var after = avcInput.value.slice(3).replace(/\D/g, '').slice(0, 12);
            if (after !== checkoutAvcMaskDigits) {
                checkoutAvcMaskDigits = after;
                checkoutAvcMaskApplyValue(AVC_PREFIX_LEN + checkoutAvcMaskDigits.length);
            }
            if (avcError) avcError.textContent = '';
        });

        avcInput.addEventListener('click', function () {
            if (avcInput.selectionStart < AVC_PREFIX_LEN) {
                try { avcInput.setSelectionRange(AVC_PREFIX_LEN, AVC_PREFIX_LEN); } catch (y) {}
            }
        });

        checkoutAvcMaskOpen('');
    }
    initCheckoutAvcMask();
    var avcIdHidden = document.getElementById('checkout-avc-id');
    var avcVerifiedHidden = document.getElementById('checkout-avc-verified');
    var pendingAvcPortNumber = null;
    var pendingAvcCpiId = null;
    var AVC_LS_PREFIX = 'gc_checkout_avc_v1_';
    function checkoutAvcLsKeyNtd(ntdId, portNum) {
        return AVC_LS_PREFIX + String(checkoutLoc || '') + '_ntd_' + String(ntdId) + '_' + String(portNum || '1');
    }
    function checkoutAvcLsKeyCopper(cpiId) {
        return AVC_LS_PREFIX + String(checkoutLoc || '') + '_cpi_' + String(cpiId);
    }
    function checkoutAvcLsGet(key) {
        try {
            var raw = localStorage.getItem(key);
            if (!raw) return null;
            var o = JSON.parse(raw);
            return (o && o.avc_id) ? o : null;
        } catch (e) { return null; }
    }
    function checkoutAvcLsSet(key, avcId) {
        try {
            localStorage.setItem(key, JSON.stringify({ avc_id: String(avcId), ts: Date.now() }));
        } catch (e) {}
    }

    function portNumberToPortId(portNum) {
        var n = parseInt(portNum, 10);
        if (isNaN(n) || n < 1 || n > 4) n = 1;
        return '1-UNI-D' + n;
    }
    function showCheckoutToast(message, type) {
        type = type || 'success';
        var container = document.getElementById('checkout-toaster-container');
        if (!container || !message) return;
        var toast = document.createElement('div');
        toast.className = 'checkout-toast checkout-toast-' + type;
        toast.setAttribute('role', 'alert');
        toast.textContent = message;
        container.appendChild(toast);
        setTimeout(function () {
            toast.classList.add('checkout-toast-out');
            setTimeout(function () { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 300);
        }, 5000);
    }

    var autoSelectPortCheckbox = document.getElementById('checkout-auto-select-port');
    var autoSelectedNtdEl = document.getElementById('checkout-auto-selected-ntd');
    var autoSelectPortCopperCheckbox = document.getElementById('checkout-auto-select-port-copper');
    var autoSelectedCopperEl = document.getElementById('checkout-auto-selected-copper');
    var inlineAvcWrap = document.getElementById('checkout-inline-avc-wrap');
    var inlineAvcInput = document.getElementById('checkout-inline-avc-input');
    var inlineAvcError = document.getElementById('checkout-inline-avc-error');
    var inlineAvcVerifyBtn = document.getElementById('checkout-inline-avc-verify');

    function parseAvcDigits(raw) {
        var s = String(raw || '').trim().replace(/\s+/g, '');
        if (/^AVC/i.test(s)) s = s.replace(/^AVC/i, '');
        return s.replace(/\D/g, '');
    }

    function hideInlineAvc() {
        if (inlineAvcWrap) inlineAvcWrap.style.display = 'none';
        if (inlineAvcError) inlineAvcError.textContent = '';
    }

    function showInlineAvc() {
        if (!inlineAvcWrap) return;
        inlineAvcWrap.style.display = '';
        if (inlineAvcInput) inlineAvcInput.value = '';
        if (inlineAvcError) inlineAvcError.textContent = '';
    }

    function updatePortRowHighlight() {
        if (!form) return;
        form.querySelectorAll('.checkout-resource-table tbody tr').forEach(function (tr) { tr.classList.remove('port-row-selected'); });
        var checked = form.querySelector('input[name="checkout_resource"]:checked');
        if (checked && checked.closest('tr')) {
            checked.closest('tr').classList.add('port-row-selected');
        }
    }

    function updateAutoSelectedNtdDisplay() {
        if (!autoSelectedNtdEl) return;
        var isOn = autoSelectPortCheckbox && autoSelectPortCheckbox.checked;
        var selected = form ? form.querySelector('input[name="checkout_resource"]:checked') : null;
        if (isOn && selected && selected.value === 'ntd') {
            var ntdId = selected.getAttribute('data-ntd-id') || '';
            var portNum = selected.getAttribute('data-port-number') || '';
            autoSelectedNtdEl.textContent = 'Auto-selected NTD: ' + ntdId + ' - Port ' + portNum;
            autoSelectedNtdEl.style.display = '';
        } else {
            autoSelectedNtdEl.textContent = '';
            autoSelectedNtdEl.style.display = 'none';
        }
    }

    function updateAutoSelectedCopperDisplay() {
        if (!autoSelectedCopperEl) return;
        var isOn = autoSelectPortCopperCheckbox && autoSelectPortCopperCheckbox.checked;
        var selected = form ? form.querySelector('input[name="checkout_resource"]:checked') : null;
        if (isOn && selected && selected.value === 'copper') {
            var copperId = selected.getAttribute('data-copper-id') || '';
            autoSelectedCopperEl.textContent = 'Auto-selected Copper Pair: ' + copperId;
            autoSelectedCopperEl.style.display = '';
        } else {
            autoSelectedCopperEl.textContent = '';
            autoSelectedCopperEl.style.display = 'none';
        }
    }

    var checkoutResourceChangeFromScript = false;

    function bindCheckoutResourceRadios() {
        var radios = form ? form.querySelectorAll('input[name="checkout_resource"]') : [];
        var ntdIdEl = document.getElementById('checkout-ntd-id');
        var portEl = document.getElementById('checkout-port');
        var copperIdEl = document.getElementById('checkout-copper-pair-id');
        radios.forEach(function (radio) {
            radio.addEventListener('change', function () {
                if (this.value === 'ntd') {
                    pendingAvcCpiId = null;
                    if (ntdIdEl) ntdIdEl.value = this.getAttribute('data-ntd-id') || '';
                    if (portEl) portEl.value = this.getAttribute('data-port-number') || '';
                    if (copperIdEl) copperIdEl.value = '';
                    var inUse = this.getAttribute('data-in-use') === '1';
                    if (inUse) {
                        pendingAvcPortNumber = this.getAttribute('data-port-number') || '1';
                        showInlineAvc();
                        if (avcIdHidden) avcIdHidden.value = '';
                        if (avcVerifiedHidden) avcVerifiedHidden.value = '';
                        if (inlineAvcInput && !checkoutResourceChangeFromScript) inlineAvcInput.focus();
                    } else {
                        hideInlineAvc();
                        if (avcIdHidden) avcIdHidden.value = '';
                        if (avcVerifiedHidden) avcVerifiedHidden.value = '';
                    }
                } else {
                    if (copperIdEl) copperIdEl.value = this.getAttribute('data-copper-id') || '';
                    if (ntdIdEl) ntdIdEl.value = '';
                    if (portEl) portEl.value = '';
                    pendingAvcPortNumber = null;
                    var copperLineInUse = this.getAttribute('data-line-in-use') === '1';
                    if (copperLineInUse) {
                        pendingAvcCpiId = this.getAttribute('data-copper-id') || '';
                        showInlineAvc();
                        if (avcIdHidden) avcIdHidden.value = '';
                        if (avcVerifiedHidden) avcVerifiedHidden.value = '';
                        if (inlineAvcInput && !checkoutResourceChangeFromScript) inlineAvcInput.focus();
                    } else {
                        pendingAvcCpiId = null;
                        hideInlineAvc();
                        if (avcIdHidden) avcIdHidden.value = '';
                        if (avcVerifiedHidden) avcVerifiedHidden.value = '';
                    }
                }
                updatePortRowHighlight();
                updateAutoSelectedNtdDisplay();
                updateAutoSelectedCopperDisplay();
            });
        });
    }
    bindCheckoutResourceRadios();

    /** On load: always select first listed NTD port, else first listed copper pair (syncs hidden fields via change). */
    (function selectFirstAvailablePortOnLoad() {
        if (!form) return;
        var firstNtd = form.querySelector('input[name="checkout_resource"][value="ntd"]');
        var firstCopper = form.querySelector('input[name="checkout_resource"][value="copper"]');
        var pick = firstNtd || firstCopper;
        if (!pick) return;
        pick.checked = true;
        checkoutResourceChangeFromScript = true;
        try {
            pick.dispatchEvent(new Event('change', { bubbles: true }));
        } catch (e) {
            var ev = document.createEvent('HTMLEvents');
            ev.initEvent('change', true, true);
            pick.dispatchEvent(ev);
        } finally {
            checkoutResourceChangeFromScript = false;
        }
        if (firstNtd) {
            updateAutoSelectedNtdDisplay();
            updateAutoSelectedCopperDisplay();
        } else if (firstCopper) {
            updateAutoSelectedCopperDisplay();
            updateAutoSelectedNtdDisplay();
        }
        updatePortRowHighlight();
    })();

    // Set initial table visibility based on checkbox state after page load auto-selection
    (function initPortTableVisibility() {
        var ntdTable = document.getElementById('checkout-ntd-table');
        var ntdSection = document.getElementById('checkout-ntd-section');
        var copperTable = document.getElementById('checkout-copper-table');
        var ntdOn = autoSelectPortCheckbox && autoSelectPortCheckbox.checked;
        var copperOn = autoSelectPortCopperCheckbox && autoSelectPortCopperCheckbox.checked;
        if (ntdTable) ntdTable.style.display = ntdOn ? 'none' : '';
        if (ntdSection) ntdSection.style.display = ntdOn ? 'none' : '';
        if (copperTable) copperTable.style.display = copperOn ? 'none' : '';
    })();

    if (autoSelectPortCheckbox && form) {
        autoSelectPortCheckbox.addEventListener('change', function () {
            var ntdIdEl = document.getElementById('checkout-ntd-id');
            var portEl = document.getElementById('checkout-port');
            var copperIdEl = document.getElementById('checkout-copper-pair-id');
            var ntdTable = document.getElementById('checkout-ntd-table');
            var ntdSection = document.getElementById('checkout-ntd-section');
            if (this.checked) {
                if (ntdTable) ntdTable.style.display = 'none';
                if (ntdSection) ntdSection.style.display = 'none';
                var pickNtd = form.querySelector('input[name="checkout_resource"][value="ntd"]');
                if (pickNtd) {
                    pickNtd.checked = true;
                    checkoutResourceChangeFromScript = true;
                    try {
                        pickNtd.dispatchEvent(new Event('change', { bubbles: true }));
                    } catch (e) {
                        var evN = document.createEvent('HTMLEvents');
                        evN.initEvent('change', true, true);
                        pickNtd.dispatchEvent(evN);
                    } finally {
                        checkoutResourceChangeFromScript = false;
                    }
                    updateAutoSelectedNtdDisplay();
                    updateAutoSelectedCopperDisplay();
                    updatePortRowHighlight();
                }
            } else {
                var checkedNtd = form.querySelector('input[name="checkout_resource"][value="ntd"]:checked');
                if (checkedNtd) {
                    checkedNtd.checked = false;
                    if (ntdIdEl) ntdIdEl.value = '';
                    if (portEl) portEl.value = '';
                }
                if (ntdTable) ntdTable.style.display = '';
                if (ntdSection) ntdSection.style.display = '';
                if (autoSelectedNtdEl) {
                    autoSelectedNtdEl.textContent = '';
                    autoSelectedNtdEl.style.display = 'none';
                }
                updatePortRowHighlight();
            }
        });
    }

    if (autoSelectPortCopperCheckbox && form) {
        autoSelectPortCopperCheckbox.addEventListener('change', function () {
            var ntdIdEl = document.getElementById('checkout-ntd-id');
            var portEl = document.getElementById('checkout-port');
            var copperIdEl = document.getElementById('checkout-copper-pair-id');
            var copperTable = document.getElementById('checkout-copper-table');
            if (this.checked) {
                if (copperTable) copperTable.style.display = 'none';
                var pickCp = form.querySelector('input[name="checkout_resource"][value="copper"]');
                if (pickCp) {
                    pickCp.checked = true;
                    checkoutResourceChangeFromScript = true;
                    try {
                        pickCp.dispatchEvent(new Event('change', { bubbles: true }));
                    } catch (e2) {
                        var evC = document.createEvent('HTMLEvents');
                        evC.initEvent('change', true, true);
                        pickCp.dispatchEvent(evC);
                    } finally {
                        checkoutResourceChangeFromScript = false;
                    }
                    updateAutoSelectedCopperDisplay();
                    updateAutoSelectedNtdDisplay();
                    updatePortRowHighlight();
                }
            } else {
                var checkedCopper = form.querySelector('input[name="checkout_resource"][value="copper"]:checked');
                if (checkedCopper) {
                    checkedCopper.checked = false;
                    if (copperIdEl) copperIdEl.value = '';
                }
                if (copperTable) copperTable.style.display = '';
                if (autoSelectedCopperEl) {
                    autoSelectedCopperEl.textContent = '';
                    autoSelectedCopperEl.style.display = 'none';
                }
                updatePortRowHighlight();
            }
        });
    }

    function runAvcVerification(avcDigits, errorNode, inputNode, actionBtn, onSuccess) {
        var d = avcDigits || '';
        if (d.length === 0) {
            if (errorNode) errorNode.textContent = MSG_AVC_EMPTY;
            if (inputNode) inputNode.setAttribute('aria-invalid', 'true');
            return;
        }
        if (!AVC_DIGITS_VALID.test(d)) {
            if (errorNode) errorNode.textContent = MSG_AVC_WRONG_LEN;
            if (inputNode) inputNode.setAttribute('aria-invalid', 'true');
            return;
        }
        if (!checkoutLoc) {
            if (errorNode) errorNode.textContent = 'Location not available. Please go back and select address again.';
            return;
        }
        var avcIdForPayload = d.length === 12 ? ('AVC' + d) : d;
        var avcVal = avcIdForPayload;
        if (errorNode) errorNode.textContent = '';
        if (actionBtn) {
            actionBtn.setAttribute('data-avc-requesting', '1');
            actionBtn.disabled = true;
            actionBtn.textContent = 'Verifying…';
        }
        var payload = { location_id: checkoutLoc, avc_id: avcIdForPayload };
        if (pendingAvcCpiId) {
            payload.cpi_id = pendingAvcCpiId;
        } else {
            payload.port_id = portNumberToPortId(pendingAvcPortNumber);
            var ntdIdEl = document.getElementById('checkout-ntd-id');
            if (ntdIdEl && ntdIdEl.value) {
                payload.ntd_id = String(ntdIdEl.value).trim();
            }
        }
        fetch(sameOriginUrl(validateAvcUrl), {
            method: 'POST',
            credentials: 'same-origin',
            headers: getCsrfHeaders(),
            body: JSON.stringify(payload)
        })
        .then(function (r) { return r.json().then(function (data) { return { ok: r.ok, status: r.status, data: data }; }); })
        .then(function (res) {
            if (actionBtn) {
                actionBtn.removeAttribute('data-avc-requesting');
                actionBtn.disabled = false;
                actionBtn.textContent = 'Verify';
            }
            if (typeof checkoutAvcMaskUpdateUi === 'function') checkoutAvcMaskUpdateUi();
            var resp = res.data || {};
            var avcOk = res.ok && (resp.status === true || resp.status === 1 || resp.success === true);
            if (avcOk) {
                var verifiedId = (resp.data && resp.data.avc_id) ? resp.data.avc_id : resp.avc_id || avcVal;
                if (avcIdHidden) avcIdHidden.value = verifiedId;
                if (avcVerifiedHidden) avcVerifiedHidden.value = '1';
                if (checkoutLoc) {
                    if (pendingAvcCpiId) {
                        checkoutAvcLsSet(checkoutAvcLsKeyCopper(pendingAvcCpiId), verifiedId);
                    } else {
                        var nSave = document.getElementById('checkout-ntd-id');
                        if (nSave && nSave.value) {
                            checkoutAvcLsSet(checkoutAvcLsKeyNtd(nSave.value, pendingAvcPortNumber), verifiedId);
                        }
                    }
                }
                if (typeof onSuccess === 'function') onSuccess(resp);
                showCheckoutToast((resp.data && resp.data.message) || resp.message || 'AVC verification successful.');
            } else {
                var apiMsg = (resp.message || resp.error) ? (resp.message || resp.error) : 'AVC verification failed. Please check and try again.';
                if (/too\s+many|429/i.test(apiMsg)) {
                    apiMsg = 'Too many attempts. Please try again after 24 hours.';
                }
                if (errorNode) errorNode.textContent = apiMsg;
            }
        })
        .catch(function () {
            if (actionBtn) {
                actionBtn.removeAttribute('data-avc-requesting');
                actionBtn.disabled = false;
                actionBtn.textContent = 'Verify';
            }
            if (typeof checkoutAvcMaskUpdateUi === 'function') checkoutAvcMaskUpdateUi();
            if (errorNode) errorNode.textContent = 'Verification request failed. Please try again.';
        });
    }

    if (avcModal) {
        var avcVerifyBtn = document.getElementById('checkout-avc-verify');
        var avcCancelBtn = document.getElementById('checkout-avc-cancel');
        var avcBackdrop = avcModal.querySelector('.checkout-avc-modal-backdrop');
        function closeAvcModal() {
            avcModal.style.display = 'none';
            if (avcError) avcError.textContent = '';
            if (typeof checkoutAvcMaskUpdateUi === 'function') checkoutAvcMaskUpdateUi();
        }
        if (avcCancelBtn) avcCancelBtn.addEventListener('click', function () {
            closeAvcModal();
            var r = form && form.querySelector('input[name="checkout_resource"]:checked');
            if (r && r.value === 'ntd' && r.getAttribute('data-in-use') === '1') {
                r.checked = false;
                if (document.getElementById('checkout-ntd-id')) document.getElementById('checkout-ntd-id').value = '';
                if (document.getElementById('checkout-port')) document.getElementById('checkout-port').value = '';
                // Also uncheck the auto-select checkbox when cancelling AVC modal for used port
                if (autoSelectPortCheckbox) autoSelectPortCheckbox.checked = false;
                // Show the port table again
                var ntdTable = document.getElementById('checkout-ntd-table');
                var ntdSection = document.getElementById('checkout-ntd-section');
                if (ntdTable) ntdTable.style.display = '';
                if (ntdSection) ntdSection.style.display = '';
                // Clear auto-selected display
                if (autoSelectedNtdEl) {
                    autoSelectedNtdEl.textContent = '';
                    autoSelectedNtdEl.style.display = 'none';
                }
            }
            if (r && r.value === 'copper' && r.getAttribute('data-line-in-use') === '1') {
                r.checked = false;
                if (document.getElementById('checkout-copper-pair-id')) document.getElementById('checkout-copper-pair-id').value = '';
                // Also uncheck the auto-select checkbox when cancelling AVC modal for used copper pair
                if (autoSelectPortCopperCheckbox) autoSelectPortCopperCheckbox.checked = false;
                // Show the copper table again
                var copperTable = document.getElementById('checkout-copper-table');
                if (copperTable) copperTable.style.display = '';
                // Clear auto-selected display
                if (autoSelectedCopperEl) {
                    autoSelectedCopperEl.textContent = '';
                    autoSelectedCopperEl.style.display = 'none';
                }
            }
            updatePortRowHighlight();
        });
        if (avcBackdrop) avcBackdrop.addEventListener('click', closeAvcModal);
        if (avcVerifyBtn) avcVerifyBtn.addEventListener('click', function () {
            runAvcVerification(checkoutAvcMaskDigits || '', avcError, avcInput, avcVerifyBtn, function () {
                closeAvcModal();
            });
        });
    }

    if (inlineAvcVerifyBtn) {
        inlineAvcVerifyBtn.addEventListener('click', function () {
            var digits = parseAvcDigits(inlineAvcInput ? inlineAvcInput.value : '');
            runAvcVerification(digits, inlineAvcError, inlineAvcInput, inlineAvcVerifyBtn, function (resp) {
                if (inlineAvcInput) inlineAvcInput.value = (resp.data && resp.data.avc_id) ? resp.data.avc_id : (resp.avc_id || '');
            });
        });
    }

    // AVC ID info modal (What is an AVC ID?)
    var avcInfoModal = document.getElementById('checkout-avc-info-modal');
    var avcInfoTrigger = document.getElementById('checkout-avc-info-trigger');
    var avcModalInfoTrigger = document.getElementById('checkout-avc-modal-info-trigger');
    function openAvcInfoModal() {
        if (avcInfoModal) avcInfoModal.style.display = 'flex';
    }
    function closeAvcInfoModal() {
        if (avcInfoModal) avcInfoModal.style.display = 'none';
    }
    if (avcInfoModal) {
        if (avcInfoTrigger) {
            avcInfoTrigger.addEventListener('click', openAvcInfoModal);
            avcInfoTrigger.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    openAvcInfoModal();
                }
            });
        }
        if (avcModalInfoTrigger) {
            avcModalInfoTrigger.addEventListener('click', openAvcInfoModal);
            avcModalInfoTrigger.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    openAvcInfoModal();
                }
            });
        }
        var avcInfoCloseBtn = document.getElementById('checkout-avc-info-modal-close');
        var avcInfoBackdrop = avcInfoModal.querySelector('.checkout-avc-info-modal-backdrop');
        if (avcInfoCloseBtn) avcInfoCloseBtn.addEventListener('click', closeAvcInfoModal);
        if (avcInfoBackdrop) avcInfoBackdrop.addEventListener('click', closeAvcInfoModal);
    }

    // ABN show/hide based on customer type
    var customerTypeEl = document.getElementById('checkout-customer-type');
    var abnWrapper = document.getElementById('checkout-abn-wrapper');
    var abnInput = document.getElementById('checkout-abn');

    function toggleAbn() {
        var isBusiness = customerTypeEl && customerTypeEl.value === 'Business';
        if (abnWrapper) abnWrapper.style.display = isBusiness ? '' : 'none';
        if (abnInput) abnInput.required = isBusiness;
        var regCompanyEl = document.getElementById('checkout-registered-company-name');
        if (regCompanyEl) {
            regCompanyEl.required = isBusiness;
            if (!isBusiness) {
                regCompanyEl.value = '';
                showFieldError('checkout-registered-company-name', 'checkout-error-registered-company-name', '');
            }
        }
        if (!isBusiness && abnInput) {
            abnInput.value = '';
            showFieldError('checkout-abn', 'checkout-error-abn', '');
        }
    }

    if (customerTypeEl) {
        customerTypeEl.addEventListener('change', toggleAbn);
    }
    toggleAbn();

    // Searchable Current Provider dropdown (with "Don't have a current provider" option)
    var checkoutProviderOptions = [
        { value: "Don't have a current provider", label: "Don't have a current provider" },
        { value: 'AGL', label: 'AGL' },
        { value: 'Aussie Broadband', label: 'Aussie Broadband' },
        { value: 'Australia Post', label: 'Australia Post' },
        { value: 'Belong', label: 'Belong' },
        { value: 'Dodo', label: 'Dodo' },
        { value: 'Exetel', label: 'Exetel' },
        { value: 'iinet', label: 'iinet' },
        { value: 'iPrimus', label: 'iPrimus' },
        { value: 'Kogan', label: 'Kogan' },
        { value: 'Launtel', label: 'Launtel' },
        { value: 'Leaptel', label: 'Leaptel' },
        { value: 'Mate', label: 'Mate' },
        { value: 'More', label: 'More' },
        { value: 'Optus', label: 'Optus' },
        { value: 'Origin', label: 'Origin' },
        { value: 'Spintel', label: 'Spintel' },
        { value: 'Swoop', label: 'Swoop' },
        { value: 'Tangerine', label: 'Tangerine' },
        { value: 'Telstra', label: 'Telstra' },
        { value: 'TPG', label: 'TPG' },
        { value: 'Vodafone', label: 'Vodafone' },
        { value: 'Any other', label: 'Any other' }
    ];
    var providerTrigger = document.getElementById('checkout-current-provider-trigger');
    var providerTriggerText = document.getElementById('checkout-current-provider-trigger-text');
    var providerHiddenInput = document.getElementById('checkout-current-provider');
    var providerListbox = document.getElementById('checkout-current-provider-listbox');
    var providerPanel = document.getElementById('checkout-current-provider-panel');
    var providerFilterInput = document.getElementById('checkout-current-provider-filter');
    var providerWrap = document.getElementById('checkout-current-provider-wrap');
    var providerClearBtn = document.getElementById('checkout-current-provider-clear');
    var providerTriggerRow = providerWrap ? providerWrap.querySelector('.checkout-provider-trigger-row') : null;
    var providerPlaceholder = 'Select current provider…';

    function providerLabelForValue(val) {
        if (!val) return '';
        for (var i = 0; i < checkoutProviderOptions.length; i++) {
            if (checkoutProviderOptions[i].value === val) return checkoutProviderOptions[i].label;
        }
        return val;
    }

    function syncProviderTriggerFromHidden() {
        if (!providerTriggerText || !providerTrigger || !providerHiddenInput) return;
        var v = (providerHiddenInput.value || '').trim();
        if (!v) {
            providerTriggerText.textContent = providerPlaceholder;
            providerTrigger.classList.add('is-placeholder');
        } else {
            providerTriggerText.textContent = providerLabelForValue(v);
            providerTrigger.classList.remove('is-placeholder');
        }
    }

    function updateProviderClearButton() {
        if (!providerClearBtn || !providerHiddenInput) return;
        var hasValue = (providerHiddenInput.value || '').trim() !== '';
        if (hasValue) {
            providerClearBtn.removeAttribute('hidden');
        } else {
            providerClearBtn.setAttribute('hidden', '');
        }
    }

    function closeProviderDropdown() {
        if (providerPanel) providerPanel.setAttribute('hidden', '');
        if (providerTrigger) providerTrigger.setAttribute('aria-expanded', 'false');
        if (providerTriggerRow) providerTriggerRow.classList.remove('is-open');
    }

    function openProviderDropdown() {
        if (!providerPanel || !providerListbox) return;
        providerPanel.removeAttribute('hidden');
        if (providerTrigger) providerTrigger.setAttribute('aria-expanded', 'true');
        if (providerTriggerRow) providerTriggerRow.classList.add('is-open');
        if (providerFilterInput) providerFilterInput.value = '';
        renderProviderOptions('');
        setTimeout(function () {
            if (providerFilterInput) providerFilterInput.focus();
        }, 0);
    }

    function toggleProviderDropdown() {
        if (!providerPanel) return;
        if (providerPanel.hasAttribute('hidden')) {
            openProviderDropdown();
        } else {
            closeProviderDropdown();
            if (providerTrigger) providerTrigger.focus();
        }
    }

    function clearCurrentProviderSelection() {
        if (providerHiddenInput) providerHiddenInput.value = '';
        closeProviderDropdown();
        syncProviderTriggerFromHidden();
        showFieldError('checkout-current-provider-trigger', 'checkout-error-current-provider', '');
        updateProviderClearButton();
        if (providerTrigger) providerTrigger.focus();
    }

    function renderProviderOptions(filter) {
        if (!providerListbox) return;
        var q = (filter != null ? filter : (providerFilterInput && providerFilterInput.value) || '').trim().toLowerCase();
        var filtered = q === '' ? checkoutProviderOptions : checkoutProviderOptions.filter(function (o) {
            return o.label.toLowerCase().indexOf(q) !== -1;
        });
        providerListbox.innerHTML = '';
        if (filtered.length === 0) {
            var li = document.createElement('li');
            li.className = 'checkout-provider-no-match';
            li.setAttribute('role', 'option');
            li.textContent = 'No matching provider';
            providerListbox.appendChild(li);
        } else {
            filtered.forEach(function (opt) {
                var li = document.createElement('li');
                li.setAttribute('role', 'option');
                li.setAttribute('data-value', opt.value);
                li.textContent = opt.label;
                li.addEventListener('mousedown', function (e) {
                    e.preventDefault();
                });
                li.addEventListener('click', function () {
                    providerHiddenInput.value = opt.value;
                    syncProviderTriggerFromHidden();
                    closeProviderDropdown();
                    updateProviderClearButton();
                    if (providerTrigger) providerTrigger.focus();
                });
                providerListbox.appendChild(li);
            });
        }
    }

    if (providerTrigger && providerListbox && providerHiddenInput && providerPanel && providerFilterInput) {
        providerTrigger.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            toggleProviderDropdown();
        });
        providerTrigger.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && !providerPanel.hasAttribute('hidden')) {
                e.preventDefault();
                closeProviderDropdown();
                providerTrigger.focus();
            }
            if ((e.key === 'Enter' || e.key === ' ') && e.target === providerTrigger) {
                e.preventDefault();
                toggleProviderDropdown();
            }
        });
        providerFilterInput.addEventListener('input', function () {
            renderProviderOptions(providerFilterInput.value);
        });
        providerFilterInput.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                e.preventDefault();
                e.stopPropagation();
                closeProviderDropdown();
                if (providerTrigger) providerTrigger.focus();
            }
        });
        providerFilterInput.addEventListener('click', function (e) {
            e.stopPropagation();
        });
        document.addEventListener('click', function (e) {
            if (providerWrap && !providerWrap.contains(e.target)) {
                closeProviderDropdown();
            }
        });
        if (providerClearBtn) {
            providerClearBtn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                clearCurrentProviderSelection();
            });
        }
        closeProviderDropdown();
        providerHiddenInput.value = "Don't have a current provider";
        syncProviderTriggerFromHidden();
        updateProviderClearButton();
    }

    // Service Activation: ASAP vs Select date
    var activationAsap = document.getElementById('checkout-activation-asap');
    var activationDate = document.getElementById('checkout-activation-date');
    var dateWrap = document.getElementById('checkout-date-wrap');
    var asapHidden = document.getElementById('checkout-asap');
    var serviceActivationInput = document.getElementById('checkout-service-activation-date');
    var hintAsap = document.getElementById('checkout-activation-hint');
    var hintDate = document.getElementById('checkout-activation-hint-date');
    function getDefaultActivationDateDmy() {
        var d = new Date();
        d.setDate(d.getDate() + 7);
        d.setHours(0, 0, 0, 0);
        var day = String(d.getDate()).padStart(2, '0'), m = String(d.getMonth() + 1).padStart(2, '0'), y = d.getFullYear();
        return day + '-' + m + '-' + y;
    }
    function setActivationType() {
        var isAsap = activationAsap && activationAsap.checked;
        if (asapHidden) asapHidden.value = isAsap ? '1' : '0';
        if (dateWrap) dateWrap.style.display = isAsap ? 'none' : 'block';
        if (hintAsap) hintAsap.style.display = isAsap ? '' : 'none';
        if (hintDate) hintDate.style.display = isAsap ? 'none' : '';
        if (serviceActivationInput) {
            serviceActivationInput.required = !isAsap;
            if (isAsap) {
                var defAct = getDefaultActivationDateDmy();
                serviceActivationInput.value = defAct;
                if (fpCheckoutActivation) fpCheckoutActivation.setDate(defAct, false);
            }
        }
        var tabAsap = document.querySelector('.checkout-activation-tab[for="checkout-activation-asap"]');
        var tabDate = document.querySelector('.checkout-activation-tab[for="checkout-activation-date"]');
        if (tabAsap) tabAsap.setAttribute('aria-selected', isAsap ? 'true' : 'false');
        if (tabDate) tabDate.setAttribute('aria-selected', isAsap ? 'false' : 'true');
    }
    if (activationAsap) activationAsap.addEventListener('change', setActivationType);
    if (activationDate) activationDate.addEventListener('change', setActivationType);
    setActivationType();

    // NTD Yes/No: sync hidden has_ntd (1 = yes, 0 = no)
    var hasNtdYes = document.getElementById('checkout-has-ntd-yes');
    var hasNtdNo = document.getElementById('checkout-has-ntd-no');
    var hasNtdHidden = document.getElementById('checkout-has-ntd');
    function setHasNtd() {
        if (!hasNtdHidden) return;
        hasNtdHidden.value = (hasNtdYes && hasNtdYes.checked) ? '1' : '0';
    }
    if (hasNtdYes) hasNtdYes.addEventListener('change', setHasNtd);
    if (hasNtdNo) hasNtdNo.addEventListener('change', setHasNtd);
    setHasNtd();

    // Router radio: update router_amount hidden field on change
    (function() {
        var origPrice = parseFloat('{{ $price }}') || 0;
        var routerPrice = 145;
        function updateRouterAmount() {
            var sel = document.querySelector('input[name="router_option"]:checked');
            var isBuy = sel && sel.value === 'buy';
            var routerAmountInput = document.querySelector('input[name="router_amount"]');
            if (!routerAmountInput) {
                var f = document.querySelector('form');
                if (f) {
                    routerAmountInput = document.createElement('input');
                    routerAmountInput.type = 'hidden';
                    routerAmountInput.name = 'router_amount';
                    f.appendChild(routerAmountInput);
                }
            }
            if (routerAmountInput) routerAmountInput.value = isBuy ? routerPrice : 0;
            var priceInput = document.querySelector('input[name="price"]');
            if (priceInput) priceInput.value = origPrice;

            // Update Place Order button text
            var btn = document.getElementById('checkoutSubmitBtn');
            if (btn) {
                var total = isBuy ? (origPrice + routerPrice) : origPrice;
                btn.innerHTML = '<i class="fas fa-check me-2"></i> Place order – $' + total.toFixed(2) ;
            }
        }
        document.querySelectorAll('input[name="router_option"]').forEach(function(r) {
            r.addEventListener('change', updateRouterAmount);
        });
        updateRouterAmount();
    })();

    // Runtime validation functions
    function showFieldError(fieldId, errorId, message) {
        var field = document.getElementById(fieldId);
        var errorEl = document.getElementById(errorId);
        if (field && errorEl) {
            if (message) {
                errorEl.textContent = message;
                errorEl.style.display = 'block';
                // Add appropriate error class based on field type
                if (field.tagName === 'SELECT') {
                    field.classList.add('contact-select-error');
                } else {
                    field.classList.add('contact-input-error');
                }
            } else {
                errorEl.textContent = '';
                errorEl.style.display = 'none';
                field.classList.remove('contact-input-error', 'contact-select-error');
            }
        }
    }

    function validateCustomerType() {
        var field = document.getElementById('checkout-customer-type');
        if (!field) return true;
        var value = field.value.trim();
        if (!value || value === '') {
            showFieldError('checkout-customer-type', 'checkout-error-customer-type', 'Please select a customer type.');
            return false;
        }
        showFieldError('checkout-customer-type', 'checkout-error-customer-type', '');
        return true;
    }

    function validateCustomerName() {
        var field = document.getElementById('checkout-customer-name');
        if (!field) return true;
        var value = field.value.trim();
        if (!value) {
            showFieldError('checkout-customer-name', 'checkout-error-customer-name', 'Please enter customer name.');
            return false;
        }
        if (value.length < 2) {
            showFieldError('checkout-customer-name', 'checkout-error-customer-name', 'Customer name must be at least 2 characters.');
            return false;
        }
        showFieldError('checkout-customer-name', 'checkout-error-customer-name', '');
        return true;
    }

    function validateSiteContactName() {
        var field = document.getElementById('checkout-site-contact-name');
        if (!field) return true;
        var value = field.value.trim();
        if (!value) {
            showFieldError('checkout-site-contact-name', 'checkout-error-site-contact-name', 'Please enter  full name.');
            return false;
        }
        if (value.length < 2) {
            showFieldError('checkout-site-contact-name', 'checkout-error-site-contact-name', 'Site contact name must be at least 2 characters.');
            return false;
        }
        showFieldError('checkout-site-contact-name', 'checkout-error-site-contact-name', '');
        return true;
    }

    function validateSiteContactNumber() {
        var field = document.getElementById('checkout-site-contact-number');
        if (!field) return true;
        var value = field.value.trim();
        if (!value) {
            showFieldError('checkout-site-contact-number', 'checkout-error-site-contact-number', 'Please enter  contact number.');
            return false;
        }
        // Remove spaces, dashes, and parentheses for validation
        var cleaned = value.replace(/[\s\-\(\)]/g, '');
        if (cleaned.length < 8 || cleaned.length > 15) {
            showFieldError('checkout-site-contact-number', 'checkout-error-site-contact-number', 'Please enter a valid phone number (8-15 digits).');
            return false;
        }
        if (!/^[\d\s\-\(\)]+$/.test(value)) {
            showFieldError('checkout-site-contact-number', 'checkout-error-site-contact-number', 'Phone number can only contain digits, spaces, dashes, and parentheses.');
            return false;
        }
        showFieldError('checkout-site-contact-number', 'checkout-error-site-contact-number', '');
        return true;
    }

    function validateSiteContactEmail() {
        var field = document.getElementById('checkout-site-contact-email');
        if (!field) return true;
        var value = field.value.trim();
        if (!value) {
            showFieldError('checkout-site-contact-email', 'checkout-error-site-contact-email', 'Please enter  email address.');
            return false;
        }
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(value)) {
            showFieldError('checkout-site-contact-email', 'checkout-error-site-contact-email', 'Please enter a valid email address.');
            return false;
        }
        showFieldError('checkout-site-contact-email', 'checkout-error-site-contact-email', '');
        return true;
    }

    function validateDateOfBirth() {
        var field = document.getElementById('checkout-date-of-birth');
        if (!field) return true;
        var value = (field.value || '').trim();
        if (!value) {
            showFieldError('checkout-date-of-birth', 'checkout-error-date-of-birth', '');
            return true;
        }
        var d = parseCheckoutDmy(value);
        if (!d) {
            showFieldError('checkout-date-of-birth', 'checkout-error-date-of-birth', 'Please enter a valid date (DD-MM-YYYY).');
            return false;
        }
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        if (d.getTime() >= today.getTime()) {
            showFieldError('checkout-date-of-birth', 'checkout-error-date-of-birth', 'Date of birth must be in the past.');
            return false;
        }
        showFieldError('checkout-date-of-birth', 'checkout-error-date-of-birth', '');
        return true;
    }

    function validateRegisteredCompanyName() {
        var wrapper = document.getElementById('checkout-abn-wrapper');
        if (wrapper && wrapper.style.display === 'none') return true;
        var field = document.getElementById('checkout-registered-company-name');
        if (!field) return true;
        var value = field.value.trim();
        if (!value) {
            showFieldError('checkout-registered-company-name', 'checkout-error-registered-company-name', 'Please enter registered company name.');
            return false;
        }
        showFieldError('checkout-registered-company-name', 'checkout-error-registered-company-name', '');
        return true;
    }

    /**
     * Australian Business Number (ABN) checksum validation.
     * Same as qualification: 11 digits; weights 10,1,3,5,7,9,11,13,15,17,19; (d1-1)*10 + d2*1 + ... + d11*19; sum mod 89 must be 0.
     */
    function isValidAbnCheckout(str) {
        if (str == null) return false;
        var digits = String(str).replace(/\D/g, '');
        if (digits.length !== 11) return false;
        var w = [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
        var sum = (parseInt(digits[0], 10) - 1) * w[0];
        for (var i = 1; i < 11; i++) sum += parseInt(digits[i], 10) * w[i];
        return (sum % 89) === 0;
    }

    function validateABN() {
        // Skip validation if ABN field is hidden (Residential customer)
        var wrapper = document.getElementById('checkout-abn-wrapper');
        if (wrapper && wrapper.style.display === 'none') return true;

        var field = document.getElementById('checkout-abn');
        if (!field) return true;
        var value = field.value.trim();
        if (!value) {
            showFieldError('checkout-abn', 'checkout-error-abn', 'Please enter ABN.');
            return false;
        }
        // Remove spaces for validation
        var cleaned = value.replace(/\s/g, '');
        if (cleaned.length !== 11) {
            showFieldError('checkout-abn', 'checkout-error-abn', 'ABN must be 11 digits.');
            return false;
        }
        if (!/^\d+$/.test(cleaned)) {
            showFieldError('checkout-abn', 'checkout-error-abn', 'ABN must contain only digits.');
            return false;
        }
        if (!isValidAbnCheckout(value)) {
            showFieldError('checkout-abn', 'checkout-error-abn', 'Please enter a valid Australian Business Number (11 digits).');
            return false;
        }
        showFieldError('checkout-abn', 'checkout-error-abn', '');
        return true;
    }

    // Attach validation event listeners
    function setupFieldValidation() {
        var customerType = document.getElementById('checkout-customer-type');
        if (customerType) {
            customerType.addEventListener('change', validateCustomerType);
            customerType.addEventListener('blur', validateCustomerType);
        }

        var customerName = document.getElementById('checkout-customer-name');
        if (customerName) {
            customerName.addEventListener('blur', validateCustomerName);
            customerName.addEventListener('input', function() {
                if (customerName.value.trim().length > 0) {
                    validateCustomerName();
                }
            });
        }

        var siteContactName = document.getElementById('checkout-site-contact-name');
        if (siteContactName) {
            siteContactName.addEventListener('blur', validateSiteContactName);
            siteContactName.addEventListener('input', function() {
                if (siteContactName.value.trim().length > 0) {
                    validateSiteContactName();
                }
            });
        }

        var siteContactNumber = document.getElementById('checkout-site-contact-number');
        if (siteContactNumber) {
            siteContactNumber.addEventListener('blur', validateSiteContactNumber);
            siteContactNumber.addEventListener('input', function() {
                if (siteContactNumber.value.trim().length > 0) {
                    validateSiteContactNumber();
                }
            });
        }

        var siteContactEmail = document.getElementById('checkout-site-contact-email');
        if (siteContactEmail) {
            siteContactEmail.addEventListener('blur', validateSiteContactEmail);
            siteContactEmail.addEventListener('input', function() {
                if (siteContactEmail.value.trim().length > 0) {
                    validateSiteContactEmail();
                }
            });
        }

        var dateOfBirth = document.getElementById('checkout-date-of-birth');
        if (dateOfBirth) {
            dateOfBirth.addEventListener('blur', validateDateOfBirth);
            dateOfBirth.addEventListener('change', validateDateOfBirth);
        }

        var regCompany = document.getElementById('checkout-registered-company-name');
        if (regCompany) {
            regCompany.addEventListener('blur', validateRegisteredCompanyName);
            regCompany.addEventListener('input', function() {
                if (regCompany.value.trim().length > 0) {
                    validateRegisteredCompanyName();
                }
            });
        }

        var abn = document.getElementById('checkout-abn');
        if (abn) {
            abn.addEventListener('blur', validateABN);
            abn.addEventListener('input', function() {
                if (abn.value.trim().length > 0) {
                    validateABN();
                }
            });
        }
    }

    setupFieldValidation();

    // Router radio: sync hidden ship_router field on change
    (function() {
        var shipRouterHidden = document.getElementById('checkout-ship-router-hidden');
        function syncRouterHidden() {
            var selected = document.querySelector('input[name="router_option"]:checked');
            if (shipRouterHidden) {
                shipRouterHidden.value = (selected && selected.value === 'buy') ? '1' : '0';
            }
        }
        document.querySelectorAll('input[name="router_option"]').forEach(function(radio) {
            radio.addEventListener('change', syncRouterHidden);
        });
        syncRouterHidden();
    })();

    // Validate all fields before form submission
    function validateAllFields() {
        var isValid = true;
        isValid = validateCustomerType() && isValid;
        isValid = validateCustomerName() && isValid;
        isValid = validateSiteContactName() && isValid;
        isValid = validateSiteContactNumber() && isValid;
        isValid = validateSiteContactEmail() && isValid;
        isValid = validateDateOfBirth() && isValid;
        isValid = validateRegisteredCompanyName() && isValid;
        isValid = validateABN() && isValid;
        return isValid;
    }

    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            // Run custom validation first
            if (!validateAllFields()) {
                // Focus on first invalid field
                var firstError = form.querySelector('.contact-input-error, .contact-select-error');
                if (firstError) {
                    firstError.focus();
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
                return;
            }
            if (!form.checkValidity()) { form.reportValidity(); return; }
            
            // Get the latest price - keep only base price, not total with router
            var price = parseFloat(form.querySelector('input[name="price"]').value) || 0;
            
            var basePrice = parseFloat('{{ $price }}') || 0;
            
            // Ensure we're sending only the base product price, not total with router
            if (Math.abs(price - basePrice) > 0.01) {
                price = basePrice;
                form.querySelector('input[name="price"]').value = price;
            }
            
            if (price <= 0) { showCardError('Invalid price.'); return; }
            var resourceSection = form.querySelector('.checkout-resource-section');
            var resourceRadios = form.querySelectorAll('input[name="checkout_resource"]');
            var inlineAvcVisible = inlineAvcWrap && inlineAvcWrap.style.display !== 'none';
            if (inlineAvcVisible) {
                var mustVerify = document.getElementById('checkout-avc-verified');
                if (!mustVerify || mustVerify.value !== '1') {
                    showCardError('Please verify AVC ID first.');
                    if (inlineAvcInput) inlineAvcInput.focus();
                    return;
                }
            }
            if (resourceSection && resourceRadios.length > 0) {
                var selected = form.querySelector('input[name="checkout_resource"]:checked');
                if (!selected) {
                    showCardError('Please select a supporting resource (NTD port or Copper pair) above.');
                    return;
                }
                if (selected.value === 'ntd' && selected.getAttribute('data-in-use') === '1') {
                    var verified = document.getElementById('checkout-avc-verified');
                    var avcIdField = document.getElementById('checkout-avc-id');
                    if ((!verified || verified.value !== '1') && checkoutLoc) {
                        var cNtd = selected.getAttribute('data-ntd-id') || '';
                        var cPort = selected.getAttribute('data-port-number') || '1';
                        var hitNtd = checkoutAvcLsGet(checkoutAvcLsKeyNtd(cNtd, cPort));
                        if (hitNtd && hitNtd.avc_id && avcIdField && verified) {
                            avcIdField.value = hitNtd.avc_id;
                            verified.value = '1';
                        }
                    }
                    if (!verified || verified.value !== '1') {
                        showCardError('Please select the Used port above and complete AVC verification first (or pick another available port).');
                        return;
                    }
                }
                if (selected.value === 'copper' && selected.getAttribute('data-line-in-use') === '1') {
                    var verifiedCopper = document.getElementById('checkout-avc-verified');
                    var avcIdFieldCp = document.getElementById('checkout-avc-id');
                    if ((!verifiedCopper || verifiedCopper.value !== '1') && checkoutLoc) {
                        var cCpi = selected.getAttribute('data-copper-id') || '';
                        var hitCp = cCpi ? checkoutAvcLsGet(checkoutAvcLsKeyCopper(cCpi)) : null;
                        if (hitCp && hitCp.avc_id && avcIdFieldCp && verifiedCopper) {
                            avcIdFieldCp.value = hitCp.avc_id;
                            verifiedCopper.value = '1';
                        }
                    }
                    if (!verifiedCopper || verifiedCopper.value !== '1') {
                        showCardError('Please select the Line In Use copper pair above and complete AVC verification first (or pick another pair).');
                        return;
                    }
                }
            }
            var asapHiddenEl = document.getElementById('checkout-asap');
            var isAsapSubmit = asapHiddenEl && asapHiddenEl.value === '1';
            var activationInput = form.querySelector('input[name="service_activation_date"]');
            if (!isAsapSubmit && activationInput && activationInput.value) {
                var selectedAct = parseCheckoutDmy(activationInput.value);
                var minActDate = new Date();
                minActDate.setDate(minActDate.getDate() + 7);
                minActDate.setHours(0, 0, 0, 0);
                if (!selectedAct || selectedAct.getTime() < minActDate.getTime()) {
                    showCardError('Service activation date must be at least 7 days in the future (DD-MM-YYYY).');
                    activationInput.focus();
                    return;
                }
            }
            if (!stripe || !cardElement) { showCardError('Payment is not configured. Please refresh and try again.'); return; }

            showCardError('');
            setLoading(true);

            var paymentType = 'subscription';

            var formData = new FormData(form);
            var paymentIntentPayload = {
                product_id: form.querySelector('input[name="product_id"]').value,
                type: form.querySelector('input[name="type"]').value,
                price: price,
                payment_type: paymentType
            };
            formData.forEach(function (v, k) { paymentIntentPayload[k] = v; });
            
            // Explicitly include router value from hidden field
            var shipRouterHidden = document.getElementById('checkout-ship-router-hidden');
            if (shipRouterHidden) {
                paymentIntentPayload.ship_router = shipRouterHidden.value;
            }
            
            paymentIntentPayload.payment_type = paymentType;

            fetch(sameOriginUrl(paymentIntentUrl), {
                method: 'POST',
                credentials: 'same-origin',
                headers: getCsrfHeaders(),
                body: JSON.stringify(paymentIntentPayload)
            })
            .then(function (r) { return r.json().then(function (data) { if (!r.ok) throw new Error(data.message || 'Could not start payment.'); return data; }); })
            .then(function (data) {
                var clientSecret = data.client_secret;
                var paymentIntentId = data.payment_intent_id;
                var resolvedPaymentType = data.payment_type || paymentType;
                var isSetupIntent = !!data.setup_intent;
                if (!clientSecret) throw new Error('Invalid payment response.');
                if (isSetupIntent) {
                    return stripe.confirmCardSetup(clientSecret, { payment_method: { card: cardElement } })
                        .then(function (result) {
                            if (result.error) {
                                var msg = result.error.message || 'Card setup failed.';
                                if (result.error.code === 'card_declined') msg = 'Your card was declined. Please try another card.';
                                throw new Error(msg);
                            }
                            if (result.setupIntent && result.setupIntent.status === 'succeeded') {
                                return { paymentIntentId: paymentIntentId || result.setupIntent.id, paymentType: resolvedPaymentType };
                            }
                            throw new Error('Card could not be set up.');
                        });
                }
                return stripe.confirmCardPayment(clientSecret, { payment_method: { card: cardElement } })
                    .then(function (result) {
                        if (result.error) {
                            var msg = result.error.message || 'Payment failed.';
                            if (result.error.code === 'card_declined') msg = 'Your card was declined. Please try another card.';
                            throw new Error(msg);
                        }
                        if (result.paymentIntent && (result.paymentIntent.status === 'succeeded' || result.paymentIntent.status === 'requires_capture')) {
                            return { paymentIntentId: paymentIntentId || result.paymentIntent.id, paymentType: resolvedPaymentType };
                        }
                        throw new Error('Payment could not be completed.');
                    });
            })
            .then(function (next) {
                var paymentIntentId = next.paymentIntentId;
                var paymentType = next.paymentType;
                var formData = new FormData(form);
                var submitPayload = {};
                formData.forEach(function (v, k) { submitPayload[k] = v; });
                submitPayload.payment_intent_id = paymentIntentId;
                submitPayload.payment_type = 'subscription';
                return fetch(sameOriginUrl(submitUrl), {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: getCsrfHeaders(),
                    body: JSON.stringify(submitPayload)
                });
            })
            .then(function (responseOrUndefined) {
                if (responseOrUndefined && typeof responseOrUndefined.json === 'function') {
                    var res = responseOrUndefined;
                    return res.json().then(function (data) {
                        if (!res.ok) throw new Error(data.message || 'Order could not be created.');
                        if (data.success && data.redirect) { window.location.href = data.redirect; return; }
                        throw new Error(data.message || 'Order could not be created.');
                    });
                }
            })
            .catch(function (err) {
                setLoading(false);
                showCardError(err.message || 'Something went wrong. Please try again.');
            });
        });
    }
})();
</script>
@endpush