@extends('layouts.main')

@push('styles')
<!-- Include Date Range Picker -->
<link rel="stylesheet" type="text/css" href="{{asset('css/daterangepicker.css')}}" />
<!-- Include Date Range Picker -->
<link rel="stylesheet" type="text/css" href="{{asset('css/easy-button.css')}}" />
<link href='{{asset('css/leaflet.draw.css')}}' rel='stylesheet' />
<style>
    .easy-button-container {
	width: 34px;
	height: 34px;
	line-height: 34px;
	}
</style>
@endpush
@section('content')
<div class="row">
	 <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                <div class="card-block">   
                        <div class="form-body">    
                            <div class="col-md-6">       
                                    <label for="imei">IMEI</label>
                                    <p class="form-control-plaintext">{{$device->IMEI}}</p>
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group">
                                    <label for="alias">Alias</label>
                                    <p class="form-control-plaintext">{{$device->ALIAS}}</p>
                                </div>   
                            </div>
                        </div> 
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" >
    <div class="col-md-12" >
        <div class="card">         
            <div class="card-header">
                <h1 class="form-section">{{ __('strings.geofence_registration') }} </h1>
            </div>   
            <div class="card-body">
                
                <div class="clearfix"></div><hr>
                <h2>{{__('strings.emails_configuration')}}</h2>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">ALIAS</span>
                    </div>
                    <input type="text" id="alias" value="{{$alert->alias}}" class="form-control" required="required" placeholder="{{__('strings.geofence_alias')}}" maxlength="64">
                </div>
                                               
                <div id="emails" class="form-group">    
                    @foreach($alert->emails as $email)
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;</span>
                        </div>
                        <input type="email" id="emails[]" name="emails[]" value="{{$email}}" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-12" >
                    </div>
                    @endforeach
                </div>    


                <div class="form-group">
                    <span class="float-sm-right">
                        <button  type="button" class="btn btn-success" onclick="addEmailField()"><i class="fa fa-plus"></i></button>
                    </span>                    
                </div><br>

                <div class="form-group">
                    <label for="single-select">{{__('strings.type')}}</label>
                    <select id="type" name="type" class="form-control">
                        <option value="in" {{$alert->type == 'in' ? "selected":""}}>{{__('strings.notify_in_geofence')}}</option>
                        <option value="out" {{$alert->type == 'out' ? "selected":""}}>{{__('strings.notify_out_geofence')}}</option>
                    </select>
                </div>

                <div class="clearfix"></div><hr>
                <h2>{{__('strings.simple_geofence_daterange')}}</h2>
                <div id="geofence-range" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;" class="col-md-6">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down"></i>
                </div>
                
                <div class="clearfix"></div><hr>               
                <h2>{{__('strings.simple_geofence_build')}}</h2>
                <div class="dashboard-widget-content">
                    <div class="col-md-12 col-sm-12 col-xs-12" style="height:500px;">
                        <div id='map'></div>
                    </div>
                </div>
                
                <div class="clearfix"></div><hr>
                <div class="form-group">
                    <div class="col-md-12 col-md-offset-3">
                        <a href="#" onclick="window.history.back();" class="btn btn-secondary">  {{__('strings.submit_cancel')}} </a>    
                        <button id="btn_add_geofence" type="button" class="btn btn-primary" onclick="addGeofence()">{{__('strings.submit_update')}}</button>
                    </div>
                </div> 
            </div>   
    </div>
    </div>
 </div>
@endsection

@push('scripts')
<script src="{{asset('js/daterangepicker.js')}}"></script>
<script src="{{asset('js/easy-button.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet.draw.js')}}" type="text/javascript"></script>
<script src="{{asset('js/bootbox.min.js')}}" type="text/javascript"></script>
<script>
var map; // leaflet map object
var path; // leaftlet ant layer
var picker;
var coordinates = []; // arreglo de coordenadas
var featureGroup;
var drawControl;
// GeoJSON object to hold our measurement features
var geojson = {
    "type": "FeatureCollection",
    "features": []
};

// Used to draw a line between points
var linestring = {
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": []
    }
};

$(document).ready(function () {
    initMap();
    initRangePicker();
});

function addEmailField() {
    $("#emails").append('<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"><li class="fa fa-envelope"></li>&nbsp;</span> </div> <input type="email" id="emails[]" name="emails[]" placeholder="mail@ejemplo.com" required="required" class="form-control col-md-12" ></div>');
}

function initMap() {
    map = new L.map('map',{attributionControl: false});
    
    map.on('load', function(){
        console.log("map loaded...");
        var polygon = L.polygon(@json($alert->locations)).addTo(featureGroup);
        map.fitBounds(polygon.getBounds());
    });
    
    L.tileLayer("{{config('app.style_map_uri')}}", {
            maxZoom: 19,
    }).addTo(map);
    
    L.control.fullscreen().addTo(map);
    
    $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        map.invalidateSize();
    });
    //resize the chart when window resize
    $(window).resize(function () {
            map.invalidateSize();
    });
    
    L.easyButton( '<span class="fa fa-undo"></span>', function(){
        location.reload();
    }).addTo(map);
    
    
    @if($device['trama'] && $device->trama['LAT'] && $device->trama['LNG']) 
        addMarker({!!$device!!});
    @endif
    
    featureGroup = L.featureGroup().addTo(map);    
    
    drawControl = new L.Control.Draw({
        edit: {
          featureGroup: featureGroup
        },
        draw: {
          polygon: true,
          polyline: false,
          rectangle: false,
          circle: false,
          marker: false
        }
    }).addTo(map);
    
    map.on('draw:created', showPolygonArea);
    map.on('draw:edited', showPolygonAreaEdited);

    map.setView([22.148726, -100.991923], 5);
}

function showPolygonAreaEdited(e) {
  e.layers.eachLayer(function(layer) {
    showPolygonArea({ layer: layer });
  });
}
function showPolygonArea(e) {
    console.log(e.layer);
    featureGroup.clearLayers();
    featureGroup.addLayer(e.layer);
}

function initRangePicker() {
    picker = $('#geofence-range').daterangepicker({
        timePicker: true,
        timePicker24Hour: true,
        startDate: moment.utc("{{$alert->start_date}}").local(),
        endDate: moment.utc("{{$alert->end_date}}").local(),
        locale: {
            format: "YYYY-MM-DD HH:mm",
            separator: " - ",
            applyLabel: "Aceptar",
            cancelLabel: "Cancelar",
            fromLabel: "De",
            toLabel: "A",
            customRangeLabel: "Personalizado",
            weekLabel: "S",
        }
    });
    function cb(start, end) {
        $('#geofence-range span').html(start.format('YYYY-MM-DD HH:mm') + ' - ' + end.format('YYYY-MM-DD HH:mm'));
    }

    $('#geofence-range').on('apply.daterangepicker', function (ev, picker) {  
        $('#geofence-range span').html(picker.startDate.format('YYYY-MM-DD HH:mm') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm'));
    });
    
    // call business trips on load page
    cb(moment.utc('{{$alert->start_date}}').local(), moment.utc('{{$alert->end_date}}').local());
}

function addGeofence() {
    var alias = document.getElementById("alias").value;  
    var emails = $("input[name='emails[]']").map(function(){return $(this).val();}).get();
    if(alias === "") {
        bootbox.alert("{{__('strings.geofence_alias_error')}}").find('.modal-content').css({
                'margin-top': function (){
                    var w = $( window ).height();
                    var b = $(".modal-dialog").height();
                    // should not be (w-h)/2
                    var h = (w-b)/2;
                    return h+"px";
                }
            });
            return;
    } 
    if(!featureGroup.getLayers().length) {
        bootbox.alert("{{__('strings.invalid_geofence')}}").find('.modal-content').css({
                'margin-top': function (){
                    var w = $( window ).height();
                    var b = $(".modal-dialog").height();
                    // should not be (w-h)/2
                    var h = (w-b)/2;
                    return h+"px";
                }
            });
            return;
    } 
    
    var locations = featureGroup.getLayers()[0].getLatLngs()[0];
    
    $("#btn_add_geofence").prop( "disabled", true );
    
    $.showPreloader("");    
    $.ajax({
              url: "{{route('update_geo_alert')}}",
              type: "POST",
              contentType: "application/json",
              data:  JSON.stringify({
                    token: "{{Auth::user()->TOKEN}}",
                    alias: alias,
                    type: $("#type").val(),
                    id_alert: '{{$alert->id}}',
                    emails: emails,
                    start_date: moment(picker.data('daterangepicker').startDate).utc().format('YYYY-MM-DD HH:mm'),
                    end_date: moment(picker.data('daterangepicker').endDate).utc().format('YYYY-MM-DD HH:mm'),        
                    locations: locations
                }),
                dataType: "json",
                success: function(response) {       
                    $.hidePreloader();
                    bootbox.alert({
                             message:"{{__('strings.update_success')}}",
                             callback: function () {
                                window.location.replace("{{URL::to("/")}}/alerts/others/geo/{{$device->IMEI}}/index");
                            }
                         }).find('.modal-content').css({
                            'margin-top': function (){
                                var w = $( window ).height();
                                var b = $(".modal-dialog").height();
                                // should not be (w-h)/2
                                var h = (w-b)/2;
                                return h+"px";
                            }
                        });                    
                },
                error: function(err){
                    $("#btn_add_geofence").prop( "disabled", false );
                    console.log(err);
                    $.hidePreloader();
                    bootbox.alert("{{__('strings.app_error')}}").find('.modal-content').css({
                        'margin-top': function (){
                            var w = $( window ).height();
                            var b = $(".modal-dialog").height();
                            // should not be (w-h)/2
                            var h = (w-b)/2;
                            return h+"px";
                        }
                    });                    
                }
          });
}
</script>
@endpush