@extends('layouts.app')

@section('title', 'Qualification – Find Location')

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

    <div class="qual-start-banner">
        Please enter the <strong>Location ID</strong> or <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-location-id" name="loc" value="{{ old('loc', $loc ?? '') }}" placeholder="Location ID *" autocomplete="off" class="form-control qual-start-input">
        </div>

        <p class="qual-start-or">OR</p> -->

        <div class="qual-start-field">
            <input type="text" id="qual-full-address" placeholder="Enter Full Service Address" autocomplete="off" class="form-control 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="form-control qual-start-input">
            </div>
            <div class="qual-start-field">
                <input type="text" id="qual-unit" placeholder="Unit" autocomplete="off" class="form-control qual-start-input">
            </div>
            <div class="qual-start-field">
                <input type="text" id="qual-level" placeholder="Level" autocomplete="off" class="form-control qual-start-input">
            </div>
            <div class="qual-start-field">
                <input type="text" id="qual-street-number" placeholder="Street Number" autocomplete="off" class="form-control qual-start-input">
            </div>
            <div class="qual-start-field">
                <input type="text" id="qual-street-name" placeholder="Street Name" autocomplete="off" class="form-control qual-start-input">
            </div>
            <div class="qual-start-field">
                <input type="text" id="qual-suburb" placeholder="Suburb *" autocomplete="off" class="form-control qual-start-input" data-required="1">
            </div>
            <div class="qual-start-field">
                <input type="text" id="qual-state" placeholder="State *" autocomplete="off" class="form-control qual-start-input" data-required="1">
            </div>
            <div class="qual-start-field">
                <input type="text" id="qual-postcode" placeholder="Postcode *" autocomplete="off" class="form-control 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 qual-start-submit">Find Location</button>
        </div>

        <p class="qual-start-error" id="qual-start-error" style="display: none;"></p>
    </form>
</div>

{{-- Hidden map for Google Places Service (required by API) --}}
<div id="qual-places-map" class="qual-places-map-hidden" aria-hidden="true"></div>

@if(!empty($googleMapsApiKey))
<script src="https://maps.googleapis.com/maps/api/js?key={{ $googleMapsApiKey }}&libraries=places&region=au&callback=qualInitPlaces" async defer></script>
@endif

<script>
window.qualGoogleMapsApiKey = @json($googleMapsApiKey ?? '');
(function() {
    var url = @json(route('qualification.lookup-location'));
    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.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');

    document.getElementById('qual-street-number').value = streetNumber || '';
    document.getElementById('qual-street-name').value = route || '';
    document.getElementById('qual-suburb').value = suburb || '';
    document.getElementById('qual-state').value = state || '';
    document.getElementById('qual-postcode').value = postcode || '';
    document.getElementById('qual-unit').value = unit || '';
    document.getElementById('qual-lot-number').value = premise || '';
    document.getElementById('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']
    });

    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) {
                if (details.formatted_address) fullAddressInput.value = details.formatted_address;
                if (details.address_components && details.address_components.length) {
                    qualFillAddressFields(details);
                }
            }
        });
    });
}

document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('qual-start-form');
    var locInput = document.getElementById('qual-location-id');
    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');

    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'); });

    function buildAddressLoc() {
        var parts = [
            document.getElementById('qual-lot-number').value.trim(),
            document.getElementById('qual-unit').value.trim(),
            document.getElementById('qual-level').value.trim(),
            document.getElementById('qual-street-number').value.trim(),
            document.getElementById('qual-street-name').value.trim(),
            document.getElementById('qual-suburb').value.trim(),
            document.getElementById('qual-state').value.trim(),
            document.getElementById('qual-postcode').value.trim()
        ];
        return parts.filter(Boolean).join(', ');
    }

    function showError(msg) {
        errorEl.textContent = msg;
        errorEl.style.display = 'block';
    }

    function hideError() {
        errorEl.style.display = 'none';
    }

    function showToast(message, type) {
        type = type || 'error';
        var container = document.getElementById('qual-toaster-container');
        if (!container) 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);
    }

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        hideError();

        var streetNumber = document.getElementById('qual-street-number').value.trim();
        var streetName = document.getElementById('qual-street-name').value.trim();
        var suburb = document.getElementById('qual-suburb').value.trim();
        var state = document.getElementById('qual-state').value.trim();
        var postcode = document.getElementById('qual-postcode').value.trim();

        if (!streetName || !suburb || !state || !postcode) {
            var msg = 'Please enter Street Name, Suburb, State and Postcode (or select an address from suggestions).';
            showError(msg);
            showToast(msg, 'error');
            return;
        }

        var serviceProvider = serviceTypeInput.value;
        if (serviceProvider !== 'nbn' && serviceProvider !== 'community_fibre') {
            serviceProvider = 'nbn';
        }

        // Exact payload shape for Iperium broadband/location API (same params only)
        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 originalText = submitBtn.textContent;
        submitBtn.disabled = true;
        submitBtn.textContent = 'Finding…';

        fetch(window.qualLookupLocationUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').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: { message: 'Invalid response from server.' } };
            });
        })
        .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.';
            showError(errMsg);
            showToast(errMsg, 'error');
        })
        .catch(function() {
            var msg = 'Network error. Please try again.';
            showError(msg);
            showToast(msg, 'error');
        })
        .finally(function() {
            submitBtn.disabled = false;
            submitBtn.textContent = originalText;
        });
    });
});
</script>
@endsection

@push('styles')
<style>
.qual-start-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border, #e5e7eb);
}
.qual-page-title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.qual-start-banner {
    background: var(--accent);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.75rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.qual-start-banner strong { font-weight: 600; }
.qual-start-form { padding: 0; }
.qual-start-field { margin-bottom: 1.125rem; }
.qual-start-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.qual-start-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(227, 30, 82, 0.15);
}
.qual-start-input::placeholder { color: var(--text-muted); }
.qual-start-or {
    text-align: center;
    margin: 1.25rem 0;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9375rem;
}
.qual-start-address-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}
.qual-start-toggle-row {
    display: flex;
    gap: 0;
    margin-bottom: 1.75rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.qual-start-toggle-btn {
    flex: 1;
    padding: 0.875rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: #fff;
    color: var(--accent);
    transition: background 0.2s, color 0.2s;
}
.qual-start-toggle-btn:first-child { border-right: 1px solid var(--border); }
.qual-start-toggle-btn.active {
    background: var(--accent);
    color: #fff;
}
.qual-start-toggle-btn:not(.active):hover {
    background: rgba(227, 30, 82, 0.08);
}
.qual-start-actions { margin-bottom: 1rem; }
.qual-start-submit {
    padding: 0.75rem 2rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}
.qual-start-error {
    color: var(--error);
    font-size: 0.9375rem;
    margin-top: 0.5rem;
}
.qual-places-map-hidden { width: 1px; height: 1px; position: absolute; left: -9999px; overflow: hidden; }

/* Toaster for location finder errors (base; overridden in mobile) */
.qual-toaster-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.qual-toast {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: qual-toast-in 0.3s ease;
    pointer-events: auto;
    max-width: 320px;
}
.qual-toast-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.qual-toast-out { animation: qual-toast-out 0.3s ease forwards; }
@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: Mobile (portrait & small) ========== */
@media (max-width: 575.98px) {
    .qual-start-page {
        max-width: 100%;
        margin: 0;
        padding: 1rem;
        border-radius: 0;
        box-shadow: none;
        border-left: none;
        border-right: none;
    }
    .qual-start-banner {
        padding: 1rem 1rem;
        font-size: 0.9375rem;
        border-radius: 8px;
        margin-bottom: 1.25rem;
    }
    .qual-start-address-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }
    .qual-start-field { margin-bottom: 0.875rem; }
    .qual-start-input {
        padding: 0.625rem 0.875rem;
        font-size: 16px; /* avoids zoom on iOS */
    }
    .qual-start-toggle-row { margin-bottom: 1.25rem; border-radius: 8px; }
    .qual-start-toggle-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }
    .qual-start-submit {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    .qual-toaster-container {
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        max-width: none;
    }
    .qual-toast { max-width: none; }
}

/* ========== Responsive: Mobile landscape / large phone ========== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .qual-start-page {
        max-width: 100%;
        padding: 1.25rem;
        margin: 0 0.5rem;
    }
    .qual-start-address-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .qual-start-toggle-btn { padding: 0.75rem 1rem; font-size: 1rem; }
    .qual-start-submit { width: 100%; }
}

/* ========== Responsive: Tablet ========== */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .qual-start-page {
        max-width: 92%;
        margin: 0 auto;
        padding: 1.5rem 1.75rem 2rem;
    }
    .qual-start-address-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .qual-start-banner { font-size: 1rem; }
    .qual-start-toggle-btn { padding: 0.8125rem 1.25rem; font-size: 1rem; }
}

/* ========== Responsive: Laptop / Desktop ========== */
@media (min-width: 1024px) {
    .qual-start-page {
        max-width: 960px;
        padding: 1.5rem 2rem 2rem;
    }
}
@media (min-width: 1280px) {
    .qual-start-page { max-width: 1024px; }
}
</style>
@endpush