@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 {
            width: 98%;
            margin: -30px auto 15px auto;
            padding: 35px 5px 20px 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);
        }
    </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 blue">--}}
                {{--<h3 class="text-center"><i class="fas fa-map"></i> CUrW Water Level Stations' Observed Key Map</h3>--}}
            {{--</div>--}}

            {{--<div class="card-body">--}}
                {{--<div class="row">--}}
                    {{--<div class="col-md-8 offset-md-2">--}}
                        <div id="map" style="width: 100%; height: 700px;"></div>
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
    </div>

    <!-- Graphs -->

    @foreach($stations as $key => $station)

        <div class="modal fade" id="{{ str_slug(strtolower($station['name'])) }}" 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="#"
                           id="{{ str_slug(strtolower($station['name'])) }}">{{ $station['name'] }} Water Level 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">
                        <div style=" height: auto; max-width: 100%;"
                             id="{{str_replace('-', '_', str_replace(' ', '_', strtolower($station['name'])))}}"></div>
                    </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="http://code.highcharts.com/stock/highstock.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 type="text/javascript">
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        @foreach($stations as $key => $station)

        $(function () {


            $.getJSON('{{ route('frontend.dynamic.map.get.water.levels.observed.station', ['station' => $station['name']]) }}', function (dataset) {

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

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

                        },
                        title: {
                            useHTML: true,
                            text: "<b style='color: #737272;'>" + dataset.name + " <i class='fas fa-square'></i></b>",
                            align: 'left',
                            // margin: 0,
                            x: 70,
                            y: -1,
                            style: {
                                fontSize: '14px'
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        legend: {
                            enabled: false
                        },
                        xAxis: {
                            type: 'datetime',
                            // tickInterval: 3600 * 1000,
                            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;

                                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
                                    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
                            }
                        },
                        series: [{
                            data: dataset.data,
                            name: dataset.name,
                            type: dataset.type,
                            fillOpacity: 0.3,
                            tooltip: {
                                valueDecimals: dataset.valueDecimals,
                                valueSuffix: dataset.unit
                            },
                        }]
                    });

            });
        });

        @endforeach
    </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({
                color: [0, 0, 0, 255],
                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'] }} Station" + "</b></div>",
                content:"<button class='btn btn-info btn-sm btn-block' data-toggle='modal' type='button' data-target='#{{ str_slug(strtolower($station['name'])) }}'><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