@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>
        #table tr td, #table tr th {
            padding-top: 2px !important;
            padding-bottom: 2px !important;
        }
    </style>
@endsection

@section('content')

    <div class="container-fluid">
        <div class="row">

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

            <div class="col-md-12">
                <div class="row">
                    @foreach($stations as $station)
                        @if($station['name'] !== 'Kitulgala')
                            @if($station['name'] !== 'Mattakkuliya Bridge')
                                @if($station['name'] !== 'Wellampitiya')
                                    <div class="col-md-4 text-center" style="margin-bottom: 20px">
                                        @if($station['color'] == 'red')
                                            <a href="{{route('frontend.dynamic.past.wl.obs', ['station' => $station['name'], 'start_date' => $date, 'end_date' => $date ])}}"
                                               class="card text-center"
                                               style="text-decoration: none; padding: 10px 5px; background-color: rgba(140,43,0,0.79); color: rgba(255,255,255,0)">
                                                @if($station['name'] == 'Leecom WL Guage')
                                                    <span style="font-size: 20px; font-weight: 600; color: #ffffff; padding: -5px 0; margin: 0 auto;">
                                                <i class="fas fa-building"></i> Diyasaru Gate Upstream
                                            | {{ $station['water_level'] }}</span><br>
                                                @else
                                                    <span style="font-size: 20px; font-weight: 600; color: #ffffff; padding: -5px 0; margin: 0 auto;">
                                                <i class="fas fa-building"></i> {{ $station['name'] }}
                                                | {{ $station['water_level'] }}</span><br>
                                                @endif

                                                <span class="row" style="margin-top: 3px; margin-bottom: 2px">
                                            <table id="table" class="table table-responsive table-bordered"
                                                   style="font-size: 11px; font-weight: 400; color: #ffffff; margin-bottom: 0;">
                                                <thead style="border: none;">
                                                <tr>
                                                    <th></th>
                                                    <th class="text-center">3 Hours</th>
                                                    <th class="text-center">6 Hours</th>
                                                    <th class="text-center">12 Hours</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <th>Min</th>
                                                    <td>{{ $station['min_3h'] }}</td>
                                                    <td>{{ $station['min_6h'] }}</td>
                                                    <td>{{ $station['min_12h'] }}</td>
                                                </tr>
                                                    <tr>
                                                    <th>Max</th>
                                                    <td>{{ $station['max_3h'] }}</td>
                                                    <td>{{ $station['max_6h'] }}</td>
                                                    <td>{{ $station['max_12h'] }}</td>
                                                </tr>
                                                    <tr>
                                                    <th>Mean</th>
                                                    <td>{{ $station['mean_3h'] }}</td>
                                                    <td>{{ $station['mean_6h'] }}</td>
                                                    <td>{{ $station['mean_12h'] }}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </span>

                                                <span class="text-center"
                                                      style="margin-top: 0px; margin-bottom: 2px; font-size: 12px; color: #ffffff;"><b>Last Updated:</b> {{ $station['last_updated'] }}</span>
                                            </a>
                                        @elseif($station['color'] == 'orange')
                                            <a href="{{route('frontend.dynamic.past.wl.obs', ['station' => $station['name'], 'start_date' => $date, 'end_date' => $date ])}}"
                                               class="card text-center"
                                               style="text-decoration: none; padding: 10px 5px; background-color: rgba(172,167,38,0.79); color: rgba(255,255,255,0)">
                                                @if($station['name'] == 'Leecom WL Guage')
                                                    <span style="font-size: 20px; font-weight: 600; color: #ffffff; padding: -5px 0; margin: 0 auto;">
                                                <i class="fas fa-building"></i> Diyasaru Gate Upstream
                                            | {{ $station['water_level'] }}</span><br>
                                                @else
                                                    <span style="font-size: 20px; font-weight: 600; color: #ffffff; padding: -5px 0; margin: 0 auto;">
                                                <i class="fas fa-building"></i> {{ $station['name'] }}
                                                | {{ $station['water_level'] }}</span><br>
                                                @endif

                                                <span class="row" style="margin-top: 3px; margin-bottom: 2px">
                                            <table id="table" class="table table-responsive table-bordered"
                                                   style="font-size: 11px; font-weight: 400; color: #ffffff; margin-bottom: 0;">
                                                <thead style="border: none;">
                                                <tr>
                                                    <th></th>
                                                    <th class="text-center">3 Hours</th>
                                                    <th class="text-center">6 Hours</th>
                                                    <th class="text-center">12 Hours</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <th>Min</th>
                                                    <td>{{ $station['min_3h'] }}</td>
                                                    <td>{{ $station['min_6h'] }}</td>
                                                    <td>{{ $station['min_12h'] }}</td>
                                                </tr>
                                                    <tr>
                                                    <th>Max</th>
                                                    <td>{{ $station['max_3h'] }}</td>
                                                    <td>{{ $station['max_6h'] }}</td>
                                                    <td>{{ $station['max_12h'] }}</td>
                                                </tr>
                                                    <tr>
                                                    <th>Mean</th>
                                                    <td>{{ $station['mean_3h'] }}</td>
                                                    <td>{{ $station['mean_6h'] }}</td>
                                                    <td>{{ $station['mean_12h'] }}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </span>

                                                <span class="text-center"
                                                      style="margin-top: 0px; margin-bottom: 2px; font-size: 12px; color: #ffffff;"><b>Last Updated:</b> {{ $station['last_updated'] }}</span>
                                            </a>
                                        @else
                                            <a href="{{route('frontend.dynamic.past.wl.obs', ['station' => $station['name'], 'start_date' => $date, 'end_date' => $date ])}}"
                                               class="card text-center"
                                               style="text-decoration: none; padding: 10px 5px; background-color: rgba(0,140,70,0.79); color: rgba(255,255,255,0)">
                                                @if($station['name'] == 'Leecom WL Guage')
                                                    <span style="font-size: 20px; font-weight: 600; color: #ffffff; padding: -5px 0; margin: 0 auto;">
                                                <i class="fas fa-building"></i> Diyasaru Gate Upstream
                                            | {{ $station['water_level'] }}</span><br>
                                                @else
                                                    <span style="font-size: 20px; font-weight: 600; color: #ffffff; padding: -5px 0; margin: 0 auto;">
                                                <i class="fas fa-building"></i> {{ $station['name'] }}
                                                | {{ $station['water_level'] }}</span><br>
                                                @endif

                                                <span class="row" style="margin-top: 3px; margin-bottom: 2px">
                                            <table id="table" class="table table-responsive table-bordered"
                                                   style="font-size: 11px; font-weight: 400; color: #ffffff; margin-bottom: 0;">
                                                <thead style="border: none;">
                                                <tr>
                                                    <th></th>
                                                    <th class="text-center">3 Hours</th>
                                                    <th class="text-center">6 Hours</th>
                                                    <th class="text-center">12 Hours</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <th>Min</th>
                                                    <td>{{ $station['min_3h'] }}</td>
                                                    <td>{{ $station['min_6h'] }}</td>
                                                    <td>{{ $station['min_12h'] }}</td>
                                                </tr>
                                                    <tr>
                                                    <th>Max</th>
                                                    <td>{{ $station['max_3h'] }}</td>
                                                    <td>{{ $station['max_6h'] }}</td>
                                                    <td>{{ $station['max_12h'] }}</td>
                                                </tr>
                                                    <tr>
                                                    <th>Mean</th>
                                                    <td>{{ $station['mean_3h'] }}</td>
                                                    <td>{{ $station['mean_6h'] }}</td>
                                                    <td>{{ $station['mean_12h'] }}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </span>

                                                <span class="text-center"
                                                      style="margin-top: 0px; margin-bottom: 2px; font-size: 12px; color: #ffffff;"><b>Last Updated:</b> {{ $station['last_updated'] }}</span>
                                            </a>
                                        @endif
                                    </div>
                                @endif
                            @endif
                        @endif
                    @endforeach
                </div>

                <div class="row" style="font-size: 16px; font-weight: 600;">
                    <div class="col-md-4 text-center" style="color: rgba(0,140,70,0.79); font-size: 20px;">
                        Working <i class="far fa-smile"></i>
                    </div>
                    <div class="col-md-4 text-center" style="color: rgba(172,167,38,0.96); font-size: 20px;">
                        Warning <i class="far fa-meh"></i>
                    </div>
                    <div class="col-md-4 text-center" style="color: rgba(140,43,0,0.79); font-size: 20px;">
                        Malfunction <i class="far fa-frown"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

@endsection