@extends('frontend.layouts.plain')

@section('after-styles')

@endsection

@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">WRF Hourly Rainfall Graphs - Multiple Stations</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>
                            {{ $display_data['variable'] }}
                        </div>
                        <div class="col-md-3 text-center">
                            <h6><b><u>FORECAST STATIONS:</u></b></h6>

                            @foreach($runs as $run)

                                {{ $run['station'] }}<br>

                            @endforeach

                            @if($display_data['variable'] !== 'Discharge')
                                <h6><b><u>OBSERVED STATIONS:</u></b></h6>
                                {{ $display_data['obs_station'] }}
                            @endif

                        </div>
                        <div class="col-md-3 text-center">
                            <h6><b><u>FORECAST TYPE:</u></b></h6>
                            {{ $display_data['type'] }}
                        </div>
                        <div class="col-md-3 text-center">
                            <h6><b><u>DATE RANGE:</u></b></h6>
                            Start Date and Time: {{ $start_time }}<br>
                            End Date and Time: {{ $end_time }}
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <br>
                        <div class="col-md-12">

                            @if($runs)
                                @php
                                    $i = 1;
                                @endphp

                                @foreach($runs as $run)

                                    <div class="text-center" style="padding-top: 20px; padding-bottom: 20px;">
                                        <h3 class="h3 text-center" style="font-weight: 600;"><u>{{$run->station}} - {{ $display_data['source'] }}</u>
                                        </h3>
                                        <div class="card card-raised chart_{{$i}}"
                                             style='width: 90%; height: 500px;'></div>
                                    </div>

                                    @php
                                        $i++;
                                    @endphp

                                    <hr>

                                @endforeach
                            @endif

                        </div>

                    </div>

                    <div class="row">
                        <br>
                        <div class="col-md-8 col-md-offset-2">
                            <a href="{{ route('frontend.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.graphs.hourly.index') }}" class="btn btn-info btn-block">CREATE
                                NEW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('after-scripts')
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script type="text/javascript">

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        @if($runs)
        @php
            $x = 1;
            if($display_data['variable'] == 'Discharge'){
                $text = "text: 'm<sup>3</sup>/s'";
                $name = "name: 'Discharge',";
                $approximation = "approximation: 'sum/4',";
                $type = "type: 'line'";
            }
            elseif ($display_data['variable'] == 'Waterlevel'){
                $text = "text: 'm MSL'";
                $name = "name: 'Waterlevel',";
                $approximation = "approximation: 'sum/4',";
                $type = "type: 'line'";
            }
            else{
                $text = "text: 'mm'";
                $name = "name: 'Forecast',";
                $approximation = "approximation: 'sum',";
                $type = "type: 'column'";
            }
        @endphp

        @foreach($runs as $key => $run)
        @php
            $run_values = $run->data()->where('time', '<=', $end_time)->where('time', '>=', $start_time)->orderBy('time', 'asc')->get()->toArray();
        $chart_no = '.chart_'.$x;
        @endphp

        @if(empty($run_values))
        $('{{ $chart_no }}').html('Data Not Available');
        @else

        $(function () {
            $('{{ $chart_no }}').highcharts('StockChart', {
                title: {
                    text: "{!! $run->station !!} - {{ $display_data['variable'] }}"
                },
                legend: {
                    enabled: true,
                    align: 'center'
                },
                credits: {
                    enabled: false
                },
                rangeSelector: {
                    inputEnabled: true,
                    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
                },
                plotOptions: {
                    series: {
                        minPointLength: 1,
                        pointWidth: 10,
                        stacking: 'true'
                    }
                },
                yAxis: {
                    title: {
                        {!! $text !!}
                    },
                    min: -1.00,
                    opposite: false
                },
                series: [{
                    {!! $name !!}
                    data:
                        [
                                @foreach($run_values as $value)
                            [{{ strtotime($value['time'])*1000 }},
                                {{ $value['value'] }}],
                            @endforeach
                        ],
                    tooltip: {
                        valueDecimals: 2
                    },
                    @if($display_data['variable'] !== 'Discharge')
                    dataGrouping: {
                        {!! $approximation !!}
                        enabled: true,
                        forced: true,
                        units: [['hour', [1]]]

                    },
                    @endif
                    {!! $type  !!}
                },
                        @if($display_data['variable'] !== 'Discharge')
                    {
                        name: 'Observed',
                        data:
                            [
                                    @foreach($obs_values as $key => $value)
                                [{{ strtotime($value['time'])*1000 }},
                                    {{ $value['value'] }}],
                                @endforeach
                            ],
                        tooltip: {
                            valueDecimals: 2
                        },
                        dataGrouping: {
                            {!! $approximation !!}
                            enabled: true,
                            forced: true,
                            units: [['hour', [1]]]

                        },
                        {!! $type  !!}
                    }
                    @endif
                ]
            });
        });

        @endif
        @php
            $x++;
        @endphp
        @endforeach
        @endif
    </script>
@endsection