@extends('frontend.layouts.plain')

@section('content')

    <div class="container">
        <div class="row">
            <div class="card card-nav-tabs">

                <div class="header header-dark-blue">
                    <h3 class="h3 text-center text-uppercase">FLO2D Discharge Graph</h3>
                </div>

                <div class="content">
                    <div class="row">
                        <br>
                        <div class="col-md-3 text-center">
                            <h6><b><u>FORECAST VARIABLE TYPE:</u></b></h6>
                            Waterlevel
                        </div>
                        <div class="col-md-3 text-center">
                            <h6><b><u>FORECAST STATION:</u></b></h6>
                            {{ ucwords($station) }}

                            <h6><b><u>OBSERVED STATION:</u></b></h6>
                            {{ ucwords($obs_station) }}
                        </div>
                        <div class="col-md-3 text-center">
                            <h6><b><u>FORECAST TYPE:</u></b></h6>
                            {{--@foreach($types as $type)--}}
                            {{--{{ $type }}<br>--}}
                            {{--@endforeach--}}
                            Historical Events
                        </div>
                        <div class="col-md-3 text-center">
                            <h6><b><u>DATE RANGE:</u></b></h6>
                            {{--Start Date and Time: {{ $start_date }}<br>--}}
                            {{--End Date and Time: {{ $end_date }}--}}
                            From: {{ $start_date }}<br>
                            To: {{ $end_date }}
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <br>
                        <div class="col-md-12">
                            <div class="text-center" style="padding-top: 20px; padding-bottom: 20px;">
                                <h3 class="h3 text-center" style="font-weight: 600;"><u>{{ ucwords($station) }}</u></h3>
                                <div class="card card-raised" id='container' style='width: 90%; height: 500px;'></div>
                                {{--<div id="container"></div>--}}
                            </div>
                            <hr>
                        </div>

                    </div>

                    <div class="row">
                        {{--<br>--}}
                        {{--<div class="col-md-8 col-md-offset-2">--}}
                        {{--<a href="http://forecast.app/graphs/daily/stations" class="btn btn-info btn-block">SWITCH TO DAILY VIEW</a>--}}
                        {{--</div>--}}
                        <div class="col-md-8 col-md-offset-2">
                            <a href="{{ route('frontend.static.research.index') }}" class="btn btn-info btn-block">back
                                to stations</a>
                        </div>
                    </div>
                </div>
            </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', {
                legend: {
                    enabled: true,
                    align: 'center'
                },
                credits: {
                    enabled: false
                },
                rangeSelector: {
                    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