@extends('layouts.app')
@section('content')
<div class="template-detail-weekly-weather" style="background-color: #000000ad;">	
    <div class="image-background">
        @foreach($data->data as $k => $day)
	@if ( \App\Common\Helper::ConvertUnit2Time($day->time, $timezone, 'l') == 'Saturday')
		@endif
	@endforeach
	<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 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 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="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="active 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="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="active 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">
							<span>{{ __('messages.weekend_weather') }}</span>
<!-- 	    					@if(isset($_GET['search']))
	    					<span>{{ $_GET['search'] }}, {{ $city . ' ' . $state . ' ' . $country }}</span>
	    					@endif -->
						</div>
	    			</div>
	    			<div class="detail table-weather">
	    				@foreach($data->data as $k => $day)
	    				@if ( \App\Common\Helper::ConvertUnit2Time($day->time, $timezone, 'l') == 'Saturday' || \App\Common\Helper::ConvertUnit2Time($day->time, $timezone, 'l') == 'Sunday' )
	    				<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($day->icon) }}" height="150px" alt="{{ \App\Common\Helper::returnMessage($day->summary) }}-{{ $k }}"> 
	                            </div>
	                            <div class="time">
	                            	@if($k == 0)
	                            	<div class="text-left font-weight-500 day-in-week" data-time="{{ $day->time }}">{{ __('messages.Today') }}</div>
	                            	@else
	                                <div class="text-left font-weight-500 day-in-week" data-time="{{ $day->time }}">{{ __('messages.'.\App\Common\Helper::ConvertUnit2Time($day->time, $timezone, 'l')) }}</div>
	                                @endif
	                                <div class="text-left font-weight-normal summary-text">{{ \App\Common\Helper::returnMessage($day->summary) }}</div>
	                            </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" height="40px" alt="chance of rain-{{ $k }}"> 
		                            <div class="percent font-weight-500">
		                                {{ $day->precipProbability * 100 }}%
		                            </div>
	                            </div>
	                        </div>
	                        <div class="col-3 col-sm-3 offset-lg-1 col-lg-3">
	                            <div class="temperature-day temperature-low">
	                                {!! \App\Common\Helper::ConvertTemperature($day->temperatureMin, $_SESSION["setting_tp"]) !!}
	                            </div>
	                            <div class="temperature-day">
	                                {!! \App\Common\Helper::ConvertTemperature($day->temperatureMax, $_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">{{ $day->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($day->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(($day->apparentTemperatureMin + $day->apparentTemperatureMax) / 2, $_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(isset($day->sunriseTime))
					@if($_SESSION["setting_t"] == 12)
					<div class="font-weight-500">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($day->sunriseTime, $timezone, "h:m") )}}:00
					{{  __("messages.AM") }}</div>
					@else
					<div class="font-weight-500">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($day->sunriseTime, $timezone, "H:m")) }}:00
					</div>
					@endif
				@else
					<div class="font-weight-500">00: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(isset($day->sunsetTime))
		                                    @if($_SESSION["setting_t"] == 12)
					<div class="font-weight-500">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($day->sunsetTime, $timezone, "h:m") )}}:00
					{{  __("messages.PM") }}</div>
					@else
					<div class="font-weight-500">{{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($day->sunsetTime, $timezone, "H:m")) }}:00
					</div>
					@endif
				@else
					<div class="font-weight-500">00: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">{{ $day->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">{{ $day->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($day->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($day->dewPoint, $_SESSION["setting_tp"]) !!}</div>
		                                    <div>{{ __('messages.dew_point') }}</div>
										</div>
	                                </td>
	                            </tr>
	                        </tbody>
	                    </table>
	                    <hr>
	    				@endif
	                    @endforeach
	    			</div>
    			</div>
    			<div class="col-sm-1"></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();
            }
        });

		$('.day-in-week').click(function(){
			var time = $(this).attr('data-time');
			window.location.href = "{{ url('/') }}/24hours/" + window.location.search + '&ts=' + time
		});
		$('.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