@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: 30px;
    }

    .card-header-1 {
        width: 98%;
        margin: -20px auto 20px auto;
        padding: 5px 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;
    }

    .station-name {
        text-decoration: none;
        color: #292929;
    }
</style>
@endsection

@section('content')

<div class="container" 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> Real Time Water Level
                    Observations</strong>
            </h3>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="container">
                    <h4 class="text-center"><strong>Select the hour range</strong></h4>
                    <div class="col-md-8 col-md-offset-2">

                        {{ Form::open(array('route' => 'frontend.alert.get.form.data', 'class' => 'form-inline')) }}

                        <div class="col-md-5">
                            <label for="start_date" class="font-weight-bold">Start Time <i
                                    class="fas fa-calendar-alt"></i> <span class="red-text">*</span></label>
                            {{ Form::text('start_date',$start,['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 Time <i class="fas fa-calendar-alt"></i>
                                <span class="red-text">*</span></label>
                            {{ Form::text('end_date',$end,['class' => 'form-control end_date', 'id' => 'end_date', 'required' => 'required', 'autocomplete' => 'off']) }}
                        </div>
                        {{--                            {{ Form::hidden('current_start_date', null) }}--}}
                        {{--{{ Form::hidden('current_end_date', null) }}--}}
                        {{--{{ Form::hidden('station', null) }}--}}
                        <div class="col-md-2">
                            {{ Form::button('submit', ['class' => 'btn btn-info', 'type' => 'submit']) }}
                        </div>

                        {{ Form::close() }}
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-responsive">
                                <thead>
                                    <th>Station</th>
                                    {{--<th>Current Value</th>--}}
                                    <th>Value (max)</th>
                                    <th>Recorded at</th>
                                </thead>
                                <tbody>

                                    @foreach($values as $key => $value)
                                    {{--                                                {{ dd($value) }}--}}
                                    @if($value['value'] !== null)
                                    @if(isset($stations[$key]['name']))
                                    <tr style="background-color: {{ $stations[$key]['class'] }}">
                                        <td>

                                            <a class="station-name"
                                                href="{{route('frontend.dynamic.past.wl.obs', ['station' => $stations[$key]['name'], 'start_date' => \Carbon\Carbon::today()->format('Y-m-d'), 'end_date' => \Carbon\Carbon::today()->format('Y-m-d') ])}}"
                                                target="_blank">{{ $stations[$key]['name'] }}</a>
                                        </td>
                                        <td>{{ $value['value'] }} mMSL</td>
                                        <td>{{ $value['updated'] }}</td>
                                    </tr>
                                    @endif
                                    @endif

                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-4">
                            <h5 class="text-center"><i class="fas fa-circle" style="color: #26c6da;"></i>
                                Normal</h5>
                        </div>
                        <div class="col-md-4">
                            <h5 class="text-center"><i class="fas fa-circle" style="color: #ffee58;"></i>
                                Alert</h5>
                        </div>
                        <h5 class="text-center"><i class="fas fa-circle" style="color: #ffa726;"></i>
                            Flood</h5>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="div-raised" id='map' style='width: 100%; height: 450px;'></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection



@section('after-scripts')

<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>
<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",
                    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($values as $key => $value)
                        @if(isset($stations[$key]['name']))
                var point = {
                        type: "point", // autocasts as new Point()
                        longitude: "{{ $value['coordinates']['longitude'] }}",
                        latitude: "{{ $value['coordinates']['latitude'] }}"
                    };

                var g = new Graphic({
                    geometry: point,
                    symbol: {
                        type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                        // style: "circle",
                        color: [{{ $stations[$key]['rgb'] }}],
                        size: "36px",  // 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;'>{{ $value['value'] }} mMSL</strong></td></tr>" +
                            "<tr><td><strong style='font-size: 12px;'>Time:</strong></td>" +
                            "<td><strong style='font-size: 12px;'>{{ $value['updated'] }}</strong></td></tr>" +
                            "</table>"
                    }
                });

                view.graphics.add(g);
                @endif
                @endforeach
            });
</script>
@endsection