@extends('layouts.app')
@section('content')
            <div class="ajax_waiting"></div>
        <script type="text/javascript">
            @if(false){
                $.ajax({
                    method : "GET",
                    url: "https://ipfind.co/me?auth={{ $key }}",
                    dataType: "json",
                    beforeSend: function() {
                        $('.ajax_waiting').addClass("loading");
                    },
                    success: function(response) {
                        var XSearch = '';
                        if(response.region == null) XSearch = response.county;
                        if(response.county == null) XSearch = response.city;
                        if(response.city == null) XSearch = response.country;
                        localStorage.setItem("HomeSearch", XSearch); 
                        localStorage.setItem("regionDefault", XSearch); 
                        localStorage.setItem("latDefault", response.latitude);
                        localStorage.setItem("lngDefault", response.longitude);
                        $.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') }}",
                            // dataType: "json",
                            data: data,
                            success: function(response) {
                              $('.ajax_waiting').removeClass("loading");
                                //location.reload();
                            },
                            error: function(data) {
                                console.log('Error:', data);
                            }
                        });

                        window.location.href = location.href.split("?")[0] + "/current?lat=" + response.latitude + '&lng=' + response.longitude + '&search=' + XSearch;
                    },
                    error: function(data) {
                        console.log('Error:', data);
                    }
                });
            @else
                    XSearch = "Viet Nam";
                    localStorage.setItem("HomeSearch", XSearch); 
                    localStorage.setItem("regionDefault", XSearch); 
                    localStorage.setItem("latDefault", 16);
                    localStorage.setItem("lngDefault", 106);
                    $.ajaxSetup(
                        {
                          headers:
                          {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    var data = {
                        lat: 16,
                        lng: 106,
                    };
                    $.ajax({
                        method : "POST",
                        url: "{{ route('createdSession') }}",
                        // dataType: "json",
                        data: data,
                        success: function(response) {
                          $('.ajax_waiting').removeClass("loading");
                            //location.reload();
                        },
                        error: function(data) {
                            console.log('Error:', data);
                        }
                    });

                    window.location.href = location.href.split("?")[0] + "/current?lat=" + 16 + '&lng=' + 106 + '&search=' + XSearch;
            @endif

            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>
        <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::GetBackgoundVideo($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 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>
                            <div class="img-search" id="searchbutton">
                                <img src="{{ url('/') }}/images/search_search@2x.png" width="39px" height="39px">
                            </div>
                        </div>
                        @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><a href="{{ url('/global') }}?{{ $param }}">{{ __('messages.global') }}</a></li>
                                <li class="active"><a href="{{ url('/current') }}?{{ $param }}">{{ __('messages.current_weather') }}</a></li>
                                <li><a href="{{ url('/24hours') }}?{{ $param }}">{{ __('messages.hourly') }}</a></li>
                                <li><a href="{{ url('/5days') }}?{{ $param }}">{{ __('messages.5_days') }}</a></li>
                                <li><a href="{{ url('/weekend') }}?{{ $param }}">{{ __('messages.weekend') }}</a></li>
                                @if($location != "VN")
                                <li><a id="radar-link" href="{{ url('/radar') }}?{{ $param }}">{{ __('messages.radar') }}</a></li>
                                @endif
                                @else
                                
                                <li><a href="{{ url('/global') }}">{{ __('messages.global') }}</a></li>
                                <li class="active"><a href="{{ url('/current') }}">{{ __('messages.current_weather') }}</a></li>
                                <li><a href="{{ url('/24hours') }}">{{ __('messages.hourly') }}</a></li>
                                <li><a href="{{ url('/5days') }}">{{ __('messages.5_days') }}</a></li>
                                <li><a href="{{ url('/weekend') }}">{{ __('messages.weekend') }}</a></li>
                                @if($location != "VN")
                                <li><a id="radar-link" href="{{ url('/radar') }}">{{ __('messages.radar') }}</a></li>
                                @endif
                                @endif
                            </ul>
                        </div>
                        <div class="table-weather">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th class="text-center" id="time-info">
                                            <p class="time" id="currentDate">--/--/--</p>
                                            <p class="time-hour" id="currentHour">--:--</p>
                                        </th>
                                        <th class="text-center" id="template-info">
                                            <p class="temperature"><span id="currentTemperature">-- <sup>o</sup>C</p>
                                        </th>
                                        <th class="text-center" id="summary-info">
                                            <img id="icon-summary" src="{{ url('/') }}/images/weather_mostlycloudy@2x.png" width="110" height="110" alt="">
                                            <p class="text-summary">
                                            --
                                            </p>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_min-temp@2x.png" height="44" alt="{{ __('messages.min_temperature') }}">
                                            </div>
                                            <div class="info clearfix">                                    
                                                <div class="font-weight-500">-- <sup>o</sup>C</div>
                                                <div>{{ __('messages.min_temperature') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_max-temp@2x.png" height="44" alt="{{ __('messages.max_temperature') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- <sup>o</sup>C</div>
                                                <div>{{ __('messages.max_temperature') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_rain@2x.png" height="44" alt="{{ __('messages.chance_of_rain') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">(Rain)  -- %</div>
                                                <div>{{ __('messages.chance_of_rain') }}</div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_windspeed@2x.png" height="44" alt="{{ __('messages.wind_speed') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- mph</div>
                                                <div>{{ __('messages.wind_speed') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_wind_directio@2x.png" height="44" alt="{{ __('messages.wind_direction') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">--</div>
                                                <div>{{ __('messages.wind_direction') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_cloud@2x.png" height="26" class="ic_detail_cloud" alt="{{ 
                                            __('messages.cloud_cover') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- %</div>
                                                <div>{{ __('messages.cloud_cover') }}</div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_sunrise@2x.png" height="40" alt="{{ __('messages.sunrise') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- : --</div>
                                                <div>{{ __('messages.sunrise') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_sunset@2x.png" height="36" alt="{{ __('messages.sunset') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- : --</div>
                                                <div>{{ __('messages.sunset') }}</div>
                                            </div>  
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_dew.png" height="42" alt="{{ __('messages.dew_point') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- <sup>o</sup>C</div>
                                                <div>{{ __('messages.dew_point') }}</div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_uv@2x.png" height="40" alt="{{ __('messages.uv_index') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- (High)</div>
                                                <div>{{ __('messages.uv_index') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_humidity@2x.png" height="40" alt="{{ __('messages.humidity') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- %</div>
                                                <div>{{ __('messages.humidity') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_precipitation@2x.png" height="40" alt="{{ __('messages.precipitation') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500"> -- in</div>
                                                <div>{{ __('messages.precipitation') }}</div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_feel_like@2x.png" height="40" alt="{{ __('messages.feel_like') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- <sup>o</sup>C</div>
                                                <div>{{ __('messages.feel_like') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_ozone@2x.png" height="28" class="ic_detail_ozone" alt="{{ __('messages.ozone') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">--</div>
                                                <div>{{ __('messages.ozone') }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="icon">
                                                <img src="{{ url('/') }}/images/ic_detail_pressure@2x.png" height="40" alt="{{ __('messages.pressure') }}">
                                            </div>
                                            <div class="info clearfix">
                                                <div class="font-weight-500">-- mbar</div>
                                                <div>{{ __('messages.pressure') }}</div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<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