@extends('frontend.layouts.plain')

@section('title')
    CUrW Weather Stations
@endsection

@section('meta')
    <meta http-equiv="refresh" content="300">
@endsection

@section('after-styles')
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <style>
        .container-fluid {
            /*padding: 0px 3px;*/
            margin: 0px;
        }

        .container-fluid a .row {
            /*width: 100%;*/
            line-height: 24px;
            display: block;
            padding: 2px 0px;
            margin-bottom: -10px;
            margin-top: -5px;
        }

        .col-md-3.s-name {
            width: 16%;
            padding-left: 5px;
            padding-right: 2px;
        }

        .col-md-1.temp {
            width: 8%;
            padding-left: 5px;
            padding-right: 5px;
        }

        .col-md-3.preci-1 {
            width: 20%;
        }

        .col-md-3.preci-2 {
            width: 20%;
        }

        .col-md-3.preci-3 {
            width: 20%;
        }

        .col-md-2.updated {
            width: 15%;
            padding-right: 3px;
        }
    </style>
@endsection

@section('content')

    <div class="container-fluid" style="padding-top: 10px;">

        <div class="" style="margin-bottom: 10px; margin-top: -5px;">
            <h5 class="h5 text-center text-uppercase">
                <i class="fas fa-tachometer-alt"></i> CUrW Weather Stations (Internal)
            </h5>
        </div>

        @foreach($stations as $station)
            {{--@if($station['name'] !== 'Kohuwala')--}}

            <div class="text-center" style="margin-bottom: -3px">

                @if($station['color'] == 'red')
                    <a href="{{route('frontend.dynamic.past.int.ws', ['station' => $station['name'], 'start_date' => $date, 'end_date' => $date ])}}"
                       class="my-card text-center"
                       style="text-decoration: none; background-color: #a35f06; color: #ffffff">
                    <span class="row card-raised"
                          style="font-size: 18px; background-color: #a35f06; color: #ffffff">
                    <span class="col-md-3 text-left s-name" style="font-size: 16px;">
                    <i class="fas fa-frown"></i> @if($station['name'] == 'Kottawa North Dharmapala School')
                            Kottawa @else {{ $station['name'] }} @endif
                    <small style="font-size: 12px;">({{ $station['source'] }})</small>
                    </span>
                    <span class="col-md-1 text-center temp"
                          style="border-left: 3px solid #ffffff; border-left: 1px solid #ffffff; height: auto;">
                    @if($station['temperature'] !== null)
                            <i class="fas fa-thermometer-three-quarters"></i> {{ $station['temperature'] }}
                            <sup>&#8451;</sup>
                        @else
                            NA
                        @endif
                    </span>
                    <span class="col-md-3 text-left preci-1"
                          style="border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; height: auto;">
                    <i class="fas fa-cloud"></i> {{ $station['precipitation_1h'] }}
                    mm
                    <small style="font-size: 13px;">(Last hour)</small>
                    </span>
                    <span class="col-md-3 text-left preci-2"
                          style="border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; height: auto;">
                    <i class="fas fa-cloud"></i> {{ $station['precipitation_3h'] }}
                    mm
                    <small style="font-size: 13px;">(Last 3 hours)</small>
                    </span>
                    <span class="col-md-3 text-left preci-2">
                    <i class="fas fa-cloud"></i> {{ $station['precipitation_24h'] }}
                    mm
                    <small style="font-size: 13px;">(Last 24 hours)</small>
                    </span>
                    <span class="col-md-2 text-left updated"
                          style="border-left: 1px solid #ffffff; border-left: 1px solid #ffffff; height: auto; font-size: 13px;">
                    <b>Last Updated:</b> {{ $station['last_updated'] }}
                    </span>
                    </span>
                    </a>
                @elseif($station['color'] == 'orange')
                    <a href="{{route('frontend.dynamic.past.int.ws', ['station' => $station['name'], 'start_date' => $date, 'end_date' => $date ])}}"
                       class="my-card text-center"
                       style="text-decoration: none; background-color: #bfa807; color: #ffffff;">
                    <span class="row card-raised"
                          style="font-size: 18px; background-color: #bfa807; color: #ffffff">
                    <span class="col-md-3 text-left s-name" style="font-size: 16px;">
                    <i class="fas fa-meh"></i> @if($station['name'] == 'Kottawa North Dharmapala School')
                            Kottawa @else {{ $station['name'] }} @endif
                    <small style="font-size: 12px;">({{ $station['source'] }})</small>
                    </span>
                    <span class="col-md-1 text-center temp"
                          style="border-left: 3px solid #ffffff; border-left: 1px solid #ffffff; height: auto;">
                    @if($station['temperature'] !== null)
                            <i class="fas fa-thermometer-three-quarters"></i> {{ $station['temperature'] }}
                            <sup>&#8451;</sup>
                        @else
                            NA
                        @endif
                    </span>
                    <span class="col-md-3 text-left preci-1"
                          style="border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; height: auto;">
                    <i class="fas fa-cloud"></i> {{ $station['precipitation_1h'] }}
                    mm
                    <small style="font-size: 13px;">(Last hour)</small>
                    </span>
                    <span class="col-md-3 text-left preci-2"
                          style="border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; height: auto;">
                    <i class="fas fa-cloud"></i> {{ $station['precipitation_3h'] }}
                    mm
                    <small style="font-size: 13px;">(Last 3 hours)</small>
                    </span>
                    <span class="col-md-3 text-left preci-2">
                    <i class="fas fa-cloud"></i> {{ $station['precipitation_24h'] }}
                    mm
                    <small style="font-size: 13px;">(Last 24 hours)</small>
                    </span>
                    <span class="col-md-2 text-left updated"
                          style="border-left: 1px solid #ffffff; border-left: 1px solid #ffffff; height: auto; font-size: 13px;">
                    <b>Last Updated:</b> {{ $station['last_updated'] }}
                    </span>
                    </span>
                    </a>


                    @elseif($station['color'] == 'green')

                        <a href="{{route('frontend.dynamic.past.int.ws', ['station' => $station['name'], 'start_date' => $date, 'end_date' => $date ])}}"
                           class="my-card text-center"
                           style="text-decoration: none; background-color: #218c2a; color: #ffffff">
                        <span class="row card-raised"
                              style="font-size: 18px; background-color: #218c2a; color: #ffffff">
                        <span class="col-md-3 text-left s-name" style="font-size: 16px;">
                                <i class="fas fa-smile"></i> @if($station['name'] == 'Kottawa North Dharmapala School')
                                Kottawa @else {{ $station['name'] }} @endif
                            <small style="font-size: 12px;">({{ $station['source'] }})</small>
                            </span>
                        <span class="col-md-1 text-center temp"
                              style="border-left: 3px solid #ffffff; border-left: 1px solid #ffffff; height: auto;">
                                @if($station['temperature'] !== null)
                                <i class="fas fa-thermometer-three-quarters"></i> {{ $station['temperature'] }}
                                <sup>&#8451;</sup>
                            @else
                                NA
                            @endif
                            </span>
                        <span class="col-md-3 text-left preci-1"
                              style="border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; height: auto;">
                                <i class="fas fa-cloud"></i> {{ $station['precipitation_1h'] }}
                            mm
                                <small style="font-size: 13px;">(Last hour)</small>
                            </span>
                            <span class="col-md-3 text-left preci-2"
                                  style="border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; height: auto;">
                                    <i class="fas fa-cloud"></i> {{ $station['precipitation_3h'] }}
                                mm
                                    <small style="font-size: 13px;">(Last 3 hours)</small>
                                </span>
                        <span class="col-md-3 text-left preci-2">
                                <i class="fas fa-cloud"></i> {{ $station['precipitation_24h'] }}
                            mm
                                <small style="font-size: 13px;">(Last 24 hours)</small>
                            </span>
                        <span class="col-md-2 text-left updated"
                              style="border-left: 1px solid #ffffff; border-left: 1px solid #ffffff; height: auto; font-size: 13px;">
                                <b>Last Updated:</b> {{ $station['last_updated'] }}
                            </span>
                        </span>
                        </a>
                    @endif

            </div><br>

            {{--@endif--}}
        @endforeach

        {{--<div class="row" style="font-size: 16px; font-weight: 600;">--}}
        {{--<div class="col-md-4 text-center">--}}
        {{--<i class="fas fa-square-full" style="color: #a35f06;"></i>--}}
        {{--Malfunction--}}
        {{--</div>--}}
        {{--<div class="col-md-4 text-center">--}}
        {{--<i class="fas fa-square-full" style="color: #ffd111;"></i>--}}
        {{--Warning--}}
        {{--</div>--}}
        {{--<div class="col-md-4 text-center">--}}
        {{--<i class="fas fa-square-full" style="color: #218c2a;"></i>--}}
        {{--Working--}}
        {{--</div>--}}
        {{--</div>--}}
    </div>

@endsection