@extends('layouts.app')
@section('content')
<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 type="text/javascript">

    var categories = [
                        "{{ __('messages.mon') }}",
                        "{{ __('messages.tue') }}",
                        "{{ __('messages.wed') }}",
                        "{{ __('messages.thu') }}",
                        "{{ __('messages.fri') }}",
                        "{{ __('messages.sat') }}",
                        "{{ __('messages.sun') }}",
                        "{{ __('messages.mon') }}",
                        "{{ __('messages.tue') }}",
                        "{{ __('messages.wed') }}",
                        "{{ __('messages.thu') }}",
                        "{{ __('messages.fri') }}",
                        "{{ __('messages.sat') }}",
                        "{{ __('messages.sun') }}"
                    ];

    var categories_speacial = [
                        "{{ __('messages.mon') }}",
                        "{{ __('messages.tue') }}",
                        "{{ __('messages.wed') }}",
                        "{{ __('messages.thu') }}",
                        "{{ __('messages.fri') }}",
                        "{{ __('messages.sat') }}",
                        "{{ __('messages.sun') }}",
                        "{{ __('messages.mon') }}",
                        "{{ __('messages.tue') }}",
                        "{{ __('messages.wed') }}",
                        "{{ __('messages.thu') }}",
                        "{{ __('messages.fri') }}",
                        "{{ __('messages.sat') }}",
                        "{{ __('messages.sun') }}"
                    ];
    var dateOfWeek = {{ $dateOfWeek }};

    @for($i = $dateOfWeek - 1; $i < 6 + $dateOfWeek ; $i++)
        categories_speacial[{{ $i }}] = "{{ $templow[$i - $dateOfWeek + 1] }} <br /> " + categories_speacial[{{ $i }}];
    @endfor

</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($api->currently->icon) }}" type="video/mp4">
        </video>
        <img id="myImage" src="{{ url('/') }}/images/{{ \App\Common\Helper::GetBackgoundImage($api->currently->icon) }}" 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 id="dropdown-result" 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;">
                            <ul>
                            </ul>
                        </div>
                    </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 class="word-break"><a href="{{ url('/global') }}?{{ $param }}">{{ __('messages.global') }}</a></li>
                        <li class="active 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="word-break"><a href="{{ url('/global') }}">{{ __('messages.global') }}</a></li>
                        <li class="active 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 class="table-weather">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="text-center" id="time-info">
                                    <p class="time" id="currentDate">{{ \App\Common\Helper::ConvertUnit2TimeSpecial($api->currently->time, $api->timezone, $date_time_format[2][!isset($_SESSION["setting_d"]) ? 0 : $_SESSION["setting_d"]]) }}</p>
                                                                        <p class="time-hour" id="currentHour">--:--</p>
                                </th>
                                <th class="text-center" id="template-info">
                                    <p class="temperature"><span id="currentTemperature">{!! \App\Common\Helper::ConvertTemperature($api->hourly->data[0]->temperature, $_SESSION["setting_tp"]) !!} </span></p>
                                </th>
                                <th class="text-center" id="summary-info">
                                    <img id="icon-summary" src="{{ url('/') }}/images/{{ \App\Common\Helper::GetIcon($api->currently->icon) }}" width="110" height="110" alt="{{ \App\Common\Helper::returnMessage($api->currently->summary) }}">
                                    <p class="text-summary">
                                    {{ \App\Common\Helper::returnMessage($api->currently->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">{!! \App\Common\Helper::ConvertTemperature($api->daily->data[0]->temperatureMin, $_SESSION["setting_tp"]) !!}</div>
                                        <div class="word-break">{{ __('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">{!! \App\Common\Helper::ConvertTemperature($api->daily->data[0]->temperatureMax, $_SESSION["setting_tp"]) !!}</div>
                                        <div class="word-break">{{ __('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) {{ $api->currently->precipProbability * 100 }}%</div>
                                        <div class="word-break">{{ __('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">{{ \App\Common\Helper::ConvertWindSpeed($api->currently->windSpeed, $_SESSION["setting_w"]) }}</div>
                                        <div class="word-break">{{ __('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">{{ \App\Common\Helper::GetWindDirection($api->currently->windSpeed) }}</div>
                                        <div class="word-break">{{ __('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">{{ $api->currently->cloudCover * 100 }}%</div>
                                        <div class="word-break">{{ __('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">
                                        @if(isset($api->daily->data[0]->sunriseTime))
                                        <div class="font-weight-500">{{ \App\Common\Helper::ConvertUnit2Time($api->daily->data[0]->sunriseTime, $api->timezone, 'H:m') }}</div>
                                        <div class="word-break">{{ __('messages.sunrise') }}</div>
                                        @else
                                        <div class="font-weight-500">00:00</div>
                                        <div class="word-break">{{ __('messages.sunrise') }}</div>
                                        @endif
                                    </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">
                                        @if(isset($api->daily->data[0]->sunsetTime))
                                        <div class="font-weight-500">{{ \App\Common\Helper::ConvertUnit2Time($api->daily->data[0]->sunsetTime, $api->timezone, 'H:m') }}</div>
                                        @else
                                        <div class="font-weight-500">00:00</div>
                                        @endif
                                        <div class="word-break">{{ __('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">{!! \App\Common\Helper::ConvertTemperature($api->currently->dewPoint, $_SESSION["setting_tp"]) !!}</div>
                                        <div class="word-break">{{ __('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">{{ $api->currently->uvIndex }} (High)</div>
                                        <div class="word-break">{{ __('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">{{ $api->currently->humidity * 100 }}%</div>
                                        <div class="word-break">{{ __('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">{!! \App\Common\Helper::ConvertPrecipitation($api->currently->precipIntensity, $_SESSION["setting_pc"]) !!}</div>
                                        <div class="word-break">{{ __('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">{!! \App\Common\Helper::ConvertTemperature($api->currently->apparentTemperature, $_SESSION["setting_tp"]) !!}</div>
                                        <div class="word-break">{{ __('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">{{ $api->currently->ozone }}</div>
                                        <div class="word-break">{{ __('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">{{ \App\Common\Helper::ConvertPressure($api->currently->pressure, $_SESSION["setting_ps"]) }}</div>
                                        <div class="word-break">{{ __('messages.pressure') }}</div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
<!--             <div class="col-sm-2"></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">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#next-24h">{{ __('messages.next_24h') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#next-7days">{{ __('messages.next_7_days') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#graph">{{ __('messages.graph') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#moon">{{ __('messages.moon_phase') }}</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div id="next-24h" class="container tab-pane active">
                        <div class="row tab-detail">
                            @for($i=0; $i < 24; $i=$i+3)
                            <div class="col-6 col-sm-3">
                                <div class="item">
                                    @if($_SESSION["setting_t"] == 12)
                                    <span>
                                        {{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($api->hourly->data[$i]->time, $api->timezone, 'h')) }}:00
                                        {{ __('messages.'.\App\Common\Helper::ConvertUnit2Time($api->hourly->data[$i]->time, $api->timezone, 'A')) }}
                                    </span>
                                    @else
                                    <span>
                                        {{ sprintf("%02d", \App\Common\Helper::ConvertUnit2Time($api->hourly->data[$i]->time, $api->timezone, 'H')) }}:00
                                    </span>
                                    @endif
                                    <img data-original="{{ url('/') }}/images/{{ \App\Common\Helper::GetIcon($api->hourly->data[$i]->icon) }}" alt="{{ $api->hourly->data[$i]->summary.'-'.time() }}">
                                    @if(!isset($_SESSION["setting_tp"]) || $_SESSION["setting_tp"] == 'c')
                                    <span>{!! \App\Common\Helper::ConvertTemperature($api->hourly->data[$i]->temperature) !!}</span>
                                    @else
                                    <span>{!! \App\Common\Helper::ConvertTemperature($api->hourly->data[$i]->temperature, 'f') !!}</span>
                                    @endif
                                    <span class="hourly-summary">{{ \App\Common\Helper::returnMessage($api->currently->summary) }}</span>
                                </div>
                            </div>
                            @endfor
                            <div class="col-sm-12">
                                <div class="btn-detail text-center">
                                    <button type="button" class="btn btn-primary toh" id="detail-24">{{ __('messages.detail') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="next-7days" class="container tab-pane fade">
                        <div class="row tab-detail">
                            @foreach($api->daily->data as $k=>$da)
                            <div class="col-6 col-sm-3">
                                <div class="item">
                                    @if($k == 0)
                                                                        @else