@extends('frontend.layouts.plain')

@section('after-styles')

    <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() {


            var data1 = new google.visualization.DataTable();
            data1.addColumn('datetime', 'Time');
            data1.addColumn('number', 'Station 1 Forecast');
            data1.addColumn('number', 'Station 2 Forecast');
            data1.addColumn('number', 'Station 1 Observed');
            data1.addColumn('number', 'Station 2 Observed');

            data1.addRows([

                    @foreach($all_values['values_1'] as $key => $value_1)
{{--                {{ dd($value_1['value'], $all_values['values_2'][$key]['value']) }}--}}
                [new Date({{ $value_1['time'] }}), {{ $value_1['value'] }}, {{ $all_values['values_2'][$key]['value'] }}, {{ $value_1['ob_value'] }}, {{ $all_values['values_2'][$key]['ob_value'] }}],

                @endforeach
            ]);

            var chart1 = new google.visualization.AnnotationChart(document.getElementById('chart_div_Colombo'));


            var options = {
                displayAnnotations: true,
                theme: 'material',
                thickness: 2,
//                vAxis: {
//                    title: 'mm',
//                    ticks: [ { v: 10, f: 'y3' } ],
//                    max: 0.5,
//                    scaleColumns: [1]
//                },
//                hAxis: {
//                    ticks: [0.8]
//                }
            };

            chart1.draw(data1, options);
        }
    </script>


    <!-- Scripts -->
    <script>window.Laravel = {"csrfToken":"HXdjt7wAYLcOYzwgAlot2chFU3rcXylWqbuPsSHF"}</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">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>STATIONS:</u></b></h6>
                            1. {{ ucwords($all_values['station_1']) }}<br>
                            2. {{ ucwords($all_values['station_2']) }}<br>

                            {{--<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($all_values['types_1'] as $type)
                                {{ $type }}<br>
                            @endforeach
                        </div>
                        <div class="col-md-3 text-center">
                            <h6><b><u>DATE RANGE:</u></b></h6>
                            From: {{ $all_values['start_date'] }}<br>
                            To: {{ $all_values['end_date_1'] }}
                        </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>1. {{ ucwords($all_values['station_1']) }} &amp; 2. {{ ucwords($all_values['station_2']) }}</u></h3>
                                <div class="card card-raised" id='chart_div_Colombo' style='width: 90%; height: 500px;'></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