@extends('layouts.app')
@section('content')
<link rel="stylesheet" href="{{ url('/') }}/css/ammap.css" />
<script src="{{ url('/') }}/js/ammap.js" type="text/javascript"></script>
<script src="{{ url('/') }}/js/maps/js/.js" type="text/javascript"></script>
<script>

    var map;

    AmCharts.ready(function() {
        map = new AmCharts.AmMap();

        map.addClassNames = true;
        map.balloon.color = "#000000";
        map.balloon.fontWeight = "bold";
        map.balloon.fillColor = "#FFFFFF";
        map.balloon.borderColor = "#FFFFFF";
        map.balloon.borderThickness = "#FFFFFF";
        map.balloon.fontSize = '16px';
        map.balloon.shadowAlpha = 0;
        map.balloon.shadowColor = "#FFFFFF";
        map.balloon.fillAlpha = 1;
        map.balloon.cornerRadius = 4;
        map.balloon.verticalPadding = 10;

        map.color = "#dce97f";
        map.backgroundAlpha = 1;
        map.theme = "light";

        map.areasSettings.unlistedAreasColor = "#15A892";
        map.imagesSettings.color = "#13564e";
        map.imagesSettings.selectedColor = "#089282";

        var dataProvider = {
            mapVar: AmCharts.maps.,
            getAreasFromMap:true
        };

        map.dataProvider = dataProvider;

        map.areasSettings = {
            autoZoom: true,
            selectedColor: "#CC0000",
            "selectable": true
        };

        map.smallMap = new AmCharts.SmallMap();

        map.write("chart_div");

        map.addListener("clickMapObject", function(event) {
          //document.getElementById("info").innerHTML = 'Clicked ID: ' + event.mapObject.id + ' (' + event.mapObject.title + ')';
          //alert(event.mapObject.title);
            var province = event.mapObject.title;
            var data = {
                province: province,
            };

            console.log(event.mapObject);

            $.ajax({
                method : "GET",
                url: "{{ route('currentProvince') }}",
                data: data,
                success: function(response) {
                    localStorage.setItem("HomeSearch", province);
                    window.location.href = "{{ url('/') }}/current?search="+province+"&lat="+response.lat+"&lng="+response.lng;
                },
                error: function(data) {
                    console.log('Error:', data);
                }
            })
        });

    });

</script>
<style type="text/css">
    #chart_div .amcharts-chart-div a{
        display: none !important;
    }
    #chart_div .amcharts-balloon-div div{
        font-weight: bold!important;
        font-family: Arial!important;
        font-size: 12px!important;
        white-space: nowrap;
    }
</style>
<div class="box_1 home-page" style="background-color: #000000ad;">
    <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" value="{{ isset($_GET['search']) ? $_GET['search'] : '' }}">
                        <span class="delete-btn"><img src="{{ url('/') }}/images/search_delete@2x.png" width="30px"></span>
                        <div class="dropdown-result-search" tabindex="3" style="display: block;" id="dropdown-result">
                            <ul>
                            </ul>
                        </div>
                    </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" style="background-color: #000000ad;">
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-10 offset-sm-1 remove-le">
                @include('layouts.address-search',['id' => "address-search-default"])
                @include('layouts.address-search',['id' => "address-search"])
                <div class="group-submenu">
                    <ul class="link clearfix">
                        @if(isset($_GET['search']) || isset($_GET['lat']) || isset($_GET['lng']))
                                                <li class="active word-break"><a href="{{ url('/global') }}?{{ $param }}">{{ __('messages.global') }}</a></li>
                        <li class="word-break"><a href="{{ url('/current') }}?{{ $param }}">{{ __('messages.current_weather') }}</a></li>
                        <li class="word-break"><a href="{{ url('/24hours') }}?{{ $param }}">{{ __('messages.hourly') }}</a></li>
                        <li class="word-break"><a href="{{ url('/5days') }}?{{ $param }}">{{ __('messages.5_days') }}</a></li>
                        <li class="word-break"><a href="{{ url('/weekend') }}?{{ $param }}">{{ __('messages.weekend') }}</a></li>
                        @if($location != "VN")
                        <li class="word-break"><a id="radar-link" href="{{ url('/radar') }}?{{ $param }}">{{ __('messages.radar') }}</a></li>
                        @endif
                        @else
                        <li class="active word-break"><a href="{{ url('/global') }}">{{ __('messages.global') }}</a></li>
                        <li class="word-break"><a href="{{ url('/current') }}">{{ __('messages.current_weather') }}</a></li>
                        <li class="word-break"><a href="{{ url('/24hours') }}">{{ __('messages.hourly') }}</a></li>
                        <li class="word-break"><a href="{{ url('/5days') }}">{{ __('messages.5_days') }}</a></li>
                        <li class="word-break"><a href="{{ url('/weekend') }}">{{ __('messages.weekend') }}</a></li>
                        @if($location != "VN")
                        <li class="word-break"><a id="radar-link" href="{{ url('/radar') }}">{{ __('messages.radar') }}</a></li>
                        @endif
                        @endif
                    </ul>
                </div>
            </div>
  <!--           <div class="col-sm-2"></div> -->
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-10 offset-sm-1 remove-le">
                <div id="chart_div" style="width: 100%; background-color:#EEEEEE; height: 500px;"></div>
            </div>
<!--             <div class="col-sm-2"></div> -->
        </div>
    </div>
</div>
<div class="box_others">
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-10 offset-sm-1 remove-le">
                @if (count($listTopic) > 0)
                <div class="row trendding">
                    <div class="col-sm-12">
                        <h2 class="text-center text-uppercase">{{ __('messages.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 text-uppercase">{{ __('messages.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 type="text/javascript">
    $(document).ready(function(){
        $("body").mouseup(function(e) {
            var subject = $("#dropdown-result");
            if (e.target.id != subject.attr('id') && !subject.has(e.target).length) {
                $('.dropdown-result-search').hide();
            }
        });

        $('.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 + '&search=' + name;
        });

        $('#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);
        
        $('.ajax_waiting').removeClass("loading");
    });

   //ADDRESS SEARCH
    var currentIndex = 0;
    var ArrayData = [];
    var stringLength = 18;


    // add data to find address
    var storedData = localStorage.getItem("ArrayData");
    var latDefault = localStorage.getItem("latDefault");
    var lngDefault = localStorage.getItem("lngDefault");
    var regionDefault = localStorage.getItem("regionDefault");
    var iconDefault = localStorage.getItem("iconDefault");
    var temperatureDefault = localStorage.getItem("temperatureDefault");
    
    // Add to Default
    var html = '';
    html += '<li>';
        html += '<a href="'+url + 'lat=' + latDefault + '&lng=' + lngDefault + '&search=' + regionDefault+'">';
            html += '<img class="icon-summary" src="'+iconDefault+'" width="25" height="25" alt="'+ regionDefault +'-location">';
            html += '<span class="currentTemperature">'+temperatureDefault+'</span>';
            html += '<span class="address">';
            if(regionDefault.length > stringLength){
                html += regionDefault.substring(0,stringLength) + '...';
            }else{
                html += regionDefault;
            }
            html += '</span>';
        html += '</a>';

    html += '</li>';
    // end add item
    $('#address-search-default .link').append(html);


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

</script>
@include('layouts.handling-general')
<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>

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