var html_content = '<div class="sl-fo"><div class="sl-r"><div class="sl-c12"><h3> </h3></div><div class="sl-c12"><div class="filter--options"><div class="sl-r"><div class="sl-c12"><h4> </h4></div><div class="sl-c3 sl-sm4"><input type="text" name="search" id="search_keyword" placeholder="Enter Zip Code or City" class="form-control" required value=""></div><div class="sl-c3 sl-sm4"><select name="by_miles" id="by_miles" class="form-control"><option value="0">Please Select Miles</option><option value="5">within 5 miles</option><option value="10">within 10 miles</option><option value="15">within 15 miles</option><option value="20">within 20 miles</option><option value="25">within 25 miles</option></select></div><div class="sl-c3 sl-sm4"><button type="button" class="btn btn-primary btn_search" id="btnAction" onClick="get_current_location()">Find Suntory All Free</button></div></div><div class="sl-r filter--tags--section"><div class="sl-c12"><h4>Show Locations With:</h4></div><div class=\"sl-c3\"><label><input type=\"checkbox\" name=\"tags[]\" class=\"tags\" value=\"Where to Buy\"> <span>Where to Buy<\/span><\/label><\/div><div class=\"sl-c3\"><label><input type=\"checkbox\" name=\"tags[]\" class=\"tags\" value=\"Where to Try\"> <span>Where to Try<\/span><\/label><\/div></div><input type="hidden" name="latitude" id="latitude" value=""><input type="hidden" name="longitude" id="longitude" value=""><!-- <hr><div class="sl-r"><div class="search-btn"><div class="sl-c3"><button type="submit" class="btn btn-primary btn_search">Search</button></div></div></div> --></div><div class="result--options"><div class="sl-r"><div class="sl-c4"><div class="stores_listings"></div></div><div class="sl-c8"><div id="mapStore" style="width: 100%;height: 400px;"></div></div></div></div></div></div></div>';

var keyword     = '';
var tags        = '';
var by_miles    = '';
var client_id   = '5';
var access_key  = '60c7a5cb95e3c';
var baseurl     = "https://storelocator.transcosmos.com/"; 
var show_image  = "0"; 
var no_result_message  = "No results found"; 

var infoWindow  = "";
var map;
var markers = [];
var radius_circle = markers_on_map = all_locations = "";
var center = {lat: 34.0522, lng: 118.2437};
var stores;
var search_by = '';

function JQueryLoaded() {
    $('.storelocator-container').html(html_content);
    


    /*jQuery(document).ready(function(){*/
        var xhr;
        load_html();

        $("#search_keyword").keyup(function(){
            keyword     = jQuery('#search_keyword').val();
            search_by   = "keyword";
            load_html();
        });

        $("#by_miles").change(function(){
            
            if(search_by == "location"){
                get_current_location();
            }else{
                load_html();
            }
            
        });

        jQuery('.tags').click(function(){
            //keyword     = jQuery('#search_keyword').val();
            //by_miles    = jQuery('#by_miles').val();
            tags        = jQuery('input[name="tags[]"]:checked').map(function() {return this.value;}).get().join(',');
            load_html();
        });
     

        jQuery('body').on('click', '.viewmap', function(){
            store_id    = jQuery(this).data("id");
            store_name  = jQuery(this).data("storename");
            address     = jQuery(this).data("address");
            image       = jQuery(this).data("image");
            latitude    = jQuery(this).data("lat");
            longitude   = jQuery(this).data("long");

            genMap(store_id, store_name, address, image, latitude, longitude, show_image);
        });

        $(".stores_listings").on("click", ".panel",  function(){
            var marker = $(this).data("marker");
            google.maps.event.trigger(marker, "click");
        });
    /*});*/

    
}

function initMap(){
    var myLatlng = new google.maps.LatLng(34.0522, 118.2437);
    var mapOptions = {
        zoom: 12,
        center: myLatlng
    }
    map = new google.maps.Map(document.getElementById("mapStore"), mapOptions);
    infoWindow = new google.maps.InfoWindow;
}

function load_html(){
    if(typeof xhr != 'undefined'){
        xhr.abort();
    }
    xhr = jQuery.ajax({
        url: baseurl+"Page_Controller/search_store/"+access_key,
        type: 'POST',
        data: {
            keyword: keyword,
            tags: tags,
            by_miles: by_miles,
            search_by: search_by,
            center: center
            /* client_id: client_id */
        },
        dataType: 'json',
        success: function(response){
            /*var result      = JSON.parse(response);*/
            var result      = response;
            var stores_html = result.html;
            var latlong     = result.latlong;
            var locations   = '';
            stores = result.latlong;

            jQuery('.stores_listings').html('');
            jQuery(".stores_listings").append(stores_html).show().fadeIn("slow");

            /* center = {lat: stores[0].latitude, lng: stores[0].longitude}; */
            center = response.center;

            /*console.log(latlong[0].latitude +"---"+ latlong[0].longitude);
             initMap();*/

            /*
            jQuery.each(latlong, function(index){
                genMap(latlong[index].store_id, latlong[index].store_name, latlong[index].address, latlong[index].image, latlong[index].latitude, latlong[index].longitude, show_image);
            });

            var cntr = new google.maps.LatLng(39.0317801, 94.6321948); 
            */

            checkBound();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.status);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
}


function genMap(store_id, store_name, address, image, latitude, longitude, show_image){
    var position = new google.maps.LatLng(latitude, longitude);
    var marker = new google.maps.Marker({
        position: position,
        title: store_name
    });

    // To add the marker to the map, call setMap();
    marker.setMap(map);
    /* map.setCenter(position); */

    if(show_image == '1'){
        var window_html = '<div class="info_content"><div class="info_details"><div class="img-section"><img src="'+ image +'" alt="store image"></div><div class="add-section"><h5>' + store_name + '</h5><p>' + address + '</p></div></div></div>';
    }else{
        var window_html = '<div class="info_content"><h5>' + store_name + '</h5><p>' + address + '</p></div>';
    }

    var infoWindowContent = window_html; // a complete HTML content that will display on click of marker 

    // Add multiple markers to map
    // var infoWindow = new google.maps.InfoWindow(), marker, i;
    // Add info window to marker    

    google.maps.event.addListener(marker, 'click', (function(marker, infoWindowContent, infoWindow) {
        return function() {
            infoWindow.setContent(infoWindowContent);
            infoWindow.open(map, marker);
        }
    })(marker, infoWindowContent, infoWindow));

    $('.stores_listings').find('.panel[data-store_id="'+ store_id +'"]').data('marker', marker);
    markers.push(marker);
}


function checkBound(){
    var bound = document.getElementById("by_miles").value;
    // jQuery('.stores_listings').html('');

    initMap();

    //console.log( "center:");
    //console.log( center);

    stores.forEach(function(store, index){
        var distance = getDistance(center.lat, center.lng, store.latitude, store.longitude);
        if( parseInt(bound) == 0 ) {
            genMap(store.store_id, store.store_name, store.address, store.image, store.latitude, store.longitude, show_image);
        } 

        else if( parseInt(bound) >= distance ) {
            document.querySelector('[data-store_id="'+store.store_id+'"]').style.display = "block";
            genMap(store.store_id, store.store_name, store.address, store.image, store.latitude, store.longitude, show_image);
        } else {
            document.querySelector('[data-store_id="'+store.store_id+'"]').style.display = "none";
        }

        //document.querySelector('[data-store_id="'+store.store_id+'"]').data('distance', distance);
        jQuery('[data-store_id="'+store.store_id+'"]').data('distance', distance);
    });
    
    sort_stores();

    // Get visible stores length and put custom message if no stores found in that search region
    var storeLen = jQuery('.panel.panel-default').find("div:visible").length;
    if(storeLen == 0 ){
        jQuery('.stores_listings .panel-group').append('<span class="no-results"><strong>' + no_result_message + '</strong></span>');
    }
}

function sort_stores(){
    var $wrapper = $('.panel-group');

    $wrapper.find('.panel.panel-default').sort(function(a, b) {
        return parseInt($(a).data('distance')) - parseInt($(b).data('distance'));
    })
    .appendTo($wrapper);

    var store_id = $(".stores_listings .panel-group").find('.panel:first-child').data("store_id");

    stores.forEach(function(store, index){
        if(store.store_id == store_id) {
            var position = new google.maps.LatLng(store.latitude, store.longitude); 
            map.setCenter(position);
            return;
        }
    });
}

function showCloseLocations(cntr) {
    var i;
    // var radius_km = $('#radius_km').val();
    var radius_km = 5;
    var address = $('#address').val();

    //remove all radii and markers from map before displaying new ones
    if (radius_circle) {
        radius_circle.setMap(null);
        radius_circle = null;
    }

    for (i = 0; i < markers_on_map.length; i++) {
        if (markers_on_map[i]) {
            markers_on_map[i].setMap(null);
            markers_on_map[i] = null;
        }
    }

    var address_lat_lng = cntr;
    radius_circle = new google.maps.Circle({
        center: address_lat_lng,
        radius: radius_km * 1000,
        clickable: false,
        map: map
    });

    if(radius_circle) map.fitBounds(radius_circle.getBounds());
    for (var j = 0; j < all_locations.length; j++) {
        (function (location) {
            var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
            var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker

            if (distance_from_location <= radius_km * 1000) {
                var new_marker = new google.maps.Marker({
                    position: marker_lat_lng,
                    map: map,
                    title: location.name
                });

                google.maps.event.addListener(new_marker, 'click', function () {
                    alert(location.name + " is " + distance_from_location + " meters from my location");
                });
                markers_on_map.push(new_marker);
            }
        })(all_locations[j]);
    }
}


function get_current_location(){
    jQuery('#search_keyword').val("");
    search_by = "location";
    // document.getElementById("btnAction").disabled = true;
    // document.getElementById("btnAction").innerHTML = "Processing...";

    if ("geolocation" in navigator){
        navigator.geolocation.getCurrentPosition(function(position){ 
            var currentLatitude = position.coords.latitude;
            var currentLongitude = position.coords.longitude;
            
            center = { lat: currentLatitude, lng: currentLongitude };

            console.log("Current Locaton: ");
            console.log(center);
            
            // checkBound();
            load_html(true);
            // document.getElementById("btnAction").style.display = 'none';
        });   
    }
}

function getDistance(lat1, lon1, lat2, lon2) {
    var R = 6371; // Radius of the earth in km
    var dLat = deg2rad(lat2-lat1);  // deg2rad below
    var dLon = deg2rad(lon2-lon1); 
    var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c; // Distance in km
    var d = R * c * 0.62137; // Distance in Miles
    return d;
}

function deg2rad(deg) {
    return deg * (Math.PI/180)
}

if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'https://code.jquery.com/jquery-2.2.4.js';
    jqTag.onload = JQueryLoaded;
    headTag.appendChild(jqTag);
} else {
     JQueryLoaded();
}