@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> CUrW Canal Observed Water Level, Forecasts & Rainfall
        </h5>
    </div>
    <div class="row">

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

    </div>
    <div class="" style="margin-bottom: 10px;">
        <hr>
        <h5 class="h5 text-center text-uppercase" style="color:#434348">
            <i class="fas fa-tachometer-alt"></i> CUrW River Observed Water Level, Forecasts & Rainfall
        </h5>
    </div>
    <div class="row">

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

    </div>
</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)

    $(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'
        },
        yAxis: [
            {
                reversed: true,
                opposite: true,
                title: {
                    text: 'Rainfall',
                    style: {
                        fontSize: '14px',
                        fontWeight: '400'
                    }
                },
                height: '50%',
                max: 80,
                min: 0
            },
            {
                reversed: false,
                opposite: false,
                title: {
                    text: 'Water Level',
                    style: {
                        fontSize: '14px',
                        fontWeight: '400'
                    }
                },
                height: '50%',
                top: '50%',
                min: 0
                
            },
            {
                height: '50%',
                top: '50%'
            },
            {
                height: '50%',
                top: '50%'
            },
            {
                height: '50%',
                top: '50%'
            }
        ],
        plotOptions: {
            scatter: {
                marker: {
                    radius: 1
                }
            }
        },
        series: [
            @if($station['robs_values'] !== null)
            {
                name: 'Rain',
                data:
                    [
                            
                            @foreach($station['robs_values'] as $value_rob)
                        [{!! $value_rob['time'] !!},
                            {{ $value_rob['value'] }}],
                        @endforeach
                        
                    ],
                tooltip: {
                    valueDecimals: 2
                },
                type: 'column',
                yAxis: 0
            },
            @endif
            @if($station['obs_values'] !== null)
            {
                name: 'WL',
                data:
                    [
                            
                            @foreach($station['obs_values'] as $value_obs)
                        [{!! $value_obs['time'] !!},
                            {{ $value_obs['value'] }}],
                        @endforeach
                        
                    ],
                tooltip: {
                    valueDecimals: 2
                },
                type: 'scatter',
                yAxis: 1
            },
            @endif
            @if($station['250_values'] !== null)
            {
                name: '250 WL',
                data:
                    [
                            
                            @foreach($station['250_values'] as $value_250)
                        [{!! $value_250['time'] !!},
                            {!! $value_250['value'] !!}],
                        @endforeach
                        
                    ],
                tooltip: {
                    valueDecimals: 2
                },
                type: 'line',
                yAxis: 2
            }
            ,
            @endif
            @if($station['150_values'] !== null)
            {
                name: '150 WL',
                data:
                    [
                           
                            @foreach($station['150_values'] as $value_150)
                        [{!! $value_150['time'] !!},
                            {!! $value_150['value'] !!}}],
                        @endforeach
                        
                    ],
                tooltip: {
                    valueDecimals: 2
                },
                type: 'line',
                yAxis: 3
            }
            ,
            @endif
            @if($station['mike_values'] !== null)
            {
                name: 'MIKE WL',
                data:
                    [
                            
                            @foreach($station['mike_values'] as $mike_value)
                        [{!! $mike_value['time'] !!},
                            {!! $mike_value['value'] !!}],
                        @endforeach
                        
                    ],
                tooltip: {
                    valueDecimals: 2
                },
                type: 'line',
                yAxis: 4
            }
            @endif
        ]
    });
});

@endforeach


</script>

@endsection