<style>
    /*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
    #map-{{ $name }} {
        height: 300px;
    }

    .controls {
        font-family: inherit !important;
        font-size: 14px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px;
        width: 100% !important;
    }

    /*
 * Optional: Makes the sample page fill the window.
 */
</style>

<div class="form-group">
    <input id="pac-input-{{ $name }}" name="{{ $name }}" class=" form-control controls" type="text"
        placeholder="Buscar dirección" value="{{ $address ?? '' }}" />
    <input type="hidden" id="lat-{{ $name }}" name="lat-{{ $name }}" value="{{ $latitude ?? '' }}">
    <input type="hidden" id="lng-{{ $name }}" name="lng-{{ $name }}" value="{{ $longitude ?? '' }}">
    @if (isset($addressid))
        <input type="hidden" id="addressid-{{ $name }}" name="addressid-{{ $name }}"
            value="{{ $addressid }}">
    @endif
    <div id="map-{{ $name }}"></div>
</div>


<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

<script>
    // This example adds a search box to a map, using the Google Place Autocomplete
    // feature. People can enter geographical searches. The search box will return a
    // pick list containing a mix of places and predicted search terms.
    // This example requires the Places library. Include the libraries=places
    // parameter when you first load the API. For example:
    async function initAutocomplete{{ $name }}() {
        // https://developers.google.com/maps/documentation/javascript/libraries?hl=es-419#javascript
        const { Map } = await google.maps.importLibrary("maps");
        const { SearchBox } = await google.maps.importLibrary("places");
        const { ControlPosition,LatLngBounds,event } = await google.maps.importLibrary("core");
        const { Marker } = await google.maps.importLibrary("marker");

        const position = {
            lat: {{ $latitude ?? 0 }},
            lng: {{ $longitude ?? 0 }},
        };
        const map = new Map(document.getElementById("map-{{ $name }}"), {
            center: position,
            zoom: {{ $zoom ?? 15 }},
            mapTypeId: "roadmap",
        });


        // Create the search box and link it to the UI element.
        const input = document.getElementById("pac-input-{{ $name }}");
        const searchBox = new SearchBox(input);

        // map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        // Bias the SearchBox results towards current map's viewport.
        map.addListener("bounds_changed", () => {
            searchBox.setBounds(map.getBounds());
            // const lat = map.getCenter().lat();
            // const lng = map.getCenter().lng();
            // $("#lat-{{ $name }}").val(lat);
            // $("#lng-{{ $name }}").val(lng);
        });

            let markers = [];

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
        searchBox.addListener("places_changed", () => {
            const places = searchBox.getPlaces();

            if (places.length == 0) {
                return;
            }

            // Clear out the old markers.
            markers.forEach((marker) => {
                marker.setMap(null);
            });
            markers = [];

            // For each place, get the icon, name and location.
            const bounds = new LatLngBounds();

            places.forEach((place) => {
                if (!place.geometry || !place.geometry.location) {
                    console.log("Returned place contains no geometry");
                    return;
                }

                // Create a marker for each place.
                // markers.push(
                const marker = new Marker({
                    map,
                    // icon,
                    title: place.name,
                    position: place.geometry.location,
                    draggable: true,

                }) /* , */
                // );
                markers.push(marker);
                event.addListener(marker, 'dragend', function(marker) {
                    const currentLatitude = marker.latLng.lat();
                    const currentLongitude = marker.latLng.lng();
                    $("#lat-{{ $name }}").val(currentLatitude);
                    $("#lng-{{ $name }}").val(currentLongitude);
                })
                const currentLatitude = marker.position.lat();
                const currentLongitude = marker.position.lng();
                $("#lat-{{ $name }}").val(currentLatitude);
                $("#lng-{{ $name }}").val(currentLongitude);
                if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            map.fitBounds(bounds);
        });

        @if (isset($addressid))
            const marker = new Marker({
                position: position,
                map,
                title: "Hello World!",
                draggable: true,
            });
            markers.push(marker);
            event.addListener(marker, 'dragend', function(marker) {
                currentLatitude = marker.latLng.lat();
                currentLongitude = marker.latLng.lng();
                $("#lat-{{ $name }}").val(currentLatitude);
                $("#lng-{{ $name }}").val(currentLongitude);
            })
        @endif


    }

    // window.initAutocomplete{{ $name }} = initAutocomplete{{ $name }};
</script>

<script>
    if (typeof google === "undefined") {
        console.log("Loading google maps");

        (g => {
            var h, a, k, p = "The Google Maps JavaScript API",
                c = "google",
                l = "importLibrary",
                q = "__ib__",
                m = document,
                b = window;
            b = b[c] || (b[c] = {});
            var d = b.maps || (b.maps = {}),
                r = new Set,
                e = new URLSearchParams,
                u = () => h || (h = new Promise(async (f, n) => {
                    await (a = m.createElement("script"));
                    e.set("libraries", [...r] + "");
                    for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                    e.set("callback", c + ".maps." + q);
                    a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                    d[q] = f;
                    a.onerror = () => h = n(Error(p + " could not load."));
                    a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                    m.head.append(a)
                }));
            d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(
            () =>
                d[l](f, ...n))
        })
        ({
            key: "AIzaSyDv579f74i_47NZHBfdxAxprOsZ526iHVI",
            v: "weekly",
            libraries: "places"
        });
    }
    document.addEventListener("DOMContentLoaded", initAutocomplete{{ $name }});
</script>