@extends('frontend.layouts.observe')

@section('after-styles')
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.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>
    .card {
        margin-top: 50px;
    }

    .card-header-1 {
        width: 98%;
        margin: -30px auto 15px auto;
        padding: 15px 5px 5px 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: linear-gradient(60deg, #038DDD, #095EAE);
        -webkit-box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
    }

    .div-raised {
        -webkit-box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 17px -6px rgba(0, 0, 0, 0.75);
    }

    table.top tr td {
        padding: 6px 12px;
        color: #292929;
        font-weight: 500;
    }

    /* The container */
    .container {
        max-width: 180px;
        display: inline-block;
        position: relative;
        padding-left: 20px;
        margin-bottom: 3px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        color: #000;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default checkbox */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 10px;
        width: 10px;
        background-color: rgba(128, 128, 128, 0.49);
    }

    /* On mouse-over, add a grey background color */
    .container:hover input~.checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container input:checked~.checkmark {
        background-color: #2196F3;
    }

    /* When the checkbox is checked, add a blue background */
    .container:hover input:checked~.checkmark {
        background-color: rgba(33, 150, 243, 0.7);
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container input:checked~.checkmark:after {
        display: block;
    }
</style>
@endsection

@section('content')

<div class="container-fluid" style="margin-bottom: 10px;">
    <div class="card">
        <div class="card-header-1 blue">
            <h3 class="text-center"><strong><i class="fas fa-tachometer-alt"></i> Observed Water Level Mutiple Stations
                    Dynamic
                    Graph</strong>
            </h3>
        </div>

        <div class="card-body">
            <div class="row  justify-content-center">
                <div class="col-md-12">
                    <h4 class="text-center"><strong>Select date range for data filetering</strong></h4>
                    <div class="row justify-content-center">
                        {{ Form::open(array('route' => 'frontend.dynamic.get.obs.wl.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', 'autocomplete' => 'off']) }}
                                </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', 'autocomplete' => 'off']) }}
                                </div>
                                {{ Form::hidden('current_start_date', \Carbon\Carbon::parse($values['start_date'])->format('Y-m-d H:i:s')) }}
                                {{ Form::hidden('current_end_date', \Carbon\Carbon::parse($values['end_date'])->format('Y-m-d H:i:s')) }}
                                <div class="col-md-2">
                                    {{ Form::button('submit', ['class' => 'btn btn-info', 'type' => 'submit']) }}
                                </div>
                            </div>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-4">
                    <h5 class="h5 font-weight-bold text-center">Water Level Stations</h5>
                    <div class="div-raised" id='map_wl' style='width: 100%; height: 80vh;'>
                        <div
                            style="width: 90%; position: absolute;z-index: 100; background-color: rgba(255,255,255,0.9); left: 5%; overflow-x: scroll;">
                            <table class="table table-responsive-sm">
                                <tr>
                                    <td>
                                        <form action="">
                                            {{-- <div class="form-group"> --}}
                                            @foreach($wl_stations as $key => $wl_station)
                                            <label for="wl_{{ $key }}" class="container" style="cursor:pointer;">
                                                {{ $wl_station['name']  }}
                                                <input id="wl_{{ $key }}" type="checkbox" class="wl_station"
                                                    name="wl_st[]" value="{{ $wl_station['name']  }}"
                                                    @if($wl_station['name']=='Ingurukade' ||
                                                    $wl_station['name']=='Janakala Kendraya' ){{ 'checked' }}@endif>
                                                <span class="checkmark"></span>
                                            </label>
                                            @endforeach
                                            {{-- </div> --}}
                                        </form>
                                    </td>
                                    <td style="border-left: 1px solid #000; width: 150px!important;">
                                        <form action="">
                                            {{-- <div class="form-group"> --}}
                                            @foreach($wl_stations as $key => $wl_station)
                                            <label for="wlc_{{ $key }}" class="container" style="cursor:pointer;"> <i
                                                    class="fas fa-chart-line"></i>
                                                <input id="wlc_{{ $key }}" type="checkbox" class="wlc_station"
                                                    name="wlc_st[]" value="{{ $wl_station['name']  }}">
                                                <span class="checkmark"></span></label>
                                            @endforeach
                                            {{-- </div> --}}
                                        </form>
                                    </td>
                                    <td style="border-left: 1px solid #000;  width: 250px!important;">
                                        {{-- <form action=""> --}}
                                        <div class="form-group">
                                            <label for="sestmax" class="control-label font-weight-bold"
                                                style="cursor:pointer; color:rgba(0, 0, 0, 1)">
                                                <strong>Set Max Value</strong>
                                                <input id="setmax" type="text" class="setmax form-control" name="setmax"
                                                    value="3" style="color:rgba(0, 0, 0, 1)">
                                            </label>
                                        </div>
                                        {{-- </form> --}}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <h5 class="h5 font-weight-bold text-center">Water Level - Observed Data</h5>
                    <div id="wl_chart" class="div-raised" style="width: 100%; height: 80vh;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@section('after-scripts')

{{--// highcharts data--}}
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="{{ URL::asset('js/moment-with-locales.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.26/moment-timezone.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.js"></script>
<script>
    $(document).ready(function () {

            Highcharts.setOptions({
                time: {
                    timezone: 'Asia/Colombo'
                },
            });

            var options = {
                chart: {
                    renderTo: 'wl_chart',
                },
                title: {
                    text: ''
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 1
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    min: {!! (int) strtotime(\Carbon\Carbon::parse($values['start_date'])->format('Y-m-d H:i:s')) * 1000 !!},
                    max: {!! (int) strtotime(\Carbon\Carbon::parse($values['end_date'])->format('Y-m-d H:i:s')) * 1000 !!},
                    tickInterval: 3600 * 6000,
                    ordinal: true,
                    useHTML: true,
                    labels: {
                        formatter: function () {
                            return "<b style='font-size: 12px;>" + moment(this.value).format('Do HH:mmA') + "</b>";
                        }
                    },
                    // offset: 10
                },
                yAxis: {
                    max: $("#setmax").val()
                },
                credits: {
                    enabled: false
                },
            };
            // Create the chart
            var chart = new Highcharts.Chart(options);


            var val = [];
            var mx = [];
            var x = 0;
                var url = "{!! route('frontend.dynamic.past.obs.map.wl-stations.data', ['start' => \Carbon\Carbon::parse($values['start_date'])->format('Y-m-d H:i:s'), 'end' => \Carbon\Carbon::parse($values['end_date'])->format('Y-m-d H:i:s')]) !!}?station=";
            $(".wl_station").each(function (index, el) {
                if ($(this).prop('checked')) {
                    mx = [];
                    val = $(this).val();
                    $.get(url + val, function (activity) {
                        chart.addSeries({
                            id: val.replace(' ', '_').toLowerCase(),
                            type: 'scatter',
                            name: activity.name,
                            data: activity.values,
                            tooltip: {
                                crosshairs: true,
                                headerFormat: '<b>{series.name}</b><br>',
                                pointFormat: 'x: <b>{point.x:%d-%b-%y %H:%M}</b><br/>y: <b>{point.y}</b><br/>'
                            },
                        });
                        // if (activity.max > 3.0) {
                        //     chart.yAxis[0].update({
                        //         max: 3.0
                        //     });
                        // }
                    });
                }
            });

            $(".wl_station").click(function (e) {
                var val = [];
                var clickedVal = $(this).val();
                var url = "{!! route('frontend.dynamic.past.obs.map.wl-stations.data', ['start' => \Carbon\Carbon::parse($values['start_date'])->format('Y-m-d H:i:s'), 'end' => \Carbon\Carbon::parse($values['end_date'])->format('Y-m-d H:i:s')]) !!}?station=";
                $(".wl_station").each(function (index, el) {
                    if ($(this).prop('checked')) {
                        val = $(this).val();
                        if (clickedVal === val) {
                            $.get(url + val, function (activity) {
                                chart.addSeries({
                                    id: val.replace(' ', '_').toLowerCase(),
                                    type: 'scatter',
                                    name: activity.name,
                                    data: activity.values,
                                    tooltip: {
                                        crosshairs: true,
                                        headerFormat: '<b>{series.name}</b><br>',
                                        pointFormat: 'x: <b>{point.x:%d-%b-%y %H:%M}</b><br/>y: <b>{point.y}</b><br/>'
                                    },
                                });

                                // if (activity.max > 3.0) {
                                //     chart.yAxis[0].update({
                                //         max: 3.0
                                //     });
                                // }
                            });
                        }
                    } else {
                        chart.series.forEach(
                            function (sr) {
                                if (sr.visible) {
                                    if (sr.name === clickedVal) {
                                        sr.remove();
                                    }
                                }
                            }
                        )
                    }
                });
            });

            $(".wlc_station").click(function (e) {
                var clickedVal = $(this).val();
                $(".wlc_station").each(function (index, el) {                    
                        if ($(this).prop('checked')) {
                            val = $(this).val();
                            if (clickedVal === val) {
                                var n = 0;
                                    chart.series.forEach(
                                        function (sr) {
                                            if (sr.visible) {
                                                if (sr.name === val) {
                                                    chart.series[n].update({
                                                        type: 'line'
                                                    });
                                                }
                                            }
                                            n++;
                                        }
                                    );
                                }
                        } 
                        else {
                        val = $(this).val();
                        if (clickedVal === val) {
                            var n = 0;
                            chart.series.forEach(
                                function (sr) {
                                    if (sr.visible) {
                                        if (sr.name === val) {
                                            chart.series[n].update({
                                                type: 'scatter'
                                            });
                                        }
                                    }
                                n++;
                                }
                            );
                        }
                    }
                });
            });

            $("#setmax").keyup(function(e){
                chart.yAxis[0].update({
                    max: $(this).val()
                });
            });
        });
</script>

{{--// maps data--}}
<script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.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 hh A',
                // useCurrent: false,
                // minDate: moment()
            });

            // End date date and time picker
            $('.end_date').datetimepicker({
                format: 'YYYY-MM-DD hh A',
                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>

<script src="https://js.arcgis.com/4.9/"></script>

{{--//map water level stations--}}
<script>
    require([
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic"
            ],
            function (
                Map,
                MapView,
                Graphic
            ) {

                var map = new Map({
                    basemap: "streets"
                });

                var view = new MapView({
                    container: "map_wl",
                    slider: false,
                    map: map,
                    center: [79.91467, 6.90101],
                    zoom: 12,
                    // Since there are many elements, it is best to dock the popup so
                    // the elements display better rather than have to scroll through them all.
                    popup: {
                        dockEnabled: true,
                        dockOptions: {
                            buttonEnabled: false,
                            breakpoint: false
                        }
                    }
                });

                        @foreach($wl_stations as $key => $wl_station)

                var point = {
                        type: "point", // autocasts as new Point()
                        longitude: "{{ $wl_station['longitude'] }}",
                        latitude: "{{ $wl_station['latitude'] }}"
                    };

                var g = new Graphic({
                    geometry: point,
                    symbol: {
                        type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                        style: "circle",
                        color: [0, 0, 0, 0.7],
                        size: "20px",  // pixels
                        outline: {  // autocasts as new SimpleLineSymbol()
                            // color: [255, 255, 0],
                            width: 0  // points
                        }
                    },
                    // {{--popupTemplate: { // autocasts as new PopupTemplate()--}}
                    // {{--title: "<div class='text-center' style='font-size: 18px; font-weight: 900; color: #2E2E2E;'><b>" + "{{ $wl_station['name'] }}" + "</b></div>",--}}
                    // {{--content:--}}
                    // {{--"<table class='table table-responsive-sm table-striped' style='font-size: 12px; margin: 0 auto;'>" +--}}
                    // {{--"<tr><td><strong style='font-size: 12px;'><label class='btn btn-success btn-sm' for='wl_{{ $key }}'>ADD</label></strong></td>" +--}}
                    // {{--"<td><strong style='font-size: 12px;'><input type='checkbox' id='wl_{{ $key }}' class='checkbox' name='wl-stations[]' value='{{ $wl_station['name'] }}'></strong></td></tr>" +--}}
                    // {{--"</table>"--}}
                    // {{--}--}}
                });

                view.graphics.add(g);

                @endforeach
            });
            // document.getElementById("map_zoom_slider").className = document.getElementById("map_zoom_slider").className.replace(/\esriSimpleSliderTL\b/,'');   
            // document.getElementById("map_zoom_slider").className += " esriSimpleSliderBR"; 
</script>


@endsection