@extends('layouts.app')
@section('content')

<style type="text/css">
    .zoom-in, .zoom-out { 
        display: block;
        width: 23px;
        height: 23px;
/*        background-color: #fff;*/
        border-radius: 4px;
        position: absolute;
        top: 10px;
        margin-left: 10px;
        cursor: pointer;
    }
    .zoom-in:hover, .zoom-out:hover{
        transform: scale(1.05); 
    }
    .zoom-in { 
        background-image: url(../images/fullscreen.png);
    }
    .zoom-out { 
        background-image: url(../images/minimize.png);
    }
</style>
<div class="box_1 home-page clearfix" 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-12 col-md-10 offset-md-1 remove-le">
                <div class="group-search clearfix">
                    <div class="img-location" id="get-current-location">
                        <img data-original="{{ 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 data-original="{{ 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 data-original="{{ url('/') }}/images/search_search@2x.png" width="39px" height="39px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="box_2 radar-page clearfix" 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="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="active word-break"><a href="{{ url('/radar') }}?{{ $param }}">{{ __('messages.radar') }}</a></li>
                        @endif
                        @else
                        <li class="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="active word-break"><a href="{{ url('/radar') }}">{{ __('messages.radar') }}</a></li>
                        @endif
                        @endif
                    </ul>
                </div>
            </div>
<!--             <div class="col-sm-1"></div> -->
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-10 offset-sm-1 remove-le">
                <div class="detail-radar">
                    <div class="height">
                        <div class="zoom-in" id="full-radar"></div>
                        <iframe src="{{ url('/') }}/radar-web?search={{ $_GET['search'] }}&lat={{ $_GET['lat'] }}&lng={{ $_GET['lng'] }}" frameborder="0" class="full-page-holder"></iframe>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</div>

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

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

    $('iframe').on('load', function(){
       $('.ajax_waiting').removeClass("loading");
    });

    var fullscreen = false;

    $('#full-radar').click(function(){
        if(!fullscreen){
            $('.full-page-holder').css('width', '100%');
            $('.full-page-holder').css('height', '100%');
            $('.full-page-holder').css('position', 'fixed');
            $('.full-page-holder').css('top', '0');
            $('.full-page-holder').css('left', '0');
            $('.full-page-holder').css('z-index', '99999');

            $('.zoom-in').css('position', 'fixed');
            $('.zoom-in').css('top', '10px');
            $('.zoom-in').css('left', '10px');
            $('.zoom-in').css('z-index', '999999');

            // width: 100%;
            // margin: 10px auto;
            // position: fixed;
            // z-index: 11;
            // top: 25px;
            // left: 30px;

            // $('.group-search').css('position', 'fixed');
            // $('.group-search').css('z-index', '11');
            // $('.group-search').css('top', '25px');
            // $('.group-search').css('left', '25px');


            fullscreen = true;
            $('#full-radar').removeClass('zoom-in');
            $('#full-radar').addClass('zoom-out');
        }else{
            $('.full-page-holder').css('width', '100%');
            // if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
            //     $('.full-page-holder').css('height', '500px');
            // } else {
            //     $('.full-page-holder').css('height', 'auto');
            // }
            $('.full-page-holder').css('position', 'initial');
            $('.full-page-holder').css('top', '0');
            $('.full-page-holder').css('left', '0');
            $('.full-page-holder').css('z-index', '10');

            $('.zoom-out').css('position', 'absolute');
            $('.zoom-out').css('top', '10px');
            $('.zoom-out').css('left', '10px');
            $('.zoom-out').css('z-index', '999999');
            $('#full-radar').removeClass('zoom-out');
            $('#full-radar').addClass('zoom-in');
            // $('.group-search').css('position', 'initial');
            // $('.group-search').css('z-index', '11');
            // $('.group-search').css('top', '25px');
            // $('.group-search').css('left', '25px');

            fullscreen = false;
        }
    });

    /*
    // full iframe
    var button = document.querySelector('#full-radar');
    button.addEventListener('click', fullscreen);
    // when you are in fullscreen, ESC and F11 may not be trigger by keydown listener. 
    // so don't use it to detect exit fullscreen
    document.addEventListener('keydown', function (e) {
      console.log('key press' + e.keyCode);
    });
    // detect enter or exit fullscreen mode
    document.addEventListener('webkitfullscreenchange', fullscreenChange);
    document.addEventListener('mozfullscreenchange', fullscreenChange);
    document.addEventListener('fullscreenchange', fullscreenChange);
    document.addEventListener('MSFullscreenChange', fullscreenChange);

    function fullscreen() {
      // check if fullscreen mode is available
      if (document.fullscreenEnabled || 
        document.webkitFullscreenEnabled || 
        document.mozFullScreenEnabled ||
        document.msFullscreenEnabled) {
        
        // which element will be fullscreen
        var iframe = document.querySelector('iframe');
        // Do fullscreen
        if (iframe.requestFullscreen) {
          iframe.requestFullscreen();
        } else if (iframe.webkitRequestFullscreen) {
          iframe.webkitRequestFullscreen();
        } else if (iframe.mozRequestFullScreen) {
          iframe.mozRequestFullScreen();
        } else if (iframe.msRequestFullscreen) {
          iframe.msRequestFullscreen();
        }
      }
      else {
        document.querySelector('.error').innerHTML = 'Your browser is not supported';
      }
    }

    function fullscreenChange() {
      if (document.fullscreenEnabled ||
           document.webkitIsFullScreen || 
           document.mozFullScreen ||
           document.msFullscreenElement) {
        console.log('enter fullscreen');
      }
      else {
        console.log('exit fullscreen');
      }
      // force to reload iframe once to prevent the iframe source didn't care about trying to resize the window
      // comment this line and you will see
      var iframe = document.querySelector('iframe');
      iframe.src = iframe.src;
    }
    */

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

@endsection