@extends('frontend.layouts.observe')

@section('title')
    {{ ucfirst($values['station']) }} - CUrW Real Time Water Level 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;
        }

        #scroll {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 999;
        }

        @media screen and (max-width: 992px) {
            #map {
                max-width: 100% !important;
            }

            .form{
                margin-top: 170px;
            }
        }
    </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" id="scroll">
                        <h3 class="h3 text-center text-uppercase">
                            <i class="fas fa-tachometer-alt"></i> {{ $values['station'] }} - Water Level 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="fas fa-chart-area" aria-hidden="true"
                                           style="font-size: 60px;"></i>
                                        <span style="font-size: 70px;"
                                              class="w-level">
                                            @if($values['result']->isNotEmpty())
                                                {{ round((float) $values['water_level'], 2) }} m
                                            @else
                                                0.0 m
                                            @endif
                                        </span>
                                    </h3>
                                    <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>
                                        Water Level Station Location</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <div class="row form">
                        <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.form.data.wl.obs', 'class' => 'form-inline')) }}

                            <div class="row">
                                <div class="col-md-8 col-md-offset-2">
                                    <div class="col-md-5 col-sm-12 col-xs-12">
                                        <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 col-sm-12 col-xs-12">
                                        <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  col-sm-6 col-xs-6">
                                        {{ Form::button('submit', ['class' => 'btn btn-info', 'type' => 'submit']) }}
                                    </div>
                                </div>
                            </div>

                            {{ Form::close() }}

                            <hr>
                            @if($values['result']->isNotEmpty())
                                <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('after-scripts')

    {{-- Date picker --}}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <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 src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.26/moment-timezone-with-data.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())

        <script>
            $(document).ready(function () {

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

                        success: function (data) {

                            $(".w-level").text(Math.round(data['value'] * 100) / 100 + ' m');
                            $(".updated").text(data['time']);

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

                getStaticValues();
            });
        </script>

        <script type="text/javascript">
            Highcharts.setOptions({
                time: {
                    timezone: 'Asia/Colombo'
                }
            });

            $(function () {


                $.getJSON('{{ route('frontend.dynamic.get.obs.wl.station', ['station' => $values['station'], 'startd_date' => $values['start_date'], 'end_date' => $values['end_date']]) }}', 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">')
                        .appendTo('#container')
                        .highcharts({
                            chart: {
                                margin: [30, 80, 100, 80],
                                height: 450

                            },
                            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',
                                min: {{ (int) strtotime($values['start_date'] . ' 00:00:00') * 1000 }},
                                max: {{ (int) strtotime($values['end_date'] . ' 23:00:00') * 1000 }},
                                tickInterval: 3600 * 6000,
                                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,
                                // min: dataset.min,
                                {{--max: {!! $values['max']['value'] !!} + 0.2--}}
                            },
                            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
                                        // 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: {
                                //     animation: {
                                //         duration: 5000
                                //     }
                                // }
                            },
                            series: [{
                                data: dataset.data,
                                name: dataset.name,
                                type: dataset.type,
                                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]]]
                                //
                                // }
                            }]
                        });

                });
            });

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