@extends('frontend.master')

@section('title', isset($seo_radar->seo_title) ? $seo_radar->seo_title : $siteConfig['seo_title'])
@section('description', isset($seo_radar->seo_description) ? $seo_radar->seo_description :
    $siteConfig['seo_description'])
@section('keywords', isset($seo_radar->keywords) ? $seo_radar->keywords : '')

@section('content')
    <style type="text/css">
        @media (min-width: 376px) and (max-width: 414px) {
            #layer-control-bottom {
                z-index: 100;
                left: -12px;
            }

            .info_wrapper {
                min-width: unset;
                width: unset;
            }
        }
    </style>
    <div id="main-content">
        <div id="search_box">
            <div id="xxx">
                <div id="zzz" class="container">
                    <div class='row'>
                        <div class='offset-sm-3 col-sm-6 offset-2 col-8'>
                            <div class="group-search clearfix">
                                <div class="m-pointer img-location" id="get-current-location">
                                    <img src="{{ url('/') }}/frontend/images/ic_location.svg" class="pr-2"
                                        alt="ic_location">
                                </div>
                                <div id="dropdown-result" class="search-holder clearfix">
                                    <input type="text" name="search_location" id="pac-input" class="form-control"
                                        value="" autocomplete="off">
                                    <span class="m-pointer delete-btn" id="exclude-focusout">
                                        <img class="clear-search-text"
                                            src="{{ url('/') }}/frontend/images/ic_close.svg" alt="ic_close"></span>
                                    <div class="dropdown-result-search" tabindex="3">
                                        <ul>
                                        </ul>
                                    </div>
                                </div>
                                <div class="m-pointer img-search" id="searchbutton">
                                    <i class="fa fa-search"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="map"></div>
        <div class="ajax_waiting"></div>
        <ol id="ol" style="display: none;"></ol>
        <div id="setting_box">
            @include('frontend.layouts.setting')
        </div>
        <div id="zoom_box">
            @include('frontend.layouts.zoom-layer')
        </div>
        <div id="expand_box">
            <div class="expand_wrapper">
                <span class='expand_btn'><i class="icon-expand fas fa-angle-double-left clickable-box"></i><i
                        class="icon-colspan fas fa-angle-double-right clickable-box" style='display:none;'></i></span>
            </div>
        </div>
        <div id="layer_box">
            <div class="layer_wrapper">
                <span data-toggle="tooltip" data-placement="left" title="{{ __('messages.layer_control_rain') }}">
                    <center><i class="fas fa-cloud-rain icons-layer iconlayout" id="rain-layout"></i></center>
                </span>
                <span data-toggle="tooltip" data-placement="left" title="{{ __('messages.layer_control_snow') }}">
                    <center><i class="fas fa-snowman icons-layer iconlayout" id="snow-layout"></i></center>
                </span>
                <span data-toggle="tooltip" data-placement="left" title="{{ __('messages.layer_control_wind') }}">
                    <center><i class="fas fa-wind icons-layer iconlayout" id="wind-layout"></i></center>
                </span>
                <span data-toggle="tooltip" data-placement="left" title="{{ __('messages.layer_control_pressure') }}">
                    <center><i class="fas fa-arrow-circle-down icons-layer iconlayout" id="pressure-layout"></i></center>
                </span>
                <span data-toggle="tooltip" data-placement="left" title="{{ __('messages.layer_control_temperature') }}">
                    <center><i class="fas fa-thermometer-three-quarters icons-layer iconlayout" id="temp-layout"></i>
                    </center>
                </span>
                <span data-toggle="tooltip" data-placement="left" title="{{ __('messages.layer_control_humidity') }}">
                    <center><i class="fas fa-water icons-layer iconlayout" id="humidity-layout"></i></center>
                </span>
                <span data-toggle="tooltip" data-placement="left" title="{{ __('messages.layer_control_clouds') }}">
                    <center><i class="fas fa-cloud icons-layer iconlayout" id="clouds-layout"></i></center>
                </span>
            </div>
        </div>
        <div id="info_unit">
            @include('frontend.layouts.unit-layer')
        </div>
        <div id="layer-control-bottom">
            @include('frontend.layouts.progress-bar')
        </div>
    </div>

    <!-- Script -->
    <script>
        var change_data = "{{ $change_data }}";
        var main_cache_url = "{{ $main_cache_url . $change_data . '/' }}";
        var main_resource_url = "{{ $main_resource_url }}";
    </script>
    <link rel="stylesheet" href="/frontend/assets/_style.css" />
    <link rel="stylesheet" href="/frontend/assets/fontawesome_/css/all.css" />
    <link rel="stylesheet" href="/frontend/assets/_my_css.css" />
    <!-- Leaflet 0.7.7 -->
    <link rel="stylesheet" href="/frontend/dist/leaflet/0.7.7/leaflet.css">
    <script src="/frontend/dist/leaflet/0.7.7/leaflet.js"></script>
    <!--wind-js-leaflet-->
    <link rel="stylesheet" href="/frontend/assets/_wind-js-leaflet.css" />
    <script src="/frontend/assets/_wind-js-leaflet.js"></script>
    <!-- Leaflet TileLayer GeoJSON -->
    <script src="/frontend/assets/_load-city-name-json.js"></script>
    <script src="/frontend/assets/_jscript.js"></script>
    <script>
        var setting_obj = {
            'unit-temp-layout': 'c',
            'unit-rain-layout': 'mm',
            'unit-snow-layout': 'cm',
            'unit-wind-layout': 'kt',
            'unit-pressure-layout': 'hpa',
            'unit-humidity-layout': 'percent',
            'unit-clouds-layout': 'mm',
            'unit-height-layout': 'm',
            'unit-height-layout': 'm',
            'unit-height-layout': 'm',
            'unit-distance-layout': 'km',
            'unit-time-layout': '24h',
            'unit-timezone-layout': get_client_timezone(),
            'unit-language-layout': 'en',
        };

        function replaceShareLink(type) {
            if (type != 'by_init_date' && type != 'by_auto_current_location' && type != 'by_auto_ip_address') {
                var center_map = map.getCenter();
                var share_overlay = overlay.toString().replace('-layout', '');
                var share_zoom = map.getZoom();
                var share_url = '{{ $url_link }}/radar-map?lat=' + center_map.lat + '&lng=' + center_map.lng +
                    '&overlay=' + share_overlay + '&zoom=' + share_zoom;
                if (default_keyword !== '') {
                    share_url += '&keyword=' + encodeURIComponent(default_keyword);
                }
                if (default_date != '') {
                    share_url += '&date=' + default_date;
                }
                if (default_marker_lat != '') {
                    share_url += '&mlat=' + default_marker_lat;
                }
                if (default_marker_lng != '') {
                    share_url += '&mlng=' + default_marker_lng;
                }
                window.history.pushState('page2', 'Title', share_url);
            }
        }

        function get_share_link() {
            var center_map = map.getCenter();
            var share_overlay = overlay.toString().replace('-layout', '');
            var share_zoom = map.getZoom();
            var share_url = '{{ $url_link }}/radar-map?lat=' + center_map.lat + '&lng=' + center_map.lng +
                '&overlay=' + share_overlay + '&zoom=' + share_zoom;
            if (default_keyword !== '') {
                share_url += '&keyword=' + encodeURIComponent(default_keyword);
            }
            if (default_date !== '') {
                share_url += '&date=' + encodeURIComponent(default_date);
            }
            if (default_marker_lat != '') {
                share_url += '&mlat=' + default_marker_lat;
            }
            if (default_marker_lng != '') {
                share_url += '&mlng=' + default_marker_lng;
            }
            var fb_social = 'https://www.facebook.com/dialog/share?href=' + encodeURIComponent(share_url) +
                '&display=popup&redirect_uri=' + encodeURIComponent(share_url);
            fb_social = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(share_url);
            var twiter_social = 'https://twitter.com/intent/tweet?url=' + encodeURIComponent(share_url) + '&text=' +
                encodeURIComponent('GoWeatherRadar forecast');
            var reddit_social = 'https://www.reddit.com/login/?dest=https%3A%2F%2Fwww.reddit.com%2Fsubmit%3Furl%3D' +
                encodeURIComponent(share_url);
            var vk_social = 'https://vk.com/share.php?url=' + encodeURIComponent(share_url);

            $("#fb_share_link").attr('href', fb_social);
            $("#twitter_share_link").attr('href', twiter_social);
            $("#reddit_share_link").attr('href', reddit_social);
            $("#vk_share_link").attr('href', vk_social);
            $("#share_link").val(share_url);
        }

        function copyToClipboard(element) {
            var string = $(element).val();
            let textarea;
            let result;

            try {
                textarea = document.createElement('textarea');
                textarea.setAttribute('readonly', true);
                textarea.setAttribute('contenteditable', true);
                textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
                textarea.value = string;

                document.body.appendChild(textarea);

                textarea.focus();
                textarea.select();

                const range = document.createRange();
                range.selectNodeContents(textarea);

                const sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);

                textarea.setSelectionRange(0, textarea.value.length);
                result = document.execCommand('copy');
            } catch (err) {
                console.error(err);
                result = null;
            } finally {
                document.body.removeChild(textarea);
            }

            // manual copy fallback using prompt
            if (!result) {
                const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
                const copyHotkey = isMac ? '⌘C' : 'CTRL+C';
                result = prompt(`Press ${copyHotkey}`, string); // eslint-disable-line no-alert
                if (!result) {
                    return false;
                }
            }
            return true;
        }

        function get_client_timezone() {
            var offset = new Date().getTimezoneOffset();
            return offset;
        }

        function read_setting_unit() {
            for (var key in setting_obj) {
                var cookie_setting_value = Cookies.get('radar_' + key);
                if (cookie_setting_value) {
                    setting_obj[key] = cookie_setting_value;
                }
            }
        }

        function save_setting_unit(unit_key, unit_value) {
            setting_obj[unit_key] = unit_value;
            for (var key in setting_obj) {
                Cookies.set('radar_' + key, setting_obj[key]);
            }
        }

        function show_setting_unit() {
            $('.unit').hide();
            var cur_layout_id = $('.icons-layer-active').attr('id');
            var unit_id = "#unit-" + cur_layout_id + ' > .unit';
            $(unit_id).each(function() {
                var cur_unit = $(this).attr('data-unit');
                if (cur_unit == setting_obj['unit-' + cur_layout_id]) {
                    $(this).show();
                    change_setting_action();
                }
            });
            $('.unit-box-content').each(function() {
                var data_unit = $(this).attr('data-unit');
                var data_type = $(this).attr('data-type');
                if (setting_obj[data_type] && setting_obj[data_type] == data_unit) {
                    $(this).addClass('active-unit-btn');
                } else {
                    $(this).removeClass('active-unit-btn');
                }
            });
            $('.unit-box-content-select').each(function() {
                var data_type = $(this).attr('data-type');
                if (setting_obj[data_type]) {
                    $(this).val(setting_obj[data_type]);
                }
            });

            get_share_link();
            changeHourSetting();
        }

        function change_setting_action() {
            redrawUnit();
        }

        function zoom_in() {
            map.setZoom(map.getZoom() + 1);
        }

        function zoom_out() {
            map.setZoom(map.getZoom() - 1);
        }

        function isTouchDevice() {
            return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
        }

        function isMobile() {
            let check = false;
            (function(a) {
                if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i
                    .test(a) ||
                    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i
                    .test(a.substr(0, 4))) check = true;
            })(navigator.userAgent || navigator.vendor || window.opera);
            return check;
        };

        var marker;

        function delay(callback, ms) {
            var timer = 0;
            return function() {
                var context = this,
                    args = arguments;
                clearTimeout(timer);
                timer = setTimeout(function() {
                    callback.apply(context, args);
                }, ms || 0);
            };
        }

        function detectCurrentLocation() {
            if (typeof Android === 'undefined') {
                return;
            } else {
                return Android.detectCurrentLocation();
            }
        }

        function getAddressByIp(callback) {
            $.get("https://ipinfo.io", function(response) {
                var loc = response.loc ? response.loc : '';
                if (loc) {
                    var loc_arrs = loc.toString().split(',');
                    callback(loc_arrs[0], loc_arrs[1], response.city ? response.city : '');
                } else {
                    callback(false, false, response.city ? response.city : '');
                }
            }, "jsonp")
        }

        function showMarkerWhenF5(lat, lng, address) {
            viewCenterMap(parseFloat(lat), parseFloat(lng), false);

            $('.dropdown-result-search').hide();
            $('#pac-input').val(address)
            if (marker) {
                map.removeLayer(marker);
            }
            if (default_marker_lat && default_marker_lng) {
                marker = L.marker([default_marker_lat, default_marker_lng]).addTo(map)
            } else {
                marker = L.marker([lat, lng]).addTo(map);
            }
        }

        function showMarkerAutoSearch(lat, lng, address) {
            viewCenterMap(parseFloat(lat), parseFloat(lng), false);

            $('.dropdown-result-search').hide();
            $('#pac-input').val(address)
            if (marker) {
                map.removeLayer(marker);
            }
            marker = L.marker([lat, lng]).addTo(map);

            default_marker_lat = lat;
            default_marker_lng = lng;
            default_keyword = address;
        }

        function saveLocalStorage(lat, lng, address) {
            var storedData = localStorage.getItem("ArrayData");

            var itemDefault = {
                "address": address,
                "lat": lat,
                "lng": lng
            }

            ArrayData = []

            if (storedData) {
                ArrayData = JSON.parse(storedData);
            }

            var filtered = ArrayData.filter(function(el) {
                return el != null;
            });

            ArrayData = filtered;

            if (ArrayData.length == 0) {
                ArrayData.unshift(itemDefault);
            }

            // check address existed?
            var found = ArrayData.find(function(element) {
                // console.log(element)
                if (element == null) {
                    localStorage.clear();
                    location.reload();
                }
                return element.address == address;
            });

            if (!found) {
                ArrayData.push(itemDefault);
            }
            localStorage.setItem("ArrayData", JSON.stringify(ArrayData));
        }

        function showMarketWhenClickSearch(lat, lng, address) {
            viewCenterMap(parseFloat(lat), parseFloat(lng), false);

            saveLocalStorage(parseFloat(lat), parseFloat(lng), address);

            $('.dropdown-result-search').hide();
            $('#pac-input').val(address)
            if (marker) {
                map.removeLayer(marker);
            }
            marker = L.marker([lat, lng]).addTo(map);

            default_marker_lat = lat;
            default_marker_lng = lng;
            default_keyword = address;
        }

        function searchForSuggestion() {
            var address = $('#pac-input').val().trim();
            if (address.length > 0) {
                searchAjaxAddressByName(address, function(results) {
                    if (results.length !== 0) {
                        $('.dropdown-result-search').show();
                        $('.dropdown-result-search ul').html('');
                        $('.dropdown-result-search ul').addClass('list-item');
                        let listName = [];
                        $.each(results, function(key, val) {
                            listName.push(removeAccents(val.address).toLowerCase());
                            $('.dropdown-result-search ul').append(
                                '<li class="suggestion-text" data-lat="' + val.lat + '" data-lng="' +
                                val.lng + '">' + val.address + '</li>');
                        });

                        // add History list
                        let storedData = localStorage.getItem("ArrayData");
                        var ArrayData = [];
                        if (storedData) {
                            ArrayData = JSON.parse(storedData);
                        }

                        if (ArrayData.length > 0) {
                            var count = 0;
                            $.each(ArrayData, function(key, val) {
                                if (!listName.includes(removeAccents(val.address).toLowerCase())) {
                                    let search = removeAccents(address).toLowerCase();
                                    let myReg = new RegExp(search + ".*")
                                    if (removeAccents(val.address).toLowerCase().match(myReg)) {
                                        $('.dropdown-result-search ul').append(
                                            '<li class="suggestion-text" data-lat="' + val.lat +
                                            '" data-lng="' + val.lng + '">' + val.address + '</li>');
                                        count++;
                                    }
                                }
                            });
                        }
                    } else {
                        // add History list
                        let storedData = localStorage.getItem("ArrayData");
                        var ArrayData = [];
                        if (storedData) {
                            ArrayData = JSON.parse(storedData);
                        }
                        $('.dropdown-result-search').show();
                        $('.dropdown-result-search ul').html('');
                        $('.dropdown-result-search ul').addClass('list-item');
                        if (ArrayData.length > 0) {
                            var count = 0;
                            $.each(ArrayData, function(key, val) {
                                let search = removeAccents(address).toLowerCase();
                                let myReg = new RegExp(search + ".*")
                                if (removeAccents(val.address).toLowerCase().match(myReg)) {
                                    $('.dropdown-result-search ul').append(
                                        '<li class="suggestion-text" data-lat="' + val.lat +
                                        '" data-lng="' + val.lng + '">' + val.address + '</li>');
                                    count++;
                                }
                            });
                        } else {
                            $('.dropdown-result-search').hide();
                        }
                    }
                });
            } else {
                $('.dropdown-result-search').hide();
            }
        }

        function removeAccents(str) {
            var AccentsMap = [
                "aàảãáạăằẳẵắặâầẩẫấậ",
                "AÀẢÃÁẠĂẰẲẴẮẶÂẦẨẪẤẬ",
                "dđ", "DĐ",
                "eèẻẽéẹêềểễếệ",
                "EÈẺẼÉẸÊỀỂỄẾỆ",
                "iìỉĩíị",
                "IÌỈĨÍỊ",
                "oòỏõóọôồổỗốộơờởỡớợ",
                "OÒỎÕÓỌÔỒỔỖỐỘƠỜỞỠỚỢ",
                "uùủũúụưừửữứự",
                "UÙỦŨÚỤƯỪỬỮỨỰ",
                "yỳỷỹýỵ",
                "YỲỶỸÝỴ"
            ];
            for (var i = 0; i < AccentsMap.length; i++) {
                var re = new RegExp('[' + AccentsMap[i].substr(1) + ']', 'g');
                var char = AccentsMap[i][0];
                str = str.replace(re, char);
            }
            return str;
        }

        function getAddressByLatLng(lat, lng, address, callback) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var data = {
                lat: lat,
                lng: lng,
                address: address
            };
            $.ajax({
                method: "GET",
                url: "{{ $url_link }}/getAddressByLatLng",
                data: data,
                success: function(response) {
                    callback(response.lat, response.lng, response.address, response.is_predict);
                },
                error: function(data) {
                    callback(lat, lng, address, true);
                }
            });
        }

        function searchAjaxAddressByName(address, callback) {
            var data = {
                address: address
            };
            $.ajax({
                method: "GET",
                url: "{{ $url_link }}/searchAddressAjax",
                data: data,
                success: function(response) {
                    if (Object.keys(response.results).length !== 0) {
                        callback(response.results);
                    } else {
                        callback([]);
                    }
                },
                error: function(data) {
                    callback([]);
                }
            });
        }

        function predicAddressOfGoogle(lat, lng, address, callback) {
            $.ajax({
                method: "GET",
                url: "{{ $url_link }}/apiSearchAjax",
                data: {
                    search: address
                },
                success: function(res) {
                    $(".ajax_waiting").removeClass("loading");
                    if (res.results != null) {
                        var lat = res.results.lat;
                        var lng = res.results.lng;
                        callback(lat, lng, res.address);
                    }
                }
            });
            // var geocoder = new google.maps.Geocoder();
            // var service = new google.maps.places.AutocompleteService(null, {types: ['geocode']});
            // service.getPlacePredictions({input: address}, function(predictions, status){
            // 	if (status == 'OK'){
            // 		if(predictions[0]){
            // 			var n = document.getElementById('ol');
            // 			var s = new google.maps.places.PlacesService(n.appendChild(document.createElement('div')));
            // 			var p = predictions[0].description;
            // 			s.getDetails({reference: predictions[0].reference}, function(details, status){
            // 				var info = details.geometry.location.toString();
            // 				var info = info.split(",");
            // 				var lat = info[0].replace("(", "").trim();
            // 				var lng = info[1].replace(")", "").trim();
            // 				callback(lat, lng, address);
            // 			});
            // 		}else{
            // 			callback(lat, lng, address);
            // 		}
            // 	}else{
            // 		callback(lat, lng, address);
            // 	}
            // });
        }

        // khi người dùng click current location
        function searchAddressByUserIP(callback) {
            $(".ajax_waiting").addClass("loading");
            // gọi ipfind.co lấy lat, lng, address
            getAddressByIp(function(lat, lng, address) {
                if (lat !== false && lng !== false) {
                    // nếu lat, lng khác null thì kiểm tra với cookie
                    searchInCache(lat, lng, function(lat, lng, cache_address) {
                        // nếu lat, lng trùng với lat lng trong cookie thì lấy address cookie,
                        if (cache_address !== false) {
                            showMarkerAutoSearch(lat, lng, cache_address);
                            $(".ajax_waiting").removeClass("loading");
                            callback();
                        } else {
                            showMarkerAutoSearch(lat, lng, address);
                            $(".ajax_waiting").removeClass("loading");
                            callback();

                            // getAddressByLatLng(lat, lng, address, function(lat, lng, address, is_predict){
                            // 	if(address){
                            // 		if(is_predict == 1){
                            // 			predicAddressOfGoogle(lat, lng, address, function(lat, lng, address){
                            // 				Cookies.set("current_address", address, { expires: 1});
                            // 				Cookies.set("lat", lat, { expires: 1});
                            // 				Cookies.set("lng", lng, { expires: 1});
                            // 				showMarkerAutoSearch(lat, lng, address);
                            // 				$(".ajax_waiting").removeClass("loading");
                            // 				callback();
                            // 			});
                            // 		}else{
                            // 			Cookies.set("current_address", address, { expires: 1});
                            // 			Cookies.set("lat", lat, { expires: 1});
                            // 			Cookies.set("lng", lng, { expires: 1});
                            // 			showMarkerAutoSearch(lat, lng, address);
                            // 			$(".ajax_waiting").removeClass("loading");
                            // 			callback();
                            // 		}
                            // 	}else{
                            // 		Cookies.set("lat", lat, { expires: 1});
                            // 		Cookies.set("lng", lng, { expires: 1});
                            // 		showMarkerAutoSearch(lat, lng, address);
                            // 		$(".ajax_waiting").removeClass("loading");
                            // 		callback();
                            // 	}
                            // });
                        }
                    });
                } else {
                    $(".ajax_waiting").removeClass("loading");
                    callback();
                }
            });
        }
        // function searchAddressOfBrowser(lat, lng, callback){
        // 	searchInCache(lat, lng, function(lat, lng, address){
        // 		if(address !== false){
        // 			showMarkerAutoSearch(lat, lng, address);
        // 			callback();
        // 		}else{
        // 			$('.ajax_waiting').addClass("loading");
        // 			getAddressByLatLng(lat, lng, '', function(lat, lng, address, is_predict){
        // 				if(address){
        // 					if(is_predict == 1){
        // 						predicAddressOfGoogle(lat, lng, address, function(lat, lng, address){
        // 							Cookies.set("current_address", address, { expires: 1});
        // 							Cookies.set("lat", lat, { expires: 1});
        // 							Cookies.set("lng", lng, { expires: 1});
        // 							showMarkerAutoSearch(lat, lng, address);
        // 							$(".ajax_waiting").removeClass("loading");
        // 							callback();
        // 						});
        // 					}else{
        // 						Cookies.set("current_address", address, { expires: 1});
        // 						Cookies.set("lat", lat, { expires: 1});
        // 						Cookies.set("lng", lng, { expires: 1});
        // 						showMarkerAutoSearch(lat, lng, address)
        // 						$('.ajax_waiting').removeClass("loading");
        // 						callback();
        // 					}
        // 				}else{
        // 					Cookies.set("lat", lat, { expires: 1});
        // 					Cookies.set("lng", lng, { expires: 1});
        // 					showMarkerAutoSearch(lat, lng, address)
        // 					$('.ajax_waiting').removeClass("loading");
        // 					callback();
        // 				}
        // 			});
        // 		}
        // 	});
        // }
        function searchWhenClickSearchBtn(callback) {
            var address = $('#pac-input').val().trim();
            $('#pac-input').focus();
            if (address != '') {
                var check_number_lat = 0;
                var check_number_lng = 0;
                var check_number = 1;
                var check_comma = address.indexOf(',')
                var characters = address.length;
                var cut = address.search(',');
                var begin = lat = address.slice(0, address.search(','));
                var end = lng = address.slice(address.indexOf(',') + 1, characters);
                begin = begin.replace('-', '');
                end = end.replace('-', '');
                var search_by_address = true;
                if (check_comma > 0) {
                    for (var i = 0; i < begin.length; i++) {
                        var check_number = begin.slice(i, i + 1);
                        for (var j = 0; j <= 9; j++) {
                            if (check_number == j) {
                                check_number_lat++;
                            }
                        }
                    }
                    for (var i = 0; i < end.length; i++) {
                        var check_number = end.slice(i, i + 1);
                        for (var j = 0; j <= 9; j++) {
                            if (check_number == j) {
                                check_number_lng++;
                            }
                        }
                    }
                    if (check_number_lat >= begin.length - 1 && check_number_lng >= end.length - 1 && end.indexOf(',') === -
                        1) {
                        search_by_address = false;
                    }
                }
                document.activeElement.blur();

                if (search_by_address) {
                    $(".ajax_waiting").addClass("loading");
                    searchAjaxAddressByName(address, function(results) {
                        if (results.length == 0) {
                            predicAddressOfGoogle(false, false, address, function(lat, lng, address) {
                                if (lat !== false && lng !== false) {
                                    showMarketWhenClickSearch(lat, lng, address);
                                    $(".ajax_waiting").removeClass("loading");
                                    callback();
                                } else {
                                    $(".ajax_waiting").removeClass("loading");
                                    Swal.fire({
                                        type: 'warning',
                                        text: "{{ __('messages.search_not_found') }}",
                                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                                    });
                                    callback();
                                }
                            });
                        } else {
                            showMarketWhenClickSearch(results[0].lat, results[0].lng, results[0].address);
                            $(".ajax_waiting").removeClass("loading");
                            callback();
                        }
                    });
                } else {
                    showMarketWhenClickSearch(lat, lng, address);
                    callback();
                }
            } else {
                Swal.fire({
                    type: 'warning',
                    text: "{{ __('messages.search_not_found') }}",
                    confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                });
                callback();
            }
        }

        function searchInCache(lat, lng, callback) {
            if (Cookies.get('lat') && Cookies.get('lng') && Cookies.get('current_address') && Cookies.get('lat') == lat &&
                Cookies.get('lng') == lng) {
                callback(lat, lng, Cookies.get('current_address'));
            } else {
                callback(lat, lng, false);
            }
        }

        //Fix android keyboard
        var originalPotion = false;

        function onKeyboardOnOff(isOpen) {
            if (isOpen) {
                $("#layer-control-bottom").hide();
                $("#info_unit").hide();
                $("#layer_box").hide();
                $("#expand_box").hide();
            } else {
                setTimeout(function() {
                    $("#layer-control-bottom").show();
                    $("#info_unit").show();
                    $("#layer_box").show();
                    $("#expand_box").show();
                }, 200);
            }
        }

        function getMobileOperatingSystem() {
            var userAgent = navigator.userAgent || navigator.vendor || window.opera;
            if (/windows phone/i.test(userAgent)) {
                return "winphone";
            }
            if (/android/i.test(userAgent)) {
                return "android";
            }
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                return "ios";
            }
            return "";
        }

        function applyAfterResize() {
            if (originalPotion !== false) {
                var wasWithKeyboard = $('body').hasClass('view-withKeyboard');
                var nowWithKeyboard = false;
                var diff = Math.abs(originalPotion - ($(window).width() + $(window).height()));
                if (diff > 100) nowWithKeyboard = true;
                $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
                if (wasWithKeyboard != nowWithKeyboard) {
                    onKeyboardOnOff(nowWithKeyboard);
                }
            }
        }

        $(document).ready(function() {
            read_setting_unit();

            //Select default layer
            var custom_bar_divs = $('.layer_wrapper i');
            for (var i = 0; i < custom_bar_divs.length; i++) {
                var cur_icon = $(custom_bar_divs).get(i);
                var cur_id = $(cur_icon).attr('id');
                if (cur_id == overlay) {
                    $('.icons-layer-active').addClass('icons-layer').removeClass(
                        'icons-layer-active'); //xóa tất cả class 'icons-layer-active' thay bằng 'icons-layer'
                    $(cur_icon).addClass(
                        'icons-layer-active'); // chuyển icons-layer thành icons-layer-active khi click
                }
            }
            show_setting_unit();

            addGeoJson();

            //Active icons by click
            $('.layer_wrapper > span').click(function() {
                $('.icons-layer-active').addClass('icons-layer').removeClass(
                    'icons-layer-active'); //xóa tất cả class 'icons-layer-active' thay bằng 'icons-layer'
                $(this).find('i').removeClass('icons-layer').addClass(
                    'icons-layer-active'); // chuyển icons-layer thành icons-layer-active khi click
                var cur_div = $(this).find('i').attr('id');
                show_setting_unit();
                if (default_date !== '') {
                    if (checkGetCurrentimeDataForWindAndWeather(default_date)) {
                        changeLayer(cur_div, 'none');
                    } else {
                        var temp_second = convertGMT0TimezoneToCurrentTimezone(default_date);
                        var cur_wind_name = getWindTimestampOfGMT0(temp_second * 1000);
                        changeLayer(cur_div, cur_wind_name);
                    }
                } else {
                    changeLayer(cur_div, 'none');
                }
                replaceShareLink('by_layer');
            });

            //Expand layer in mobile
            $(".expand_btn").click(function() {
                var cur_css = $('.layer_wrapper').css('display');
                if (cur_css == 'none') {
                    $('.expand_btn').addClass('expand-show')
                    $('.layer_wrapper').addClass('layer-show');
                    $('.icon-colspan').show();
                    $('.icon-expand').hide();

                    $('.layer_wrapper').show();
                } else {
                    $('.expand_btn').removeClass('expand-show')
                    $('.layer_wrapper').removeClass('layer-show');
                    $('.icon-colspan').hide();
                    $('.icon-expand').show();

                    $('.layer_wrapper').hide();



                }
            });
            $(document).on('click touchstart', function(e) {
                if (isMobile()) {
                    var container = $(".expand_btn");
                    var second_container = $(".layer_wrapper");
                    if (!container.is(e.target) && container.has(e.target).length === 0) {
                        if (!second_container.is(e.target) && second_container.has(e.target).length === 0) {
                            $('.expand_btn').removeClass('expand-show')
                            $('.layer_wrapper').removeClass('layer-show')
                            $('.icon-colspan').hide();
                            $('.icon-expand').show();
                            $('.layer_wrapper').hide();
                        }
                    }
                }
            });

            //Unit event
            $('.unit').click(function() {
                $('.unit').hide();
                var parent_div = $(this).parent();
                var parent_div_id = parent_div.attr('id');
                var cur_unit_id = "#" + parent_div_id + ' > .unit';
                var all_unit_elements = $(cur_unit_id);
                var last_index = all_unit_elements.length;
                for (var i = 0; i < all_unit_elements.length; i++) {
                    var cur_unit_element = $(cur_unit_id).get(i);
                    if ($(cur_unit_element).attr('data-unit') == setting_obj[parent_div_id]) {
                        if (i == last_index - 1) {
                            var next_unit_element = $(cur_unit_id).get(0);
                        } else {
                            var next_unit_element = $(cur_unit_id).get(i + 1);
                        }
                        save_setting_unit(parent_div_id, $(next_unit_element).attr('data-unit'));
                        $(next_unit_element).show("fast");
                        break;
                    }
                }
                change_setting_action();
            });

            //Fullscreen and info
            if ($.fullscreen.isNativelySupported() == false) {
                $('.map_fullscreen').css('display', 'none');
                $('.map_info_container > span > span').css('border-top', '0px solid grey');
                $('.map_info_container > span > span').css('border-top-left-radius', '3px');
                $('.map_info_container > span > span').css('border-top-right-radius', '3px');
            }
            $('.map_fullscreen_acction').click(function() {
                if ($.fullscreen.isFullScreen()) {
                    $.fullscreen.exit();
                } else {
                    $('body').fullscreen();
                }
            });
            $(document).bind('fscreenchange', function(e, state, elem) {
                if ($.fullscreen.isFullScreen()) {
                    $('.map_fullscreen i').removeClass('fa-arrows-alt').addClass('fa-compress-arrows-alt');
                } else {
                    $('.map_fullscreen i').removeClass('fa-compress-arrows-alt').addClass('fa-arrows-alt');
                }
            });

            if (isTouchDevice() === false) {
                $('[data-toggle="tooltip"]').tooltip();
            }
            $('.map_info').click(function() {
                $(".popover_map_info_container").show();
                $('.info_warpper_mobile').show();
                $('.header_mobile_title').hide();
                $('.info_title').show();
            });
            $('.info_warpper_mobile').on('click touchstart', function(e) {
                $(".popover_map_info_container").hide();
                $('.info_warpper_mobile').hide();
                return false;
            });

            //Setting unit
            $('.seting_menu').click(function() {
                var hidden_class = '.' + $(this).attr('data-hide');
                var show_class = '.' + $(this).attr('data-show');
                $('.setting_wrapper').addClass('setting-selected');
                $('.seting_menu').removeClass('setting-unit-selected');
                $(this).addClass('setting-unit-selected');
                $(hidden_class).hide();
                $(show_class).show();
                $('.setting_wrapper_cjcbd').show();

                if (show_class == '.show-setting') {
                    $('.setting_warpper_mobile').show();
                    $('.header_mobile_title').hide();
                    $('.setting_title').show();
                } else {
                    $('.setting_warpper_mobile').show();
                    $('.header_mobile_title').hide();
                    $('.share_title').show();
                }
                show_setting_unit();
                get_share_link();
            });
            $('.setting-close-btn').click(function() {
                $('.setting_wrapper').removeClass('setting-selected');
                $('.seting_menu').removeClass('setting-unit-selected');
                $('.setting-content-box').hide();
                $('.setting_wrapper_cjcbd').hide();
                $('.setting_warpper_mobile').hide();
            });
            $('.unit-box-content').click(function() {
                var data_unit = $(this).attr('data-unit');
                var data_type = $(this).attr('data-type');
                save_setting_unit(data_type, data_unit);
                show_setting_unit();
                change_setting_action();
            });
            $('.unit-box-content-select').change(function() {
                var data_type = $(this).attr('data-type');
                var data_unit = $(this).val();
                save_setting_unit(data_type, data_unit);
                show_setting_unit();
                change_setting_action();
            });
            $('.setting_warpper_mobile').on('click touchstart', function(e) {
                $('.setting_wrapper').removeClass('setting-selected');
                $('.seting_menu').removeClass('setting-unit-selected');
                $('.setting-content-box').hide();
                $('.setting_wrapper_cjcbd').hide();
                $('.setting_warpper_mobile').hide();
                return false;
            });

            //Check setting, info blur
            $(document).on('click touchstart', function(e) {
                var container = $(".setting-content-box");
                var second_container = $('.seting_menu');
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    if (!second_container.is(e.target) && second_container.has(e.target).length === 0) {
                        $('.setting_wrapper').removeClass('setting-selected');
                        $('.seting_menu').removeClass('setting-unit-selected');
                        $('.setting-content-box').hide();
                        $('.setting_wrapper_cjcbd').hide();
                        $('.setting_warpper_mobile').hide();
                    }
                }

                var container = $(".map_info");
                var second_container = $('.popover_map_info_container');
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    if (!second_container.is(e.target) && second_container.has(e.target).length === 0) {
                        $(".popover_map_info_container").hide();
                        $('.info_warpper_mobile').hide();
                    }
                }
            });

            //Copy share link button
            $("#share_link_btn").click(function() {
                copyToClipboard('#share_link');
                $("#share_link_done").show('slow');
                $("#share_link_default").hide();
                setTimeout(function() {
                    $("#share_link_done").hide();
                    $("#share_link_default").show();
                }, 1000);
            });

            //Search function
            $('#pac-input').keyup(delay(function(e) {
                if (e.keyCode == 13) {
                    $('.dropdown-result-search').hide();
                    $("#searchbutton").trigger("click");
                } else {
                    searchForSuggestion();
                }
            }, 500));
            $('.delete-btn').click(function(e) {
                $('#pac-input').focus();
                $('#pac-input').val('');
                $('.dropdown-result-search').hide();
            });
            $(document).on('mousedown', '.suggestion-text', function(e) {
                showMarketWhenClickSearch(e.target.dataset.lat, e.target.dataset.lng, e.target.innerText);
                replaceShareLink('by_click_search');
            });
            $('#searchbutton').click(function(e) {
                searchWhenClickSearchBtn(function() {
                    replaceShareLink('by_click_search');
                });
            });
            $('#get-current-location').click(function() {
                searchAddressByUserIP(function() {
                    replaceShareLink('by_ip_address');
                });
            });

            if (have_default_param === true) {
                showMarkerWhenF5(lat, lng, default_keyword);
            } else {
                searchAddressByUserIP(function() {
                    replaceShareLink('by_auto_ip_address');
                });
            }

            //Fix Android keyboard
            var clicky;
            $(document).mousedown(function(e) {
                clicky = $(e.target).attr('class');
            });
            if (getMobileOperatingSystem() === 'android') {
                originalPotion === false ? ($(window).width() + $(window).height()) : originalPotion;
                $(document).on('focus blur', 'input', function(e) {
                    if (clicky != 'clear-search-text') {
                        var $obj = $(this);
                        var nowWithKeyboard = (e.type == 'focusin');
                        $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
                        onKeyboardOnOff(nowWithKeyboard);
                    } else {
                        var nowWithKeyboard = true;
                        $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
                        onKeyboardOnOff(nowWithKeyboard);
                    }
                });
                $(window).on('resize orientationchange', function() {
                    applyAfterResize();
                });
            }

            //Init Timelinebar
            startInitTimeline();
        });
    </script>
@endsection