@extends('frontend.layouts.plain')

@section('after-styles')


    <link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">

    {{--<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">--}}
    <link rel="stylesheet" href="//js.arcgis.com/3.7/js/esri/css/esri.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <style>
        .highcharts-title {
            fill: #434348;
            font-weight: bold;
            font-size: 20px;
        }

        .highcharts-legend {
            fill: #434348;
            font-weight: bold;
            font-size: 2em;
        }

        #viewDiv {
            height: 100%;
        }
    </style>

@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">{{ $station  }} Rainfall Graph</h3>
                </div>

                <div class="content">
                    <br>
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">

                            <div class="col-md-4">

                                <div class="col-md-12 text-center">
                                    <h6><b><u>FORECAST VARIABLE TYPE:</u></b></h6>
                                    Precipitation
                                </div>
                                <div class="col-md-12 text-center">
                                    <h6><b><u>FORECAST STATION:</u></b></h6>
                                    {{ ucwords($station) }}
                                </div>
                                <div class="col-md-12 text-center">
                                    <h6><b><u>FORECAST TYPES:</u></b></h6>
                                    Forecast-0-d <br>
                                    Forecast-1-d-after <br>
                                    Forecast-2-d-after <br>
                                </div>
                                <div class="col-md-12 text-center">
                                    <h6><b><u>DATE RANGE:</u></b></h6>
                                    Start Date and Time: {{ $start_date }}<br>
                                    End Date and Time: {{ $end_date }}
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div id="map" style=" height: 330px;"></div>
                                <h5 class="text-center"><i class="fas fa-circle" style="color: #ff0000;"></i> Forecast
                                    Station Location</h5>
                            </div>


                        </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) }} - Discharge</u>--}}
                                {{--</h3>--}}
                                {{--<div class="card card-raised" id='chart_div_Colombo' style='width: 90%; height: 500px;'></div>--}}
                                <div class="card card-raised" id='container'
                                     style='width: 90%; height: 600px;'></div>
                            </div>
                            <hr>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <a href="{{ route('frontend.static.rainfall') }}"
                               class="btn btn-info btn-block">back
                                to stations</a>
                        </div>
                    </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
            }
        });
        $(function () {
            {{--            var data_click = {{ $data }};--}}
            $('#container').highcharts('StockChart', {
                title: {
                    text: '{{ ucwords($station) }} - Rainfall'
                },
                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: 1,
                            text: 'Day'
                        },
                        {
                            type: 'all',
                            text: 'All'
                        }
                    ],
                    buttonTheme: {
                        width: 60
                    },
                    selected: 3
                },
                plotOptions: {
                    series: {
                        minPointLength: 2
                    }
                },
                yAxis: {
                    align: 'left',
                    opposite: false,
                    title: {
                        text: 'mm'
                    }
                },
                series: [
                    {
                        name: 'Forecast',
                        data:
                            [
                                    @foreach($values as $value)
                                [{{ $value['time'] }},
                                    {{ $value['value'] }}],
                                @endforeach
                            ],
                        tooltip: {
                            valueDecimals: 2
                        },
                        type: 'column'
                    }]
            });
        });
    </script>

    <script src="//js.arcgis.com/3.7/"></script>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
        var map;

        require([
            "esri/map",
            "esri/geometry/Point",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/graphic",
            "esri/layers/GraphicsLayer",
            "esri/InfoTemplate",
            "dojo/domReady!"
        ], function (Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer, InfoTemplate) {
            map = new Map("map", {
                basemap: "streets",
                center: [{{ $coordinates['longitude']  }}, {{ $coordinates['latitude']  }}],
                zoom: 12
            });
            map.on("load", function () {
                var gl = new GraphicsLayer();
                var p = new Point({{ $coordinates['longitude']  }}, {{ $coordinates['latitude']  }});
                var s = new SimpleMarkerSymbol({
                    "color": [255, 0, 0, 255],
                    "size": 12,
                    "angle": -30,
                    "type": "esriSMS",
                    "style": "STYLE_CIRCLE"
                });
                var pointAttributes = {Station: "{{ $station }} "};
                var pointInfoTemplate = new InfoTemplate(" {{ $station }} ");
                var g = new Graphic(p, s, pointAttributes).setInfoTemplate(pointInfoTemplate);
                gl.add(g);
                map.addLayer(gl);
            });
        });
    </script>
@endsection