{% extends 'bootstrap_4_layout.html.twig' %}

{% block address_widget %}
    {{ block('form_widget') }}
    <div id="{{ form.vars.id }}_map" class="map mt-3"></div>
    <script>
        document.addEventListener('AddressMap', function (e) {
            initMap{{ form.vars.id }}_map();
        }, false);

        function initMap{{ form.vars.id }}_map() {
            const map = new google.maps.Map(document.getElementById("{{ form.vars.id }}_map"), {
                // center: { lat: 38.000000, lng: 0.000000 },
                zoom: 3,
            });

            let currentDataValue = document.querySelector("#{{ form.parent.children.data.vars.id }}").value;
            if (currentDataValue) {
                let currentData = JSON.parse(currentDataValue);
                if (currentData.coordinates && currentData.coordinates.latitude && currentData.coordinates.longitude) {
                    map.setCenter({
                        lat: parseFloat(currentData.coordinates.latitude),
                        lng: parseFloat(currentData.coordinates.longitude)
                    });
                    let marker = new google.maps.Marker({
                        position: {
                            lat: parseFloat(currentData.coordinates.latitude),
                            lng: parseFloat(currentData.coordinates.longitude)
                        },
                        map: map
                    });
                    map.setZoom(16);
                } else {
                    map.setCenter({lat: 48.866667, lng: 2.333333});
                }
            } else {
                map.setCenter({lat: 48.866667, lng: 2.333333});
            }


            const input = document.getElementById("{{ form.vars.id }}");
            const autocomplete = new google.maps.places.Autocomplete(input);

            autocomplete.bindTo("bounds", map);
            // Specify just the place data fields that you need.
            autocomplete.setFields(["place_id", "geometry", "address_components"]);

            const marker = new google.maps.Marker({map: map});

            autocomplete.addListener("place_changed", () => {
                const place = autocomplete.getPlace();

                if (!place.geometry || !place.geometry.location) {
                    return;
                }

                let data = {};
                for (let i = 0; i < place.address_components.length; i++) {
                    let addressType = place.address_components[i].types[0];
                    if (addressType === 'street_number') {
                        data.number = place.address_components[i]['long_name'];
                    }
                    if (addressType === 'route') {
                        data.street = place.address_components[i]['long_name'];
                    }
                    if (addressType === 'postal_code') {
                        data.postal_code = place.address_components[i]['long_name'];
                    }
                    if (addressType === 'locality') {
                        data.city = place.address_components[i]['long_name'];
                    }
                    if (addressType === 'country') {
                        data.country = place.address_components[i]['long_name'];
                    }
                }
                data.coordinates = {};
                data.coordinates.latitude = place.geometry.location.lat();
                data.coordinates.longitude = place.geometry.location.lng();
                document.querySelector("#{{ form.parent.children.data.vars.id }}").value = JSON.stringify(data);

                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(16);
                }

                // Set the position of the marker using the place ID and location.
                marker.setPlace({
                    placeId: place.place_id,
                    location: place.geometry.location,
                });
                marker.setVisible(true);
            });
        }
    </script>
{% endblock %}
{% block picture_widget %}
    <div class="form-group">
        <input type="hidden" {{ block('widget_attributes') }} {% if form.parent.children.text.vars.value is not empty %}value="{{ form.parent.children.text.vars.value }}" {% endif %}/>
        <div class="pos-rel text-center d-style radius-1 overflow-hidden {{ attr['div_class'] }}">
            {% if form.parent.children.text.vars.value %}
                <img class="form-file-manager-input h-100" id="image-{{ id }}" data-input="{{ id }}"
                     src="{{ form.parent.children.text.vars.value }}"/>
            {% else %}
                <img class="form-file-manager-input h-100" id="image-{{ id }}" data-input="{{ id }}"
                     src="https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/5/8/22.png"/>
            {% endif %}
            <div class="v-hover position-tl h-100 w-100 bgc-dark-grad"></div>
            <div class="v-hover position-center text-white-tp2 p-2 radius-1 bgc-black-tp4">
                <a data-for="{{ id }}"
                   data-toggle="modal"
                   data-target="#fileManagerModal"
                   class="file-manager-open text-white">
                    <i class="fas fa-camera"></i>&nbsp;Modifier</a>
            </div>
        </div>
    </div>
{% endblock %}