@extends('frontend.layouts.plain')

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

@section('after-styles')
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
@endsection

@section('content')

    <div class="container-fluid" style="padding-top: 2%;">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-raised card-nav-tabs" style="padding-bottom: 1%;">
                    <div class="header header-dark-blue">
                        <h3 class="h3 text-center text-uppercase">
                            <i class="fas fa-building"></i> CUrW Weather Stations
                        </h3>
                    </div>

                    <div class="col-md-12">
                        <div class="row" style="margin-top: 2%;">
                            @foreach($stations as $station)
                                <div class="col-md-4 text-center" style="margin-bottom: 50px">
                                    @if($station['color'] == 'red')
                                        <a href="{{route('frontend.observation.station', $station['name'])}}"
                                           class="card card-raised text-center"
                                           style="text-decoration: none; padding: 30px 5px; background-color: #ff0003; color: #ffffff">
                                            <span style="font-size: 22px;"><i
                                                        class="fas fa-building"></i> {{ $station['name'] }} <i
                                                        class="fas fa-frown"></i></span><br>
                                            <small>({{ $station['source'] }})</small>
                                            <br>
                                            <span class="row" style="font-size: 24px;">
                                                <span class="col-md-4 text-center"
                                                      style="border-right: 1px solid #ffffff;"><i
                                                            class="fas fa-thermometer-three-quarters"></i> {{ $station['temperature'] }}
                                                    <sup>&#8451;</sup></span><span
                                                        class="col-md-4 text-center"
                                                        style="border-right: 1px solid #ffffff;"><i
                                                            class="fas fa-cloud"></i> {{ $station['precipitation_3h'] }}
                                                    <br>
                                                    <small>Last 3hour</small>
                                                    mm</span><span
                                                        class="col-md-4 text-center"><i
                                                            class="fas fa-cloud"></i> {{ $station['precipitation_24h'] }}
                                                    <br>
                                                    <small>Last 24hour</small>
                                                    mm</span>
                                            </span>
                                            <br>
                                            <span><b>Last Updated:</b> {{ $station['last_updated'] }}</span>
                                        </a>
                                    @elseif($station['color'] == 'orange')
                                        <a href="{{route('frontend.observation.station', $station['name'])}}"
                                           class="card card-raised text-center"
                                           style="text-decoration: none; padding: 30px 5px; background-color: #ff9600; color: #ffffff;">
                                        <span style="font-size: 22px;">
                                            <i class="fas fa-building"></i> {{ $station['name'] }} <i
                                                    class="fas fa-meh"></i></span><br>
                                            <small>({{ $station['source'] }})</small>
                                            <br>
                                            <span class="row" style="font-size: 24px;">
                                                <span class="col-md-4 text-center"
                                                      style="border-right: 1px solid #ffffff;"><i
                                                            class="fas fa-thermometer-three-quarters"></i> {{ $station['temperature'] }}
                                                    <sup>&#8451;</sup></span><span
                                                        class="col-md-4 text-center"
                                                        style="border-right: 1px solid #ffffff;"><i
                                                            class="fas fa-cloud"></i> {{ $station['precipitation_3h'] }}
                                                    <br>
                                                    <small>Last 3hour</small>
                                                    mm</span><span
                                                        class="col-md-4 text-center"><i
                                                            class="fas fa-cloud"></i> {{ $station['precipitation_24h'] }}
                                                    <br>
                                                    <small>Last 24hour</small>
                                                    mm</span>
                                            </span>
                                            <br>
                                            <span><b>Last Updated:</b> {{ $station['last_updated'] }}</span>
                                        </a>
                                    @else
                                        <a href="{{route('frontend.observation.station', $station['name'])}}"
                                           class="card card-raised text-center"
                                           style="text-decoration: none; padding: 30px 5px; background-color: #1cab00; color: #ffffff">
                                        <span style="font-size: 22px;">
                                            <i class="fas fa-building"></i> {{ $station['name'] }} <i
                                                    class="fas fa-smile"></i></span><br>
                                            <small>({{ $station['source'] }})</small>
                                            <br>
                                            <span class="row" style="font-size: 24px;">
                                                <span class="col-md-4 text-center"
                                                      style="border-right: 1px solid #ffffff;"><i
                                                            class="fas fa-thermometer-three-quarters"></i> {{ $station['temperature'] }}
                                                    <sup>&#8451;</sup></span><span
                                                        class="col-md-4 text-center"
                                                        style="border-right: 1px solid #ffffff;"><i
                                                            class="fas fa-cloud"></i> {{ $station['precipitation_3h'] }}
                                                    <br>
                                                    <small>Last 3hour</small>
                                                    mm</span><span
                                                        class="col-md-4 text-center"><i
                                                            class="fas fa-cloud"></i> {{ $station['precipitation_24h'] }}
                                                    <br>
                                                    <small>Last 24hour</small>
                                                    mm</span>
                                            </span>
                                            <br>
                                            <span><b>Last Updated:</b> {{ $station['last_updated'] }}</span>
                                        </a>
                                    @endif
                                </div>
                            @endforeach
                        </div>

                        <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: #ff0003;"></i>
                                Critical
                            </div>
                            <div class="col-md-4 text-center">
                                <i class="fas fa-square-full" style="color: #ff9600;"></i>
                                Warning
                            </div>
                            <div class="col-md-4 text-center">
                                <i class="fas fa-square-full" style="color: #1cab00;"></i>
                                Working
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>

@endsection