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

<div class="template-detail-hourly-weather" style="background-color: #000000;">	
	<div class="image-background">
			    	<video autoplay muted loop id="myVideo">
	        		<source src="{{ url('/') }}/videos/{{ \App\Common\Helper::GetBackgoundVideo($icon) }}" type="video/mp4">
	    	</video>
	    	<img id="myImage" src="{{ url('/') }}/images/{{ \App\Common\Helper::GetBackgoundImage($icon) }}" width="100%" height="100%">
	</div>
	<div class="box_1 home-page">
	    <div class="container">
	        <div class="row">
	            <div class="col-12 col-sm-10 offset-sm-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="content">
	    <div class="container">
	    	<div class="row">
	    		<div class="col-sm-12 col-md-10 offset-md-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 id="global-link" href="{{ url('/global') }}?{{ $param }}">{{ __('messages.global') }}</a></li>
	                        <li class="word-break"><a id="current-link" href="{{ url('/current') }}?{{ $param }}">{{ __('messages.current_weather') }}</a></li>
	                        <li class="active word-break"><a id="24hours-link" href="{{ url('/24hours') }}?{{ $param }}">{{ __('messages.hourly') }}</a></li>
	                        <li class="word-break"><a id="5days-link" href="{{ url('/5days') }}?{{ $param }}">{{ __('messages.5_days') }}</a></li>
	                        <li class="word-break"><a id="weekend-link" 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="word-break"><a id="global-link" href="{{ url('/global') }}">{{ __('messages.global') }}</a></li>
	                        <li class="word-break"><a id="current-link" href="{{ url('/current') }}">{{ __('messages.current_weather') }}</a></li>
	                        <li class="active word-break"><a id="24hours-link" href="{{ url('/24hours') }}">{{ __('messages.hourly') }}</a></li>
	                        <li class="word-break"><a id="5days-link" href="{{ url('/5days') }}">{{ __('messages.5_days') }}</a></li>
	                        <li class="word-break"><a id="weekend-link" 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 class="title text-center">
						<div class="city">                            	
							@if(isset($_GET['ts']))
							<span>{{ __('messages.hourly_weather') }}</span>
	    					@else
	    					<span>{{ __('messages.next_24h_weather') }}</span>
	    					@endif
<!-- 							@if(isset($_GET['search']))
	    					<span>{{ $_GET['search'] }}, {{ $city . ' ' . $state . ' ' . $country }}</span>
	    					@endif -->
						</div>
<!-- 	    				<div class="time">{{ \App\Common\Helper::ConvertUnit2TimeSpecial($timeStamp, $timezone, $date_time_format[2][!isset($_SESSION["setting_d"]) ? 0 : $_SESSION["setting_d"]]) }}</div> -->
	    			</div>
	    			<div class="detail table-weather">
	    				
	    				@foreach($data->data as $k=>$hour)

						@if ($k == 0)
		    				<div class="title-time text-center">
		    					<div class="time">{{ \App\Common\Helper::ConvertUnit2TimeSpecial($hour->time, $timezone, $date_time_format[2][!isset($_SESSION["setting_d"]) ? 0 : $_SESSION["setting_d"]]) }}</div>
		    				</div>
	    				@else
		    				
							@if ($day != $day_compare && $check == false)
					</div>
	    			<div class="detail table-weather special">
		    				<div class="title-time text-center">
		    					<div class="time final">{{ \App\Common\Helper::ConvertUnit2TimeSpecial($hour->time, $timezone, $date_time_format[2][!isset($_SESSION["setting_d"]) ? 0 : $_SESSION["setting_d"]]) }}</div>
		    				</div>
		    						    				@endif
	    				
	    				@endif


	    				@if($k == 24) @break @endif
                        <div class="row">
	                        <div class="col-6 col-sm-6 col-lg-6">
                            	<div class="image-day">
	                            	<img data-original="{{ url('/') }}/images/{{ \App\Common\Helper::GetIcon($hour->icon) }}" height="140px" alt="{{ \App\Common\Helper::returnMessage($hour->summary) }}-{{ $k }}"> 
	                            </div>
	                            <div class="time">
	                            @if($_SESSION["setting_t"] == 12)
	                                <div class="text-left font-weight-500 hour-in-day" data-time="{{ $hour->time }}">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($hour->time, $timezone, "h") )}}:00
	                                {{ __('messages.'.\App\Common\Helper::ConvertUnit2Time($hour->time, $timezone, 'A')) }}</div>
	                                <div class="text-left font-weight-normal summary-text">{{ \App\Common\Helper::returnMessage($hour->summary) }}</div>
	                            @else
	                                <div class="text-left font-weight-500 hour-in-day" data-time="{{ $hour->time }}">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($hour->time, $timezone, "H")) }}:00
	                                </div>
	                                <div class="text-left font-weight-normal summary-text">{{ \App\Common\Helper::returnMessage($hour->summary) }}</div>
	                            @endif
	                            </div>
	                        </div>
	                        <div class="col-3 col-sm-3 col-lg-2">
	                        	<div class="chance_of_rain">
		                            <img data-original="{{ url('/') }}/images/ic_detail_humidity_big@2x.png" alt="chance of rain-{{ $k }}"> 
		                            <div class="percent font-weight-500">
		                                {{ $hour->precipProbability * 100 }}%
		                            </div>
	                            </div>
	                        </div>
	                        <div class="col-3 col-sm-3 offset-lg-1 col-lg-3">
	                            <div class="temperature-hour">
	                                {!! \App\Common\Helper::ConvertTemperature($hour->temperature, $_SESSION["setting_tp"]) !!}
	                            </div>
	                        </div>
                        </div>
                        <table class="table">
	                        <tbody>
	                            <tr>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_humidity@2x.png" height="40" alt="{{ __('messages.humidity') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
		                                    <div class="font-weight-500">{{ $hour->humidity * 100 }}%</div>
		                                    <div>{{ __('messages.humidity') }}</div>
										</div>
	                                </td>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_precipitation@2x.png" height="40" alt="{{ __('messages.precipitation') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
		                                    <div class="font-weight-500">{!! \App\Common\Helper::ConvertPrecipitation($hour->precipIntensity, $_SESSION["setting_pc"]) !!}</div>
		                                    <div>{{ __('messages.precipitation') }}</div>
										</div>
	                                </td>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_feel_like@2x.png" height="40" alt="{{ __('messages.feel_like') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
		                                    <div class="font-weight-500">{!! \App\Common\Helper::ConvertTemperature($hour->apparentTemperature, $_SESSION["setting_tp"]) !!}</div>
		                                    <div>{{ __('messages.feel_like') }}</div>
										</div>
	                                </td>
	                            </tr>
	                            <tr>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_sunrise@2x.png" height="40" alt="{{ __('messages.sunrise') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
					@if($_SESSION["setting_t"] == 12)
					<div class="font-weight-500">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($sunrise, $timezone, "h:m") )}}:00
					{{  __("messages.AM") }}</div>
					@else
					<div class="font-weight-500">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($sunrise, $timezone, "H:m")) }}:00
					</div>
					@endif
		                                    <div>{{ __('messages.sunrise') }}</div>
				</div>
	                                </td>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_sunset@2x.png" height="36" alt="{{ __('messages.sunset') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
		                                    @if($_SESSION["setting_t"] == 12)
					<div class="font-weight-500">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($sunset, $timezone, "h") )}}:00
					{{  __("messages.PM") }}</div>
					@else
					<div class="font-weight-500">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($sunset, $timezone, "H")) }}:00
					</div>
					@endif
		                                    <div>{{ __('messages.sunset') }}</div>
										</div>
	                                </td>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_ozone@2x.png" height="28" class="ic_detail_ozone" alt="{{ __('messages.ozone') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
		                                    <div class="font-weight-500">{{ $hour->ozone }}</div>
		                                    <div>{{ __('messages.ozone') }}</div>
										</div>
	                                </td>
	                            </tr>
	                            <tr>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_cloud@2x.png" height="26" class="ic_detail_cloud" alt="{{ __('messages.cloud_cover') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
		                                    <div class="font-weight-500">{{ $hour->cloudCover * 100 }}%</div>
		                                    <div>{{ __('messages.cloud_cover') }}</div>
										</div>
	                                </td>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_pressure@2x.png" height="40" alt="{{ __('messages.pressure') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
		                                    <div class="font-weight-500">{{ \App\Common\Helper::ConvertPressure($hour->pressure, $_SESSION["setting_ps"]) }}</div>
		                                    <div>{{ __('messages.pressure') }}</div>
										</div>
	                                </td>
	                                <td>
	                                	<div class="icon">
	                                    	<img data-original="{{ url('/') }}/images/ic_detail_dew.png" height="42" alt="{{ __('messages.dew_point') }}-{{ $k }}">
	                                    </div>
	                                    <div class="info clearfix">
		                                    <div class="font-weight-500">{!! \App\Common\Helper::ConvertTemperature($hour->dewPoint, $_SESSION["setting_tp"]) !!}</div>
		                                    <div>{{ __('messages.dew_point') }}</div>
										</div>
	                                </td>
	                            </tr>
	                        </tbody>
	                    </table>
	                    <hr>
	                    @endforeach
	    			</div>
    			</div>
			</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();
            }
        });

      $('.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