@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 Rainfall 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.rain.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']) }}
                                <div class="col-md-2">
                                    {{ Form::button('submit', ['class' => 'btn btn-info', 'type' => 'submit']) }}
                                </div>
                            </div>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>

            <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: 80vh;'>
                        <div class=""
                            style="width: 65%; position:absolute; z-index: 100; background-color: rgba(255,255,255,0.8); left: 25%; height: 450px; overflow: scroll;">
                            <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 North Dharmapala School" @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>
                                    <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="20" style="color:rgba(0, 0, 0, 1)">
                                                </label>
                                            </div>
                                            <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="setmax2" type="text" class="setmax2 form-control"
                                                        name="setmax" value="80" 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">Weather Stations - Observed Data</h5>
                    <div id="ws_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>
{{--// weather stations chart--}}
<script>
    $(document).ready(function () {

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


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

            var options_ws = {
                chart: {
                    renderTo: 'ws_chart',
                    // margin: [10, 175, 40, 40]
                },
                
                title: {
                    text: ''
                },
                xAxis: [{
                    type: 'datetime',
                    opposite: true,
                    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,
                    // 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
                },
                {
                    categories: [
                        '10 Minutes',
                        '30 Minutes',
                        '1 Hour',
                        '3 Hours'
                    ],
                    crosshair: true
                }
                ],
                yAxis: [{
                    reversed: true,
                    opposite: true,
                    title: {
                        text: 'mm 5 min',
                        style: {
                            fontSize: '14px',
                            fontWeight: '600'
                        }
                    },
                    height: '50%',
                    max: $("#setmax").val(),
                    min: 0
                },
                {
                    reversed: false,
                    opposite: false,
                    title: {
                        text: 'mm',
                        style: {
                            fontSize: '14px',
                            fontWeight: '600'
                        }
                    },
                    height: '50%',
                    top: '50%',
                    max: $("#setmax2").val(),
                    min: 0
                    
                }],
                plotOptions: {
                    column: {
                        minPointLength : 2
                    }
                },
                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::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=";
            $(".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: 'column',
                            name: activity.name,
                            data: activity.values,
                            yAxis: 0,
                            xAxis: 0,
                        });
                        chart_ws.addSeries({
                            id: val.replace(' ', '_').toLowerCase() + '_total',
                            type: 'column',
                            name: activity.name + ' Total Rain',
                            data: activity.accumulations,
                            yAxis: 1,
                            xAxis: 1,
                        });
                    });
                }
            });

            $(".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::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=";
                $(".ws_station").each(function (index, el) {
                    if ($(this).prop('checked')) {
                        val = $(this).val();
                        if (clickedVal === val) {
                            $.get(url + val, function (activity) {
                                $.get(url + val, function (activity) {
                                    chart_ws.addSeries({
                                        id: clickedVal.replace(' ', '_').toLowerCase(),
                                        type: 'column',
                                        name: activity.name,
                                        data: activity.values,
                                        yAxis: 0,
                                        xAxis: 0,
                                    });
                                    chart_ws.addSeries({
                                        id: clickedVal.replace(' ', '_').toLowerCase() + '_total',
                                        type: 'column',
                                        name: activity.name + ' Total Rain',
                                        data: activity.accumulations,
                                        yAxis: 1,
                                        xAxis: 1,
                                    });
                                });
                            });
                        }
                    } else {
                        chart_ws.series.forEach(
                            function (sr) {
                                if (sr.visible) {
                                    if (sr.name === clickedVal) {
                                        sr.remove();
                                    }
                                    else if(sr.name === clickedVal + ' Total Rain'){
                                        sr.remove();
                                    }
                                }
                            }
                        )
                    }
                });

            });
            $("#setmax").keyup(function(e){
                chart_ws.yAxis[0].update({
                    max: $(this).val()
                });
            });
            $("#setmax2").keyup(function(e){
                chart_ws.yAxis[1].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 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