@extends('frontend.layouts.plain2')

@section('after-styles')

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

@endsection

@section('content')

    <div class="container" style="height: 350px;">
        <div class="text-center">
            {{--<h5 class="h5 text-center" style="font-weight: 600;">{{ ucwords($station) }}</h5>--}}
            <div class="card card-raised" id='container' style='width: 100%; height: 350px;'></div>
            {{--<div id="container"></div>--}}
        </div>
    </div>

@endsection

@section('after-scripts')
    <script src="//code.highcharts.com/stock/highstock.js"></script>
    {{--<script src="//code.highcharts.com/stock/modules/exporting.js"></script>--}}
    {{--<script src="//code.highcharts.com/modules/export-data.js"></script>--}}
    <script type="text/javascript">
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        $(function () {
            @php
                $data =  $values_2;
            @endphp

            {{--            var data_click = {{ $data }};--}}
            $('#container').highcharts('StockChart', {
                    title: {
                        text: '{{ ucwords($station) }}'
                    },
                    legend: {
                        enabled: true,
                        align: 'center'
                    },
                    credits: {
                        enabled: false
                    },
                    rangeSelector: {
                        enabled: false,
                        allButtonsEnabled: true,
                        buttons: [
                            {
                                type: 'minute',
                                count: 900,
                                text: '15 Min',
                                dataGrouping: {
                                    forced: true,
                                    units: [['minute', [15]]]
                                }
                            },
                            {
                                type: 'minute',
                                count: 300,
                                text: 'Hour',
                                dataGrouping: {
                                    forced: true,
                                    units: [['minute', [60]]]
                                }
                            },
                            {
                                type: 'day',
                                count: 3,
                                text: 'Day'
                            },
                            {
                                type: 'all',
                                text: 'All'
                            }
                        ],
                        buttonTheme: {
                            width: 60
                        },
                        selected: 3
                    },
                    yAxis: {
                        align: 'left',
                        title: {
                            text: 'm MSL'
                        },
                        min: 0.00
                        @if($station == 'Ambathale')
                    ,
                    plotLines: [
                        {
                            color: '#25ff00',
                            width: 3,
                            value: 0.8,
                            label: {
                                text: 'Normal',
                                align: 'left',
//                            x: -30
                            }
                        },
                        {
                            color: '#ff9600',
                            width: 3,
                            value: 5.7,
                            label: {
                                text: 'HFL Minor',
                                align: 'left',
//                                x: -20
                            }
                        },
                        {
                            color: '#ff0002',
                            width: 3,
                            value: 7.0,
                            label: {
                                text: 'HFL Major',
                                align: 'left',
//                                x: -10
                            }
                        }]

                        @elseif($station == 'Dehiwala')
                    ,
                    plotLines: [
                        {
                            color: '#25ff00',
                            width: 3,
                            value: 0.3,
                            label: {
                                text: 'Normal',
                                align: 'left',
//                            x: -30
                            }
                        },
                        {
                            color: '#ff9600',
                            width: 3,
                            value: 5.0,
                            label: {
                                text: 'HFL',
                                align: 'left',
//                                x: -20
                            }
                        }]

                        @elseif($station == 'Heen Ela')
                    ,
                    plotLines: [
                        {
                            color: '#25ff00',
                            width: 3,
                            value: 0.3,
                            label: {
                                text: 'Normal',
                                align: 'left',
//                            x: -30
                            }
                        },
                        {
                            color: '#ff9600',
                            width: 3,
                            value: 2.6,
                            label: {
                                text: 'HFL',
                                align: 'left',
//                                x: -20
                            }
                        }]

                        @elseif($station == 'Kittampahuwa-Out')
                    ,
                    plotLines: [
                        {
                            color: '#25ff00',
                            width: 3,
                            value: 0.5,
                            label: {
                                text: 'Normal',
                                align: 'left',
//                            x: -30
                            }
                        },
                        {
                            color: '#ff9600',
                            width: 3,
                            value: 2.8,
                            label: {
                                text: 'HFL',
                                align: 'left',
//                                x: -20
                            }
                        }]

                        @elseif($station == 'Kolonnawa-Canal')
                    ,
                    plotLines: [
                        {
                            color: '#25ff00',
                            width: 3,
                            value: 0.3,
                            label: {
                                text: 'Normal',
                                align: 'left',
//                            x: -30
                            }
                        },
                        {
                            color: '#ff9600',
                            width: 3,
                            value: 2.8,
                            label: {
                                text: 'HFL',
                                align: 'left',
//                                x: -20
                            }
                        }]

                        @elseif($station == 'Parliament Lake')
                    ,
                    plotLines: [
                        {
                            color: '#25ff00',
                            width: 3,
                            value: 0.3,
                            label: {
                                text: 'Normal',
                                align: 'left',
//                            x: -30
                            }
                        },
                        {
                            color: '#ff9600',
                            width: 3,
                            value: 2.0,
                            label: {
                                text: 'HFL Minor',
                                align: 'left',
//                                x: -20
                            }
                        },
                        {
                            color: '#ff0002',
                            width: 3,
                            value: 2.8,
                            label: {
                                text: 'HFL Major',
                                align: 'left',
//                                x: -10
                            }
                        }]

                        @endif
                },
                series
        :
            [
                {
                    name: 'Forecast',
                    data:
                        [
                                @foreach($values as $value)
                            [{{ $value['time'] }},
                                {{ $value['value'] }}],
                            @endforeach
                        ],
                    tooltip: {
                        valueDecimals: 2
                    },
                    type: 'area'
                },
                {
                    name: 'Observed',
                    data:
                        [
                                @foreach($values as $value)
                            [{{ $value['time'] }},
                                {{ $value['ob_value'] }}],
                            @endforeach
                        ],
                    tooltip: {
                        valueDecimals: 2
                    },
                    type: 'scatter'
                }]
        })
            ;
        });
    </script>
@endsection