@extends('frontend.layouts.screen')

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

@section('after-styles')


<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">

<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<style>
    .highcharts-title {
        fill: #434348;
        font-weight: bold;
        font-size: 3.5em;
    }

    .highcharts-legend {
        fill: #434348;
        font-weight: bold;
        font-size: 2em;
    }

    #viewDiv {
        height: 100%;
    }
</style>

<style>
    .card-raised {
        -webkit-box-shadow: 0px 1px 10px 1px rgba(204, 204, 204, 0.83);
        -moz-box-shadow: 0px 1px 10px 1px rgba(204, 204, 204, 0.83);
        box-shadow: 0px 1px 10px 1px rgba(204, 204, 204, 0.83);
    }
</style>

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

@endsection

@section('content')

<div class="container-fluid" style="padding: 1% 2%; height: 100%;">
    <div class="" style="margin-bottom: 10px;">
        <h5 class="h5 text-center text-uppercase" style="color:#434348">
            <i class="fas fa-tachometer-alt"></i> Canal Observed Water Level, Forecasts & Rainfall
        </h5>
    </div>
    <div class="row">
        <div class="col-md-4">
            <img class="card card-raised img-fluid" src="{{ asset("img/frontend/wl-keymap.jpg") }}"
                style='width: 100%; height: 350px;' />
        </div>
        @foreach($stations as $key => $station)
        @if($station['name'] !== 'Igurukade')
        @if($station['name'] !== 'Wellawatta')
        @if(($station['robs_values'] !== null) || ($station['obs_values'] !== null) || ($station['250_values'] !== null)
        || ($station['150_values'] !== null) || ($station['mike_values'] !== null))
        @if($station['type'] == 'canal')
        <div class="col-md-4">
            <div class="card card-raised {{ $station['class'] }}" style='width: 100%; height: 350px;'></div>
        </div>
        @endif
        @endif
        @endif
        @endif
        @endforeach

    </div>
    @php
    $status = 1;
    @endphp
    @foreach($stations as $key => $station)
    @if($station['type'] == 'river')
    @if( ($station['250_values'] !== null)
    || ($station['150_values'] !== null) || ($station['mike_values'] !== null))

    @php
    $status = 0;
    @endphp

    @endif
    @endif
    @endforeach
    {{-- {{ $status }} --}}
    @if($status == 1)
    <div class="" style="margin-bottom: 10px;">
        <hr>
        <h5 class="h5 text-center text-uppercase" style="color:#434348">
            <i class="fas fa-tachometer-alt"></i> River Observed Water Level, Forecasts & Rainfall
        </h5>
    </div>
    <div class="row">

        @foreach($stations as $key => $station)
        @if( ($station['250_values'] !== null)
        || ($station['150_values'] !== null) || ($station['mike_values'] !== null))
        @if($station['type'] == 'river')
        <div class="col-md-4">
            <div class="card card-raised {{ $station['class'] }}" style='width: 100%; height: 350px;'></div>
        </div>
        @endif
        @endif
        @endforeach

    </div>
    @endif
</div>

@endsection

@section('after-scripts')
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js">
</script>
<script>
    Highcharts.setOptions({
        time: {
            timezone: 'Asia/Colombo'
        }
    });
</script>
<script type="text/javascript">
    @foreach($stations as $key => $station)
    @if($station['name'] !== 'Igurukade')
    @if($station['name'] !== 'Wellawatta')
    
    $(function () {
        var station_{!! $key !!} = $('.{!! $station['class'] !!}').highcharts('StockChart', {
            title: {
                text: '{!! $station['name'] !!}'
            },
            chart: {
                height: 350
            },
            legend: {
                enabled: true,
                align: 'center'
            },
            credits: {
                enabled: false
            },
            rangeSelector: {
                inputEnabled: false,
                enabled: false,
                buttons: [
                    {
                        type: 'minute',
                        count: 900,
                        text: '15 Min',
                        dataGrouping: {
                            forced: true,
                            units: [['minute', [15]]]
                        }
                    },
                    {
                        type: 'minute',
                        count: 320,
                        text: 'Hour',
                        dataGrouping: {
                            forced: true,
                            units: [['minute', [60]]]
                        }
                    },
                    {
                        type: 'day',
                        count: 1,
                        text: 'Day'
                    },
                    {
                        type: 'all',
                        text: 'All'
                    }
                ],
                buttonTheme: {
                    width: 60
                },
                selected: 3
            },
            xAxis: {
                type: 'datetime'
            },
        
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 1
                    }
                },
                column: {
                    "minPointLength": 2
                }
            },
            series: [

                @if($station['obs_values'] !== null)

                {
                    name: 'Water Level',
                    data:
                        [
                                
                                @foreach($station['obs_values'] as $value_obs)
                            [{!! $value_obs['time'] !!},
                                {{ $value_obs['value'] }}],
                            @endforeach
                            
                        ],
                    tooltip: {
                        valueDecimals: 2
                    },
                    type: 'scatter',
                    tooltip: {
                        crosshairs: true,
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: 'x: <b>{point.x:%d-%b-%y %H:%M}</b><br/>y: <b>{point.y}</b><br/>'
                    },
                    
                }

                @endif
                
            ]
        });
    });
@endif
@endif
@endforeach


</script>

@endsection