@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">
    <!-- css for datepicker -->
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/bootstrap-datetimepicker.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/pmd-datetimepicker.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 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['temperature']['value'] !== null)
                                                {{ round((float) $values['temperature']['value'], 1) }}
                                                <sup style="font-size: 40px;">&#8451;</sup> @else NA @endif
                                        </span>
                                    </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() && $values['result'] !== null)
                                                                {{ 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() && $values['result'] !== null)
                                                                {{ 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() && $values['result'] !== null)
                                                        @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() && $values['result'] !== null)
                                                                {{ 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() && $values['result'] !== null)
                                                                {{ 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">
                            <hr>

                            <h4 class="text-center"><strong>Select date range to get the past data</strong></h4>

                            {{ Form::open(array('route' => 'frontend.dynamic.get.int.form.data', 'class' => 'form-inline')) }}

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2">
                                    <div class="col-md-5">
                                        <label for="start_date" class="font-weight-bold">Start Date <i
                                                    class="fas fa-calendar-alt"></i> <span
                                                    class="red-text">*</span></label>
                                        {{ Form::text('start_date',$values['start_date'],['class' => 'form-control start_date', 'id' => 'start_date', 'required' => 'required']) }}
                                    </div>
                                    <div class="col-md-5">
                                        <label for="end_date" class="font-weight-bold">End Date <i
                                                    class="fas fa-calendar-alt"></i> <span
                                                    class="red-text">*</span></label>
                                        {{ Form::text('end_date',$values['end_date'],['class' => 'form-control end_date', 'id' => 'end_date', 'required' => 'required']) }}
                                    </div>
                                    {{ Form::hidden('current_start_date', $values['start_date']) }}
                                    {{ Form::hidden('current_end_date', $values['end_date']) }}
                                    {{ Form::hidden('station', $values['station']) }}
                                    <div class="col-md-2">
                                        {{ Form::button('submit', ['class' => 'btn btn-info', 'type' => 'submit']) }}
                                    </div>
                                </div>
                            </div>

                            {{ Form::close() }}

                            <hr>
                            @if($values['result']->isNotEmpty() && $values['result'] !== null)
                                <div id="container" style="height: auto; max-width: 100%;"></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')

    {{-- Date picker --}}
    <script type="text/javascript" src="{{ URL::asset('js/moment-with-locales.js') }}"></script>
    <script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.js') }}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

    <script type="text/javascript">
        $(function () {

            // Date picker 1
            /* Linked date and time picker */
            // start date date and time picker
            $('.start_date').datetimepicker({
                format: 'YYYY-MM-DD',
                maxDate: moment()
            });

            // End date date and time picker
            $('.end_date').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: false,
                maxDate: moment()
            });

            // start date picke on chagne event [select minimun date for end date datepicker]
            $(".start_date").on("dp.change", function (e) {
                $('.end_date').data("DateTimePicker").minDate(e.date);
            });
            // Start date picke on chagne event [select maxmimum date for start date datepicker]
            $(".end_date").on("dp.change", function (e) {
                $('.start_date').data("DateTimePicker").maxDate(e.date);
            });


        });
    </script>

    <style>
        @import 'https://code.highcharts.com/css/highcharts.css';

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

    @if($values['result']->isNotEmpty() && $values['result'] !== null)
        <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

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

                            @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="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://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.26/moment-timezone-with-data.min.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() && $values['result'] !== null)
        <script>
            $(document).ready(function () {
                /*
                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({
                        time: {
                            timezone: 'Asia/Colombo'
                        }
                    });

                {{--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.dynamic.past.int.ws.get.data', ['station' => $values['station'], 'start_date' => $values['start_date'], 'end_date' => $values['end_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">')
                            .appendTo('#container')
                            .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',
                                    x: 70,
                                    y: -1,
                                    style: {
                                        fontSize: '14px'
                                    }
                                },
                                credits: {
                                    enabled: false
                                },
                                legend: {
                                    enabled: false
                                },
                                xAxis: {
                                    crosshair: true,
                                    min: {{ (int) strtotime($values['start_date'] . ' 00:00:00') * 1000 }},
                                    max: {{ (int) strtotime($values['end_date'] . ' 23:00:00') * 1000 }},
                                    type: 'datetime',
                                    tickInterval: 3600 * 6000,
                                    events: {
                                        setExtremes: syncExtremes
                                    },
                                    endOnTick: true,
                                    ordinal: true,
                                    useHTML: true,
                                    labels: {
                                        formatter: function () {
                                            return "<b style='font-size: 12px;>" + moment(this.value).tz("Asia/Colombo").format('Do 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

    <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>

@endsection