@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;
            @endphp
            @foreach($runs as $run)
                @php
                $run_values = $run->data()->select(DB::raw('DATE(time) as date'), DB::raw('SUM(value) as value'))->groupBy('date')->where('time', '<=', $end_time)->where('time', '>=', $start_time)->get()->toArray();

                if ($obs_runs != null) {
                $obs_values = $obs_runs->data()->select(DB::raw('DATE(time) as date'), DB::raw('SUM(value) as value'))->groupBy(DB::raw('DATE(time)'))->where('time', '<=', $end_time)->where('time', '>=', $start_time)->get()->toArray();
                }

                @endphp
                @if(!empty(array_filter($run_values)))

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

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

                @endif

                data{{$i}}.addRows([
                    @foreach($run_values as $key => $run_value)
                        @php
                        $date = $run_value['date'];
                        $date = DateTime::createFromFormat('Y-m-d', $date)->format('Y-m-d');
                        $date = date('Y,m,d', strtotime('- 1 month', strtotime($date)));
                        @endphp


                        @if($obs_runs != null)
                      
                         [new Date({{ $date }}), {{ $run_value['value'] }}, @if(isset($obs_values[$key]['date']))@if($obs_values[$key]['value'] < -100)0 @else {{$obs_values[$key]['value']}}@endif @else{{'undefined'}}@endif],

                        @else

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

                        @endif



                    @endforeach
                    ]);

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

                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++;
                @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 Daily Rainfall Graphs - By Coordinates</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($obs_runs != null)
                            <h6><b><u>OBSERVED STATION</u></b></h6>
                            {{ $obs_runs->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">
                        <div class="row">

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

                        @foreach($runs as $run)

                        <div class="col-md-12" style="padding-bottom: 20px; margin: 0 auto;">                                
                            <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: 100%; height: 500px; margin: 0 auto;'></div>
                        </div>
                       
                        @php
                        $i++;
                        @endphp

                        <hr>

                        @endforeach
                        @endif

                        </div>
                    </div>

                </div>

                @if(count($runs) == '1')
                    <hr>
                @endif


                <div class="row">
                    <br>
                    <div class="col-md-8 col-md-offset-2">
                        <a href="{{ route('frontend.graphs.hourly.coordinates') }}" class="btn btn-info btn-block">SWITCH TO HOURLY VIEW</a>
                    </div>
                    <div class="col-md-8 col-md-offset-2">
                        <a href="{{ route('frontend.graphs.daily.index') }}" class="btn btn-info btn-block">CREATE NEW</a>
                    </div>
                </div>          
            </div>           
        </div>  
    </div>
    </div>

@endsection