@extends('frontend.layouts.dynamic')

@section('before-styles')

@endsection

@section('after-styles')
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
    <style>
        .card {
            margin-top: 50px;
        }

        .card-header-1 {
            width: 98%;
            margin: -30px auto 15px auto;
            padding: 15px 5px 5px 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background: linear-gradient(60deg, #038DDD, #095EAE);
            -webkit-box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
        }

        .div-raised {
            -webkit-box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
        }
    </style>
    <style>
        @import 'https://code.highcharts.com/css/highcharts.css';

        .highcharts-plot-border {
            stroke-width: 1px;
            stroke: #a1a0a0;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
@endsection

@section('content')

    <div class="container-fluid" style="">
        {{--<div class="card">--}}
            {{--<div class="card-header-1 blue">--}}
                {{--<h3 class="text-center"><strong><i class="fas fa-map"></i> CUrW Weather Stations Key Map</strong></h3>--}}
            {{--</div>--}}

            {{--<div class="card-body">--}}
                {{--<div class="row">--}}
                    {{--<div class="col-md-2 offset-1">--}}
                    {{--<div class="align-middle">--}}
                    {{--<table class="table table-responsive h5 white-text text-center table-sm">--}}
                    {{--<thead class="grey h4 font-weight-bold">--}}
                    {{--<tr class="text-center">--}}
                    {{--<td>Precipitation Range</td>--}}
                    {{--</tr>--}}
                    {{--</thead>--}}
                    {{--<tr class="black">--}}
                    {{--<td>0mm</td>--}}
                    {{--<td><i class="fas fa-circle" style="color: #000000;"></i></td>--}}
                    {{--</tr>--}}
                    {{--<tr class="blue">--}}
                    {{--<td>0mm - 20mm</td>--}}
                    {{--<td><i class="fas fa-circle" style="color: #0000ff;"></i></td>--}}
                    {{--</tr>--}}
                    {{--<tr class="green">--}}
                    {{--<td>20mm - 50mm</td>--}}
                    {{--<td><i class="fas fa-circle" style="color: #00ff00;"></i></td>--}}
                    {{--</tr>--}}
                    {{--<tr class="yellow">--}}
                    {{--<td>50mm - 100mm</td>--}}
                    {{--<td><i class="fas fa-circle" style="color: #ffff00;"></i></td>--}}
                    {{--</tr>--}}
                    {{--<tr class="red">--}}
                    {{--<td>100mm - 150mm</td>--}}
                    {{--<td><i class="fas fa-circle" style="color: #ff0000;"></i></td>--}}
                    {{--</tr>--}}
                    {{--<tr class="purple">--}}
                    {{--<td>150mm</td>--}}
                    {{--<td><i class="fas fa-circle" style="color: #ff00ff;"></i></td>--}}
                    {{--</tr>--}}
                    {{--</table>--}}
                    {{--</div>--}}
                    {{--</div>--}}
                    {{--<div class="col-md-6 offset-md-3">--}}
                        <div id="map" class="div-raised" style="width: 100%; height: 700px;"></div>
                    {{--</div>--}}
                    {{--<div class="col-md-3">--}}
                        {{--<table class="table table-responsive table-sm h5 white-text text-center float-md-right"--}}
                               {{--style="bottom: 0; position: absolute;">--}}
                            {{--<thead class="grey h4 font-weight-bold">--}}
                            {{--<tr class="text-center">--}}
                                {{--<td>Precipitation Range</td>--}}
                            {{--</tr>--}}
                            {{--</thead>--}}
                            {{--<tr class="black">--}}
                                {{--<td>0mm</td>--}}
                                {{--<td><i class="fas fa-circle" style="color: #000000;"></i></td>--}}
                            {{--</tr>--}}
                            {{--<tr class="blue">--}}
                                {{--<td>0mm - 20mm</td>--}}
                                {{--<td><i class="fas fa-circle" style="color: #0000ff;"></i></td>--}}
                            {{--</tr>--}}
                            {{--<tr class="green">--}}
                                {{--<td>20mm - 50mm</td>--}}
                                {{--<td><i class="fas fa-circle" style="color: #00ff00;"></i></td>--}}
                            {{--</tr>--}}
                            {{--<tr class="yellow">--}}
                                {{--<td>50mm - 100mm</td>--}}
                                {{--<td><i class="fas fa-circle" style="color: #ffff00;"></i></td>--}}
                            {{--</tr>--}}
                            {{--<tr class="red">--}}
                                {{--<td>100mm - 150mm</td>--}}
                                {{--<td><i class="fas fa-circle" style="color: #ff0000;"></i></td>--}}
                            {{--</tr>--}}
                            {{--<tr class="purple">--}}
                                {{--<td>150mm</td>--}}
                                {{--<td><i class="fas fa-circle" style="color: #ff00ff;"></i></td>--}}
                            {{--</tr>--}}
                        {{--</table>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
    </div>

    <!-- Graphs -->

    @foreach($stations as $station)

        <div class="modal fade" id="{{ $station['variables']['station'] }}" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-fluid" role="document" style="height: auto;">
                <div class="modal-content">
                    <div class="modal-header">
                        <a class="grey-text text-md-center h3"
                           href="{{route('frontend.dynamic.past.ws', ['station' => $station['name'], 'start_date' => $date, 'end_date' => $date])}}"
                           id="{{ $station['variables']['station'] }}" target="_blank">{{ $station['name'] }} Weather
                            Station Data</a>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @if($station['variables']['availability']->isEmpty())
                            <h3 class="text-center" style="color: #d32f2f;"><i
                                        class="fas fa-exclamation-triangle"></i> Weather Station hasn't respond
                                since {{ $station['variables']['last_updated'] }} <i
                                        class="fas fa-exclamation-triangle"></i></h3>
                        @else
                            <div id="{{ $station['variables']['station'] }}"
                                 style=" height: auto; max-width: 100%;"></div>
                        @endif
                    </div>
                    <div class="modal-footer text-center">
                        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    @endforeach

@endsection

@section('after-scripts')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
    <script>
        /*
        The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
        through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
        small variation for each data set, and a mouse/touch event handler to bind the charts together.
        */

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

        {{--var max_date = {{ $values['max_date }};--}}

        @foreach($stations as $station)

        {{--$("#{{$station['variables']['station']}}").on('shown.bs.modal', function (e) {--}}

        /**
         * In order to synchronize tooltips and crosshairs, override the
         * built-in events with handlers defined on the parent element.
         */
        $(".modal .modal-body #{{ $station['variables']['station'] }}").bind('mousemove touchmove touchstart', function (e) {
            var chart,
                point,
                i,
                event;

            for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                chart = Highcharts.charts[i];
                event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
                point = chart.series[0].searchPoint(event, true); // Get the hovered point

                if (point) {
                    point.highlight(e);
                }
            }
        });
        /**
         * Override the reset function, we don't need to hide the tooltips and crosshairs.
         */
        Highcharts.Pointer.prototype.reset = function () {
            return undefined;
        };

        /**
         * Highlight a point by showing tooltip, setting hover state and draw crosshair
         */
        Highcharts.Point.prototype.highlight = function (event) {
            this.onMouseOver(); // Show the hover marker
            this.series.chart.tooltip.refresh(this); // Show the tooltip
            this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
        };

        // console.log(Date.today().addHours(23));
        /**
         * Synchronize zooming through the setExtremes event handler.
         */
        function syncExtremes(e) {
            var thisChart = this.chart;

            if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
                Highcharts.each(Highcharts.charts, function (chart) {
                    if (chart !== thisChart) {
                        if (chart.xAxis[0].setExtremes) { // It is null while updating
                            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {trigger: 'syncExtremes'});
                        }
                    }
                });
            }
        }

        // Get the data. The contents of the data file can be viewed at
        // https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json

        $.getJSON('{{ route('frontend.dynamic.past.ws.get.data', ['station' => $station['name'], 'start_date' => $date, 'end_date' => $date]) }}', function (activity) {
            $.each(activity.datasets, function (i, dataset) {

                // Add X values
                dataset.data = Highcharts.map(dataset.data, function (val, j) {
                    return [activity.xData[j], val];
                });


                $("<div class='chart_{{$station['variables']['station']}}'>")
                    .appendTo(".modal .modal-body #{{ $station['variables']['station'] }}")
                    .highcharts({
                        chart: {
                            margin: [30, 80, 100, 80],
                            height: 320

                        },
                        title: {
                            useHTML: true,
                            text: "<b style='color: #737272;'>" + dataset.name + " <i class='fas fa-square' style='color: " + Highcharts.getOptions().colors[i] + ";'></i></b>",
                            align: 'left',
                            // margin: 0,
                            x: 70,
                            y: -1,
                            style: {
                                fontSize: '14px'
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        legend: {
                            enabled: false
                        },
                        xAxis: {
                            crosshair: true,
                            min: {{ (int) strtotime(\Carbon\Carbon::today()) * 1000 }},
                            max: {{ (int) strtotime(\Carbon\Carbon::today()->addHours(22)) * 1000 }},
                            type: 'datetime',
                            tickInterval: 3600 * 3000,
                            events: {
                                setExtremes: syncExtremes
                            },
                            endOnTick: true,
                            ordinal: true,
                            useHTML: true,
                            labels: {
                                formatter: function () {
                                    return "<b style='font-size: 12px;>" + moment(this.value).format('HH:mmA') + "</b>";
                                }
                            },
                            offset: 10
                        },
                        yAxis: {
                            title: {
                                text: null
                            },
                            useHTML: true,
                            labels: {
                                formatter: function () {
                                    return "<b style='font-size: 10px; font-weight: 900;'>" + this.value + " " + dataset.unit + '</b>';
                                }
                            },
                            offset: -10
                        },
                        tooltip: {
                            formatter: function () {
                                var value;
                                if (dataset.name === 'Wind Direction') {
                                    if (this.y >= 337.5 || this.y <= 22.5) {
                                        value = ' - ' + this.y + ' Deg (From North)' + '</b>';
                                    } else if (this.y >= 22.5 && this.y <= 67.5) {
                                        value = +' - ' + this.y + ' Deg (From North East)' + '</b>';
                                    } else if (this.y >= 67.5 && this.y <= 112.5) {
                                        value = ' - ' + this.y + ' Deg (From East)' + '</b>';
                                    } else if (this.y >= 112.5 && this.y <= 157.5) {
                                        value = ' - ' + this.y + ' Deg (From South East)' + '</b>';
                                    } else if (this.y >= 157.5 && this.y <= 202.5) {
                                        value = ' - ' + this.y + ' Deg (From South)' + '</b>';
                                    } else if (this.y >= 202.5 && this.y <= 247.5) {
                                        value = ' - ' + this.y + ' Deg (From South West)' + '</b>';
                                    } else if (this.y >= 247.5 && this.y <= 292.5) {
                                        value = ' - ' + this.y + ' Deg (From West)' + '</b>';
                                    } else if (this.y >= 292.5 && this.y <= 337.5) {
                                        value = ' - ' + this.y + ' Deg (From West)' + '</b>';
                                    }
                                } else {
                                    value = ' - ' + this.y + ' ' + dataset.unit + '</b>';
                                }

                                return '<b>' + Highcharts.dateFormat('%b %e, %H:%M:%S',
                                    new Date(this.x)) + value;
                            },
                            positioner: function () {
                                return {
                                    x: this.chart.chartWidth - this.label.width, // right aligned
                                    // margin: [0, 50, 0, 0],
                                    // x: 500, // right aligned
                                    y: -8 // align to title
                                };
                            },
                            borderWidth: 0,
                            backgroundColor: '#ffffff',
                            pointFormat: '{point.y}',
                            valueDecimals: dataset.valueDecimals,
                            headerFormat: '',
                            shadow: false,
                            style: {
                                fontSize: '13px'
                            }
                        },
                        plotOptions: {
                            column: {
                                "minPointLength": 2,
                                // pointStart      : pointStart,
                                pointInterval: 3600 * 1000
                            }
                            // ,
                            // series: {
                            //     dataGrouping: {
                            //         forced: true,
                            //         units: [
                            //             ['hour', [1]]
                            //         ]
                            //     }
                            // }
                        },
                        series: [{
                            data: dataset.data,
                            name: dataset.name,
                            type: dataset.type,
                            color: Highcharts.getOptions().colors[i],
                            fillOpacity: 0.3,
                            tooltip: {
                                valueDecimals: dataset.valueDecimals,
                                valueSuffix: dataset.unit
                            },
                            pointStart: dataset.min_date,
                            pointEnd: dataset.max_date
                            // ,
                            // dataGrouping: {
                            //     approximation: 'sum',
                            //     enabled: true,
                            //     forced: true,
                            //     units: [['hour', [1]]]
                            //
                            // }
                        }]
                    });

            });
        });

        //        });

        @endforeach


        // $(function () {
        //     // $("#container").css('display', 'none').fadeOut();
        //     setInterval(getChart, 5000); //30 seconds onload="getHighChart()"
        // });
    </script>

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

        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/geometry/Polygon",
            "esri/PopupTemplate",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/layers/Layer",
            "dojo/domReady!"
        ], function (Map,
                     MapView,
                     Graphic,
                     Point,
                     Polyline,
                     Polygon,
                     PopupTemplate,
                     PictureMarkerSymbol,
                     SimpleMarkerSymbol,
                     Layer) {
            var map = new Map({
                basemap: "streets"
            });

            var view = new MapView({
                container: "map",
                map: map,
                zoom: 10,
                center: [79.90467, 6.90101],
                // Since there are many elements, it is best to dock the popup so
                // the elements display better rather than have to scroll through them all.
                popup: {
                    dockEnabled: true,
                    dockOptions: {
                        buttonEnabled: false,
                        breakpoint: false
                    }
                }
            });

            @foreach($stations as $station)
            // map.on("load", function () {


            var i = 0;
            var s = 's_' + i;

            var s = new SimpleMarkerSymbol({
                @if($station['variables']['precipitation_3h'] <= 0.0)
                color: [0, 0, 0, 255],
                @elseif($station['variables']['precipitation_3h'] > 0.0 && $station['variables']['precipitation_3h'] <= 20.0)
                color: [0, 0, 255, 255],
                @elseif($station['variables']['precipitation_3h'] > 20.0 && $station['variables']['precipitation_3h'] <= 50.0)
                color: [0, 255, 0, 255],
                @elseif($station['variables']['precipitation_3h'] > 50.0 && $station['variables']['precipitation_3h'] <= 100.0)
                color: [255, 255, 0, 255],
                @elseif($station['variables']['precipitation_3h'] > 100.0 && $station['variables']['precipitation_3h'] <= 150.0)
                color: [255, 0, 0, 255],
                @elseif($station['variables']['precipitation_3h'] > 150.0)
                color: [255, 0, 255, 255],
                @endif
                size: "13px",
                style: "circle"
            });


            var point = 'p_' + i;
            point = new Point({
                longitude: {{ $station['longitude'] }},
                latitude: {{ $station['latitude'] }}
            });

            var pop_template = 'pit_' + i;
            pop_template = new PopupTemplate({
                title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "{{ $station['name'] }} Weather Station" + "</b></div>",
                content:
                    "<div class='text-center' style='margin: 5px auto;'>"
                        @if($station['variables']['temperature'] !== null)
                    +
                    "<i class='fa fa-thermometer-half' aria-hidden='true' style='font-size: 40px;'></i> <span style='font-size: 40px;'>{{ $station['variables']['temperature'] }}°C</span>" +
                        @else
                            +"<span style='font-size: 40px;'>NA</span>" +
                        @endif
                            "</div>" +
                    "<table class='table  table-responsive-sm table-striped' style='font-size: 12px; margin: 0 auto;'>" +
                    "<tr><td><strong style='font-size: 12px;'>Precipitation (3h):</strong></td>" +
                    "<td><strong style='font-size: 12px;'>{{ $station['variables']['precipitation_3h'] }}mm</strong></td></tr>" +
                    "<tr><td><strong style='font-size: 12px;'>Precipitation (24h):</strong></td>" +
                    "<td><strong>{{ $station['variables']['precipitation_24h'] }}mm</strong></td></tr>" +

                        @if($station['variables']['humidity'] !== null)
                            "<tr><td><strong style='font-size: 12px;'>Humidity:</strong></td>" +
                    "<td><strong style='font-size: 12px;'>{{ $station['variables']['humidity'] }}%</strong></td></tr>" +
                        @endif

                                @if($station['variables']['wind_speed'] !== null)
                            "<tr><td><strong style='font-size: 12px;'>Wind Speed:</strong></td>" +
                    "<td><strong style='font-size: 12px;'>{{ $station['variables']['wind_speed'] }}m/s</strong></td></tr>" +
                        @endif

                                @if($station['variables']['wind_gust'] !== null)
                            "<tr><td><strong style='font-size: 12px;'>Wind Gust:</strong></td>" +
                    "<td><strong style='font-size: 12px;'>{{ $station['variables']['wind_gust'] }}m/s</strong></td></tr>" +
                        @endif

                                @if($station['variables']['wind_dir'] !== null)
                            "<tr><td><strong style='font-size: 12px;'>Wind from:</strong></td>" +
                    "<td><strong style='font-size: 12px;'>{{ $station['variables']['wind_dir'] }}</strong></td></tr>" +
                        @endif

                                @if($station['variables']['wind_dir'] !== null)
                            "<tr><td><strong style='font-size: 12px;'>Solar Radiation:</strong></td>" +
                    "<td><strong style='font-size: 12px;'>{{ $station['variables']['solar'] }}W/m2</strong></td></tr>" +
                        @endif

                            "</table>" +
                    "<h5 class='text-center' style='font-size: 12px; font-weight: 600;'>Last Updated {{ $station['variables']['last_updated'] }}</>" +
                    "<br><br>" +
                    "<button class='btn btn-info btn-sm btn-block' data-toggle='modal' type='button' data-target='#{{ $station['variables']['station'] }}'><i class='far fa-chart-bar'></i> Graph</button>"
            });

            var pointGraphic = 'graphic_' + i;
            pointGraphic = new Graphic({
                geometry: point,
                symbol: s,
                popupTemplate: pop_template
            });

            i++;

            // Add the graphics to the view's graphics layer
            view.graphics.add(pointGraphic);
            // });
            @endforeach

            /************************************************
             *
             * Create a layer from an existing Portal item hosted
             * in ArcGIS Online using the ID of the item.
             *
             *************************************************/
            Layer.fromPortalItem({
                portalItem: { // autocasts as new PortalItem()
                    id: "a8b2845ce34c4d5b81eccdcbd154d7a2"
                }
            }).then(addLayer)
                .catch(rejection);

            // Adds the layer to the map once it loads
            function addLayer(layer) {
                map.add(layer);
            }

            function rejection(err) {
                console.log("Layer failed to load: ", err);
            }
        });
    </script>


@endsection