@extends('layouts.main')

@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/daterangepicker.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('css/beautify-marker-icon.css')}}" />
<!-- Include Date Range Picker -->
<link rel="stylesheet" type="text/css" href="{{asset('css/custom.css')}}" />
<link rel="stylesheet" type="text/css" href="{{asset('css/easy-button.css')}}" />
<style>
    .easy-button-container {
	width: 34px;
	height: 34px;
	line-height: 34px;
	}
</style>
<script>
    var hotData = {!!$devices!!};
    var lang = [];
    var session = {ID: "{!!Auth::user()->ID!!}", TOKEN: "{!!Auth::user()->TOKEN!!}"};
</script>
@endpush
@section('content')
<div class="row" >
    <div class="col-md-12" >
        <div class="card">         
            <div class="card-header">
                <h1 class="form-section">{{ __('strings.multi_geofence_header') }} </h1>
            </div>   

            <div class="card-body">

                <div class="clearfix"></div>
                <div class="ln_solid"></div>
                <h2>{{__('strings.select_a_device')}}</h2>
                <select id="id_disp"  class="form-control">
                    @foreach($devices as $device)
                    <option value='{!!$device->toJson()!!}'>{{($device->ALIAS . ', ' . $device->IMEI)}}</option>
                    @endforeach
                </select> 
                <br>                
                <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>
                <div class="ln_solid"></div>                
                <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>
                <div class="ln_solid"></div>  
                <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" class="form-control" required="required" placeholder="{{__('strings.geofence_alias')}}" maxlength="64">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><li class="fa fa-envelope"></li> &nbsp;1</span>
                    </div>
                    <input type="text" id="email1" class="form-control" required="required" placeholder="demo@mail.com"  maxlength="64">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><li class="fa fa-envelope"></li> &nbsp;2</span>
                    </div>
                    <input type="text" id="email2" class="form-control" required="required" placeholder="demo@mail.com"  maxlength="64">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><li class="fa fa-envelope"></li> &nbsp;3</span>
                    </div>
                    <input type="text" id="email3" class="form-control" required="required" placeholder="demo@mail.com"  maxlength="64">
                </div>
                
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-12 col-md-offset-3">
                        <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/polyline_decoder.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet-ant-path.js')}}" type="text/javascript"></script>
<script src="{{asset('js/beautify-marker-icon.js')}}" type="text/javascript"></script>
<script src="{{asset('js/custom.js')}}" type="text/javascript"></script>
<script src="{{asset('js/bootbox.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/easy-button.js')}}" type="text/javascript"></script>
<script>
var map; // leaflet map object
var path; // leaftlet ant layer
var picker;
var locations = [];
var encodedPolyline;
$(document).ready(function () {
    initMap();
    initRangePicker();
});

function initMap() {
    map = new L.map('map',{attributionControl: false});
    map.setView([22.148726, -100.991923], 5);
    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(){
        locations.forEach(function(marker) {
            map.removeLayer(marker);
        });
        locations = [];
        encodedPolyline = "";
        removeRouteLayers();
    }).addTo(map);
    
    L.easyButton( '<span class="fa fa-map-pin"></span>', function(){
        var options = {
            isAlphaNumericIcon: true,
            text: "#" + (locations.length + 1),
            iconShape: 'marker',
            borderColor: '#00ABDC',
            textColor: '#00ABDC'
        };
        locations.push(new L.marker(map.getCenter(), { icon: L.BeautifyIcon.icon(options), draggable: true })
                .bindPopup("#" + (locations.length + 1))
                .on('dragend', function(){
                    drawRoute();
                }).addTo(map)
        );
        drawRoute();
    }).addTo(map);
    
    L.easyButton( '<span class="fa fa-expand"></span>', function(){
        map.fitBounds(path.getBounds());
    }).addTo(map);    
}

function initRangePicker() {
    picker = $('#geofence-range').daterangepicker({
        "timePicker": true,
        "timePicker24Hour": true,
        "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'));
        //getData(picker.startDate.format('YYYY-MM-DD HH:mm'), picker.endDate.format('YYYY-MM-DD HH:mm'));
    });
    
    // call business trips on load page
    cb(moment().startOf('day'),  moment().endOf('day'));
}

function drawRoute() {
    removeRouteLayers();
    
    $.showIndicator();
    
    var apiUrl = "https://mapas.rtplataforma.com:8444/route/v1/driving/#cords?overview=full";
    
    var waypoints = [];
    locations.forEach(function(marker){
        waypoints.push([marker.getLatLng().lng, marker.getLatLng().lat]);
    });
    
    // http request to redtrack route api
    $.getJSON(apiUrl.replace('#cords', waypoints.join(";")), function (json){
        
        $.hideIndicator();
        
        encodedPolyline = json.routes[0].geometry;
        var jsonData = toGeoJson(encodedPolyline);                
        
        waypoints = [];
        jsonData.coordinates.forEach(function(coord){
            waypoints.push([coord[1], coord[0]]);
        });
        
        path = L.polyline.antPath(waypoints,
           {"delay":1200,"dashArray":[10,20],"weight":5,"color":"#DDE9FF","pulseColor":"#008DFF","paused":false,"reverse":false}
        );

        map.addLayer(path);             
        //map.fitBounds(path.getBounds());
    }).fail(function(err){
        $.hideIndicator();        
        console.log("route api error", err);
    });
    
}

function removeRouteLayers() {
    if(path) {
        map.removeLayer(path);
    }
}

function addGeofence() {
    var alias = document.getElementById("alias").value;        
    var dispositivos = document.getElementById("id_disp");
    var device = JSON.parse(dispositivos.options[dispositivos.selectedIndex].value); 
    
    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(locations.length < 2){
        bootbox.alert("{{__('strings.locations_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;
    } 
    
    var points = {};
    var index = 0;
    locations.forEach(function(marker) {
        points[index] = {
            latitude: marker.getLatLng().lat, 
            longitude:  marker.getLatLng().lng,
            alias: marker.getPopup().getContent(), 
            visited: false
        };
        index++;
    });
   
    
    var startLocation = {
        latitude: locations[0].getLatLng().lat,
        longitude: locations[0].getLatLng().lng,
        visited: false
    };
    var endLocation = {
        latitude: locations[locations.length - 1].getLatLng().lat,
        longitude: locations[locations.length - 1].getLatLng().lng,
        visited: false
    };
    
    $("#btn_add_geofence").prop( "disabled", true );
    $.showPreloader("");
    // make http request to save new geofence
    $.post("{{route('add_geofence_alert')}}", {
        type: 'multi',
        token: "{{Auth::user()->TOKEN}}",
        id_client: "{{Auth::user()->ID}}",
        alias: alias,
        imei:  device.IMEI,
        device_alias: device.ALIAS,
        truck: device.TRUCK,
        plates: device.PLATES,
        carrier: device.CARRIER,
        enabled: device.ENABLED,
        invoice: device.INVOICE,
        custom_1: device.CUSTOM_1,
        custom_2: device.CUSTOM_2,
        commodity: device.COMMODITY, 
        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: points,
        start_location: startLocation,
        end_location: endLocation,
        email_1: document.getElementById("email1").value,
        email_2: document.getElementById("email2").value,
        email_3: document.getElementById("email3").value,
        polyline: encodedPolyline
    }, function(response) {        
        $.hidePreloader();
        bootbox.alert({
                 message:"{{__('strings.success_registration')}}",
                 callback: function () {
                    window.location.replace("{{route('geofences_view')}}");
                }
             }).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";
                }
            });
    }).fail(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