@extends('frontend.layouts.observe')

@section('title')
    {{ $values['station'] }} - CUrW Real Time Weather Data
@endsection

@section('meta')
    <meta http-equiv="refresh" content="3600">
@endsection

@section('after-styles')

    <link rel="stylesheet" href="//js.arcgis.com/3.7/js/esri/css/esri.css">

    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #viewDiv {
            height: 450px;
        }

        .chart {
            min-width: 320px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>



@endsection

@section('content')

    <div class="container-fluid" style="padding: 2%;">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-raised card-nav-tabs">
                    <div class="header header-dark-blue">
                        <h3 class="h3 text-center text-uppercase">
                            <i class="fas fa-tachometer-alt"></i> {{ $values['station'] }} - Weather Station Real Time
                            Data
                        </h3>
                    </div>
                    <div class="clearfix"></div>

                    <div class="row" style="height: 250px;">
                        <div class="col-md-offset-1 col-md-10">
                            <div class="row">
                                <div class="col-md-4">
                                    <h3 class="text-center">
                                        <i class="fa fa-thermometer-half" aria-hidden="true"
                                           style="font-size: 60px;"></i>
                                        <span style="font-size: 70px;"
                                              class="temperature">
                                            @if($values['result']->isNotEmpty())
                                                {{ round((float) $values['temperature']['value'], 1) }}
                                            @else
                                                0.0
                                            @endif
                                        </span>
                                        <sup style="font-size: 40px;">&#8451;</sup>
                                    </h3>
                                    <table class="table table-responsive table-striped" style="font-size: 15px;">
                                        @if($values['humidity']['value'] !== null)
                                            <tr>
                                                <td><strong>Humidity:</strong></td>
                                                <td><strong><span
                                                                class="humidity">
                                                            @if($values['result']->isNotEmpty())
                                                                {{ round((int) $values['humidity']['value']) }}
                                                            @else
                                                                0
                                                            @endif
                                                        </span>
                                                        %</strong></td>
                                            </tr>
                                        @endif
                                        @if($values['windspeed']['value'])
                                            <tr>
                                                <td><strong>Wind Speed:</strong></td>
                                                <td><strong><span
                                                                class="windspeed">
                                                            @if($values['result']->isNotEmpty())
                                                                {{ round((float) $values['windspeed']['value'], 1) }}
                                                            @else
                                                                0
                                                            @endif
                                                        </span>
                                                        m/s</strong></td>
                                            </tr>
                                        @endif
                                        @if($values['winddirection']['value'] !== null)
                                            <tr>
                                                <td><strong>Wind from:</strong></td>
                                                <td>
                                                    @if($values['result']->isNotEmpty())
                                                        @if(round((float) $values['winddirection']['value'], 2) >= 337.50 || (float) $values['winddirection']['value'] <= 22.50)
                                                            <strong class="winddirection">North</strong>
                                                        @elseif(round((float) $values['winddirection']['value'], 2) >= 22.50 && (float) $values['winddirection']['value'] <= 67.50)
                                                            <strong class="winddirection">North East</strong>
                                                        @elseif(round((float) $values['winddirection']['value'], 2) >= 67.50 && (float) $values['winddirection']['value'] <= 112.50)
                                                            <strong class="winddirection">East</strong>
                                                        @elseif(round((float) $values['winddirection']['value'], 2) >= 112.50 && (float) $values['winddirection']['value'] <= 157.50)
                                                            <strong class="winddirection">South East</strong>
                                                        @elseif(round((float) $values['winddirection']['value'], 2) >= 157.50 && (float) $values['winddirection']['value'] <= 202.50)
                                                            <strong class="winddirection">South</strong>
                                                        @elseif(round((float) $values['winddirection']['value'], 2) >= 202.50 && (float) $values['winddirection']['value'] <= 247.50)
                                                            <strong class="winddirection">South West</strong>
                                                        @elseif(round((float) $values['winddirection']['value'], 2) >= 247.50 && (float) $values['winddirection']['value'] <= 292.50)
                                                            <strong class="winddirection">West</strong>
                                                        @elseif(round((float) $values['winddirection']['value'], 2) >= 292.50 && (float) $values['winddirection']['value'] <= 337.50)
                                                            <strong class="winddirection">North West</strong>
                                                        @endif
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                            </tr>
                                        @endif
                                        @if($values['windgust']['value'] !== null)
                                            <tr>
                                                <td><strong>Wind Gust:</strong></td>
                                                <td><strong><span
                                                                class="windgust">
                                                            @if($values['result']->isNotEmpty())
                                                                {{ round((float) $values['windgust']['value'], 1) }}
                                                            @else
                                                                0
                                                            @endif
                                                        </span>
                                                        m/s</strong></td>
                                            </tr>
                                        @endif
                                        @if($values['solarradiation']['value'] !== null)
                                            <tr>
                                                <td><strong>Solar Radiation:</strong></td>
                                                <td><strong><span
                                                                class="solarradiation">
                                                            @if($values['result']->isNotEmpty())
                                                                {{ round((float) $values['solarradiation']['value'], 2) }}
                                                            @else
                                                                0
                                                            @endif
                                                        </span>
                                                        W/m2</strong></td>
                                            </tr>
                                        @endif
                                    </table>
                                    <h6 class="text-center" style="font-weight: 600; font-size: 11px">Last updated <span
                                                class="updated">{{ $values['updated'] }}</span></h6>
                                </div>
                                <div class="col-md-8" style="padding: 1.5%;">
                                    <div id="map" style=" height: 300px;"></div>
                                    <h5 class="text-center"><i class="fas fa-circle" style="color: #ff0000;"></i>
                                        Weather Station Location</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            @if($values['result']->isNotEmpty())
                                <div id="container" style="height: auto;"></div>
                            @else
                                <h3 class="text-center" style="color: #d32f2f;"><i
                                            class="fas fa-exclamation-triangle"></i> Weather Station hasn't respond
                                    since {{ $values['updated'] }} <i class="fas fa-exclamation-triangle"></i></h3>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('before-scripts')

@endsection

@section('after-scripts')
    <style>
        @import 'https://code.highcharts.com/css/highcharts.css';

        .highcharts-plot-border {
            stroke-width: 1px;
            stroke: #a1a0a0;
        }
    </style>

    @if($values['result']->isNotEmpty())
        <script>
            $(document).ready(function () {

                function getStaticValues() {
                    $.ajax({
                        url: '{{ route('frontend.observation.get.static.values.curw', $values['station']) }}',
                        type: 'POST',
                        dataType: 'JSON',
                        headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                        data: {_token: "{{ csrf_token() }}"},

                        success: function (data) {
                            @if($values['humidity']['value'] !== null)
                            $(".humidity").text(Math.round(data['humidity']['value']));
                            @endif
                            $(".temperature").text(Math.round(data['temperature']['value'] * 10) / 10);

                            @if($values['windspeed']['value'] !== null)
                            $(".windspeed").text(Math.round(data['windspeed']['value'] * 10) / 10);
                            @endif

                            @if($values['solarradiation']['value'] !== null)
                            $(".solarradiation").text(Math.round(data['solarradiation']['value'] * 100) / 100);
                            @endif

                            $(".updated").text(data['updated']);


                            @if($values['winddirection']['value'] !== null)
                            if (Math.round(data['winddirection']['value'] * 100) / 100 >= 337.50 || Math.round(data['winddirection']['value'] * 100) / 100 <= 22.50) {
                                $(".winddirection").text("North");
                            }
                            else if (Math.round(data['winddirection']['value'] * 100) / 100 >= 22.50 && Math.round(data['winddirection']['value'] * 100) / 100 <= 67.50) {
                                $(".winddirection").text("North East");
                            }
                            else if (Math.round(data['winddirection']['value'] * 100) / 100 >= 67.50 && Math.round(data['winddirection']['value'] * 100) / 100 <= 112.50) {
                                $(".winddirection").text("East");
                            }

                            else if (Math.round(data['winddirection']['value'] * 100) / 100 >= 112.50 && Math.round(data['winddirection']['value'] * 100) / 100 <= 157.50) {
                                $(".winddirection").text("South East");
                            }

                            else if (Math.round(data['winddirection']['value'] * 100) / 100 >= 157.50 && Math.round(data['winddirection']['value'] * 100) / 100 <= 202.50) {
                                $(".winddirection").text("South");
                            }

                            else if (Math.round(data['winddirection']['value'] * 100) / 100 >= 202.50 && Math.round(data['winddirection']['value'] * 100) / 100 <= 247.50) {
                                $(".winddirection").text("South West");
                            }

                            else if (Math.round(data['winddirection']['value'] * 100) / 100 >= 247.50 && Math.round(data['winddirection']['value'] * 100) / 100 <= 292.50) {
                                $(".winddirection").text("West");
                            }

                            else if (Math.round(data['winddirection']['value'] * 100) / 100 >= 292.50 && Math.round(data['winddirection']['value'] * 100) / 100 <= 337.50) {
                                $(".winddirection").text("North West");
                            }
                            @endif

                            setTimeout(function () {
                                getStaticValues();
                            }, 10000);
                        },
                        error: function (data) {
                            console.log(data);
                        }
                    });
                }

                getStaticValues();
            });
        </script>
    @endif
    <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: [{{ $values['coordinates']['longitude'] }}, {{ $values['coordinates']['latitude']   }}],
                zoom: 10
            });
            map.on("load", function () {
                var gl = new GraphicsLayer();
                var p = new Point({{ $values['coordinates']['longitude'] }}, {{ $values['coordinates']['latitude']   }});
                var s = new SimpleMarkerSymbol({
                    "color": [255, 0, 0, 255],
                    "size": 13,
                    "type": "esriSMS",
                    "style": "STYLE_CIRCLE",
                });
                var pointAttributes = {Station: "{{ $values['station'] }} Weather Station"};
                var pointInfoTemplate = new InfoTemplate(" {{ $values['station'] }} ");
                var g = new Graphic(p, s, pointAttributes).setInfoTemplate(pointInfoTemplate);
                gl.add(g);
                map.addLayer(gl);
            });
        });
    </script>

    {{--<script src="http://code.highcharts.com/stock/highstock.js"></script>--}}
    {{--<script src="https://code.highcharts.com/modules/series-label.js"></script>--}}
    {{--<script src="https://code.highcharts.com/modules/boost.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 src="https://code.highcharts.com/highcharts.js"></script>
    {{--<script src="https://code.highcharts.com/highcharts-more.js"></script>--}}
    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>--}}

    @if($values['result']->isNotEmpty())
        <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 }};--}}

            /**
             * In order to synchronize tooltips and crosshairs, override the
             * built-in events with handlers defined on the parent element.
             */
            $('#container').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 */
            };

            /**
             * 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'});
                            }
                        }
                    });
                }
            }

            $.getJSON('{{ route('frontend.observation.get.live.curw', $values['station']) }}', 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">')
                        .appendTo('#container')
                        .highcharts({
                            chart: {
                                margin: [30, 80, 100, 80],
                                height: 320

                            },
                            events: {
                                load: function () {
                                    $.ajax({
                                        url: "{{ route('frontend.observation.get.static.values', $values['station']) }}",
                                        success: function (data) {
                                            var series = chart.series[0],
                                                shift = series.data.length > 20;
                                            /*  shift if the series is
                                                                                                                             longer than 20 */
                                            point = [parseInt(data["'" + dataset.name + "'"]['time']), parseFloat(data["'" + dataset.name + "'"]['value'])];
                                            /*  add the point */
                                            chart.series[0].addPoint(point, true, shift);

                                            /*  call it again after one second */
                                            setTimeout(requestData, 5000);
                                        },
                                        cache: false
                                    });
                                }
                            },
                            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',
                                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,
                                        y: -8
                                    };
                                },
                                borderWidth: 0,
                                backgroundColor: '#ffffff',
                                pointFormat: '{point.y}',
                                valueDecimals: dataset.valueDecimals,
                                headerFormat: '',
                                shadow: false,
                                style: {
                                    fontSize: '13px'
                                }
                            },
                            plotOptions: {
                                column: {
                                    "minPointLength": 2,
                                    pointInterval: 3600 * 1000
                                }
                            },
                            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
                            }]
                        });

                });
            });
        </script>
    @endif

@endsection