var markerClusterer;
var map;
var singlePointer;
let mapLoad_ = true;
    function infowindow_closeout() {
        document.getElementById("content").innerHTML="";

        var popup_conts = document.querySelectorAll('.popup-container');

        popup_conts.forEach(function (element) {
            element.style.opacity = '0';
        });
        
    }
      var icons = { parking: { icon: 'https://tarantelleromane.files.wordpress.com/2016/10/map-marker.png?w=50' } };

      function initMap(a,b,c) {

          var orgid = b;
          var vtype = a;
          var stype = c;

              var us = {
                  lat: 39.8283,
                  lng: -98.5795                };

        map = new google.maps.Map( document.getElementById('map'), {
            zoom: 2,
            center: us,
            mapTypeControl: true,
            fullscreenControl: true,
            clickableIcons: true,
            streetViewControl: true,
            zoomControl: true
        });


          // Now create and append to iDiv
          var innerDiv = document.createElement('div');
          innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
          document.getElementById('tab1').appendChild(innerDiv);
          innerDiv.innerHTML = '<div class="pac-card" id="pac-card" style="display:;"><div> <div id="title">Autocomplete search </div> <div id="type-selector" class="pac-controls"> <input type="radio" name="type" id="changetype-all" checked="checked"> <label for="changetype-all">All</label> <input type="radio" name="type" id="changetype-establishment"> <label for="changetype-establishment">Establishments</label> <input type="radio" name="type" id="changetype-address"> <label for="changetype-address">Addresses</label> <input type="radio" name="type" id="changetype-geocode"> <label for="changetype-geocode">Geocodes</label> </div> <div id="strict-bounds-selector" class="pac-controls"> <input type="checkbox" id="use-strict-bounds" value=""> <label for="use-strict-bounds">Strict Bounds</label> </div> </div> <div id="pac-container"> <input id="pac-input" type="text"placeholder="Enter a location"> </div> </div>';

          var card = document.getElementById('pac-card');
          var input = document.getElementById('pac-input');
          var input2 = document.getElementById('tf-box');
          var types = document.getElementById('type-selector');
          var strictBounds = document.getElementById('strict-bounds-selector');

          map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);


          var autocomplete = new google.maps.places.Autocomplete(input);


          // Bind the map's bounds (viewport) property to the autocomplete object,
          // so that the autocomplete requests use the current map bounds for the
          // bounds option in the request.
          autocomplete.bindTo('bounds', map);


          // Set the data fields to return when the user selects a place.
          autocomplete.setFields(
              ['address_components', 'geometry', 'icon', 'name']);

          var InfoWindows = new google.maps.InfoWindow({
              //pixelOffset: new google.maps.Size(500,0)
          });

          var infowindowContent = document.getElementById('infowindow-content');
          InfoWindows.setContent(infowindowContent);
          var marker = new google.maps.Marker({
              map: map,
              anchorPoint: new google.maps.Point(0, -29)
          });



          autocomplete.addListener('place_changed', function() {
              InfoWindows.close();
              marker.setVisible(false);
              var place = autocomplete.getPlace();
              if (!place.geometry) {
                  // User entered the name of a Place that was not suggested and
                  // pressed the Enter key, or the Place Details request failed.
                  window.alert("No details available for input: '" + place.name + "'");
                  return;
              }



              // 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);  // Why 17? Because it looks good.
              }
              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(' ');
              }

              //infowindowContent.children['place-icon'].src = place.icon;
              //infowindowContent.children['place-name'].textContent = place.name;
              //infowindowContent.children['place-address'].textContent = address;
              //InfoWindows.open(map, marker);
              if(document.getElementById('location-snap')){
                  document.getElementById('location-snap').innerHTML = place.name;
                document.getElementById('lat-span').innerHTML = place.geometry.location.lat();
                document.getElementById('lon-span').innerHTML = place.geometry.location.lng();
              }
            
          });

      
          var map, popup, Popup;

          var device_markers = {};
          var pcontent;

          function addDeviceMarkers(devices) {
            $('.map-overlay--ooh-placeholder').css('display', 'none');
            var infoWindow = new google.maps.InfoWindow;
            var deviceBounds = new google.maps.LatLngBounds();

            $.each(devices, function (index, device) {


                device_markers[device.id] = new google.maps.Marker({
                    position: new google.maps.LatLng(device.latitude, device.longitude),
                    // icon: "/2.0/images/markerpackage/red-marker.svg"
                    icon: customizeMarker(device.color || '#FF1325')

                });

                //binding click event to marker, so popup could be opened.
                device_markers[device.id].addListener('click', function () {
                    postData(`../../buyandplace/bp_data_v2.php?campaignLocationDetail=yes&id=${device.id}`).then((response) => {
                        let device = response.data;
                        var str = device.partnerscreenname;
                        var name = str.replace(/\s+/g, '');
                        var str2 = device.partneradtypes;
                        var str3 = device.prem;
                        var str4 = device.partneradslotduration;
                        var locicon = device.icon;
                        var ftlid = device.id;
                        var ventype = device.partnervenuetype;
                        var martype = "https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red.png";
                        if (ventype == "Ad Agency") {
                            martype = "https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_greenA.png";
                        }
                        var partnerat = str2.replace(/\s+/g, '');
                        $('body').addClass('modal-open');
                        $('#map_modal').addClass('open');
                        var svw;
                        var pv;
                        if (device.prem == 1) {
                            svw = device.mod_streetview;
                            pv = device.mod_pic;
                        } else {
                            svw = 'http://maps.google.com/maps?q=&layer=c&cbll=' + device.latitude + ',' + device.longitude + '&cbp=11,0,0,0,0 target=_blank';
                            pv = 'https://maps.googleapis.com/maps/api/streetview?size=200x150&location=' + device.latitude + ',' + device.longitude + '&fov=90&heading=235&pitch=10&key=AIzaSyDlUazOU0SdoHPmEykI-24fcj8g2cuZ0nY';
                        }


                        var name2 = name.substring(0, 20);
                        var device_id = device.id;
                        $('#map_modal').attr('data-id', device_id);

                        //function to query data from map point - see ooh-partials/activity-ajax.php

                        //get_point_data(device_id);

                        var $id_check = $('.campaign-single#lr' + device_id);

                        if ($id_check.length) {
                            $('#add_to_plan_btn').addClass('hide-this');
                            $('#rmv_from_plan_btn').removeClass('hide-this');
                            var rmv_plan_click_function = 'removeFromPlan(' + device.id + ',"' + name + '","' + device.partnerscreenresolution + '","' + partnerat + '")';
                        }
                        $('.map-modal__title').text(name2);
                        $('#map_location').text(device.country + " - " + device.region + ", " + device.city);
                        $('#owned_by').text(device.partnerpubname);
                        $('#type_of_media').text(device.partnervenuetype);
                        var plan_click_function = 'addToPlan(' + device.id + ',"' + name + '","' + device.partnerscreenresolution + '","' + partnerat + '","' + str3 + '","' + str4 + '")';
                        $('#add_to_plan_btn').attr('onClick', plan_click_function);

                        // Code 09/06/2023 --start
                        showHide($('#type_of_media'),!device.partnervenuetype)
                        showHide($('#owned_by'),!device.partnerpubname)
                        showHide($('#accepted_type'),!device.partneradtypes)
                        showHide($('#type_duration'),!device.partneradslotduration)
                        showHide($('#aspect_ration'),!device.partneraspectratio)
                        showHide($('#screen_resol'),!device.partnerscreenresolution)
                        showHide($('#orientation'),!device.orientation)

                        $('#accepted_type').text(device.partneradtypes);
                        $('#type_duration').text(device.partneradslotduration);
                        $('#aspect_ration').text(device.partneraspectratio);
                        $('#screen_resol').text(device.partnerscreenresolution);
                        $('#orientation').text(device.orientation);

                        function showHide($el,hide=true){
                            if(hide){
                                $el.closest('p').hide();
                            }
                            else{
                                $el.closest('p').show();
                            }

                        }

                        $('.mod_pic').remove();
                        if(device.mod_pic) {
                            $('#map-modal__details_').append(`<div class="mod_pic"><p style="justify-content: unset;"><span class="map-modal__label">Media Kit: </span><a class="ei ei-cloud-download" style="font-size: 2rem;" href="${device.mod_pic}" target="_blank" download></a></p></div>`);
                        }
                        // Code 09/06/2023 --end

                        //Streetview Embed
                        var panorama;
                        var pan_lat = parseFloat(device.latitude);
                        var pan_long = parseFloat(device.longitude);
                        var new_loc = { lat: pan_lat, lng: pan_long };
                        panorama = new google.maps.StreetViewPanorama(
                            document.getElementById('infowinstreet'),
                            {
                                position: new_loc,
                                pov: { heading: 165, pitch: 0 },
                                zoom: 1
                            });
                        //Map Embed
                        var map_embed = new google.maps.Map(document.getElementById('map_embed'), {
                            center: new_loc,
                            zoom: 14,
                            mapTypeControl: false,
                            fullscreenControl: false,
                            clickableIcons: false,
                            streetViewControl: false,
                            zoomControl: false
                        });
                        var new_marker = new google.maps.Marker({
                            position: new_loc,
                            map: map_embed,
                            title: name2,
                            icon: "https://dev3.fivetier.com/2.0/images/markerpackage/red-marker.svg"
                        });

                        //alert(pcontent);
                        //document.getElementById('content').innerHTML = pcontent;
                        //return Popup;

                        var center = new google.maps.LatLng(device.latitude, device.longitude);
                        // using global variable:
                        mapLoad_ = false;
                        map.panTo(center);
                        setTimeout(() => {
                            mapLoad_ = true;
                        }, 1000);
                    })
                });

                if (map.getBounds().contains(device_markers[device.id].getPosition()) && device.new == 1) {
                    google.maps.event.trigger(device_markers[device.id], 'click');
                }



            });



            var cluster_styles = [
                {
                    textColor: 'white',
                    url: "/2.0/images/markerpackage/clusters/1.svg",
                    height: 52,
                    width: 52
                },
                {
                    textColor: 'white',
                    url: "/2.0/images/markerpackage/clusters/2.svg",
                    height: 64,
                    width: 64
                },
                {
                    textColor: 'white',
                    url: "/2.0/images/markerpackage/clusters/3.svg",
                    height: 76,
                    width: 76
                },
                {
                    textColor: 'white',
                    url: "/2.0/images/markerpackage/clusters/4.svg",
                    height: 88,
                    width: 88
                },
                {
                    textColor: 'white',
                    url: "/2.0/images/markerpackage/clusters/5.svg",
                    height: 100,
                    width: 100
                }
            ];

            var cluster_options = {
                gridSize: 50,
                //enableRetinaIcons: false,
                maxZoom: 17,
                minimumClusterSize: 10,
                styles: cluster_styles
                //zoomOnClick: false
            };

            markerClusterer = new MarkerClusterer(map, device_markers, cluster_options);
            document.getElementById('loadingring').style.display = 'none';
            $('#bp_modal').removeClass('buildplan-modal--hide');

            //console.log(markerCluster);


        }

          function showDeviceData() {
            if (!mapLoad_) return;
            if (markerClusterer) {
                markerClusterer.clearMarkers()
                //device_markers = [];
            }
            document.getElementById('loadingring').style.display = 'block';
              //var latlon = '&lats[]='+map.getBounds().getNorthEast().lat()+'&lats[]='+map.getBounds().getSouthWest().lat()+'&lons[]='+map.getBounds().getNorthEast().lng()+'&lons[]='+map.getBounds().getSouthWest().lng();
              var latlon = '&latne='+map.getBounds().getNorthEast().lat()+'&latsw='+map.getBounds().getSouthWest().lat()+'&lonne='+map.getBounds().getNorthEast().lng()+'&lonsw='+map.getBounds().getSouthWest().lng();
              $.ajax({
                  url:'../../buyandplace/ooh-data.php?pid='+latlon,
                  type:'GET',
                  dataType:'json',
                  data:{
                      action:'get_all_devices_for_map',
                      bsorg: document.getElementById('bsorg').value,
                      lats : [map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lat()],
                      lons : [map.getBounds().getNorthEast().lng(), map.getBounds().getSouthWest().lng()],
                      vt : vtype,
                      orgid : orgid,
                      stype : stype
                  }
              }).done(function(response){

                  if(response.status)
                  {
                      addDeviceMarkers(response.data);

                  }
              });
          }


map.addListener('idle', ()=>{
    showDeviceData();
    if(typeof getData==='function') {
                getData(map);
            }
});





  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    radioButton.addEventListener('click', function() {
      autocomplete.setTypes(types);

    });
  }

  setupClickListener('changetype-all', []);
  setupClickListener('changetype-address', ['address']);
  setupClickListener('changetype-establishment', ['establishment']);
  setupClickListener('changetype-geocode', ['geocode']);

  document.getElementById('use-strict-bounds')
      .addEventListener('click', function() {
        console.log('Checkbox clicked! New state=' + this.checked);
        autocomplete.setOptions({strictBounds: this.checked});
      });


      }
$(document).ready(function() {
    $('.map-modal__mask').click(function() {
        $('#map_modal').removeClass('open');
        $('body').removeClass('modal-open');
        $('#add_to_plan_btn').removeClass('hide-this');
        $('#rmv_from_plan_btn').addClass('hide-this');
        $('.map-modal__details--ajax p span').addClass('loading-data').removeClass('data-loaded');
        $('.map-modal__details--ajax .loading-dots').removeClass('hide-this');
    });

    $('#map_modal_close').click(function() {
        mapLoad_ = false;
        setTimeout(() => {
        mapLoad_ = true;
        }, 1000);
        $('#map_modal').removeClass('open');
        $('body').removeClass('modal-open');
        $('#add_to_plan_btn').removeClass('hide-this');
        $('#rmv_from_plan_btn').addClass('hide-this');
        $('.map-modal__details--ajax p span').addClass('loading-data').removeClass('data-loaded');
        $('.map-modal__details--ajax .loading-dots').removeClass('hide-this');
    });

    $('#add_to_plan_btn').click(function() {
        $(this).toggleClass('waiting');
        //$('#rmv_from_plan_btn').removeClass('hide-this');
    });

    $('#rmv_from_plan_btn').click(function() {
        $(this).addClass('hide-this');
        $('#add_to_plan_btn').removeClass('hide-this');
    });
    async function fetchSvg() {
        const res = await fetch('/2.0/images/markerpackage/red-marker.svg');
        singlePointer = await res.text();
    }
    fetchSvg();
});

// Example POST method implementation:
        async function postData(url = '') {
            // Default options are marked with *
            const response = await fetch(url, {
                method: 'GET', // *GET, POST, PUT, DELETE, etc.
                // mode: 'cors', // no-cors, *cors, same-origin
                cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                credentials: 'same-origin', // include, *same-origin, omit
                headers: {
                    'Content-Type': 'application/json'
                    // 'Content-Type': 'application/x-www-form-urlencoded',
                },
                redirect: 'follow', // manual, *follow, error
                referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
            });
            return response.json(); // parses JSON response into native JavaScript objects
        }
function customizeMarker(color, pointer = true) {
    content = singlePointer;
    var regex = new RegExp('fill="[^"]*"' + (pointer ? '(\\s*\\/>)' : ''), 'g');
    let modifiedContent = content.replace(regex, 'fill="' + color + '"' + (pointer ? '$1' : ''));
    return 'data:image/svg+xml,' + encodeURIComponent(modifiedContent);
}