@once
@push('head')
<style>
.pac-container { z-index: 20000 !important; }
</style>
@endpush
@endonce

@php
    $mapsKey = config('services.google.maps_api_key');
    $addressBindings = $bindings ?? [[
        'input'   => 'cm_address',
        'city'    => 'cm_city',
        'state'   => 'cm_state',
        'pincode' => 'cm_pincode',
        'country' => 'cm_country',
    ]];
@endphp

@if($mapsKey)
<script>
(function () {
    const bindings = @json($addressBindings);

    function bindAddressAutocomplete(cfg) {
        const input = document.getElementById(cfg.input);
        if (!input || input.dataset.placesBound === '1') return true;
        if (typeof google === 'undefined' || !google.maps?.places) return false;

        input.dataset.placesBound = '1';
        input.setAttribute('autocomplete', 'off');

        const autocomplete = new google.maps.places.Autocomplete(input, {
            componentRestrictions: { country: 'ca' },
            fields: ['address_components', 'formatted_address'],
        });

        autocomplete.addListener('place_changed', function () {
            const place = autocomplete.getPlace();
            if (!place.address_components) return;

            let streetNumber = '', route = '', city = '', province = '', postalCode = '', country = '';

            place.address_components.forEach(function (component) {
                const types = component.types;
                if (types.includes('street_number')) streetNumber = component.long_name;
                if (types.includes('route')) route = component.long_name;
                if (types.includes('locality')) city = component.long_name;
                if (types.includes('administrative_area_level_1')) province = component.short_name || component.long_name;
                if (types.includes('postal_code')) postalCode = component.long_name;
                if (types.includes('country')) country = component.long_name;
            });

            const street = [streetNumber, route].filter(Boolean).join(' ').trim();
            input.value = street || place.formatted_address || input.value;

            const cityEl = cfg.city ? document.getElementById(cfg.city) : null;
            const stateEl = cfg.state ? document.getElementById(cfg.state) : null;
            const pincodeEl = cfg.pincode ? document.getElementById(cfg.pincode) : null;
            const countryEl = cfg.country ? document.getElementById(cfg.country) : null;

            if (cityEl && city) cityEl.value = city;
            if (stateEl && province) stateEl.value = province;
            if (pincodeEl && postalCode) pincodeEl.value = postalCode;
            if (countryEl && country) countryEl.value = country;

            input.blur();
        });

        return true;
    }

    window.initGoogleAddressAutocomplete = function () {
        bindings.forEach(bindAddressAutocomplete);
    };

    document.addEventListener('DOMContentLoaded', function () {
        if (window.google?.maps?.places) {
            window.initGoogleAddressAutocomplete();
        }
    });
})();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ $mapsKey }}&libraries=places&callback=initGoogleAddressAutocomplete" async defer></script>
@endif