<script src="/infoSite/js/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="/admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="/admin/app-assets/js/scripts/extensions/sweet-alerts.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=<%=googleKey%>&language=<%=language%>"></script>
<script src="/admin/app-assets/js/core/libraries/jquery.min.js"></script>
<script src="/admin/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/admin/app-assets/js/scripts/forms/select/form-select2.js"></script>
<script>
    
    window.onload = (event) => {
        findLocation();
    };

    $('.js-example-basic-multiple').select2({
        dir: "rtl",
    });

     function findLocation() {
        var latitude  = document.getElementById("latitude").value;
        var longitude = document.getElementById("longitude").value;
        var address   = document.getElementById("address").value;
        var showSearch= document.getElementById("showSearch").value;
        var latlng    = new google.maps.LatLng(latitude, longitude);
        var map       = new google.maps.Map(document.getElementById('map'), {
            center    : latlng,
            zoom      : 14,
            animation : google.maps.Animation.DROP,
            mapTypeId : google.maps.MapType
        });
        if(showSearch == "true"){
            var input        = document.getElementById('searchTextField');
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);
        }


        var infowindow = new google.maps.InfoWindow();
        var marker     = new google.maps.Marker({
            map        : map,
            position   : new google.maps.LatLng( latitude, longitude),
            draggable  : (showSearch == "true")?true:false,
        });
         if(showSearch == "true"){
             autocomplete.addListener('place_changed', function () {
                 infowindow.close();
                 marker.setVisible(true);
                 var place = autocomplete.getPlace();

                 /* If the place has a geometry, then present it on a map. */
                 if (place.geometry.viewport) {
                     map.fitBounds(place.geometry.viewport);
                 } else {
                     map.setCenter(place.geometry.location);
                     map.setZoom(17);
                 }

                 marker.setIcon(({
                     url        : place.icon,
                     size       : new google.maps.Size(71, 71),
                     origin     : new google.maps.Point(0, 0),
                     anchor     : new google.maps.Point(17, 34),
                     scaledSize : new google.maps.Size(35, 35)
                 }));

                 marker.setPosition(place.geometry.location);
                 marker.setVisible(true);
                 var address = '';
                 if (place.address_components) {
                     address = [
                         (place.address_components[0] && place.address_components[0].short_name || ''),
                         (place.address_components[1] && place.address_components[1].short_name || ''),
                         (place.address_components[2] && place.address_components[2].short_name || '')
                     ].join(' ');
                 }
                 infowindow.setContent('<div style=""><strong>' + place.name + '</strong><br>' + address);
                 /* Location details */
                 document.getElementById('address').value = place.formatted_address;
                 document.getElementById('latitude').value = place.geometry.location.lat();
                 document.getElementById('longitude').value = place.geometry.location.lng();
             });
        }
        var geocoder = new google.maps.Geocoder();
        google.maps.event.addListener(marker, 'dragend', function (event) {
            document.getElementById("latitude").value = this.getPosition().lat();
            document.getElementById("longitude").value  = this.getPosition().lng();
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status === 'OK') {
                    document.getElementById("address").value  = results[1].formatted_address;
                }
            });
        });
    }
     function getLocation()  {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(showPosition);
         } else {
             alert("يرجى تفعيل اللوكيشن")
         }
     }
     function showPosition(position) {
         initMap(position.coords.latitude,position.coords.longitude);
         var geocoder = new google.maps.Geocoder;
         document.getElementById("latitude").value   = position.coords.latitude;
         document.getElementById("longitude").value  = position.coords.longitude;
         var latlng = {lat: parseFloat(position.coords.latitude), lng: parseFloat(position.coords.longitude)};
         geocoder.geocode({'location': latlng}, function(results, status) {
             if (status === 'OK') {
                 document.getElementById("address").value  = results[1].formatted_address;
             }
         });
     }
     function initMap(lat,lng){
         var latlng    = new google.maps.LatLng(lat, lng);
         var map       = new google.maps.Map(document.getElementById('map'), {
             center    : latlng,
             zoom      : 14,
             animation : google.maps.Animation.DROP,
             mapTypeId : google.maps.MapType
         });
         var input  = document.getElementById('searchTextField');
         map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
         var autocomplete = new google.maps.places.Autocomplete(input);
         autocomplete.bindTo('bounds', map);
         var infowindow = new google.maps.InfoWindow();
         var marker     = new google.maps.Marker({
             position   : new google.maps.LatLng( lat, lng),
             map        : map,
             title      : 'الاحداثيات',
             draggable  : true
             //anchorPoint: new google.maps.Point(0, 0)
         });
         autocomplete.addListener('place_changed', function() {
             infowindow.close();
             marker.setVisible(true);
             var place = autocomplete.getPlace();
             if (place.geometry.viewport) {
                 map.fitBounds(place.geometry.viewport);
             } else {
                 map.setCenter(place.geometry.location);
                 map.setZoom(17);
             }

             marker.setIcon(({
                 url        : place.icon,
                 size       : new google.maps.Size(71, 71),
                 origin     : new google.maps.Point(0, 0),
                 anchor     : new google.maps.Point(17, 34),
                 scaledSize : new google.maps.Size(35, 35)
             }));

             marker.setPosition(place.geometry.location);
             marker.setVisible(true);

             var address = '';
             if (place.address_components) {
                 address = [
                     (place.address_components[0] && place.address_components[0].short_name || ''),
                     (place.address_components[1] && place.address_components[1].short_name || ''),
                     (place.address_components[2] && place.address_components[2].short_name || '')
                 ].join(' ');
             }

             infowindow.setContent('<div style=""><strong>' + place.name + '</strong><br>' + address);
             /* Location details */
             document.getElementById('address').value   = place.formatted_address;
             document.getElementById('latitude').value  = place.geometry.location.lat();
             document.getElementById('longitude').value = place.geometry.location.lng();
         });
         var geocoder = new google.maps.Geocoder();
         google.maps.event.addListener(marker, 'dragend', function (event) {
             document.getElementById("latitude").value   = this.getPosition().lat();
             document.getElementById("longitude").value  = this.getPosition().lng();
             geocoder.geocode({'latLng': latlng}, function(results, status) {
                 if (status === 'OK') {
                     document.getElementById("address").value  = results[1].formatted_address;
                 }
             });
         });

    }
</script>
