var cron_number= 3148;
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' } };
var markerClusterer;
function initMap(geo,a,b,c,audienceHash,targetradius) {

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

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

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

});



    //center map on user location
    if(geo == 'no_geolocate') {
    } else {

    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
    };

    var loc_dot = new google.maps.InfoWindow;
    loc_dot.setPosition(pos);
    loc_dot.open(map);

    map.setCenter(pos);
    map.setZoom(10);
    });
    } else {
    // Browser doesn't support Geolocation
    }
    }

// 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);

//Initiate 2 clicks on the zoom in button to refresh the map markers after search
$('.gm-control-active[aria-label="Zoom in"]').trigger('click');
$('.gm-control-active[aria-label="Zoom in"]').trigger('click');

});


var popup, Popup;

var device_markers = {};
var pcontent;

function addDeviceMarkers(devices,audienceHash,targetradius)
{
$('.map-overlay--ooh-placeholder').css('display', 'none');
//console.log({audienceHash});
//console.log({targetradius});
var infoWindow = new google.maps.InfoWindow;
var radius = targetradius;
var audience_hash = audienceHash;
if(audience_hash) {
$.when(

$.ajax({
url: "ajax/bp-load-locations.php",
method: "POST",
data: {audience_hash: audience_hash},
dataType: "JSON",
success: function (data) {
//console.log({data});

$.each(data, function(index, value) {

var _lat = parseFloat(value.lat);
var _lng = parseFloat(value.lon);
var marker = new google.maps.Marker({
position: {lat: _lat, lng: _lng},
map: map,
name: value.locname,
city: value.city,
state: value.state,
address: value.address,
icon: "https://maps.google.com/mapfiles/ms/icons/green-dot.png"
});

marker.addListener('click', function () {

if($('#user_loc_styles').length) {
$('#user_loc_styles').remove();
}
var this_m = $(this);
var name = this_m[0].name;
var addr = this_m[0].address;
var state = this_m[0].state;
var city = this_m[0].city;
var infowincontent = document.createElement('div');
infowincontent.setAttribute('id', 'infowinmarkup');
infowincontent.innerHTML = '<h3>'+name+'</h3><p>Address:<br>'+addr+'<br>'+city+', '+state+'</p>';
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});

var fillColor = '#69e063';
var strokeColor = '#69e063';
if(radius!=="" && radius !== 0 && !isNaN(radius)){
var cityCircle = new google.maps.Circle({
strokeColor: strokeColor,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: fillColor,
fillOpacity: 0.05,
map: map,
center: {lat: _lat, lng: _lng},
radius: radius
});
}
});


}
})).done(function(){

});
}

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);


          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)
showHide($('#vitals'),!device.last24Updated)
showHide($('#vitalsCPP'),!device.last24avgCPP)
showHide($('#vitalsCPP2'),!device.last24avgCPP)
showHide($('#vitalsCPP3'),!device.last24avgCPP)
showHide($('#vitalsReq'),!device.last24totalReq)
showHide($('#vitalsImp'),!device.last24avgImp)

          $('#accepted_type').text(device.partneradtypes);
          $('#type_duration').text(device.partneradslotduration);
          $('#aspect_ration').text(device.partneraspectratio);
          $('#screen_resol').text(device.partnerscreenresolution);
          $('#orientation').text(device.orientation);
var cpp = device.last24avgCPP*2;
cpp = cpp.toFixed(2);
var cpp2 = device.last24avgCPP*4;
cpp2 = cpp2.toFixed(2);
var cpp3 = device.last24avgCPP*10;
cpp3 = cpp3.toFixed(2);
$('#vitals').text(device.last24Updated);
$('#vitalsCPP').text("$"+cpp);
$('#vitalsCPP2').text("$"+cpp2);
$('#vitalsCPP3').text("$"+cpp3);
$('#vitalsReq').text(device.last24totalReq);
$('#vitalsImp').text(device.last24avgImp);

          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>`);
          }
          var plan_click_function = 'addToPlan(' + device.id + ',"' + name + '","' + device.partnerscreenresolution + '","' + partnerat + '","' + str3 + '","' + str4 + '")';
          $('#add_to_plan_btn').attr('onClick', plan_click_function);
          //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: 38,
width: 38
},
{
textColor: 'white',
url: "/2.0/images/markerpackage/clusters/sm-icons/2.svg",
height: 50,
width: 50
},
{
textColor: 'white',
url: "/2.0/images/markerpackage/clusters/sm-icons/3.svg",
height: 60,
width: 60
},
{
textColor: 'white',
url: "/2.0/images/markerpackage/clusters/sm-icons/4.svg",
height: 70,
width: 70
},
{
textColor: 'white',
url: "/2.0/images/markerpackage/clusters/sm-icons/5.svg",
height: 82,
width: 82
}
];

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);


}
let hours = 5;
let now = new Date().getTime();
let setuptime = localStorage.getItem('setupTime');
if(setuptime){
    if(now-setuptime > hours*60*60*1000) {
        localforage.clear()
    }
}
else{
    localStorage.setItem('setupTime', now);
}
function showDeviceData() {
if (!mapLoad_) return;
if (markerClusterer) {
    markerClusterer.clearMarkers()
    //device_markers = [];
}
$('.map-overlay--ooh-placeholder').css('display', 'block');
var selected_locs=[];
var latlon = '&latne='+map.getBounds().getNorthEast().lat()+'&latsw='+map.getBounds().getSouthWest().lat()+'&lonne='+map.getBounds().getNorthEast().lng()+'&lonsw='+map.getBounds().getSouthWest().lng();
var urlprint = '../../buyandplace/bp_data_v2.php?pid='+latlon;
var vtypee = [];
vtypee =$('#vtype').selectize()[0].selectize.getValue();
var search = document.getElementById('inventorySearch').value;
var pid="";
console.info("pid=="+pid);
//console.log('showDevicedata');
localforage.getItem('mapData', function (err, data) {
    if(data && localStorage.getItem('cronNumber') == 3148){

        data = pako.inflate(data, {level: 6});
        data = JSON.parse(new TextDecoder("utf-8").decode(data));
console.info(data);
        if(vtypee!='' || search || pid){
                var partnerscreentypes=[];
//                $.each(data, function(index, value) {
//                partnerscreentypes.push(value.partnerscreentype);
//                });
                console.info(partnerscreentypes);
                var selected_locs=[];

            $.each(data, function(index, value) {
                var temp_data = [];
                if(search){
                    search = search.toLowerCase();
                    if(value.partnerpubname.toLowerCase().indexOf(search) > -1 || value.region.toLowerCase().indexOf(search) > -1 || value.city.toLowerCase().indexOf(search) > -1 || value.country.toLowerCase().indexOf(search) > -1 || value.partnervenuetype.toLowerCase().indexOf(search) > -1 || value.partnerscreenname.toLowerCase().indexOf(search) > -1){
                       if(pid){
                                if(pid == value.partnerpubid){
                                    temp_data = value;
                                    selected_locs.push(temp_data);
                                }
                            }else{
                                temp_data = value;
                                selected_locs.push(temp_data);
                            }

                    }
                }else if(pid){
                        if(pid == value.partnerpubid){
                        temp_data = value;
                        selected_locs.push(temp_data);
                        }
                    }
                else{
                    if(vtypee!=''){
                    if(vtypee.includes(value.partnerscreentype)) {
                            if(pid){
                            if(pid == value.partnerpubid){
                            temp_data = value;
                            selected_locs.push(temp_data);
                            }
                            }else{
                            temp_data = value;
                            selected_locs.push(temp_data);
                            }
                    }
                        }

                }
                
            });
            console.info(selected_locs);
                data =selected_locs;
            }

        addDeviceMarkers(data,audienceHash,targetradius);
        vtypee= [];
    }
    else{
        $.ajax({
url:urlprint,
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 : vtypee,
orgid : orgid,
stype : stype
}
}).done(function(response){


if(response.status)
{
console.info("loading new call data");
    let dataa = response.data;
    dataa = new TextEncoder().encode(JSON.stringify(dataa));
    dataa = pako.deflate(dataa, {level: 6})
    //localforage.setItem('mapData', dataa);
    //localStorage.setItem('setupTime', now);
    //localStorage.setItem('cronNumber', 3148);
        /*if(pid){
            var selected_locs=[];
            $.each(response.data, function(index, value) {
            var temp_data = [];
                        if(pid == value.partnerpubid){
                        temp_data = value;
                        selected_locs.push(temp_data);
                        }
                    });
            response.data =selected_locs;
             console.info(response.data);
        }*/
    addDeviceMarkers(response.data,audienceHash,targetradius);

}
});
    }
});


}



map.addListener('idle', showDeviceData);

//marker cluster debug

//var currCenter = map.getCenter();
//google.maps.event.trigger(map, 'resize');
//map.setCenter(currCenter);
//map.setMinZoom(1);
map.setZoom(4);




// 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() {
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;
          }, 2000);
$('#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');
});

    fetchSvg('/2.0/images/markerpackage/red-marker.svg','singlePointer');
});
function customizeMarker(color, pointer = true) {
    content = window.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);
}
async function fetchSvg(path, property) {
        const res = await fetch(path);
        window[property] = await res.text();
    }