@extends('layouts.main')
@push('styles')
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min_1.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-datetimepicker.min.css')}}">
<!-- END DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('css/leaflet.contextmenu.min.css')}}">

@endpush
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card p-4">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <span class="h4 d-block font-weight-normal mb-2"><script>document.write(moment.utc("{{$calendar->date_time}}").local().format('HH:mm'))</script></span>
                    <span class="font-weight-light"><script>document.write(moment.utc("{{$calendar->date_time}}").local().format('Y-MM-DD'))</script></span>
                    <span class="d-block text-muted small">{{$calendar->alias}}</span>
                </div>

                <div class="h2 text-muted">
                    <i class="icon icon-clock"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="cc-selector panel-body">
                    <div class="panel-heading">
                        <h1>
                            {{ __('strings.employee_routes_generator') }}    
                        </h1>
                    </div>
                    <hr>  
                    <div class="col-md-4 mb-4">
                        <div class="col-md-12 mb-4">
                            <label>Tipo de ruta</label>                              
                            <select id="route_type" class="form-control mb-4">
                                @php $type = App\RouteType::all(); @endphp
                                @foreach($type as $t)
                                <option value="{{$t->name}}">{{$t->name ?? ''}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div id="directions">

                        <div class="col-md-12 mb-4">
                            <div class="form-group">
                                <label for="service_type">{{__('strings.service_type')}}</label>
                                <select id="service_type" name="service_type" class="form-control" onchange="setStartLocation(this)">
                                    <option value='in' selected>{{__('strings.in')}}</option>
                                    <option value='out'>{{__('strings.exit')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="normal-input" class="form-control-label">{{__('strings.route_datetime_conf')}}</label>
                                <input type='text' class="form-control" id='date_time' required readonly/>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="quiq_service">{{__('strings.service_type')}} / # pasajeros</label>
                                <select id="quiq_service" name="quiq_service" class="form-control">
                                    <option value='plus'>Plus / 4 </option>
                                    <option value='plus-2'>Plus / 2 </option>
                                    <option value='plus-3'>Plus / 3 </option>
                                    <option value='pocker'>Pocker / 5</option>
                                    <option value='six_pack'>SixPack / 6</option>
                                    <option value='large'>Large / 7</option>
                                    <option value='baby'>Baby / 9</option>
                                    @if(! Auth::user()->HIDE_QUIQ_OPTIONS)
                                        <option value='xl'>XL / 14</option>
                                        <option value='back_jack'>BlackJack / 21</option>
                                        <option value='big'>BIG / 35</option>
                                        <option value='camion'>Camión / 37</option>
                                    @endIf
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="passengers_count" class="form-control-label">{{__('strings.number_of_passengers')}}</label>
                                <input id="passengers_count" name="passengers_count" class="form-control" disabled>
                            </div>
                        </div>
                        <div class="col-md-12 mb-4"> 
                            <div class="form-group">                                                        
                                <label for="">&nbsp;</label>
                                <button  type="button" class="btn btn-block btn-primary " onclick="processRequest()">
                                    {{ __('strings.generate_routes') }}
                                </button>
                            </div>
                        </div>      
                        </div>
                        
                        
                        
                    </div>
                    
                    <div class="col-md-8">
                        <div class="col-md-12 mb-3">
                            <div style="width: 100%; height: 500px;">                    
                                <div id="map" style="height: 100%;"></div>                              
                            </div>   
                        </div>        

                        <div id="route_progress" style="height: 25px;">
                            <div class="progress">
                                <div id="routes_progress_bar" class="progress-bar" style="width: 0%" aria-valuenow="0" role="progressbar" aria-valuemin="0" aria-valuemax="100"><span id="current-progress"><span></div>
                            </div>
                        </div> 
                    </div>
                    
                    
            </div>
        </div>
    </div>
    </div>   
</div>


<div class="card">
    <div class="card-block">
        <div class="panel-heading">
            <h1>
                {{ __('strings.routes_details') }}    
            </h1>
        </div>
        <div class="col-md-12">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="resume-table" class="table hover mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>{{__('strings.route')}}</th>
                                <th>{{__('strings.employees_details')}}</th>
                                <th>{{__('strings.number_of_passengers')}}</th>
                                <th>{{__('strings.service_type')}}</th>
                                <th>{{__('strings.distance')}}</th>
                                <th>{{__('strings.trip_time')}}</th>
                                <th>Subtotal</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            
            <div class="col-md-4 mb-4"> 
                <div class="form-group">                                                        
                    <label for="">&nbsp;</label>
                    <button id="btn-save"  type="button" class="btn btn-block btn-primary " onclick="nipRequest()">
                        {{ __('strings.store_pre_routes') }}
                    </button>
                </div>
            </div> 
        </div>
    </div>
</div>

<div id="routes-resume-contained" class="card"  style="display: none;"">
    <div class="card-block">
        <div class="panel-heading">
            <h1>
                Resumen de Estaciones  
            </h1>
        </div>
        <div class="col-md-12">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="routes-resume-table" class="table hover mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>{{__('strings.employee_number')}}</th>
                                <th>{{__('strings.department')}}</th>
                                <th>{{__('strings.name')}}</th>
                                <th>{{__('strings.last_name')}}</th>
                                <th>Id Estación</th>
                                <th>Estación</th>
                                <th>Dirección</th>
                                <th>Estación Dist [m]</th>
                                <th>Estación Lat</th>
                                <th>Estación Lng</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

            <br/>
            <br/> 
            <h1>
                Pasajeros por Estación 
            </h1>
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="routes-resume-table2" class="table hover mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>Id Estación</th>
                                <th>Estación</th>
                                <th>Dirección</th>
                                <th># Pasajeros</th>
                                <th>Estación Lat</th>
                                <th>Estación Lng</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-block">
        <div class="panel-heading">
            <h1>
                {{ __('strings.skipped_employeed') }}    
            </h1>
        </div>
        <div class="col-md-12">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="employees-2k-table" class="table hover mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>{{__('strings.employee_number')}}</th>
                                <th>{{__('strings.department')}}</th>
                                <th>{{__('strings.name')}}</th>
                                <th>{{__('strings.last_name')}}</th>
                                <th>{{__('strings.address')}}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('datatables/datatables.min_1.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet.hotline.min.js')}}"></script>
<script src="{{asset('js/leaflet-heat.js')}}"></script>
<script src="{{asset('js/spin.min.js')}}"></script>
<script src="{{asset('js/leaflet.spin.min.js')}}"></script>
<script src="{{asset('js/bootstrap-datetimepicker.min.js')}}"></script>
<script src="{{asset('js/bootstrap-notify.min.js')}}" type="text/javascript"></script>

<script src="{{asset('js/leaflet.contextmenu.min.js')}}" type="text/javascript"></script>

<script type="text/javascript">
    var randName = "{{$calendar->alias}}";
    var map;    
    var routesTable;
    var emp2kTable;
    var resumeRouteTable;
    var resumeRouteTable2;
    var startLocation;
    var employeesLayer;
    var invalidEmployeedLayer;
    var polyline;
    var polylineLayer;
    var employees = @json($employees);
    var busLocations = @json($bus_stop);
    var busLayerGroup;
    var maxEmployeesInOptimalRoute = 199;
    var invalidEmployeeDistance = 2000; // 2 km
    var progress = 1;
    
    
    var itemsToDeleteLayer;
    var itemsToRouteLayer;
    var deletingItems = false;
    var routingItems = false;

    var sortEmployees;
    var empClusters = [];
    var invalidEmployees;
    var invalidEmployeesFeatures;
    var lat = {{Auth::user()->START_LAT == NULL ? config('app.latitude') : Auth::user()->START_LAT}};
    var lng = {{Auth::user()->START_LNG == NULL ? config('app.longitude')  : Auth::user()->START_LNG}};
            
    $("#passengers_count").val(employees.length);
    
    $("#quiq_service").change(function(){
        employees =  @json($employees);
        $("#passengers_count").val(employees.length);
        

        if($("#quiq_service").val() == 'plus' 
        || $("#quiq_service").val() == 'plus-2'
        || $("#quiq_service").val() == 'plus-3'
        || $("#quiq_service").val() == 'pocker'
        || $("#quiq_service").val() == 'six_pack'
        || $("#quiq_service").val() == 'large'
        || $("#quiq_service").val() == 'baby') {
            if(invalidEmployeedLayer != undefined) {
                invalidEmployeedLayer.clearLayers();
                invalidEmployeesFeatures = [];
            }
            if(busLayerGroup != undefined) {
                busLayerGroup.clearLayers();
            }            
            $("#routes-resume-contained").css("display", "none");

        } else {
            $("#routes-resume-contained").css("display", "block");
            addBusStopMarkers();
        }
    });
    // start marker definition
    var pin_start = L.icon({
        iconUrl: '{{asset('images/start_pin.png')}}',
        iconSize:     [26, 43], // size of the icon
        iconAnchor:   [13, 43], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
    });
    
    
    // end marker definition
    var pin_end = L.icon({
        iconUrl: '{{asset('images/end_pin.png')}}',
        iconSize:     [26, 43], // size of the icon
        iconAnchor:   [13, 43], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
    });

    $(document).ready(function() {
        //setting language for moment.js
        moment.locale('es');
        initMap();
        initDatatable();
        initDateTime();
    });
    
    function initDateTime() {
        // configuring calendar
        var dateNow = new Date();
        $('#date_time').datetimepicker({
            defaultDate: moment.utc('{{$calendar->date_time}}').local(),
            format: 'YYYY-MM-DD HH:mm',
            stepping: 5,
            icons:{
                time: 'far fa-clock',
                date: 'far fa-calendar-alt',
                up: 'fas fa-chevron-up',
                down: 'fas fa-chevron-down',
                previous: 'fas fa-chevron-left',
                next: 'fas fa-chevron-right',
                clear: 'far fa-trash-alt',
                close: 'fas fa-times'
            },
            locale: 'es'
    });
    }
    
    function initDatatable() {
        //initialize datatable
        routesTable =
                $('#resume-table').DataTable({
                        responsive: false,
                        paging: false,	
                        searching: true,
                        scrollY: "650px",
                        scrollCollapse: true,
                        columns: [
                                { data: 'route_name',  defaultContent:"---"},
                                { data: 'waypoints', render: function(data, type, row) { 
                                        if(data) {
                                            var result = "";
                                            for(var id in data) {
                                                if( data[id].employee_number) {
                                                    result += '*[' + data[id].employee_number + '] ' + data[id].name  + " / " + data[id].department + " / " + data[id].address + " <br>"; 
                                                }
                                            }
                                            return result;
                                        } else {
                                            return null
                                        }
                                    },
                                    defaultContent:"---"                                   
                                },
                                { data: 'locations', render: function(data, type, row) { 
                                        if(data) {
                                            return data.length -1;
                                        } 
                                        return null;
                                    },
                                    defaultContent:"---"
                                },                                
                                { data: 'route_name', render: function(data, type, row) { 
                                        return $("#quiq_service").val();
                                    },
                                    defaultContent: "---"
                                },                        
                                { data: 'rate.km',  render:function(km, type, row){
                                    return km + ' km';
                                }, defaultContent:"---"},      
                                { data: 'rate.time', render:function(seconds, type, row, meta){
                                    if(!seconds) {
                                        return null;
                                    }
                                    return moment.duration(seconds, 'seconds').format("d [days], h [hrs], m [min]");
                                }, defaultContent: "0"},
                                { data: 'rate.rate', defaultContent:"0", 'visible' : true},
                        ],
                        createdRow: function( row, data, dataIndex ) {
                            if ( data.rate && data.rate.rate > 500 ) {
                                $(row).addClass('text-white bg-danger');
                            } else if ( data.rate && data.rate.time > 5400 ) {
                                $(row).addClass('text-white bg-danger');
                            }
                            
                        },
                        "footerCallback": function ( row, data, start, end, display ) {
                            var api = this.api(), data;
                            // Remove the formatting to get integer data for summation
                            var intVal = function ( i ) {
                                return typeof i === 'string' ?
                                    i.replace(/[\$,]/g, '')*1 :
                                    typeof i === 'number' ?
                                        i : 0;
                            };
                            

                            var minTime = api
                                .column( 5 )
                                .data()
                                .reduce( function (last, current) {
                                    if(last > current)
                                        return current;
                                    else 
                                        return last != 0 ? last : current;
                                });
                            
                            var maxTime = api
                                .column( 5 )
                                .data()
                                .reduce( function (last, current) {
                                    if(last < current)
                                        return current;
                                    else 
                                        return last;
                                });

                            total = api
                                .column( 6 )
                                .data()
                                .reduce( function (total, value) {
                                   return intVal(total) + intVal(value);
                                }, 0 );
                            
                            totalP = api
                                .column( 2 )
                                .data()
                                .reduce( function (total, value) {
                                    if(Array.isArray(value)){
                                        return total + (value.length - 1);
                                    }
                                    return total;
                                }, 0 );
                                
                            // Update footer
                            $( api.column( 2 ).footer() ).html(
                               '{{__("strings.number_of_passengers")}}<br> <h4>' + totalP + '/' + employees.length + '</h4>'
                            );
                            $( api.column( 5 ).footer() ).html(
                               'Min<br> <h4>'+ moment.duration(minTime, 'seconds').format("d [days], h [hrs], m [min]") +'</h4> ' +
                               'Max<br> <h4>'+ moment.duration(maxTime, 'seconds').format("d [days], h [hrs], m [min]") +'</h4>'
                            );
                            $( api.column( 6 ).footer() ).html(
                               'Total<br> <h4>$'+ parseFloat(total).toFixed(2) +' MXN</h4>'
                            );
                        },
                        dom: 'Bfrtip',
                        buttons: [
                            { extend: 'copyHtml5', footer: true },
                            { extend: 'excelHtml5', footer: true },
                            { extend: 'pdfHtml5', filename: randName, orientation: 'landscape', footer: true }
                        ],
                        "language" : {
                                url: "{!! asset('datatables/languages/spanish.json') !!}"
                        }
        });


        resumeRouteTable = $('#routes-resume-table').DataTable({
                        responsive: false,
                        paging: false,	
                        searching: true,
                        scrollY: "650px",
                        scrollCollapse: true,
                        columns: [
                                { data: 'employee_number',  defaultContent:"---"}, 
                                { data: 'department',  defaultContent:"---"}, 
                                { data: 'name',  defaultContent:"---"}, 
                                { data: 'last_name',  defaultContent:"---"}, 
                                { data: 'bus_stop.id',  defaultContent:"---"}, 
                                { data: 'bus_stop.alias',  defaultContent:"---"}, 
                                { data: 'bus_stop.address',  defaultContent:"---"},
                                { data: 'bus_stop_dist',  defaultContent:"---"},
                                { data: 'bus_stop.lat',  defaultContent:"---"},
                                { data: 'bus_stop.lng',  defaultContent:"---"}                              
                        ],
                        dom: 'Bfrtip',
                        buttons: [
                            { extend: 'copyHtml5', footer: true },
                            { extend: 'excelHtml5', filename: "ResumenRutas",  footer: true },
                            { extend: 'pdfHtml5', filename: "ResumenRutas", orientation: 'landscape', footer: true }
                        ],
                        "language" : {
                                url: "{!! asset('datatables/languages/spanish.json') !!}"
                        }
        });
        resumeRouteTable2 = $('#routes-resume-table2').DataTable({
                        responsive: false,
                        paging: false,	
                        searching: true,
                        scrollY: "650px",
                        scrollCollapse: true,
                        columns: [
                                { data: 'bus_stop.id',  defaultContent:"---"}, 
                                { data: 'bus_stop.alias',  defaultContent:"---"}, 
                                { data: 'bus_stop.address',  defaultContent:"---"},
                                { data: 'employees',  defaultContent:"---", render:function(data, type, row) {
                                        if(Array.isArray(data)) {
                                            return data.length;
                                        }
                                        return 0;
                                    }
                                },
                                { data: 'bus_stop.lat',  defaultContent:"---"},
                                { data: 'bus_stop.lng',  defaultContent:"---"}                              
                        ],
                        "footerCallback": function ( row, data, start, end, display ) {
                            var api = this.api(), data;                        
                            total = api
                                .column( 3 )
                                .data()
                                .reduce( function (total, value) {
                                    let _val = 0;
                                    if(Array.isArray(value)) {
                                        _val =  value.length;
                                    }
                                   return total + _val;
                                }, 0 );                            
                            // Update footer
                            $(api.column(3).footer()).html(
                               '{{__("strings.number_of_passengers")}}<br> <h4>' + total + '</h4>'
                            );
                        },
                        dom: 'Bfrtip',
                        buttons: [
                            { extend: 'copyHtml5', footer: true },
                            { extend: 'excelHtml5', filename: "ResumenRutas",  footer: true },
                            { extend: 'pdfHtml5', filename: "ResumenRutas", orientation: 'landscape', footer: true }
                        ],
                        "language" : {
                                url: "{!! asset('datatables/languages/spanish.json') !!}"
                        }
        });
        emp2kTable = $('#employees-2k-table').DataTable({
                        responsive: false,
                        paging: false,	
                        searching: true,
                        scrollY: "650px",
                        scrollCollapse: true,
                        columns: [
                                { data: 'properties.employee_number',  defaultContent:"---"}, 
                                { data: 'properties.department',  defaultContent:"---"}, 
                                { data: 'properties.name',  defaultContent:"---"}, 
                                { data: 'properties.last_name',  defaultContent:"---"}, 
                                { data: 'properties.address',  defaultContent:"---"},                                 
                        ],
                        dom: 'Bfrtip',
                        buttons: [
                            { extend: 'copyHtml5', footer: true },
                            { extend: 'excelHtml5', footer: true },
                            { extend: 'pdfHtml5', filename: "{{$calendar->alias}}_e2k", orientation: 'landscape', footer: true }
                        ],
                        "language" : {
                                url: "{!! asset('datatables/languages/spanish.json') !!}"
                        }
        });
    }
    
    /**
     * Init map view
     */
    function initMap() {
        // configure Leaflet map
        map = new L.map('map',{
            attributionControl: true, 
            attributionControl: false,
            contextmenu: true,
            contextmenuWidth: 240,
            contextmenuItems: [
                {
                    text:"{{__('strings.admin_employees_list')}}"
                },
                {
                    text: "{{__('strings.set_as_deleted')}}",
                    callback: function(e) {
                        deletingItems = true;
                    }
                },
                {
                    text: "{{__('strings.delete_employees')}}",
                    callback: function(e) {
                        deletingItems = false;
                        dettachEmploueesFromList();
                    }
                },
                {
                    text: "{{__('strings.cancel')}}",
                    callback: function(e) {
                        deletingItems = false;
                        if(itemsToDeleteLayer != undefined) {
                            itemsToDeleteLayer.clearLayers();
                        } 
                    }
                },
                '-',
                {
                    text:"{{__('strings.admin_new_route')}}"
                },
                {
                    text: "{{__('strings.routing_items')}}",
                    callback: function(e) {
                        routingItems = true;
                    }
                },
                {
                    text: "{{__('strings.generate_route')}}",
                    callback: function(e) {
                        generateNewRoute();
                        if(itemsToRouteLayer != undefined) {
                            itemsToRouteLayer.clearLayers();
                        } 
                    }
                },
                {
                    text: "{{__('strings.cancel')}}",
                    callback: function(e) {
                        routingItems = false;
                        if(itemsToRouteLayer != undefined) {
                            itemsToRouteLayer.clearLayers();
                        } 
                    }
                }
            ]
        });
        
        // listen onLoad event
        map.on('load', function() {
            // initalize marker
            startLocation = L.marker([lat, lng], {icon: pin_start,draggable: true})    
            .bindTooltip("{{__('strings.start_location')}}", {permanent: true, offset: [0,-25]})
            .on('click', function(e){
                map.setView(e.latlng, map.zoom);
            })
            .addTo(map);
            addEmployeesMarkers();
        });
        // set map view
        map.setView([lat, lng], {{config('app.zoom')}});
        
        
        // load mapbox tiles
        L.tileLayer("{{config('app.map_style')}}", {
                maxZoom: 18,
            }).addTo(map);
        
        var baseLayers = {
        "Klokantech Basic": L.tileLayer("{{config('app.map_style')}}",{ maxZoom: 18 }),
        "OSM Bright": L.tileLayer("{{config('app.map_trafic_style')}}",{ maxZoom: 18 }),
        };     
        L.control.layers(baseLayers).addTo(map);
        
        // add fullscreen control
        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.Control.Layers.include({
            clearLayers: function () {
                // Iterate all layers in control
                this._layers.forEach(function (obj) {
                    // Check if it's an overlay and added to the map
                    if (obj.layer) {
                        this.map.removeLayer(obj.layer);
                    }
                });
            }
        });
                
        polylineLayer = L.control.layers(null, null,{
            hideSingleBase: true,
            collapsed: false,
            sortFunction: function(layerA, layerB, nameA, nameB) {
                return layerA.options.index > layerB.options.index;
            }
        }).addTo(map);
        
        busLayerGroup = L.layerGroup();
        invalidEmployeedLayer = L.layerGroup();
        busLayerGroup.addTo(map);
        invalidEmployeedLayer.addTo(map);

        itemsToDeleteLayer = L.layerGroup().addTo(map);
        itemsToRouteLayer = L.layerGroup().addTo(map);
        // checkbox over map to show / hide bus stops and optimal routes.
        var overlays = {
            '{{__("strings.bus_addresses")}}' : busLayerGroup,
            '{{__("strings.skipped_employeed")}}' : invalidEmployeedLayer
        };
        L.control.layers(null, overlays, {collapsed: false}).addTo(map);
    }
    

    function clearLayers() {
        if(polylineLayer != undefined) {
            polylineLayer.clearLayers();
            polylineLayer.remove();
        }
        $('#route_progress').show('slow');
        progress = 1;
    }
    /**
     * Update marker based on type of trips. 
     * If the trips are in (marker is the destination), then set marker color as blue
     * otherwise, means that trips are exit (marker is the start locations) and set marker color as red
     */
    function setStartLocation(option) {
        if($(option).val() == 'in') {
            startLocation.setTooltipContent("{{Auth::user()->NAME}}");
            startLocation.setIcon(pin_start);
        } else {
            startLocation.setTooltipContent("{{Auth::user()->NAME}}");
            startLocation.setIcon(pin_end);
        }
    }
    
    /**
     * Show blue circles on map that shows employees locations
     */
    function addEmployeesMarkers() {
        if(employeesLayer != undefined) {
            map.removeLayer(employeesLayer);
        } 
        
        var features = [];
        employees.forEach(function(item) {
            features.push({
                        type:'Point', 
                        coordinates: [item.lng, item.lat],
                        properties : item,
                        popupContent: "<strong><h5>Id: " + item.employee_number + " </h5></strong>" 
                                + "<strong>{{__('strings.name')}}:</strong> " + item.name + ' ' + item.last_name + "<br>"
                                + "<strong>{{__('strings.department')}}:</strong> " + item.department + "<br>"
                                + "<strong>{{__('strings.phone')}}:</strong> " + item.phone + "<br>"
                                + "<strong>{{__('strings.address')}}:</strong> " + item.address + "<br>"
            });
        });
        employeesLayer = L.geoJson({type:'FeatureCollection', 'features': features},{
                style: {
                    "color": "#ffffff",
                    "weight": 3
                },
                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(latlng, {
                       radius: 9,
                       fillColor: "#00B0FF",
                       color: "#000",
                       weight: 1,
                       opacity: 1,
                       fillOpacity: 1
                    });
                },
                onEachFeature: function(feature, layer) {
                    // does this feature have a property named popupContent?
                    if (feature.properties && feature.popupContent) {
                        layer.bindPopup(feature.popupContent);
                    }

                    layer.on({click: function(e){
                        if(deletingItems) {
                            layer.closePopup();
                            addItemToDelete(feature.properties);
                        }
                    }});

                }
            }).addTo(map);
    }
    
    /**
     * Show bus locatios on map
     */
    function addBusStopMarkers() {

        var resumeRoutesData = [];

        if(invalidEmployeedLayer != undefined) {
            invalidEmployeedLayer.clearLayers();
        }

        if(busLayerGroup != undefined) {
            busLayerGroup.clearLayers();
        }
        
        busLocations = @json($bus_stop);
        busLocations = busLocations.filter(item => item.clustering == false);


        busLocations.forEach(function(item){            
            L.marker([item.lat, item.lng])
                .bindPopup("<h4>" + item.alias + "</h4><hr><p>" + item.address + "</p>")
                .addTo(busLayerGroup);
        });
        
        invalidEmployeesFeatures = [];
        for(var idx = employees.length - 1; idx >= 0; idx -= 1) {
            item = employees[idx];
            var employee = JSON.parse(JSON.stringify(item));
            var dist = invalidEmployeeDistance; 
            var auxDist = 0;
            var addLoc = null;
            var busStop = null;
            var addLoc = new L.latLng(item.lat, item.lng);
            for(var index in busLocations) {
                auxDist = addLoc.distanceTo(new L.latLng(busLocations[index].lat, busLocations[index].lng));
                // if the auxDist are less than dist, add to current employee(item) the bus_stop info.
                if(auxDist < dist) {
                    dist = auxDist;
                    busStop = new L.latLng(busLocations[index].lat, busLocations[index].lng);
                    item.address = busLocations[index].alias + '/' + busLocations[index].address;
                    item.lat = busLocations[index].lat; // set employee location equal to bus_stop location
                    item.lng = busLocations[index].lng;
                    item.employee_location = employee; // backup of employee location
                    item.bus_stop = busLocations[index];
                    item.bus_stop_location = busStop;
                    item.bus_stop_dist = parseFloat(dist).toFixed(2);
                }
            }
            
            if(dist < invalidEmployeeDistance && busStop != null) {
                // draw line between employee location and bus_stop location
                L.polyline([ addLoc, busStop ], {color: 'red'}).addTo(busLayerGroup);
                // store employee and his assigned bus stop
                resumeRoutesData.push(item);
            } else {
                // delete employees where distance > 2kmk from list 
                employees.splice(idx, 1);
                invalidEmployeesFeatures.push({
                    type:'Point', 
                    coordinates: [item.lng, item.lat],
                    properties : item,
                    popupContent: "<strong><h5>Id: " + item.employee_number + " </h5></strong>" 
                            + "<strong>{{__('strings.name')}}:</strong> " + item.name + ' ' + item.last_name + "<br>"
                            + "<strong>{{__('strings.department')}}:</strong> " + item.department + "<br>"
                            + "<strong>{{__('strings.phone')}}:</strong> " + item.phone + "<br>"
                            + "<strong>{{__('strings.address')}}:</strong> " + item.address + "<br>"
                });

                fillEmp2kTable(invalidEmployeesFeatures);
            }
        }

        fillResumeRouteTable(resumeRoutesData);

        L.geoJson({type:'FeatureCollection', 'features': invalidEmployeesFeatures},{
                style: {
                    "color": "#ffffff",
                    "weight": 3
                },
                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(latlng, {
                       radius: 9,
                       fillColor: "#C0C0C0",
                       color: "#000",
                       weight: 1,
                       opacity: 1,
                       fillOpacity: 1
                    });
                },
                onEachFeature: function(feature, layer) {
                    // does this feature have a property named popupContent?
                    if (feature.properties && feature.popupContent) {
                        layer.bindPopup(feature.popupContent);
                    }
                }
        }).addTo(invalidEmployeedLayer);
    }
    
    /**
     * Sort employees direction based on the distance to marker.
     * Make http request to trip service. http://project-osrm.org/docs/v5.15.2/api/#trip-service 
     */
    function processRequest() {

        $("#passengers_count").val(employees.length);

        clearLayers();
        updateProgressBar(0);
        
        if(polylineLayer != undefined) {
            polylineLayer = L.control.layers(null, null,{
                hideSingleBase: true,
                collapsed: false,
                sortLayers: true,
                sortFunction: function(layerA, layerB, nameA, nameB) {
                    return layerA.options.index > layerB.options.index;
                }
            }).addTo(map);
        }

        // make deep copy of original array of employees
        sortEmployees = [];
        sortEmployees = $.extend(sortEmployees, employees);
        empClusters = []; // employes group array

        $("input[name='employees[]']").remove(); // clear employees for FORM

        var startLoc = startLocation.getLatLng();
        var maxDistance = 0;
        // compute distance of all employees to enterpice location
        sortEmployees.forEach(function(item){
            var itemLatLng = L.latLng([item.lat, item.lng]);
            var distance = startLoc.distanceTo(itemLatLng);
            item['dist'] = parseFloat(distance);
            item['passenger'] = item.name; // it's necesary for conpatibilty to quiq platform
            item['passenger_phone'] = item.phone; // it's necesary for conpatibilty to quiq platform
            item['passenger_department'] = item.department; // it's necesary for conpatibilty to quiq platform
        });
        // add marker location to employes array
        sortEmployees.push({
            lat: startLoc.lat,
            lng: startLoc.lng,
            dist: 0.0,
            address: 'Dirección de inicio'
        });

        // sort employes by distance
        
        if($("#service_type").val() == 'in') {
            sortEmployees.sort(function(a, b){
                return a.dist - b.dist;
            });
        } else {
            sortEmployees.sort(function(a, b){
                return b.dist - a.dist;
            });
        }
        

        var locations = [];
        var sortEmployeesAux = [];
        var id = 1;
        sortEmployees.forEach(function(item){
            locations.push([item.lng, item.lat]);
            sortEmployeesAux.push(item);
            if(id % maxEmployeesInOptimalRoute == 0) {
                getOptimalRoute(locations, startLoc, sortEmployeesAux), false;
                // reset locations to make request optimal route for each 199 employees
                locations = [];
                sortEmployeesAux = [];
            }
            id++;
        });
        // generate optimal route for remain locations
        if(locations.length > 0) {
            console.log("locations.lengt",locations.length);
            getOptimalRoute(locations, startLoc, sortEmployeesAux, true);
        } else {
            setTimeout(() => {
                empClusters.forEach(function(cluster, cIndex) {   
                    setTimeout(function(){
                        getTripRute(cluster, cIndex)
                    }, cIndex * 500);            
                });
            }, 2000);
        }
    }

    function getOptimalRoute(locations, startLoc, sortEmployeesAux, executeRatesRequest) {
        console.log("getOptimalRoute...");

        $.showPreloader("{{__('strings.loading')}}");
        // make http request to trip service.
        var apiUrl = "https://mapas.rtplataforma.com:8444/trip/v1/driving/#cords?overview=full&geometries=geojson&source=first&destination=last&roundtrip=false";
        $.getJSON(apiUrl.replace('#cords', locations.join(";")), function (trips) {     
            console.log(JSON.stringify(trips))
            // is time to make employees groups based on optimal route generated
            // by the trip service
            buildClusters(trips, sortEmployeesAux);
            if(executeRatesRequest) {
                console.log('Ask to execute rates request...');
                setTimeout(() => {
                    empClusters.forEach(function(cluster, cIndex) {   
                        setTimeout(function(){
                            getTripRute(cluster, cIndex)
                        }, cIndex * 500);            
                    });
                    $.hidePreloader();
                }, 2000);
            }
            $.hidePreloader();
            
        }).fail(function(err) {  
            $.hidePreloader();
            $.alert("{!!__('strings.optimal_route_error')!!}");
        });

    }
    
    
    /**
     * Makes employees groups based on optimal route generated by trip service.
     */
    function buildClusters(routeResponse, sortEmployees) {
        var startLoc = startLocation.getLatLng();
        
        // determine the max size of each employees group
        var numberOfElements = getMaxPassengers();    
                
        var empClustersAux = [];
        var employeeGroup = []; // aux array to buils each employees group
            
        // set waypoint_index for each employee
        sortEmployees.forEach(function(item, index){
            item.waypoint_index = routeResponse.waypoints[index].waypoint_index;
        });
        
        // order employees by waypoint_index
        sortEmployees.sort(function(a, b){
                return b.waypoint_index - a.waypoint_index;
        });
        
        var index = 1;
        
        // clustering employees
        sortEmployees.forEach(function(item) {
            if(item.id) {
                employeeGroup.push(item);
                if(index % numberOfElements == 0) {
                    // add to each employee group the start or end location (start/end marker)
                    if($("#service_type").val() == 'in') {
                        employeeGroup.push({
                                id: null,
                                lat: startLoc.lat,
                                lng: startLoc.lng,
                                dist: 0.0,
                                address: "{{Auth::user()->NAME}}"
                            });
                    } else {
                        employeeGroup.unshift({
                                id: null,
                                lat: startLoc.lat,
                                lng: startLoc.lng,
                                dist: 0.0,
                                address: "{{Auth::user()->NAME}}"
                            });
                    }
                    empClustersAux.push(employeeGroup);
                    employeeGroup = [];
                }
                index++;
            }
        });
        // May be the las employees group wasn't added to  empClusters
        if(employeeGroup.length) {
            if($("#service_type").val() == 'in') {
                employeeGroup.push({
                        id: null,
                        lat: startLoc.lat,
                        lng: startLoc.lng,
                        dist: 0.0,
                        address: "{{Auth::user()->NAME}}"
                    });
            } else {
                employeeGroup.unshift({
                        id: null,
                        lat: startLoc.lat,
                        lng: startLoc.lng,
                        dist: 0.0,
                        address: "{{Auth::user()->NAME}}"
                    });
            }
            empClustersAux.push(employeeGroup);
        }
        
        empClustersAux.forEach(function(cluster, cIndex) {
            var locations = [];        
            var waypoints = {};
            cluster.forEach(function(item, _index) {
                locations.push([item.lng, item.lat]);
                if(item.id) {
                    if($("#service_type").val() == 'in') {
                        waypoints['start_address' + (_index + 1)] = item;
                    } else {
                        waypoints['end_address' + (_index + 1)] = item;
                    }
                } else {
                    if($("#service_type").val() == 'in') {
                        waypoints['end_address1'] = item;
                    } else {                    
                        waypoints['start_address1'] = item;
                    }
                }
            });
            // add employee group to global variable - empClusters -
            empClusters.push({
                'locations': locations,
                'waypoints': waypoints,
                'route_name': "",
                'route_type': $("#service_type").val(),  
                'route_type2': $("#route_type").val(),              
                'is_scheduled': true,
                'scheduled_at': moment($("#date_time").val()).utc().format('YYYY-MM-DD HH:mm'),
            });
        });

        console.log("buildClusters completed...")
        return true;
    }
    
    /**
     * Estimate trip rate for given employees cluster 
     */
    function getTripRute(cluster, cIndex) {

        var apiUrl = "{!!config('app.route_service')!!}";
        $.getJSON(apiUrl.replace('#cords', cluster.locations.join(";")), function (routes) {
            var duration = routes.routes[0].duration;
            console.log('duration:', duration);
            getTripRate(cluster, cIndex, routes.routes[0]);            
        }).fail(function(err) {
            $.alert("{!!__('strings.route_request_error')!!}");
            console.log(err);
        });
    }
    
    function getTripRate(cluster, cIndex, route) {
        cluster['geojson'] = route;
        cluster['route_name'] = "Ruta-" + randName + "-" + (cIndex + 1);
        $.ajax({
            url: "{{route('api_user_rates')}}",
            type: "POST",
            contentType: "application/json",   
            data: JSON.stringify({
                user_token: '{{Auth::user()->SECURE_TOKEN}}',
                distance: route.distance,
                time: route.duration,
                locations: cluster.waypoints,
                id_zone: '{{Auth::user()->ID_ZONE}}',
                service_type: $("#quiq_service").val()
            }),
            dataType: "json",
            success: function (rate) { 
                cluster['rate'] = rate;
                
                var overlay = L.layerGroup(null, { index: cIndex});
                var name = "<span><strong>Ruta-" + randName + "-" + (cIndex + 1) + " / $" + rate.rate + " MXN</strong></span>";
                

                // if trip cost more than 500 MXN or take more tan 1:30 hours (5400 s), set red font
                if(rate.rate > 500 || rate.time > 5400) {
                    name = "<span><strong style=\"color: red;\">Ruta-" + randName + "-" + (cIndex + 1) + " / $" + rate.rate + " MXN</strong></span>";
                }

                overlay.addLayer(L.geoJson(route.geometry, {
                    color: "#222233",
                    weight: 6,
                }).bindPopup(name));
                
                if(getMaxPassengers() > 9) { 
                    var hetLocations = [];
                    for(var index in cluster.waypoints) {
                        if(cluster.waypoints[index].id != null) {
                            var busLoc = new L.latLng(cluster.waypoints[index].lat, cluster.waypoints[index].lng);
                            var empLoc = new L.latLng(cluster.waypoints[index].employee_location.lat, cluster.waypoints[index].employee_location.lng);
                            hetLocations.push(empLoc);
                            overlay.addLayer(L.polyline([ busLoc, empLoc ], {color: '#3080c8'}));
                            overlay.addLayer(L.marker(busLoc).bindPopup("<h4>" + cluster.waypoints[index].address + "</h4>"));
                        }
                    }
                    overlay.addLayer(L.heatLayer(hetLocations, {radius: 25, maxZoom: 20}));
                } else {

                    var features = [];

                    for(let _index in cluster.waypoints) {
                        let _waypoint = cluster.waypoints[_index];
                        features.push({
                            type:'Point', 
                            coordinates: [_waypoint.lng, _waypoint.lat],
                            popupContent: "<strong><h5>Id: " + _waypoint.employee_number + " </h5></strong>" 
                                + "<strong>{{__('strings.name')}}:</strong> " + _waypoint.name + ' ' + _waypoint.last_name + "<br>"
                                + `<button type='button' class='btn btn-sm btn-rounded btn-danger' onclick='dettachEmployeeFromRoute(${cIndex},"${_index}")'>{{__('strings.delete')}}</button> <br>`
                        })
                    }
                    
                    L.geoJson({type:'FeatureCollection', 'features': features},{
                        style: {
                            "color": "#ffffff",
                            "weight": 3
                        },
                        pointToLayer: function (feature, latlng) {
                            return L.circleMarker(latlng, {
                            radius: 9,
                            fillColor: "#222233",
                            color: "#FFFFFF",
                            weight: 1,
                            opacity: 1,
                            fillOpacity: 1
                            });
                        },
                        onEachFeature: function(feature, layer) {
                            // does this feature have a property named popupContent?
                            if (feature.popupContent) {
                                layer.bindPopup(feature.popupContent);
                            }
                        }
                    }).addTo(overlay);
                }
                polylineLayer.addOverlay(overlay, name);
                fillDatatable(empClusters);
                
                var pValue = Math.ceil( progress * 100 / empClusters.length );
                updateProgressBar(pValue);
                progress += 1;
            },
            error: function (err) {
                $.alert("{!!__('strings.rate_request_error')!!}");
                console.log(err); 
            },
        });
    }
    
    function getMaxPassengers(){
        // determine the max size of each employees group
        var serviceType = $("#quiq_service").val();
        var maxPassengers = 0;
        switch(serviceType) {
            case 'plus':
               return 4;
            break;
            case 'plus-2':
               return 2;
            break;
            case 'plus-3':
               return 3;
            break;
            case 'pocker':
                return 5;
            break;
            case 'six_pack':
                return 6;
            break;
            case 'large':
                return 7;
            break;
            case 'baby':
                return 9;
            break;
            case 'xl':
                return 14;
            break;
            case 'back_jack':
                return 21;
            break;
            case 'big':
                return 35;
            break;
            case 'camion':
                return 37;
            break;
            default: return 0;
        }
    }
    
    function fillDatatable(dataSet) {
        routesTable.clear();
        routesTable.rows.add(dataSet).draw();
    }

    function fillEmp2kTable(data) {
        $("#passengers_count").val(employees.length);
        emp2kTable.clear();
        emp2kTable.rows.add(data).draw();
    }

    function fillResumeRouteTable(data) {

        
        const groupedData = Object.groupBy(data, ({ bus_stop }) => bus_stop.id);
        const groupedRoutes = [];

        Object.entries(groupedData).forEach(([key, value]) => {
            const busStop = value[0];
            groupedRoutes.push({
                    bus_stop: busStop.bus_stop,
                    employees: value
                }
            );
        });

        resumeRouteTable.clear();
        resumeRouteTable.rows.add(data).draw();

        resumeRouteTable2.clear();
        resumeRouteTable2.rows.add(groupedRoutes).draw();

    }
    
    function nipRequest() {
        window.scrollTo(0, 0); 
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) {      
                    storePreRoutes(nip);
                }
            }
        });
    }
    
    function storePreRoutes(nip) {
        
        $.showPreloader("{{__('strings.loading')}}");
        $("#btn-save").hide();
        $.ajax({
            url: "{{route('employed_add_preroute')}}",
            type: "POST",
            contentType: "application/json",   
            data: JSON.stringify({
                user_token: '{{Auth::user()->SECURE_TOKEN}}',
                request_by_nip: nip,
                employees_cluster: empClusters,
                calendar_id: '{{$calendarId}}',
                service_type: $("#quiq_service").val()
            }),
            dataType: "json",
            success: function (response) { 
                $.hidePreloader();
                window.scrollTo(0, 0); 
                $.alert("{{__('strings.success_registration')}}", function(){
                    window.location.replace("{{route('employees_preroutes_view')}}");
                });
            },
            error: function (err) {
                $.hidePreloader();
                window.scrollTo(0, 0); 
                $("#btn-save").show();
                if(err.responseJSON) {
                    $.alert(err.responseJSON.message);
                } else {
                    $.alert("{{__('strings.error_message')}}");  
                }
            },
        });
    }
    
    function onSocketioMessage(data){
        if(data.code == 1  && data.calendar_id == '{{$calendarId}}') {
            $.notify({
                // options
                message: '{{__("strings.calendat_item_update")}}',
                url: '{{url()->current()}}',
                target: '_self'
                },{
                        // settings
                        type: 'warning',
                        z_index: 10031,
                        allow_dismiss: false,
                        newest_on_top: true,
                        offset: 20,
                        spacing: 10,
                        delay: 10000,
            });
        }
    }

    function addItemToDelete(item) {

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                employee : item,
                popupContent: "<strong><h5>Id: " + item.employee_number + " </h5></strong>" 
                + "<strong>{{__('strings.name')}}:</strong> " + item.name + ' ' + item.last_name + "<br>"
                + "<strong>{{__('strings.department')}}:</strong> " + item.department + "<br>"
                + "<strong>{{__('strings.phone')}}:</strong> " + item.phone + "<br>"
                + "<strong>{{__('strings.address')}}:</strong> " + item.address + "<br>"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [item.lng, item.lat]
            }
        };
        L.geoJSON(geojsonFeature, {
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, {
                    radius: 9,
                    fillColor: "#FF0000",
                    color: "#ffffff",
                    weight: 3,
                    opacity: 1,
                    fillOpacity: 1
                });
            },
            onEachFeature: function(feature, layer) {
                // does this feature have a property named popupContent?
                if (feature.properties && feature.properties.popupContent) {
                    layer.bindPopup(feature.properties.popupContent);
                }

                layer.on({click: function(e){
                    if(routingItems) {
                        layer.closePopup();
                        addItemToRoute(feature.properties.employee);
                    }
                }});
            }
        }).addTo(itemsToDeleteLayer);
    }
    
    function dettachEmploueesFromList() {

        let _layers = itemsToDeleteLayer.getLayers();
        let employeeIds = [];
        for(let _layer of _layers) {
            //let employee = _layer._layers[_layer._leaflet_id].feature.properties;
            let data = _layer.getLayers().map(item => item.feature.properties.employee.id);
            employeeIds = employeeIds.concat(data)
        }
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) { 
                    
                    $.showPreloader("{{__('strings.processing_request')}}");
                    $.post("{{route('detach_employee_calendar')}}", {
                        user_token: '{{Auth::user()->SECURE_TOKEN}}',
                        calendar_id: '{{$calendar->id}}',
                        nip: nip,
                        employee_id: employeeIds
                    }, function(response){
                        $.hidePreloader();
                        $.notify({
                            // options
                            message: '{{__("strings.request_ok")}}',
                            },{
                                // settings
                                type: 'success',
                                z_index: 10031,
                                allow_dismiss: true,
                                newest_on_top: true,
                        });
                        document.location.reload(true);
                    })
                    .fail(function(err){ $.hidePreloader();
                        if(err.responseJSON) {
                            $.alert(err.responseJSON.message);
                        } else {
                            $.alert("{{__('strings.error_message')}}");  
                        }
                    });
                }
            }
        });
    } 

    /**
     * cIndex: cluster index
     * wIndex: index on waypoint's cluster
     */
    function dettachEmployeeFromRoute(cIndex, wIndex) {

        let _cluster = empClusters[cIndex];
        var _employee = JSON.parse(JSON.stringify(_cluster.waypoints[wIndex]));
        _cluster.waypoints[wIndex] = null;
        


        let _layer = polylineLayer._layers.find(item => item.layer.options.index === cIndex);

        console.log('dettachEmployeeFromRoute._layer.layer.options.index',_layer.layer.options.index);
        // delete layer from group and map
        polylineLayer.removeLayer(_layer.layer);
        map.removeLayer(_layer.layer);
        

        // update cluster locations
        var locations = [];        
        var waypoints = {};
        let _index = 0;

        for(var id in  _cluster.waypoints) {
            let item = _cluster.waypoints[id];
            if(item != null) {
                locations.push([item.lng, item.lat]);
                if(item.id) {
                    if($("#service_type").val() == 'in') {
                        waypoints['start_address' + (_index + 1)] = item;
                    } else {
                        waypoints['end_address' + (_index + 1)] = item;
                    }
                } else {
                    if($("#service_type").val() == 'in') {
                        waypoints['end_address1'] = item;
                    } else {                    
                        waypoints['start_address1'] = item;
                    }
                }

                _index += 1;
            }
        }
        

        _cluster.locations = locations;
        _cluster.waypoints = waypoints;


        addItemToDelete(_employee);
        if( _cluster.locations.length > 1) {
            getTripRute(_cluster, cIndex);
        } else {
            empClusters.splice(cIndex, 1);
        }

        console.log("dettachEmployeeFromRoute.empClusters", empClusters, '_cluster.locations', _cluster.locations.length);

    }

    function addItemToRoute(item) {


        let maxPassengers = getMaxPassengers();
        let layerSize = itemsToRouteLayer.getLayers().length;

        if(layerSize + 1 > maxPassengers) {
            $.notify({
                // options
                message: '{{__("strings.error_max_route_items_reached")}}',
                url: '{{url()->current()}}',
                target: '_self'
                },{
                        // settings
                        type: 'danger',
                        z_index: 10031,
                        allow_dismiss: false,
                        newest_on_top: true,
                        offset: 20,
                        spacing: 10,
                        delay: 10000,
            });
            return;
        }

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                employee : item,
                popupContent: "<strong><h5>Id: " + item.employee_number + " </h5></strong>" 
                + "<strong>{{__('strings.name')}}:</strong> " + item.name + ' ' + item.last_name + "<br>"
                + "<strong>{{__('strings.department')}}:</strong> " + item.department + "<br>"
                + "<strong>{{__('strings.phone')}}:</strong> " + item.phone + "<br>"
                + "<strong>{{__('strings.address')}}:</strong> " + item.address + "<br>"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [item.lng, item.lat]
            }
        };
        L.geoJSON(geojsonFeature, {
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, {
                    radius: 9,
                    fillColor: "#00c853",
                    color: "#ffffff",
                    weight: 3,
                    opacity: 1,
                    fillOpacity: 1
                });
            },
            onEachFeature: function(feature, layer) {
                // does this feature have a property named popupContent?
                if (feature.properties && feature.properties.popupContent) {
                    layer.bindPopup(feature.properties.popupContent);
                }
            }
        }).addTo(itemsToRouteLayer);
    }

    function generateNewRoute() {

        let deleteLayers = itemsToDeleteLayer.getLayers();
        let routingLayers = itemsToRouteLayer.getLayers();
        var startLoc = startLocation.getLatLng();

        for(let _layer of deleteLayers) {
            let delteItem  = _layer.getLayers().shift();
            let deelteEmplyee = delteItem.feature.properties.employee;
            
            for (let _rLayer of routingLayers) {
                let routingItem = _rLayer.getLayers().shift();
                let routingEmployee = routingItem.feature.properties.employee;
                if(deelteEmplyee.id === routingEmployee.id) {
                    map.removeLayer(_layer);
                }
            }
        }

        let employees = [];
        for(let _layer of routingLayers) {
            //let employee = _layer._layers[_layer._leaflet_id].feature.properties;
            let data = _layer.getLayers().map(item => item.feature.properties.employee);
            employees = employees.concat(data);
        }

        console.log(employees);

        if($("#service_type").val() == 'in') {
            employees.push({
                    id: null,
                    lat: startLoc.lat,
                    lng: startLoc.lng,
                    dist: 0.0,
                    address: "{{Auth::user()->NAME}}"
                });
        } else {
            employees.unshift({
                    id: null,
                    lat: startLoc.lat,
                    lng: startLoc.lng,
                    dist: 0.0,
                    address: "{{Auth::user()->NAME}}"
                });
        }
        

        // update cluster locations
        var locations = [];        
        var waypoints = {};
        employees.forEach(function(item, _index) {
            item['passenger'] = item.name; // it's necesary for conpatibilty to quiq platform
            item['passenger_phone'] = item.phone; // it's necesary for conpatibilty to quiq platform
            item['passenger_department'] = item.department; // it's necesary for conpatibilty to quiq platform
            
            locations.push([item.lng, item.lat]);
            if(item.id) {
                if($("#service_type").val() == 'in') {
                    waypoints['start_address' + (_index + 1)] = item;
                } else {
                    waypoints['end_address' + (_index + 1)] = item;
                }
            } else {
                if($("#service_type").val() == 'in') {
                    waypoints['end_address1'] = item;
                } else {                    
                    waypoints['start_address1'] = item;
                }
            }
        });
        // add employee group to global variable - empClusters -
        empClusters.push({
            'locations': locations,
            'waypoints': waypoints,
            'route_name': "",
            'route_type': $("#service_type").val(),  
            'route_type2': $("#route_type").val(),              
            'is_scheduled': true,
            'scheduled_at': moment($("#date_time").val()).utc().format('YYYY-MM-DD HH:mm'),
        });  
        
        console.log(empClusters.slice(-1));


        getTripRute(empClusters[empClusters.length - 1], empClusters.length - 1);

    }

    function updateProgressBar(value) {

        if(progress <= empClusters.length) {
            // redraw datatable with new data
            $('#routes_progress_bar')
            .css('width', value + "%")
            .attr('aria-valuenow', value)
            .text(value + "%");
        }
    }
</script>
@endpush