@extends('layouts.app')

@section('title', 'Qualification Results')

@section('content')
<div id="qual-toaster-container" class="qual-toaster-container" aria-live="polite"></div>
<div class="qualification-page">

    {{-- ── Page Header ── --}}
    <div class="page-header-bar">
        <div class="header-title-row">
            <div class="page-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            </div>
            <div>
                <h1 class="page-title">Qualification</h1>
                <p class="page-subtitle" id="qual-loc-display">{{ $loc ? 'LOC: ' . $loc : 'Find a service address to begin' }}</p>
            </div>
        </div>
    </div>

    {{-- ── Progress Steps ── --}}
    <div class="qual-progress">
        <div class="qual-progress-steps">
            <div class="qual-step qual-step-active" data-step="1">
                <span class="qual-step-num">1</span>
                <span class="qual-step-label">Find Location</span>
            </div>
            <div class="qual-step" data-step="2">
                <span class="qual-step-num">2</span>
                <span class="qual-step-label">Qualification Results</span>
            </div>
            <div class="qual-step" data-step="3">
                <span class="qual-step-num">3</span>
                <span class="qual-step-label">Customer Details</span>
            </div>
            <div class="qual-step" data-step="4">
                <span class="qual-step-num">4</span>
                <span class="qual-step-label">Order Submission</span>
            </div>
        </div>
    </div>

    {{-- ── Step Panels ── --}}
    <div class="qual-step-panels">

        {{-- Step 1: Find Location --}}
        <div class="qual-step-panel qual-step-panel-active" id="panel-step-1">
            <div class="qual-location-form-wrapper" id="qual-location-form-wrapper">
                <div class="qual-find-location-loader" id="qual-find-location-loader" aria-hidden="true" style="display: none;">
                    <div class="qual-find-location-spinner"></div>
                    <span class="qual-find-location-loader-text">Finding location…</span>
                </div>

                <div class="qual-start-banner">
                    Please enter the <strong>Service Address</strong> to locate the desired location.
                </div>

                <form id="qual-start-form" class="qual-start-form" action="{{ route('qualification.show') }}" method="GET">
                    <div class="qual-start-field">
                        <input type="text" id="qual-full-address" placeholder="Enter Full Service Address" autocomplete="off" class="profile-input qual-start-input">
                    </div>
                    <div class="qual-start-address-grid">
                        <div class="qual-start-field">
                            <input type="text" id="qual-lot-number" placeholder="Lot Number" autocomplete="off" class="profile-input qual-start-input">
                        </div>
                        <div class="qual-start-field">
                            <input type="text" id="qual-unit" placeholder="Unit" autocomplete="off" class="profile-input qual-start-input">
                        </div>
                        <div class="qual-start-field">
                            <input type="text" id="qual-level" placeholder="Level" autocomplete="off" class="profile-input qual-start-input">
                        </div>
                        <div class="qual-start-field">
                            <input type="text" id="qual-street-number" placeholder="Street Number" autocomplete="off" class="profile-input qual-start-input">
                        </div>
                        <div class="qual-start-field">
                            <input type="text" id="qual-street-name" placeholder="Street Name" autocomplete="off" class="profile-input qual-start-input">
                        </div>
                        <div class="qual-start-field">
                            <input type="text" id="qual-suburb" placeholder="Suburb *" autocomplete="off" class="profile-input qual-start-input" data-required="1">
                        </div>
                        <div class="qual-start-field">
                            <input type="text" id="qual-state" placeholder="State *" autocomplete="off" class="profile-input qual-start-input" data-required="1">
                        </div>
                        <div class="qual-start-field">
                            <input type="text" id="qual-postcode" placeholder="Postcode *" autocomplete="off" class="profile-input qual-start-input" data-required="1">
                        </div>
                    </div>

                    <input type="hidden" name="service_type" id="qual-service-type" value="{{ old('service_type', $serviceType ?? 'nbn') }}">

                    <div class="qual-start-toggle-row">
                        <button type="button" class="qual-start-toggle-btn active" data-type="nbn" id="qual-toggle-nbn">NBN</button>
                        <button type="button" class="qual-start-toggle-btn" data-type="community_fibre" id="qual-toggle-cf">Community Fibre</button>
                    </div>

                    <div class="qual-start-actions">
                        <button type="submit" class="btn-primary-action qual-start-submit">
                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                            Find Location
                        </button>
                    </div>
                    <p class="qual-start-error" id="qual-start-error" style="display: none;"></p>
                </form>
            </div>
        </div>

        {{-- Step 2: Qualification Results --}}
        <div class="qual-step-panel" id="panel-step-2">
            <div class="qual-results-section" id="qual-results-section" @if(empty($loc)) style="display: none;" @endif>

                <div class="qual-address-card" id="qual-address-card" style="display: none;">
                    <div class="qual-address-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <div>
                        <div class="qual-address-label">SERVICE ADDRESS</div>
                        <div class="qual-address-value" id="qual-address-value">—</div>
                    </div>
                </div>
                <div class="qual-cards-row" id="qual-info-cards" style="display: none;">
                    <div class="qual-info-card qual-info-status">
                        <span class="qual-info-icon">✓</span>
                        <span class="qual-info-label">Status</span>
                        <span class="qual-info-value" id="qual-status-value">—</span>
                    </div>
                    <div class="qual-info-card">
                        <span class="qual-info-icon">📶</span>
                        <span class="qual-info-label">Primary Access Technology</span>
                        <span class="qual-info-value" id="qual-technology-value">—</span>
                    </div>
                    <div class="qual-info-card qual-info-class">
                        <span class="qual-info-icon">🔗</span>
                        <span class="qual-info-label">Service Class</span>
                        <span class="qual-info-value" id="qual-service-class-value">—</span>
                    </div>
                    <div class="qual-info-card qual-info-ndc">
                        <span class="qual-info-icon">◆</span>
                        <span class="qual-info-label">New Developments Charge</span>
                        <span class="qual-info-value" id="qual-ndc-value">—</span>
                    </div>
                </div>

                <div class="qual-loading" id="qual-result-loading">Loading qualification data…</div>
                <div class="qual-error" id="qual-result-error" style="display: none;"></div>
                @if(($serviceType ?? 'nbn') === 'nbn')
                <div class="qual-avc-id-row" id="qual-avc-id-row-step2" style="display: none;">
                    <label for="qual-avc-id" class="profile-label">AVC ID <span style="font-weight:400;color:#6b7280;">(optional)</span></label>
                    <input type="text" id="qual-avc-id" class="profile-input qual-avc-id-input" maxlength="64" placeholder="e.g. AVC_ or last 5 digits (verify via modal if port used)">
                    <span class="qual-field-error" id="qual-err-avc-id"></span>
                </div>
                @endif
                <div id="qual-result-content" style="display: none;">
                    @if(($serviceType ?? 'nbn') === 'nbn')
                    <div class="qual-has-ntd-wrap" id="qual-has-ntd-wrap">
                        <label class="profile-label">Do you have an existing NTD?</label>
                        <div class="qual-activation-tabs qual-ntd-tabs" role="tablist" aria-label="Existing NTD">
                            <input type="radio" name="has_ntd_choice" value="1" id="qual-has-ntd-yes" class="qual-activation-tab-input" checked aria-controls="qual-ntd-panel">
                            <input type="radio" name="has_ntd_choice" value="0" id="qual-has-ntd-no" class="qual-activation-tab-input" aria-controls="qual-ntd-panel">
                            <label for="qual-has-ntd-yes" class="qual-activation-tab" role="tab" aria-selected="true" tabindex="0">Yes, I have an NTD</label>
                            <label for="qual-has-ntd-no" class="qual-activation-tab" role="tab" aria-selected="false" tabindex="0">No, I need an NTD</label>
                        </div>
                        <input type="hidden" name="has_ntd" id="qual-has-ntd" value="1">
                    </div>
                    @endif
                    <div id="qual-ntd-section" class="qual-resource-section" style="display: none;">
                        <h3 class="qual-section-title">Supporting Resources (NTD)</h3>
                        <div class="detail-card qual-table-card">
                            <div class="table-responsive">
                                <table class="product-list-table qual-table">
                                    <thead>
                                        <tr>
                                            <th>Supporting Resources</th>
                                            <th>UNI-D Port Number</th>
                                            <th>Status</th>
                                            <th>Select</th>
                                        </tr>
                                    </thead>
                                    <tbody id="qual-ntds-tbody"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div id="qual-copper-section" class="qual-resource-section" style="display: none;">
                        <h3 class="qual-section-title">Copper Pairs</h3>
                        <div class="detail-card qual-table-card">
                            <div class="table-responsive">
                                <table class="product-list-table qual-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 id="qual-copper-tbody"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <h3 class="qual-section-title">Available Products</h3>
                    <div class="detail-card qual-table-card">
                        <div class="table-responsive">
                            <table class="product-list-table qual-table">
                                <thead>
                                    <tr>
                                        <th>Product Name</th>
                                        <th>Handoff Type</th>
                                        <th>Service Speed</th>
                                        <th>Sale Price</th>
                                        <th>Select</th>
                                    </tr>
                                </thead>
                                <tbody id="qual-products-tbody"></tbody>
                            </table>
                        </div>
                    </div>

                    <div class="qual-extra-fields qual-products-extra">
                        @php
                            $minActivation = now()->addDays(7)->startOfDay();
                            $defaultActivation = now()->addDays(7)->setTime(9, 0, 0);
                        @endphp
                        <div class="form-group">
                            <label class="profile-label">Service Activation <span class="required">*</span></label>
                            <div class="qual-activation-tabs" role="tablist" aria-label="Service activation type">
                                <input type="radio" name="activation_type" value="asap" id="qual-activation-asap" class="qual-activation-tab-input" checked aria-controls="qual-date-wrap">
                                <input type="radio" name="activation_type" value="date" id="qual-activation-date" class="qual-activation-tab-input" aria-controls="qual-date-wrap">
                                <label for="qual-activation-asap" class="qual-activation-tab" role="tab" aria-selected="true" tabindex="0">ASAP</label>
                                <label for="qual-activation-date" class="qual-activation-tab" role="tab" aria-selected="false" tabindex="0">Select date</label>
                            </div>
                            <input type="hidden" name="asap" id="qual-asap" value="1">
                            <div id="qual-date-wrap" class="qual-activation-panel" style="display:none;">
                                <input type="datetime-local" id="qual-service-activation-date" name="service_activation_date" class="profile-input qual-datetime-local" autocomplete="off" min="{{ $minActivation->format('Y-m-d\TH:i') }}" value="{{ $defaultActivation->format('Y-m-d\TH:i') }}">
                            </div>
                            <span class="qual-field-hint" id="qual-activation-hint">When ASAP is selected, activation will be scheduled as soon as possible (earliest 7 days).</span>
                            <span class="qual-field-hint" id="qual-activation-hint-date" style="display:none;">Must be at least 7 days in the future.</span>
                            <span class="qual-field-error" id="qual-err-service-activation-date"></span>
                        </div>
                        <!-- <div class="form-group qual-order-note-group">
                            <label for="qual-order-note" class="profile-label">Order Note</label>
                            <textarea id="qual-order-note" name="order_note" rows="3" maxlength="2000" placeholder="Optional order note" class="qual-textarea"></textarea>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>

        {{-- Step 3: Order Details --}}
        <div class="qual-step-panel" id="panel-step-3">
            <form id="qual-order-details-form" class="qual-form">

                <div class="qual-form-section full-width">
                    <div class="qual-section-header">
                        <div class="qual-section-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        </div>
                        <h3 class="qual-section-title">Customer Details</h3>
                    </div>
                    <div class="qual-form qual-form-inline">
                        <div class="form-group">
                            <label for="qual-customer-type" class="profile-label">Customer Type <span class="required">*</span></label>
                            <select id="qual-customer-type" name="customer_type" required class="profile-input">
                                <option value="">Select…</option>
                                <option value="Residential">Residential</option>
                                <option value="Business">Business</option>
                            </select>
                            <span class="qual-field-error" id="qual-err-customer-type"></span>
                        </div>
                        <!-- <div class="form-group">
                            <label for="qual-customer-name">Customer Name <span class="required">*</span></label>
                            <input type="text" id="qual-customer-name" name="customer_name" required maxlength="255" placeholder="Customer name" value="{{ $qualificationUser ? e($qualificationUser->name) : '' }}">
                            <span class="qual-field-error" id="qual-err-customer-name"></span>
                        </div> -->
                        <!-- <div class="form-group full-width">
                            <label for="qual-order-reference">Order Reference</label>
                            <input type="text" id="qual-order-reference" name="order_reference" maxlength="255" placeholder="Optional">
                        </div> -->
                        <div class="form-group">
                            <label for="qual-site-contact-name" class="profile-label">Full Name <span class="required">*</span></label>
                            <input type="text" id="qual-site-contact-name" name="site_contact_name" required maxlength="255" readonly disabled placeholder="Enter Full name" class="profile-input" value="{{ $qualificationUser ? e($qualificationUser->name) : '' }}">
                            <span class="qual-field-error" id="qual-err-site-contact-name"></span>
                        </div>
                        <div class="form-group">
                            <label for="qual-site-contact-number" class="profile-label">Contact Number <span class="required">*</span></label>
                            <input type="text" id="qual-site-contact-number" class="profile-input" name="site_contact_number" required maxlength="255" placeholder="Enter Contact number">
                            <span class="qual-field-error" id="qual-err-site-contact-number"></span>
                        </div>
                        <div class="form-group">
                            <label for="qual-site-contact-email" class="profile-label">Email <span class="required">*</span></label>
                            <input type="email" id="qual-site-contact-email" class="profile-input" name="site_contact_email" required placeholder="Enter Email" readonly disabled value="{{ $qualificationUser ? e($qualificationUser->email) : '' }}">
                            <span class="qual-field-error" id="qual-err-site-contact-email"></span>
                        </div>
                        <div class="form-group">
                            <label for="qual-date-of-birth" class="profile-label">Date of Birth <span class="required">*</span></label>
                            <input type="date" id="qual-date-of-birth" name="date_of_birth" class="profile-input" required>
                            <span class="qual-field-error" id="qual-err-date-of-birth"></span>
                        </div>
                        <div class="form-group qual-business-field" id="qual-abn-group" style="display: none;">
                            <label for="qual-abn" class="profile-label">ABN <span class="required">*</span></label>
                            <div class="qual-abn-wrapper">
                                <input type="text" id="qual-abn" name="abn" class="profile-input" maxlength="14" placeholder="e.g. 51 824 753 556" inputmode="numeric" autocomplete="off">
                                <span class="qual-abn-icon" id="qual-abn-icon" aria-hidden="true"></span>
                            </div>
                            <span class="qual-field-error" id="qual-err-abn"></span>
                        </div>
                        <div class="form-group qual-business-field" id="qual-registered-company-group" style="display: none;">
                            <label for="qual-registered-company-name" class="profile-label">Registered Company Name <span class="required">*</span></label>
                            <input type="text" id="qual-registered-company-name" name="registered_company_name" class="profile-input" maxlength="255" placeholder="Enter registered company name">
                            <span class="qual-field-error" id="qual-err-registered-company-name"></span>
                        </div>
                        @if(($serviceType ?? 'nbn') === 'nbn')
                        <input type="hidden" name="avc_verified" id="qual-avc-verified" value="">
                        @endif
                    </div>
                </div>
                {{-- Service Details (below Customer Details) --}}
                <!-- <div class="qual-form-section full-width">
                    <h3 class="qual-section-title">Service Details</h3>
                    <div class="qual-form qual-form-inline">
                        <div class="form-group">
                            <label for="qual-nbn-service-profile" class="profile-label">NBN Service Profile <span class="required">*</span></label>
                            <select id="qual-nbn-service-profile" name="nbn_service_profile" required class="profile-input">
                                <option value="Default" selected>Default</option>
                                <option value="Tagged">Tagged</option>
                            </select>
                            <span class="qual-field-error" id="qual-err-nbn-service-profile"></span>
                        </div>
                        <div class="form-group">
                            <label for="qual-ipv4-allocation" class="profile-label">IPv4 Allocation <span class="required">*</span></label>
                            <select id="qual-ipv4-allocation" name="ipv4_allocation" required class="profile-input">
                                <option value="CGNAT" selected>CGNAT</option>
                                <option value="VRF">VRF</option>
                                <option value="Static">Static</option>
                            </select>
                            <span class="qual-field-error" id="qual-err-ipv4-allocation"></span>
                        </div>
                    </div>
                </div> --> 
                {{-- PPPoE Authentication Details (below Service Details) --}}
                <!-- <div class="qual-form-section full-width">
                    <h3 class="qual-section-title">PPPoE Authentication Details</h3>
                    <div class="qual-form qual-form-inline">
                        <div class="form-group qual-pppoe-username-group">
                            <label for="qual-pppoe-username" class="profile-label">Username <span class="required">*</span></label>
                            <span class="qual-field-hint">Default: Location ID. Auto-filled but editable.</span>
                            <div class="qual-pppoe-username-wrapper">
                                <input type="text" id="qual-pppoe-username" name="pppoe_username" maxlength="255" placeholder="Location ID" data-suffix="@mybroadband.com.au" class="profile-input pppoe-inner-input">
                                <span class="qual-pppoe-suffix">@mybroadband.com.au</span>
                            </div>
                            <span class="qual-field-error" id="qual-err-pppoe-username"></span>
                        </div>
                        <div class="form-group qual-pppoe-password-group">
                            <label for="qual-pppoe-password" class="profile-label">Password <span class="required">*</span></label>
                            <span class="qual-field-hint">Default: Location ID. Auto-filled but editable.</span>
                            <div class="qual-pppoe-password-wrapper">
                                <input type="password" id="qual-pppoe-password" name="pppoe_password" maxlength="255" placeholder="Location ID" autocomplete="off" class="profile-input">
                                <button type="button" class="qual-pppoe-sync-password" id="qual-pppoe-sync-password" title="Reset to Location ID" aria-label="Reset to Location ID">↻</button>
                            </div>
                            <span class="qual-field-error" id="qual-err-pppoe-password"></span>
                        </div>
                    </div>
                </div> -->
            </form>
        </div>

        {{-- Step 4: Order Submission --}}
        <div class="qual-step-panel" id="panel-step-4">
        <div id="qual-order-summary" class="qual-order-summary">
            <p>Review your order and choose how you would like to pay.</p>
            <div id="qual-summary-content"></div>
            <div id="qual-payment-section" class="qual-payment-section">
                <label class="qual-payment-label">Card details</label>

                <div class="form-group">
                    <label for="qual-current-provider" class="profile-label">Current Provider</label>
                    <select id="qual-current-provider" name="current_provider" class="profile-input">
                        <option value="">Select your current provider…</option>
                        <option value="AGL">AGL</option>
                        <option value="Aussie Broadband">Aussie Broadband</option>
                        <option value="Australia Post">Australia Post</option>
                        <option value="Belong">Belong</option>
                        <option value="Dodo">Dodo</option>
                        <option value="Exetel">Exetel</option>
                        <option value="iinet">iinet</option>
                        <option value="iPrimus">iPrimus</option>
                        <option value="Kogan">Kogan</option>
                        <option value="Launtel">Launtel</option>
                        <option value="Leaptel">Leaptel</option>
                        <option value="Mate">Mate</option>
                        <option value="More">More</option>
                        <option value="Optus">Optus</option>
                        <option value="Origin">Origin</option>
                        <option value="Spintel">Spintel</option>
                        <option value="Swoop">Swoop</option>
                        <option value="Tangerine">Tangerine</option>
                        <option value="Telstra">Telstra</option>
                        <option value="TPG">TPG</option>
                        <option value="Vodafone">Vodafone</option>
                        <option value="Any other">Any other</option>
                    </select>
                    <span class="qual-field-error" id="qual-err-current-provider"></span>
                </div>

                <div id="qual-payment-type-section" class="qual-payment-type-section">
                    <label class="qual-monthly-checkbox-label">
                        <input
                            type="checkbox"
                            id="qual_monthly_auto_payment"
                            name="qual_payment_type"
                            value="subscription"
                        >
                        <span class="qual-checkbox-text">
                            Monthly Auto Payment
                            <small>(Auto debit every month)</small>
                        </span>
                    </label>
                </div>

                <div id="qual-card-element" class="qual-card-element"></div>
                <span class="qual-field-error" id="qual-err-card"></span>

     
            </div>

            <div id="qual-subscription-section" class="qual-subscription-section" style="display: none;">
                <p>You will be redirected to Stripe to complete your monthly subscription. You will be charged every month until you cancel.</p>
                <button type="button" class="btn qual-btn-subscription" id="qual-btn-subscription">Proceed to Monthly Payment</button>
                <span class="qual-field-error" id="qual-err-subscription"></span>
            </div>
        </div>

    <div id="qual-submit-success" style="display: none;" class="qual-success">
        <p class="qual-success-line">✅ Order Created Successfully</p>
        <p class="qual-success-line qual-success-service-id" id="qual-success-service-id" style="display: none;">
            ✅ Service ID: <strong id="qual-success-service-id-value"></strong>
        </p>
        <p class="qual-success-credentials" id="qual-credentials-notice"></p>
    </div>
    <div id="qual-submit-error" style="display: none;" class="qual-error"></div>
</div>
    </div>

    {{-- ── Navigation ── --}}
    <div class="qual-nav" id="qual-nav">
        <button type="button" class="btn-back qual-btn-back" id="qual-btn-back" style="display: none;">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Back
        </button>
        <div class="qual-nav-right">
            <button type="button" class="btn-primary-action qual-btn-next" id="qual-btn-next">
                Next
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7"/></svg>
            </button>
            <button type="button" class="btn-primary-action qual-btn-submit" id="qual-btn-submit" style="display: none;" data-original-text="Submit Order">
                Submit Order
            </button>
        </div>
    </div>

</div>

{{-- AVC verification modal (when user selects a "Used" NTD port) --}}
<div id="qual-avc-modal" class="qual-avc-modal" role="dialog" aria-labelledby="qual-avc-modal-title" aria-modal="true" style="display: none;">
    <div class="qual-avc-modal-backdrop"></div>
    <div class="qual-avc-modal-content">
        <h2 id="qual-avc-modal-title" class="qual-avc-modal-title">AVC</h2>
        <p class="qual-avc-modal-hint">e.g, AVC followed by 12 digits or last 5 digits.</p>
        <div class="qual-avc-modal-body">
            <input type="text" id="qual-avc-input" class="qual-avc-input" placeholder="AVC_" autocomplete="off" maxlength="32">
            <span class="qual-avc-error" id="qual-avc-error"></span>
        </div>
        <div class="qual-avc-modal-actions">
            <button type="button" class="btn-primary-action qual-avc-verify" id="qual-avc-verify">Verify</button>
            <button type="button" class="btn qual-avc-cancel" id="qual-avc-cancel">Cancel</button>
        </div>
    </div>
</div>

{{-- Hidden map for Google Places --}}
<div id="qual-places-map" class="qual-places-map-hidden" aria-hidden="true"></div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const checkbox = document.getElementById('qual_monthly_auto_payment');

    checkbox.addEventListener('change', function () {
        const isMonthly = this.checked;

        if (isMonthly) {
            // Switch to subscription flow
            document.getElementById('qual-payment-section').style.display = 'none';
            document.getElementById('qual-subscription-section').style.display = 'block';
        } else {
            // Default: one-time payment
            document.getElementById('qual-payment-section').style.display = 'block';
            document.getElementById('qual-subscription-section').style.display = 'none';
        }
    });
});
    function syncBusinessFields() {
        var customerType = document.getElementById('qual-customer-type');
        if (!customerType) return;
        var abnGroup = document.getElementById('qual-abn-group');
        var regCompanyGroup = document.getElementById('qual-registered-company-group');
        var abnInput = document.getElementById('qual-abn');
        var regCompanyInput = document.getElementById('qual-registered-company-name');
        var isBusiness = customerType.value === 'Business';

        if (abnGroup) abnGroup.style.display = isBusiness ? '' : 'none';
        if (regCompanyGroup) regCompanyGroup.style.display = isBusiness ? '' : 'none';
        if (abnInput) abnInput.required = isBusiness;
        if (regCompanyInput) regCompanyInput.required = isBusiness;

        if (!isBusiness) {
            if (abnInput) abnInput.value = '';
            if (regCompanyInput) regCompanyInput.value = '';
            var icon = document.getElementById('qual-abn-icon');
            if (icon) icon.className = 'qual-abn-icon';
            var errAbn = document.getElementById('qual-err-abn');
            if (errAbn) errAbn.textContent = '';
            var errReg = document.getElementById('qual-err-registered-company-name');
            if (errReg) errReg.textContent = '';
        }
    }
    document.getElementById('qual-customer-type').addEventListener('change', syncBusinessFields);
    syncBusinessFields();
</script>
<script>
window.qualificationConfig = {
    loc: @json($loc ?? ''),
    serviceType: @json($serviceType ?? 'nbn'),
    productId: @json($productId ?? null),
    loginUrl: @json(route('login')),
    stripePublishableKey: @json($stripePublishableKey ?? ''),
    stripeTestMode: @json($stripeTestMode ?? false),
    googleMapsApiKey: @json($googleMapsApiKey ?? ''),
    urls: {
        result: @json(route('qualification.result', ['loc' => '__LOC__'])),
        paymentIntent: @json(route('qualification.payment-intent')),
        initiatePayment: @json(route('qualification.initiate-payment')),
        orderSubmit: @json(route('qualification.order.submit')),
        checkoutSession: @json(route('qualification.checkout-session')),
        createSubscription: @json(route('qualification.create-subscription')),
        confirmSubscriptionOrder: @json(route('qualification.confirm-subscription-order')),
        lookupLocation: @json(route('qualification.lookup-location')),
        validateAvc: @json(route('website.validate-avc')),
    },
};
</script>
@endsection

@push('styles')
<style>

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header-bar {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
    animation: fadeSlideDown 0.4s ease both;
}
.header-title-row { display: flex; align-items: center; gap: 0.85rem; }
.page-title-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); flex-shrink: 0;
}
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text,#111); letter-spacing: -0.3px; line-height: 1.2; }
.page-subtitle { margin: 0.15rem 0 0; font-size: 0.845rem; color: var(--text-muted,#888); }

/* ─── PROGRESS STEPS ──────────────────────────────────── */
.qual-progress { margin-bottom: 1.75rem; animation: fadeSlideDown 0.4s ease 0.05s both; }
.qual-progress-steps {
    display: flex; border-radius: 12px; overflow: hidden;
    border: 1.5px solid var(--border,#e8eaed);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.qual-step {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: .5rem; padding: .8rem 1rem;
    font-size: .8125rem; font-weight: 600;
    background: #fafbfc; color: var(--text-muted,#999);
    border-right: 1.5px solid var(--border,#e8eaed);
    transition: background .2s, color .2s;
    white-space: nowrap; min-width: 0;
}
.qual-step:last-child { border-right: none; }
.qual-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: .72rem; font-weight: 800;
    background: var(--border,#e0e0e0); color: var(--text-muted,#aaa);
    flex-shrink: 0; transition: background .2s, color .2s;
}
.qual-step-active {
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    color: var(--accent);
}
.qual-step-active .qual-step-num {
    background: var(--accent); color: #fff;
}
.qual-step-done {
    background: color-mix(in srgb, var(--accent) 5%, #fff);
    color: var(--accent);
}
.qual-step-done .qual-step-num {
    background: #22c55e; color: #fff;
}

/* ─── STEP PANELS ─────────────────────────────────────── */
.qual-step-panels { margin-bottom: 1.5rem; }
.qual-step-panel { display: none; padding: 0.25rem 0; }
.qual-step-panel-active { display: block; }

/* ─── LOCATION FORM ───────────────────────────────────── */
.qual-location-form-wrapper { position: relative; }
.qual-start-banner {
    background: var(--accent);
    color: #fff; padding: 1.1rem 1.5rem;
    border-radius: 12px; margin-bottom: 1.25rem;
    font-size: 1rem; line-height: 1.5;
    animation: fadeSlideDown 0.4s ease 0.1s both;
}
.qual-start-banner strong { font-weight: 700; }
.qual-start-field { margin-bottom: .85rem; }

/* shared input style (reuse profile-input from system) */
.profile-input {
    width: 100%; padding: .55rem .85rem;
    border: 1.5px solid var(--border,#e0e0e0);
    border-radius: 9px; font-size: .9rem;
    background: #fff; color: var(--text,#111);
    outline: none; transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.profile-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

.qual-start-address-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: .85rem; margin-bottom: 1.1rem;
}
.qual-start-toggle-row {
    display: flex; gap: 0; margin-bottom: 1.1rem;
    border-radius: 10px; overflow: hidden;
    border: 1.5px solid var(--border,#e0e0e0);
}
.qual-start-toggle-btn {
    flex: 1; padding: .8rem 1.5rem;
    font-size: .9375rem; font-weight: 700;
    border: none; cursor: pointer;
    background: #fff; color: var(--accent);
    transition: background .18s, color .18s;
}
.qual-start-toggle-btn:first-child { border-right: 1.5px solid var(--border,#e0e0e0); }
.qual-start-toggle-btn.active { background: var(--accent); color: #fff; }
.qual-start-toggle-btn:not(.active):hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.qual-start-actions { 
    margin-bottom: 1rem; 
    text-align: right;
    display: flex;
    justify-content: flex-end;
}
.qual-start-error {
    color: #b91c1c; font-size: .875rem;
    background: #fee2e2; padding: .6rem 1rem;
    border-radius: 8px; margin-top: .5rem;
    border: 1px solid #fca5a5;
}

/* ─── FIND LOCATION LOADER ────────────────────────────── */
.qual-find-location-loader {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.88);
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1rem; z-index: 10;
}
.qual-find-location-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--border,#e5e7eb);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: qual-spin 0.8s linear infinite;
}
.qual-find-location-loader-text { font-size: 1rem; font-weight: 600; color: var(--text,#111); }

/* ─── RESULTS SECTION ─────────────────────────────────── */
.qual-address-card {
    background: #fff;
    border: 1.5px solid var(--border,#e8eaed);
    border-radius: 12px; padding: 1rem 1.25rem;
    margin-bottom: 1.1rem;
    display: flex; align-items: center; gap: .85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    animation: fadeSlideDown 0.35s ease both;
}
.qual-address-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.qual-address-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted,#aaa); margin-bottom: .2rem; }
.qual-address-value { font-weight: 600; font-size: .9375rem; color: var(--text,#111); }
.qual-avc-id-row { margin-top: 1rem; width: 100%; }
.qual-avc-id-row .qual-avc-id-input { width: 100%; }
.qual-has-ntd-wrap { margin-bottom: 1.25rem; }
.qual-has-ntd-wrap .profile-label { margin-bottom: 0.5rem; }

.qual-cards-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.qual-info-card {
    background: #fff; border: 1.5px solid var(--border,#e8eaed);
    border-radius: 12px; padding: 1rem;
    display: flex; flex-direction: column; gap: .3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.qual-info-card.qual-info-status { background: #dcfce7; border-color: #86efac; }
.qual-info-icon { font-size: 1.25rem; }
.qual-info-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted,#888); }
.qual-info-value { font-weight: 700; color: var(--text,#111); font-size: .9375rem; }

/* ─── SECTION TITLES ──────────────────────────────────── */
.qual-section-header {
    display: flex; align-items: center; gap: .6rem;
    margin: 1.25rem 0 .75rem;
}
.qual-section-icon {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); flex-shrink: 0;
}
.qual-section-icon--lock { background: rgba(234,179,8,.12); color: #a16207; }
.qual-section-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text,#111); }

/* standalone section title (without header wrapper) */
h3.qual-section-title { margin: 1.1rem 0 .6rem; font-size: 1rem; font-weight: 700; color: var(--text,#111); }

/* ─── TABLES ──────────────────────────────────────────── */
.qual-table-card {
    background: #fff;
    border: 1.5px solid var(--border,#e8eaed);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    margin-bottom: 1.25rem;
}
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.product-list-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.product-list-table thead tr {
    background: color-mix(in srgb, var(--accent) 5%, #fff);
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.product-list-table th {
    padding: .75rem 1rem; text-align: left;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted,#999); white-space: nowrap;
}
.product-list-table td { padding: .8rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--border,#f0f0f0); }
.product-list-table tbody tr:last-child td { border-bottom: none; }
.product-list-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 3%, #fff); }

/* port status pills */
.qual-port-status {
    display: inline-flex; align-items: center;
    padding: .25rem .65rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600;
}
.qual-port-used { background: #fef9c3; color: #a16207; }

/* AVC verification modal */
.qual-avc-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.qual-avc-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.qual-avc-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%;
}
.qual-avc-modal-title { margin: 0 0 0.5rem; font-size: 1.25rem; color: #1a1a1a; }
.qual-avc-modal-hint { margin: 0 0 1rem; font-size: 0.875rem; color: #6b7280; }
.qual-avc-modal-body { margin-bottom: 1.25rem; }
.qual-avc-input {
    width: 100%; padding: 0.6rem 0.75rem; font-size: 1rem;
    border: 1px solid var(--accent, #0d9488); border-radius: 8px;
    box-sizing: border-box;
}
.qual-avc-error { display: block; margin-top: 0.5rem; font-size: 0.875rem; color: #dc2626; }
.qual-avc-modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.qual-port-available { background: #dcfce7; color: #15803d; }

/* ─── EXTRA FIELDS (Step 2 bottom) ───────────────────── */
.qual-extra-fields {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem; margin-top: 1.1rem;
}
.qual-extra-fields .qual-order-note-group { grid-column: 1 / -1; }
.qual-textarea {
    width: 100%; padding: .55rem .85rem;
    border: 1.5px solid var(--border,#e0e0e0);
    border-radius: 9px; font-size: .9rem;
    background: #fff; color: var(--text,#111);
    outline: none; resize: vertical;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box; font-family: inherit;
}
.qual-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.qual-datetime-local { font-family: inherit; }

/* ─── ORDER DETAILS FORM (Step 3) ────────────────────── */
.qual-form {
    width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem; box-sizing: border-box;
}
.qual-form-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.qual-form-section.full-width { grid-column: 1 / -1; }
.qual-form-inline .form-group.full-width { grid-column: 1 / -1; }
.form-group { width: 100%; }

.profile-label {
    display: block; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted,#999); margin-bottom: .35rem;
}
.required { color: var(--accent); }
.qual-field-hint { display: block; font-size: .75rem; color: var(--text-muted,#aaa); margin-bottom: .35rem; }
.qual-field-error { display: block; font-size: .775rem; color: #b91c1c; font-weight: 500; margin-top: .25rem; }

/* Service activation tabs (ASAP | Select date) */
.qual-activation-tabs {
    display: flex; position: relative; margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--border,#e5e7eb); gap: 0;
}
.qual-activation-tab-input {
    position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0;
}
.qual-activation-tab {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    padding: 0.6rem 0.85rem; font-weight: 600; font-size: 0.9rem; color: #6b7280;
    background: #f3f4f6; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
    cursor: pointer; transition: color .2s, background .2s, border-color .2s;
}
.qual-activation-tab:hover { color: #374151; background: #e5e7eb; }
.qual-activation-tab-input:first-of-type:checked ~ .qual-activation-tab:nth-child(3),
.qual-activation-tab-input:nth-of-type(2):checked ~ .qual-activation-tab:nth-child(4) {
    color: var(--accent,#e8192c); background: #fff; border-bottom-color: var(--accent,#e8192c);
}
.qual-activation-panel { margin-top: 0.5rem; }
.qual-activation-panel .qual-datetime-local { width: 100%; }

/* ABN wrapper */
.qual-abn-wrapper { position: relative; display: block; }
.qual-abn-wrapper .profile-input { padding-right: 2.5rem; }
.qual-abn-icon { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; pointer-events: none; }
.qual-abn-icon.valid { color: #22c55e; }
.qual-abn-icon.invalid { color: #ef4444; }
.qual-abn-icon.valid::after { content: "✓"; font-weight: 800; }
.qual-abn-icon.invalid::after { content: "✕"; font-weight: 800; }

/* PPPoE wrappers */
.qual-pppoe-username-wrapper {
    display: flex; align-items: stretch;
    border: 1.5px solid var(--border,#e0e0e0);
    border-radius: 9px; overflow: hidden;
}
.qual-pppoe-username-wrapper .pppoe-inner-input {
    flex: 1; border: none; border-radius: 0; min-width: 0;
    box-shadow: none !important;
}
.qual-pppoe-username-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.qual-pppoe-suffix { padding: .55rem .85rem; background: #f5f6f8; color: var(--text-muted,#888); font-size: .845rem; white-space: nowrap; border-left: 1.5px solid var(--border,#e0e0e0); }

.qual-pppoe-password-wrapper { display: flex; align-items: center; gap: .4rem; }
.qual-pppoe-password-wrapper .profile-input { flex: 1; }
.qual-pppoe-sync-password {
    flex-shrink: 0; width: 2.35rem; height: 2.35rem; padding: 0;
    border: 1.5px solid var(--border,#e0e0e0); border-radius: 9px;
    background: #f5f6f8; cursor: pointer; font-size: 1.125rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s; color: var(--text-muted,#888);
}
.qual-pppoe-sync-password:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ─── STEP 4: PAYMENT ─────────────────────────────────── */
.qual-summary-intro { font-size: .9375rem; color: var(--text-muted,#666); margin: 0 0 1.1rem; }
.qual-payment-section {
    margin-top: 1.25rem; padding: 1.1rem 1.25rem;
    background: #fafbfc;
    border: 1.5px solid var(--border,#e8eaed);
    border-radius: 12px;
}
.qual-payment-label { display: block; margin-bottom: .6rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted,#999); }
.qual-payment-type-section { margin-bottom: 1rem; }
.qual-payment-type-inner-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--text-muted,#888); margin-bottom: .4rem; }
.qual-payment-type-options { display: flex; flex-direction: column; gap: .65rem; }
.qual-payment-type-option { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .9rem; font-weight: 500; }
.qual-payment-type-option input { width: auto; accent-color: var(--accent); cursor: pointer; }
.qual-card-element {
    padding: .75rem .85rem; background: #fff;
    border: 1.5px solid var(--border,#e0e0e0); border-radius: 9px;
    transition: border-color .2s, box-shadow .2s;
}
.qual-card-element:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

.qual-stripe-test-mode {
    margin-top: 1rem; padding: 1rem 1.1rem;
    background: #fef9c3; border: 1.5px solid #fde68a;
    border-radius: 10px; font-size: .875rem; color: #854d0e;
}
.qual-stripe-test-mode strong { display: block; margin-bottom: .35rem; font-weight: 700; }
.qual-test-cards { margin: .5rem 0 0; padding-left: 1.25rem; }
.qual-test-cards li { margin-bottom: .25rem; }
.qual-test-cards code { background: rgba(0,0,0,.08); padding: .15rem .4rem; border-radius: 5px; font-size: .8125rem; }

.qual-subscription-section {
    margin-top: 1.25rem; padding: 1.1rem 1.25rem;
    background: #f0fdf4; border: 1.5px solid #86efac;
    border-radius: 12px;
}
.qual-subscription-section p { margin: 0 0 .85rem; font-size: .9rem; color: #166534; }

/* ─── SUCCESS / ERROR ─────────────────────────────────── */
.qual-success {
    background: #dcfce7; color: #166534;
    padding: 1.1rem 1.25rem; border-radius: 12px;
    border: 1.5px solid #86efac; margin-bottom: 1rem;
    animation: fadeSlideUp 0.35s ease both;
}
.qual-success-inner { display: flex; align-items: center; gap: .65rem; margin-bottom: .4rem; }
.qual-success-line { margin: .25rem 0; font-weight: 600; }
.qual-success-credentials { margin: .5rem 0 0; font-size: .9rem; }
.qual-error {
    background: #fee2e2; color: #b91c1c;
    padding: .9rem 1.1rem; border-radius: 10px;
    border: 1.5px solid #fca5a5; margin-bottom: 1rem;
    font-size: .9rem;
}
.qual-loading { padding: 1.5rem 1rem; color: var(--text-muted,#888); font-size: .9rem; }

/* ─── NAV BUTTONS ─────────────────────────────────────── */
.qual-nav {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem; padding-top: 1.1rem;
    border-top: 1.5px solid var(--border,#e8eaed);
    animation: fadeSlideUp 0.4s ease 0.15s both;
}
.qual-nav-right { display: flex; gap: .6rem; }

.btn-primary-action {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .52rem 1.15rem; background: var(--accent); color: #fff;
    border: none; border-radius: 9px; font-size: .875rem; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: all .18s;
}
.btn-primary-action:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; text-decoration: none; }

.btn-back {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .48rem 1rem;
    border: 1.5px solid var(--border,#e0e0e0);
    border-radius: 9px; font-size: .875rem; font-weight: 600;
    color: var(--text-muted,#666); text-decoration: none;
    transition: all .18s; background: transparent; cursor: pointer;
}
.btn-back:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); transform: translateX(-2px); }

/* loading state */
.qual-btn-submit.qual-btn-loading { pointer-events: none; opacity: .8; }
.qual-btn-spinner { display: inline-block; width: 1em; height: 1em; margin-right: .35em; vertical-align: -.2em; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: qual-spin 0.7s linear infinite; }

/* ─── TOASTER ─────────────────────────────────────────── */
.qual-toaster-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.qual-toast { padding: .75rem 1.1rem; border-radius: 10px; font-size: .9rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.15); animation: qual-toast-in .3s ease; pointer-events: auto; max-width: 360px; }
.qual-toast-error { background: #fee2e2; color: #b91c1c; border: 1.5px solid #fca5a5; }
.qual-toast-success { background: #d4edda; color: #155724; border: 1.5px solid #c3e6cb; }
.qual-toast-out { animation: qual-toast-out .3s ease forwards; }

/* ─── MISC ────────────────────────────────────────────── */
.qual-places-map-hidden { width: 1px; height: 1px; position: absolute; left: -9999px; overflow: hidden; }
.qual-resource-section { margin-bottom: 1rem; }
.qual-summary-dl dt { font-weight: 600; margin-top: .5rem; color: var(--text-muted,#888); font-size: .875rem; }
.qual-summary-dl dd { margin: .15rem 0 0; }
.qual-summary-product { margin-top: 1.25rem; padding: 1rem 1.1rem; background: #f8f9fa; border-radius: 10px; border: 1.5px solid var(--border,#e8eaed); }
.qual-summary-product-title { margin: 0 0 .5rem; color: var(--accent); font-size: 1rem; font-weight: 700; }

/* ─── KEYFRAMES ───────────────────────────────────────── */
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideUp   { from { opacity: 0; transform: translateY(14px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes qual-spin     { to { transform: rotate(360deg); } }
@keyframes qual-toast-in  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes qual-toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
    .qual-progress-steps { flex-wrap: nowrap; overflow: visible; }
    .qual-step { min-width: 0; flex: 1; padding: .7rem .35rem; }
    .qual-step-label { display: none; }
    .qual-step-num { width: 26px; height: 26px; font-size: .75rem; }
    .qual-start-address-grid { grid-template-columns: repeat(2, 1fr); }
    .qual-form, .qual-form-inline, .qual-extra-fields { grid-template-columns: 1fr; }
    .qual-form-section.full-width, .qual-form-inline .form-group.full-width { grid-column: 1; }
    .qual-cards-row { grid-template-columns: repeat(2, 1fr); }
    .page-title { font-size: 1.25rem; }
}
@media (max-width: 480px) {
    .qual-start-address-grid { grid-template-columns: 1fr; }
    .qual-cards-row { grid-template-columns: 1fr; }
    .qual-start-toggle-btn { font-size: .845rem; padding: .7rem 1rem; }
}
</style>
@endpush

@push('scripts')
<script>
(function() {
    var config = window.qualificationConfig || {};
    var url = (config.urls && config.urls.lookupLocation) || '';
    if (url && typeof url === 'string' && window.location && window.location.protocol === 'https:' && url.indexOf('http://') === 0)
        url = 'https:' + url.slice(5);
    window.qualLookupLocationUrl = url;
})();
function qualGetComponent(components, type, useShort) {
    var c = (components || []).find(function(x) { return x.types && x.types.indexOf(type) !== -1; });
    return c ? (useShort ? c.short_name : c.long_name) : '';
}
function qualFillAddressFields(place) {
    var ac = place.address_components || [];
    var streetNumber = qualGetComponent(ac, 'street_number');
    var route = qualGetComponent(ac, 'route');
    var suburb = qualGetComponent(ac, 'locality') || qualGetComponent(ac, 'sublocality_level_1') || qualGetComponent(ac, 'sublocality') || qualGetComponent(ac, 'administrative_area_level_2');
    var state = qualGetComponent(ac, 'administrative_area_level_1', true) || qualGetComponent(ac, 'administrative_area_level_1');
    var postcode = qualGetComponent(ac, 'postal_code');
    var unit = qualGetComponent(ac, 'subpremise');
    var premise = qualGetComponent(ac, 'premise');
    var el = function(id) { return document.getElementById(id); };
    if (el('qual-street-number')) el('qual-street-number').value = streetNumber || '';
    if (el('qual-street-name')) el('qual-street-name').value = route || '';
    if (el('qual-suburb')) el('qual-suburb').value = suburb || '';
    if (el('qual-state')) el('qual-state').value = state || '';
    if (el('qual-postcode')) el('qual-postcode').value = postcode || '';
    if (el('qual-unit')) el('qual-unit').value = unit || '';
    if (el('qual-lot-number')) el('qual-lot-number').value = premise || '';
    if (el('qual-level')) el('qual-level').value = '';
}
function qualInitPlaces() {
    if (typeof google === 'undefined' || !google.maps || !google.maps.places) return;
    var fullAddressInput = document.getElementById('qual-full-address');
    if (!fullAddressInput) return;
    var mapEl = document.getElementById('qual-places-map');
    var placesService = null;
    if (mapEl) {
        var map = new google.maps.Map(mapEl, { center: { lat: -25.2744, lng: 133.7751 }, zoom: 4 });
        placesService = new google.maps.places.PlacesService(map);
    }
    var autocomplete = new google.maps.places.Autocomplete(fullAddressInput, {
        types: ['address'],
        fields: ['place_id', 'formatted_address', 'name'],
        componentRestrictions: { country: 'au' }
    });
    autocomplete.addListener('place_changed', function() {
        var place = autocomplete.getPlace();
        if (!place.place_id) return;
        fullAddressInput.value = place.formatted_address || place.name || fullAddressInput.value;
        if (!placesService) return;
        placesService.getDetails({ placeId: place.place_id, fields: ['address_components', 'formatted_address'] }, function(details, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK && details && details.address_components && details.address_components.length)
                qualFillAddressFields(details);
        });
    });
}
document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('qual-start-form');
    var serviceTypeInput = document.getElementById('qual-service-type');
    var errorEl = document.getElementById('qual-start-error');
    var toggleNbn = document.getElementById('qual-toggle-nbn');
    var toggleCf = document.getElementById('qual-toggle-cf');
    if (!form) return;
    function setServiceType(type) {
        serviceTypeInput.value = type;
        if (toggleNbn) toggleNbn.classList.toggle('active', type === 'nbn');
        if (toggleCf) toggleCf.classList.toggle('active', type === 'community_fibre');
    }
    if (toggleNbn) toggleNbn.addEventListener('click', function() { setServiceType('nbn'); });
    if (toggleCf) toggleCf.addEventListener('click', function() { setServiceType('community_fibre'); });
    var qconfig = window.qualificationConfig;
    if (serviceTypeInput && qconfig) {
        var st = (qconfig.serviceType === 'community_fibre') ? 'community_fibre' : 'nbn';
        serviceTypeInput.value = st;
        setServiceType(st);
    }
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (errorEl) { errorEl.textContent = ''; errorEl.style.display = 'none'; }
        var streetNumber = document.getElementById('qual-street-number'); streetNumber = streetNumber ? streetNumber.value.trim() : '';
        var streetName = document.getElementById('qual-street-name'); streetName = streetName ? streetName.value.trim() : '';
        var suburb = document.getElementById('qual-suburb'); suburb = suburb ? suburb.value.trim() : '';
        var state = document.getElementById('qual-state'); state = state ? state.value.trim() : '';
        var postcode = document.getElementById('qual-postcode'); postcode = postcode ? postcode.value.trim() : '';
        if (!streetName || !suburb || !state || !postcode) {
            var msg = 'Please enter Street Name, Suburb, State and Postcode (or select an address from suggestions).';
            if (errorEl) { errorEl.textContent = msg; errorEl.style.display = 'block'; }
            if (window.showQualToast) window.showQualToast(msg, 'error');
            return;
        }
        var serviceProvider = serviceTypeInput ? serviceTypeInput.value : 'nbn';
        if (serviceProvider !== 'nbn' && serviceProvider !== 'community_fibre') serviceProvider = 'nbn';
        var payload = {
            service_provider: serviceProvider,
            service_address: { street_number: String(streetNumber || ''), street_name: String(streetName), suburb: String(suburb), state: String(state), postcode: String(postcode) }
        };
        var submitBtn = form.querySelector('.qual-start-submit');
        var loaderEl = document.getElementById('qual-find-location-loader');
        if (submitBtn) submitBtn.disabled = true;
        if (loaderEl) { loaderEl.style.display = 'flex'; loaderEl.setAttribute('aria-hidden', 'false'); }
        fetch(window.qualLookupLocationUrl || '', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': (function(){ var m = document.querySelector('meta[name="csrf-token"]'); return m ? m.getAttribute('content') : ''; })() },
            body: JSON.stringify(payload)
        })
        .then(function(res) { return res.json().then(function(data) { return { ok: res.ok, data: data || {} }; }).catch(function() { return { ok: false, data: {} }; }); })
        .then(function(result) {
            var data = result.data || {};
            if (result.ok && data.location_id) {
                var url = data.redirect_url || (form.action + '?loc=' + encodeURIComponent(data.location_id) + '&service_type=' + encodeURIComponent(serviceProvider));
                window.location.href = url;
                return;
            }
            var errMsg = data.message || (data.errors && typeof data.errors === 'object' ? (Object.values(data.errors).flat()[0] || 'Validation failed.') : null) || 'Could not find a location for this address.';
            if (errorEl) { errorEl.textContent = errMsg; errorEl.style.display = 'block'; }
            if (window.showQualToast) window.showQualToast(errMsg, 'error');
        })
        .catch(function() {
            var msg = 'Network error. Please try again.';
            if (errorEl) { errorEl.textContent = msg; errorEl.style.display = 'block'; }
            if (window.showQualToast) window.showQualToast(msg, 'error');
        })
        .finally(function() {
            if (submitBtn) submitBtn.disabled = false;
            if (loaderEl) { loaderEl.style.display = 'none'; loaderEl.setAttribute('aria-hidden', 'true'); }
        });
    });
});
</script>
@if(!empty($googleMapsApiKey))
<script src="https://maps.googleapis.com/maps/api/js?key={{ $googleMapsApiKey }}&libraries=places&region=au&callback=qualInitPlaces" async defer></script>
@else
<script>document.addEventListener('DOMContentLoaded', function() { qualInitPlaces(); });</script>
@endif
<script>
window.showQualToast = function(message, type) {
    type = type || 'error';
    var container = document.getElementById('qual-toaster-container');
    if (!container || !message) return;
    var toast = document.createElement('div');
    toast.className = 'qual-toast qual-toast-' + type;
    toast.setAttribute('role', 'alert');
    toast.textContent = message;
    container.appendChild(toast);
    setTimeout(function() {
        toast.classList.add('qual-toast-out');
        setTimeout(function() {
            if (toast.parentNode) toast.parentNode.removeChild(toast);
        }, 300);
    }, 5000);
};
</script>
<script src="https://js.stripe.com/v3/"></script>
<script src="{{ asset('js/qualification.js') }}?v=20250302_1803"></script>
@endpush