@extends('frontend.layouts.plain')

@section('after-styles')
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css">

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type='text/javascript'>
        google.charts.load('current', {'packages':['annotationchart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
                    @if($runs)
                    @php
                        $i = 1;
                        if ($obs_runs !=  null) {
                            $obs_values = $obs_runs->data()->select(DB::raw('hour(time) as hour'), DB::raw('day(time) as day'), DB::raw('sum(value) as value'))->groupBy(DB::raw('hour, day'))->orderBy('day', 'asc')->where('time', '<=', $end_time)->where('time', '>=', $start_time)->get()->toArray();
                        }
                        
                    @endphp
                    @foreach($runs as $key => $run)
                    @php
                        $new_run_values = $run->data()->select(DB::raw('time'), DB::raw('hour(time) as hour'), DB::raw('day(time) as day'), DB::raw('value'))->where('time', '<=', $end_time)->where('time', '>=', $start_time)->orderBy('day', 'asc')->get()->toArray();
                        $x = '0';
                    @endphp

                    @if(!empty(array_filter($new_run_values)))

            var data{{$i}} = new google.visualization.DataTable();
            data{{$i}}.addColumn('datetime', 'Time');
            data{{$i}}.addColumn('number', '{{ $run->station }} Forecast');

            @php
            if ($obs_runs !=  null) {
            @endphp
                data{{$i}}.addColumn('number', '{{ $obs_runs->station }} Observed');
            @php
            }
            @endphp



            @php
            if ($obs_runs !=  null) {
                foreach ($new_run_values as $key => $new_r_value) {
                    $new_r_value['ob_value'] = 'undefined';

                    foreach ($obs_values as $key => $ob_value) {
                        if ($ob_value['value'] < -100) {
                            $ob_value['value'] = 0;
                        }   
                        if($new_r_value['day'] == $ob_value['day'] && $new_r_value['hour'] == $ob_value['hour']){
                            $new_r_value['ob_value'] = $ob_value['value'];
                            break;
                            }

                        }

                    $new_r_values[] = $new_r_value;
                }
            }
                
            @endphp

            data{{$i}}.addRows([

                    @foreach($new_r_values as $key => $run_value)
                    @php
                        $time = $run_value['time'];

                        $time = DateTime::createFromFormat('Y-m-d H:i:s', $time)->format('Y-m-d H:i:s');
                        $time = date('Y,m,d,H,i,s', strtotime('- 1 month', strtotime($time)));

                    if ($obs_runs !=  null) {

                    @endphp

                    [new Date({{ $time }}), {{ $run_value['value'] }}, {{ $run_value['ob_value'] }}],

                    @php
                    }
                    else{
                    @endphp  

                    [new Date({{ $time }}), {{ $run_value['value'] }}],

                    @php  
                    }
                    @endphp

                @endforeach

            ]);

                @if($display_data['variable'] == 'Discharge')

                var chart{{$i}} = new google.visualization.AnnotationChart(document.getElementById('chart_div_{{$run->station}}'));

                @else

                var chart{{$i}} = new google.visualization.ColumnChart(document.getElementById('chart_div_{{$run->station}}'));

                @endif

            var options = {
                displayAnnotations: true,
                theme: 'material',
                hAxis: {
                    title: 'Date',
                    format: 'MMM. d'
                },
                vAxis: {
                    title: 'mm'
                }
            };

            chart{{$i}}.draw(data{{$i}}, options);

            @else

                $div = $('#chart_div_{{$run->station}}').html('').removeAttr('style').removeAttr('class');
            $div.html('<h4 class="text-center">Data not available for this station on this day.</h4>');

            @endif

            @php
                $i++;
                $new_r_values = null;
                $new_r_value = null;
            @endphp

            @endforeach
            @endif
        }
    </script>

@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 - By Coordinates 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
                            
                            <h6><b><u>OBSERVED STATION:</u></b></h6>

                            @php
                                if ($obs_values != null) {
                            @endphp
                                {{ $obs_runs->station }}
                            @php
                            }
                            @endphp

                        </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}}</u></h3>
                                        <div class="card card-raised" id='chart_div_{{$run->station}}' style='width: 90%; height: 500px;'></div>
                                    </div>

                                    @php
                                        $i++;
                                    @endphp

                                    <hr>

                                @endforeach
                            @endif

                        </div>

                    </div>

                    {{-- <hr> --}}

                    <div class="row">
                        <br>
                        <div class="col-md-8 col-md-offset-2">
                            <a href="{{ route('frontend.graphs.daily.coordinates') }}" 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