@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;
        }
    </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'] }} & {{ $values['rainfall'] }}
                            OBSERVATIONS
                        </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">
                        <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.wlr.obs', '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']) }}
                                    {{ Form::hidden('rainfall', $values['rainfall']) }}
                                    <div class="col-md-2">
                                        {{ 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.wlr.station', ['station' => $values['station'], 'rainfall' => $values['rainfall'], 'startd_date' => $values['start_date'], 'end_date' => $values['end_date']]) }}', function (dataset) {
                    // console.log(dataset.datasets[0].data);
                    // Add X values
                    if (dataset.datasets[0].data !== null) {
                        dataset.datasets[0].data = Highcharts.map(dataset.datasets[0].data, function (val, j) {
                            return [dataset.xData[j], val];
                        });
                    }

                    if (dataset.datasets[1].data !== null) {
                        dataset.datasets[1].data = Highcharts.map(dataset.datasets[1].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;'>" + 'Observed Water Level & Rainfall' + "</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: [{
                                lineWidth: 1,
                                min: dataset.datasets[0].min,
                                title: {
                                    text: 'Water Level',
                                    style: {
                                        fontSize: '14px',
                                        fontWeight: '700',
                                        color: '#2cb0cc'
                                    }
                                }
                            }, {
                                lineWidth: 1,
                                reversed: true,
                                opposite: true,
                                title: {
                                    text: 'Rainfall',
                                    style: {
                                        fontSize: '14px',
                                        fontWeight: '700'
                                    }
                                }

                            }],
                            {{--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: 0,--}}
                                    {{--    --}}{{--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.datasets[0].data,
                                    name: dataset.datasets[0].name,
                                    type: dataset.datasets[0].type,
                                    fillOpacity: 0.3,
                                    tooltip: {
                                        valueDecimals: dataset.datasets[0].valueDecimals,
                                        valueSuffix: dataset.datasets[0].unit
                                    }
                                },
                                {
                                    data: dataset.datasets[1].data,
                                    name: dataset.datasets[1].name,
                                    type: dataset.datasets[1].type,
                                    yAxis: 1,
                                    fillOpacity: 0.3,
                                    tooltip: {
                                        valueDecimals: dataset.datasets[1].valueDecimals,
                                        valueSuffix: dataset.datasets[1].unit
                                    }
                                }
                                {{--    data: [--}}
                                {{--            @foreach($values['rainfall_values'] as $value)--}}
                                {{--        [{{ strtotime($value['time']) * 1000 }},--}}
                                {{--            {{ $value['value'] }}],--}}
                                {{--        @endforeach--}}
                                {{--    ],--}}
                                {{--    name: '{!! $values['rainfall'] !!}',--}}
                                {{--    type: 'column',--}}
                                {{--    yAxis: {--}}
                                {{--        reversed: true--}}
                                {{--    },--}}
                                {{--    fillOpacity: 0.3--}}
                                {{--    // tooltip: {--}}
                                {{--    //     valueDecimals: dataset.valueDecimals,--}}
                                {{--    //     valueSuffix: dataset.unit--}}
                                {{--    // }--}}
                                {{--}, --}}
                            ]
                        });

                });
            });

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