@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>

@endsection

@section('content')

    <div class="container-fluid">
        <div class="col-md-4">
            <div class="card card-raised yakbedda" id='yakbedda' style='width: 100%;'>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-raised wellawatta" id='wellawatta'
                 style='width: 100%;'></div>
        </div>
        <div class="col-md-4">
            <div class="card card-raised igurukade" id='igurukade'
                 style='width: 100%;'></div>
        </div>
    </div>

@endsection

@section('after-scripts')
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
    <script type="text/javascript">
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        @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
                },
                yAxis: {
                    title: {
                        text: 'm MSL'
                    },
                    opposite: false,
                    max: 2.00
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 1
                        }
                    }
                },
                series: [
                    {
                        name: 'Observed',
                        data:
                            [
                                    @if($station['obs_values'] !== null)
                                    @foreach($station['obs_values'] as $value_obs)
                                [{{ $value_obs['time'] }},
                                    {{ $value_obs['value'] }}],
                                @endforeach
                                @endif
                            ],
                        tooltip: {
                            valueDecimals: 2
                        },
                        type: 'scatter'
                    }
                ]
            });
        });

        @endforeach

    </script>
@endsection