@extends('frontend.layouts.dynamic')

@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 Past Data Dynamic
                    Graphs</strong>
            </h3>
        </div>

        <div class="card-body">
            {{--<div class="row">--}}
            {{--<div class="col-md-8 col-md-offset-2">--}}
            {{--<h4 class="text-center"><strong>Select the date range</strong></h4>--}}
            {{--<div class="row justify-content-center">--}}
            {{--{{ Form::open(array('route' => 'frontend.dynamic.get.form.data', 'class' => 'form-inline')) }}--}}
            {{--<div class="col-md-8 col-md-offset-2">--}}
            {{--<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','d',['class' => 'form-control start_date', 'id' => 'start_date', 'required' => 'required', 'autocomplete' => 'off']) }}--}}
            {{--<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','d',['class' => 'form-control end_date', 'id' => 'end_date', 'required' => 'required', 'autocomplete' => 'off']) }}--}}
            {{--</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: 500px;'>
                        <table class="table table-responsive-sm"
                            style="width: 50%; position: absolute;z-index: 100; background-color: rgba(255,255,255,0.8); left: 47.5%;">
                            <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>
                                    <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>
                            </tr>
                        </table>
                    </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: 500px;"></div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-4">
                    <h5 class="h5 font-weight-bold text-center">Weather Stations</h5>
                    <div class="div-raised" id='map_ws' style='width: 100%; height: 500px;'>
                        <div class=""
                            style="width: 45%; position:absolute; z-index: 100; background-color: rgba(255,255,255,0.8); left: 53%; overflow-y: scroll; overflow-x: hidden; height: 280px;">
                            <table class="table table-responsive-sm">
                                <tr>
                                    <td>
                                        <form action="">
                                            @foreach($ws_stations as $key => $ws_station)
                                            @if($ws_station['name'] !== 'Kohuwala' || $ws_station['name'] !== 'KLB Obs')
                                            <label for="ws_{{ $key }}" class="container"
                                                style="cursor:pointer;">{{ $ws_station['name']  }} <input
                                                    id="ws_{{ $key }}" type="checkbox" class="ws_station" name="ws_st[]"
                                                    @if($ws_station['name']=='Kottawa North Dharmapala School' )
                                                    value="Kottawa" @else value="{{ $ws_station['name'] }}" @endif
                                                    @if($ws_station['name']=='IBATTARA2' ||
                                                    $ws_station['name']=='Kottawa North Dharmapala School' ||
                                                    $ws_station['name']=='Malabe' ){{ 'checked' }}@endif>
                                                <span class="checkmark"></span></label>
                                            @endif
                                            @endforeach
                                        </form>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <h5 class="h5 font-weight-bold text-center">Weather Stations - Observed Data</h5>
                    <div id="ws_chart" class="div-raised" style="width: 100%; height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@section('after-scripts')

{{--// highcharts data--}}
<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.13/moment-timezone-with-data-2012-2022.min.js">
</script>

{{--// water level chart--}}
<script>
    $(document).ready(function () {

            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            var options = {
                chart: {
                    renderTo: 'wl_chart',
                },
                title: {
                    text: ''
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 1
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    min: {!! (int) strtotime(\Carbon\Carbon::today()) * 1000 !!},
                    max: {!! (int) strtotime(\Carbon\Carbon::today()->addhours(23)) * 1000 !!},
                    tickInterval: 3600 * 6000,
                    // endOnTick: true,
                    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: 0.5
                },
                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::today(), 'end' => \Carbon\Carbon::now()]) !!}?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::today(), 'end' => \Carbon\Carbon::now()]) !!}?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++;
                                }
                            );
                        }
                    }
                });
            });
        });
</script>

{{--// weather stations chart--}}
<script>
    $(document).ready(function () {

            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            var options_ws = {
                chart: {
                    renderTo: 'ws_chart',
                    // margin: [10, 175, 40, 40]
                },
                title: {
                    text: ''
                },
                xAxis: {
                    type: 'datetime',
                    min: {!! (int) strtotime(\Carbon\Carbon::today()) * 1000 !!},
                    max: {!! (int) strtotime(\Carbon\Carbon::today()->addhours(23)) * 1000 !!},
                    tickInterval: 3600 * 6000,
                    // endOnTick: true,
                    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: 3.0
                },
                credits: {
                    enabled: false
                },
            };
            // Create the chart
            var chart_ws = new Highcharts.Chart(options_ws);


            var val = [];
            var url = "{!! route('frontend.dynamic.past.obs.map.ws-stations.data', ['start' => \Carbon\Carbon::today(), 'end' => \Carbon\Carbon::now()]) !!}?station=";
            $(".ws_station").each(function (index, el) {
                // console.log($(this).val());
                if ($(this).prop('checked')) {
                    val = $(this).val();
                    // if (clickedVal === val) {
                    $.get(url + val, function (activity) {
                        chart_ws.addSeries({
                            id: val.replace(' ', '_').toLowerCase(),
                            type: 'line',
                            name: activity.name,
                            data: activity.values
                        });
                    });
                }
            });

            $(".ws_station").click(function (e) {
                var val = [];
                var clickedVal = $(this).val();
                var url = "{!! route('frontend.dynamic.past.obs.map.ws-stations.data', ['start' => \Carbon\Carbon::today(), 'end' => \Carbon\Carbon::now()]) !!}?station=";
                $(".ws_station").each(function (index, el) {
                    if ($(this).prop('checked')) {
                        val = $(this).val();
                        if (clickedVal === val) {
                            $.get(url + val, function (activity) {
                                chart_ws.addSeries({
                                    id: val.replace(' ', '_').toLowerCase(),
                                    type: 'line',
                                    name: activity.name,
                                    data: activity.values
                                });
                            });
                        }
                    } else {
                        chart_ws.series.forEach(
                            function (sr) {
                                if (sr.visible) {
                                    if (sr.name === clickedVal) {
                                        sr.remove();
                                    }
                                }
                            }
                        )
                    }
                });

            });
        });
</script>

{{--// maps data--}}
<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 HH:00:00',
                maxDate: moment().format("YYYY-MM-DD HH:00:00")
            });

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

            // 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",
                    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
            });
</script>

{{--//map weather 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_ws",
                    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($ws_stations as $key => $ws_station)

                var point = {
                        type: "point", // autocasts as new Point()
                        longitude: "{{ $ws_station['longitude'] }}",
                        latitude: "{{ $ws_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>" + "{{ $stations[$key]['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;'>Value:</strong></td>" +--}}
                    {{--"<td><strong style='font-size: 12px;'>{{ $wl_station['value'] }} mMSL</strong></td></tr>" +--}}
                    {{--"<tr><td><strong style='font-size: 12px;'>Time:</strong></td>" +--}}
                    {{--"<td><strong style='font-size: 12px;'>{{ $wl_station['updated'] }}</strong></td></tr>" +--}}
                    {{--"</table>"--}}
                    {{--}--}}
                });

                view.graphics.add(g);

                @endforeach
            });
</script>
@endsection