@extends('layouts.app')
@section('content')
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
    google.charts.load('current', {
        'packages': ['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawMarkersMap);

    function drawMarkersMap() {
        var arrayData = [
            ["City", "lat", "lng"],
                    ];

        // var arrayConvertData = [
        //     ["City", "Id"],
        //             // ];

        // var data = google.visualization.arrayToDataTable(arrayConvertData);

        // var data = new google.visualization.DataTable();
        // data.addColumn('string', 'City'); // Implicit domain label col.
        // data.addColumn('number', 'Value'); // Implicit series 1 data col.
        // data.addColumn({type:'string', role:'tooltip'}); // 

        // data.addRows([
        //             // ]);

        var data = google.visualization.arrayToDataTable([
                        ['Lat','Lng','Value','City'],
                             
                    ]); 

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        var view = new google.visualization.DataView(data);
            view.setColumns([0, 1, 2, {
                calc: function (dt, row) {
                  return dt.getValue(row, 3);
                },
                role: 'tooltip',
                type: 'string'
            }]);

        var options = {
            region: '{{ strtoupper($country->code) }}',
            legend: 'none',
            displayMode: 'markers',
            showZoomOut: true,
            backgroundColor: '#81d4fa',
            datalessRegionColor: '#f8bbd0',
            defaultColor: '#f5f5f5',
            sizeAxis: { minValue: 16, maxValue: 16, minSize: 16, maxSize: 16 },
            colorAxis: {colors: ['red']},
            tooltip: {
                isHtml: true
            }
        };


        function myClickHandler(){
            var selection = chart.getSelection();
            var message = '';
            for (var i = 0; i < selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    message += item.column;
                } else if (item.row != null) {
                    message += item.row;
                } else if (item.column != null) {
                    message += item.column;
                }
            }
            console.log(arrayData);
            var lat = arrayData[parseInt(message) + 1][1];
            var lng = arrayData[parseInt(message) + 1][2];
            localStorage.setItem("HomeSearch", arrayData[parseInt(message) + 1][0]);
            window.location.href = "{{ url('/') }}/current?lat="+lat+"&lng="+lng;
        }

        function createMarkerImage(id, url) {
            var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
            patt.setAttribute('id', id);
            patt.setAttribute('width', '32');
            patt.setAttribute('height', '32');
            var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
            image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', url);
            image.setAttribute('width', '32');
            image.setAttribute('height', '32');
            var defs = document.getElementsByTagName('defs')[0];
            patt.appendChild(image);
            defs.appendChild(patt);
        }
        
        google.visualization.events.addListener(chart, 'select', myClickHandler);

        chart.draw(view, options);

        google.visualization.events.addListener(chart, 'ready', function () {
            // createMarkerImage("imgFlag", "{{ url('/') }}/images/placeholder2.svg");
            // for(var i = 0; i < document.getElementsByTagName('circle').length; i++){
            //     document.getElementsByTagName('circle')[i].setAttribute("fill", "url(#imgFlag)");    
            //     document.getElementsByTagName('circle')[i].setAttribute("r", "16");    
            //     document.getElementsByTagName('circle')[i].setAttribute("stroke", "none");    
            //     document.getElementsByTagName('circle')[i].setAttribute("stroke-width", "0");    
            // }
        });
    };
</script>
<style type="text/css">
    #chart_div circle, #chart_div circle:hover {
        stroke-width:2px;
        stroke: #666;
    }
</style>
<div class="box_1 home-page">
    <div class="image-background">
                <video autoplay muted loop id="myVideo">
            <source src="{{ url('/') }}/videos/{{ \App\Common\Helper::GetBackgoundImage($state) }}" type="video/mp4">
        </video>
        <img id="myImage" src="{{ url('/') }}/images/{{ \App\Common\Helper::GetBackgoundImage($state) }}" width="100%" height="100%">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-10 offset-1">
                <div class="group-search clearfix">
                    <div class="img-location" id="get-current-location">
                        <img src="{{ url('/') }}/images/search_location@2x.png" width="39px" height="39px">
                    </div>
                    <div class="search-holder clearfix">
                        <input type="text" name="search_location" id="pac-input" class="form-control">
                        <span class="delete-btn"><img src="{{ url('/') }}/images/search_delete@2x.png" width="30px"></span>
                    </div>
                    <div class="img-search" id="searchbutton">
                        <img src="{{ url('/') }}/images/search_search@2x.png" width="39px" height="39px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="box_2">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 offset-1">
                <div class="group-submenu">
                    <ul class="link clearfix">
                        <li class="active"><a href="{{ url('/global') }}">Global</a></li>
                        <li><a href="{{ url('/current') }}">Current weather</a></li>
                        <li><a href="{{ url('/24hours') }}">Hourly</a></li>
                        <li><a href="{{ url('/5days') }}">5 days</a></li>
                        <!-- <li><a href="">7 days</a></li> -->
                        <li><a href="{{ url('/weekend') }}">Weekend</a></li>
                        <li><a href="{{ url('/radar') }}">{{ __('messages.radar') }}</a></li>
                    </ul>
                </div>
            </div>
  <!--           <div class="col-sm-2"></div> -->
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-10 offset-1">
                <div id="chart_div">
                </div>
            </div>
<!--             <div class="col-sm-2"></div> -->
        </div>
    </div>
</div>
<div class="box_others">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 offset-1">
                @if (count($listTopic) > 0)
                <div class="row trendding">
                    <div class="col-sm-12">
                        <h2 class="text-center">TRENDING TOPIC</h2>
                    </div>
                    @foreach($listTopic as $topic)
                    <div class="col-sm-4">
                        <div class="item">
                            <div class="image">
                                <a href="{{ route('trendding-topic', ['slug' => $topic->slug ]) }}">
                                    <img data-original="{{ url('/images/'.$topic->image) }}" alt="{{ $topic->title }}">
                                </a>

                                <h3 class="title"><a href="{{ route('trendding-topic', ['slug' => $topic->slug ]) }}">{{ BatvHelper::smartStr($topic->title, 30, ' ...') }}</a></h3>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                @if (count($listNews) > 0)
                <div class="row news">
                    <div class="col-sm-12">
                        <h2 class="text-center">Weather news</h2>
                    </div>

                    @foreach($listNews as $k => $news)

                    @if ($k == 0)
                    <div class="col-sm-12">
                        <div class="item">
                            <div class="image">
                                <a href="{{ route('news', ['slug' => $news->slug ]) }}">
                                    <img data-original="{{ url('/images/'.$news->image) }}" alt="{{ $news->title }}">
                                </a>
                                <div class="title-special">
                                    <h3><a href="{{ route('news', ['slug' => $news->slug ]) }}">{{ BatvHelper::smartStr($news->title, 120, ' ...') }}</a></h3>
                                    <p class="desc">{{ BatvHelper::smartStr($news->description, 350, ' ...') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="col-sm-12 child">
                        <div class="child-detail clearfix">
                            <div class="left">
                                <a href="{{ route('news', ['slug' => $news->slug ]) }}">
                                    <img data-original="{{ url('/images/'.$news->image) }}" alt="{{ $news->title }}">
                                </a>
                            </div>
                            <div class="right">
                                <h3><a href="{{ route('news', ['slug' => $news->slug ]) }}">{{ BatvHelper::smartStr($news->title, 75, ' ...') }}</a></h3>
                                <p class="desc">{{ BatvHelper::smartStr($news->description, 320, ' ...') }}</p>
                            </div>
                        </div>
                    </div>
                    @endif

                    @endforeach

                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY', 'AIzaSyDqRbA3iMV94bJvz3RpVL3NsIAju0I7fUs') }}&libraries=places&callback=initialize"
         async defer></script>

<script type="text/javascript">
    var input;
    var searchBox;
    var geocoder;
    function initialize() {
        input = document.getElementById('pac-input');
        searchBox = new google.maps.places.SearchBox(input);
        searchBox.addListener('places_changed', function() {
            search();
        });

        $('.img-search').click(function(){
            var location = input.value;
            if(location.length > 0){
                geocoder = new google.maps.Geocoder();
                geocoder.geocode({'address': location}, function (results, status) {
                    if (status === 'OK') {
                        localStorage.setItem("HomeSearch", location);

                        window.location.href = "{{ url('/') }}/?lat=" + results[0].geometry.location.lat() + '&lng=' + results[0].geometry.location.lng();
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
        });
    }

    function search(){
        var places = searchBox.getPlaces();

        if (places.length == 0 || input.value.length == 0) {
            return;
        }

        places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }

            localStorage.setItem("HomeSearch", $('#pac-input').val());
            window.location.href = "{{ url('/') }}/?lat=" + place.geometry.location.lat() + '&lng=' + place.geometry.location.lng();
        });
    }

    $('#get-current-location').click(function(){
        if (localStorage.getItem('regionDefault') === null) {
            $.ajax({
                method : "GET",
                url: "https://ipfind.co/me?auth={{ $key }}",
                dataType: "json",
                beforeSend: function() {
                    $('.ajax_waiting').addClass("loading");
                },
                success: function(response) {
                    $('.ajax_waiting').removeClass("loading");
                    localStorage.setItem("HomeSearch", response.region); 
                    localStorage.setItem("regionDefault", response.region); 
                    $('#pac-input').val(response.region);

                    $.ajaxSetup(
                        {
                          headers:
                          {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    var data = {
                        lat: response.latitude,
                        lng: response.longitude,
                    };
                    $.ajax({
                        method : "POST",
                        url: "{{ route('createdSession') }}",
                        data: data,
                        success: function(response) {

                        },
                        error: function(data) {
                            console.log('Error:', data);
                        }
                    });

                },
                error: function(data) {
                    $('.ajax_waiting').removeClass("loading");
                    console.log('Error:', data);
                }
            });
        }else{
            var regionDefault = localStorage.getItem('regionDefault');
            localStorage.setItem("HomeSearch", regionDefault); 
            $('#pac-input').val(regionDefault);
            $.ajaxSetup(
                {
                  headers:
                  {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var data = {
                lat: '',
                lng: '',
            };
            $.ajax({
                method : "POST",
                url: "{{ route('createdSession') }}",
                data: data,
                success: function(response) {

                },
                error: function(data) {
                    console.log('Error:', data);
                }
            })
        }

    });

    if (localStorage.getItem('HomeSearch') === null) {
        $('#get-current-location').click();
    }else{
        var homeSearch = localStorage.getItem('HomeSearch');
        $('#pac-input').val(homeSearch);
    }

    $('.delete-btn').click(function(){
        $('#pac-input').val('');
        $('.dropdown-result-search').hide();
    });


    $(document).ready(function(){
        $('.moon-phase').click(function(){
            // alert($(this).attr('data-moon'));
            $('.moonphase-img>img').attr("src", "{{ url('/') }}/images/moon/big/big"+$(this).attr('data-moon-status')+".png");
            $('.big-moon-status').html($(this).attr('data-moon-name'));
        });

        $('.moon-phase.current-day').click();

        $('#detail-24').click(function(){
            window.location.href = "{{ url('/') }}/24hours/" + window.location.search;
        });

        $('#detail-7').click(function(){
            window.location.href = "{{ url('/') }}/7days/" + window.location.search;
        });

        $('#anywhere .item').click(function(){
            var lat = $(this).attr('data-lat');
            var lng = $(this).attr('data-lng');
            var name = $(this).find('.title').html();
            localStorage.setItem("HomeSearch", name);
            window.location.href = "{{ url('/') }}/?lat=" + lat + '&lng=' + lng;
        });

        $('#see_more_anywhere').click(function(){
            window.location.href = "{{ url('/') }}/cities" + window.location.search;
        });

        // Realtime
        // var check_time_format = $('.time span.active').attr("data-id");
        // var interval = setInterval(function() {
        //     var momentNow = moment();

        //     if (check_time_format == 24) {
        //         $('#currentHour').html(momentNow.format('HH:mm'));
        //     } else {
        //         $('#currentHour').html(momentNow.format('hh:mm'));
        //     }

        //     if (momentNow.format('mm') == '59') {
        //         setTimeout(function(){ location.reload(); }, 60000);
        //     }
        // }, 1000);
        
    });

    var getUrlParameter = function getUrlParameter(sParam) {
        var sPageURL = decodeURIComponent(window.location.search.substring(1)),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;

        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');

            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : sParameterName[1];
            }
        }
    };
</script>
<style type="text/css">
    .group-submenu ul.link li a {
        float: left;
        border-right: 1px solid #fff;
        padding: 10px 4px;
        @if($location != "VN")
        width: calc(16.666%);
        @else
        width: calc(20%);
        @endif
        text-align: center;
    }
</style>
@endsection