@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-->

<style>

</style>
@endpush
@section('content')
<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="card">
                                <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>
                                        <span class="d-block text-muted small">{{$calendar->comments}}</span>
                                    </div>

                                    <div class="h2 text-muted">
                                        <i class="icon icon-clock"></i>
                                    </div>
                                </div>
                            </div>
                        <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" hidden>
                            <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='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="col-md-6">
                                <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-6">
                                <div class="form-group">
                                    <label for="k_clusters" class="form-control-label">Num. Estaciones</label>
                                    <input id="k_clusters" name="k_clusters" type="number" value="10" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="k_distance" class="form-control-label">Distancia K</label>
                                    <input id="k_distance" name="k_distance" type="number" value="1000" class="form-control">
                                </div>
                            </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="runKMeans()">
                                    Ejecutar Agrupamiento
                                </button>

                                <button id="btn_processing"  type="button" class="btn btn-block btn-info " onclick="processRequest()" disabled>
                                    {{ __('strings.processing') }}
                                </button>
                            </div>
                        </div>      
                        </div>
                        
                    </div>
                    <div class="col-md-8 mb-4">
                        <div style="width: 100%; height: 500px;">                    
                            <div id="map" style="height: 100%;"></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()" hidden>
                        {{ __('strings.store_pre_routes') }}
                    </button>
                </div>
            </div> 
        </div>
    </div>
</div>

<div class="card">
    <div class="card-block">
        <div class="panel-heading">
            <h1>
                {{ __('strings.invalid_employees') }}    
            </h1>
        </div>
        <div class="col-md-12">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="invalid_employees_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 class="form-group">                                                        
                <label for="">&nbsp;</label>
                <button id="btn-skipped-employeed"  type="button" class="btn btn-block btn-danger " onclick="nipCalendarRequest()"  hidden>
                    {!! __('strings.store_skiped_employees') !!}
                </button>

                <form id="form_employee_directory" action="{{route('attach_employees_calendar', ['calendar_id' => $calendar->id])}}" method="post" target="_blank">
                    {{ csrf_field() }}
                    <input type="hidden" id="user_token" name="user_token" value="{{Auth::user()->SECURE_TOKEN}}" >
                    <input type="hidden" id="nip" name="nip" value="">
                </form>
            </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/k-means.js')}}" type="text/javascript"></script>
<script src="{{asset('js/kd-tree.js')}}" type="text/javascript"></script>
<script src="{{asset('js/nvector.js')}}" type="text/javascript"></script>

<script type="text/javascript">
    var randName = "{{$calendar->alias}}";
    var map;    
    var routesTable;
    var invalidEmpTable;
    var startLocation;
    var invalidEmployeedLayer;
    var polyline;
    var polylineLayer;
    var employees = @json($employees);
    var busLocations = @json($bus_stop);
    var maxEmployeesInOptimalRoute = 199;
    var invalidEmployeeDistance = 2000; // 2 km
    
    
    var sortEmployees;
    var empClusters;
    var invalidEmployees;
    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}};

            

    var kDistanceLayer;
    var sortItemsLayer;
    // clustering vars
    let K_ITERATIONS = 25;

    let kMeans = null;
    let centroids = null;
    var centroidsMarkers = L.layerGroup();

    $("#quiq_service").change(function(){
        clearValues();
    });
    // 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');
        $("#passengers_count").val(employees.length);
        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"},
                        ],
                        createdRow: function( row, data, dataIndex ) {
                            if ( data.rate && data.rate.time > 5400 ) {
                                $(row).addClass('text-white bg-danger');
                            }
                        },
                        "footerCallback": function ( row, data, start, end, display ) {
                            var api = this.api();

                            if(data == null || data.length == 0) {
                                // Update footer
                                $( api.column( 2 ).footer() ).html(
                                '{{__("strings.number_of_passengers")}}<br> <h4>' + 0 + '/' + employees.length + '</h4>'
                                );
                                $( api.column( 5 ).footer() ).html(
                                'Min<br> <h4>'+ moment.duration(null, 'seconds').format("d [days], h [hrs], m [min]") +'</h4> ' +
                                'Max<br> <h4>'+ moment.duration(null, 'seconds').format("d [days], h [hrs], m [min]") +'</h4>'
                                );
                                $( api.column( 6 ).footer() ).html(
                                'Total<br> <h4>$'+ parseFloat(0).toFixed(2) +' MXN</h4>'
                                );
                                return;
                            }
                            // 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') !!}"
                        }
        });


        invalidEmpTable = $('#invalid_employees_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: '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});
        
        // 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);
            })
            .on('dragend', function(e) {
                empClusters = [];
                fillDatatable(empClusters);
                clearPolylineLayer();
                sortCentroidItems();
                drawCentroids();
            })
            .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);
                    }
                });
            }
        });
        
        invalidEmployeedLayer = L.layerGroup();
        kDistanceLayer = L.layerGroup();
        sortItemsLayer = L.layerGroup();
        // when layerGroup is added to map, then is visible by default
        
        centroidsMarkers.addTo(map);
        //invalidEmployeedLayer.addTo(map);
        //kDistanceLayer.addTo(map);
        //sortItemsLayer.addTo(map);

        // checkbox over map to show / hide layers
        var overlays = {
            '{{__("strings.skipped_employeed")}}' : invalidEmployeedLayer,
            '{{__("strings.clusters")}}' : centroidsMarkers,
            'Ordenamiento' : sortItemsLayer,
            'Distancia K' : kDistanceLayer,
        };
        L.control.layers(null, overlays, {collapsed: false,  hideSingleBase: true}).addTo(map);
    }
    
    /**
     * 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, i.e employees locations
     */
    function addEmployeesMarkers() {
        
        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>"
            });
        });
        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);
                    }
                }
            }).addTo(map);
    }
    
    /**
     * 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 
     */
    async function processRequest() {

        $("#passengers_count").val(employees.length);
        $('#btn-skipped-employeed').hide('slow');
        


        empClusters = [];

        clearPolylineLayer();
        
        if(centroids == null || centroids.length == 0) {
            $.alert("Error, se debe ejecutar el agrupamiento de los datos...");
            return;
        }

        map.spin(true);

        console.log("buillding empCluster data strcture...")
        centroids.forEach((item, index) => {
            buildRoutes(index);
        });


        console.log("make trip route for each employee's cluster")
        
        let index = 0;
        for(const cluster of empClusters) {
            getTripRoute(cluster, index);
            index = index + 1;
            await sleep(200);
        }
        
        
        map.spin(false);
    }
    
    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 '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 4;
        }
    }
    
    function fillDatatable(dataSet) {
        routesTable.clear();
        routesTable.rows.add(dataSet).draw();
    }

    function fillInvalidEmpTable(data) {
        $("#passengers_count").val(employees.length);
        invalidEmpTable.clear();
        invalidEmpTable.rows.add(data).draw();
    }
    
    async function runKMeans() {

        $("#btn_processing").prop( "disabled", false );
        map.spin(true);
        clearLayers();

        invalidEmployees = [];
        empClusters = [];

        fillInvalidEmpTable(invalidEmployees);

        let maxDistance = $("#max_cluster_dist").val();

        var data = [];
        employees.forEach(item => {
            const nVector = new NVector(item.lat, item.lng, item);
            data.push(nVector);
        });

        let numCentroids = $("#k_clusters").val();
        kMeans = new KMeans(data, numCentroids , K_ITERATIONS);

        for (var i = 0; i < K_ITERATIONS; i++) {
            await sleep(100);

            centroids = await kMeans.process();

            // draw centroids
            drawCentroids();

        }


        centroids = await kMeans.process();

        // filter all centrid with items length of 1
        //filterCentroids();

        sortCentroidItems();
        filterKDistance();
        drawCentroids();
        
        map.spin(false);
    }

    function drawCentroids() {

            clearLayers();

            centroids.forEach(function(centroid, centroidId) {
                var _cLatLng = centroid.toLatLng();
                var clusterLoc = L.latLng([_cLatLng.lat, _cLatLng.lng]);

                centroid.data.forEach(function(item, itemId) {

                    for(var i = 1; i < centroid.data.length; i++) {
                        var latlngs = [
                            [centroid.data[ i - 1 ]._lat, centroid.data[ i - 1 ]._lng],
                            [centroid.data[i]._lat, centroid.data[i]._lng]
                        ];

                        // draw blue line on sortItemsLayer layer
                        var line = L.polyline(latlngs, {
                            color: '#0000FF',
                            weight: 4,
                            opacity: 0.2,
                        }).addTo(sortItemsLayer);
                    }

                    // draw red and black lines on kDistanceLayer layer
                    var itemLatLng = L.latLng([item._lat, item._lng]);
                    var latlngs = [
                        [clusterLoc.lat, clusterLoc.lng],
                        [item._lat, item._lng]
                    ];
                    item._dist = clusterLoc.distanceTo(itemLatLng);
                    var line = L.polyline(latlngs, {
                        color: '#000000',
                        opacity: 0,
                    });
                    line.bindTooltip((item._dist / 1000).toFixed(2) + ' km.', { permanent: true});
                    line.addTo(kDistanceLayer);


                    // draw black line on centroidsMarkers layer
                    var latlngs = [
                        [clusterLoc.lat, clusterLoc.lng],
                        [item._lat, item._lng]
                    ];

                    var line = L.polyline(latlngs, {
                        color: '#000',
                        weight: 2,
                        opacity: 0.7,
                    })
                    .bindPopup("<button class='btn btn-block btn-danger' onClick='deleteItemOnCluster(" + centroidId + "," + itemId + ")'> Eliminar </button>")
                    .addTo(centroidsMarkers);
                });


                

                // draw centroid circle
                L.marker([clusterLoc.lat, clusterLoc.lng], {
                    draggable: true
                })
                .on('dragend', function(e) {
                    const lat = e.target.getLatLng().lat;
                    const lng =e.target.getLatLng().lng;
                    console.log('dragend, ', lat, lng);
                    centroid.setLocation(lat, lng);
                    drawCentroids();
                })
                .bindPopup("<p>#Elementos: " + centroid.data.length + "</p><p><button class='btn btn-block btn-danger' onClick='deleteCentroid(" + centroidId + ")'> Eliminar </button></p>")
                .addTo(centroidsMarkers);
            });

            // draw invalid employees
            invalidEmployees.forEach(function(item) {
                // draw employee cirecle on kDistanceLayer layer
                let 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>";
                L.circleMarker([item.lat, item.lng], {
                    radius: 9,
                    fillColor: "#FF0000",
                    color: "#FFFFFF",
                    weight: 3,
                    opacity: 1,
                    fillOpacity: 1
                })
                .bindPopup(popupContent)
                .addTo(invalidEmployeedLayer);
            });
    }

    function filterKDistance() {
        
        let kDistance = $("#k_distance").val();

        centroids.forEach(function(centroid, centroidId) {
            // filter k distance
            const _data = centroid.data.filter(item => item._dist <= kDistance);
            const _deleted = centroid.data.filter(item => item._dist > kDistance);
            if(_deleted) {
                skipEmployee(_deleted);
            }
            centroid.data = _data;
        });
    }

    function clearLayers() {
        if (centroidsMarkers) {
            centroidsMarkers.clearLayers();
        }
        if (kDistanceLayer) {
            kDistanceLayer.clearLayers();
        }
        if(sortItemsLayer) {
            sortItemsLayer.clearLayers();
        }
        if(invalidEmployeedLayer) {
            invalidEmployeedLayer.clearLayers();
        }
    }

    function clearPolylineLayer() {

        if(polylineLayer != undefined) {
            polylineLayer.clearLayers();
            polylineLayer.remove();
        }

        polylineLayer = L.control.layers(null, null,{
                hideSingleBase: true,
                collapsed: false,
                sortLayers: true,
                sortFunction: function(layerA, layerB, nameA, nameB) {
                    console.log(layerA.options.index);
                    return layerA.options.index > layerB.options.index;
                }
        }).addTo(map);
    }

    function clearValues() {
        clearLayers();
        clearPolylineLayer();
        invalidEmployees = [];
        empClusters = [];
        centroids = null;
        fillDatatable(empClusters);
    }

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    function deleteItemOnCluster(clustedId, itemId) {
        console.log('clustedId', clustedId, 'itemId', itemId);
        let centroid =  centroids[clustedId];
        let items = centroid.data.splice(itemId, 1);
        centroids[clustedId] = centroid;
        if(centroid.data.length === 0) {
            deleteCentroid(clustedId);
        }
        skipEmployee(items);
        drawCentroids();
    }

    function filterCentroids() {
        centroids = centroids.filter(item => item.data.length > 1);
    }

    function deleteCentroid(clustedId) {
        let centroid = centroids.splice(clustedId, 1);
        skipEmployee(centroid[0].data);
        drawCentroids();
    }


    function sortCentroidItems() {
        var startLoc = startLocation.getLatLng();
        centroids.forEach(function(centroid, centroidId) {
            var latLng = centroid.toLatLng();
            centroid.data.forEach(function(item) {
                var itemLatLng = L.latLng([item._lat, item._lng]);
                var distance = startLoc.distanceTo(itemLatLng);
                item.dist = distance;
            });

            if($("#service_type").val() == 'in') {
                centroid.data.sort(function(a, b){
                    return a.dist - b.dist;
                });
            } else {
                centroid.data.sort(function(a, b){
                    return b.dist - a.dist;
                });
            }
        });
    }

    function buildRoutes(centroidId) {

        // determine the max size of each employees group
        var numberOfElements = getMaxPassengers(); 
        var startLoc = startLocation.getLatLng();

        let centroid = centroids[centroidId]

        
        for(var i = 0; i < centroid.data.length; i += numberOfElements) {
            const chunk = centroid.data.slice(i, i + numberOfElements);
            
            let employees = chunk.map(item => item.data);

            // attach start / end address to employees chunk
            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}}"
                });
            }

            var locations = [];        
            var waypoints = {};

            employees.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;
                    }
                }
            });

            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(centroidId, empClusters);
    }

    /**
     * Estimate trip route for given employees cluster 
     */
    function getTripRoute(cluster, cIndex) {
        var apiUrl = "https://mapas.rtplataforma.com:8444/route/v1/driving/#cords?overview=full&geometries=geojson";
        $.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) {
        $.showIndicator(); 
        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>";
                
                overlay.addLayer(L.geoJson(route.geometry, {
                    color: "#222233",
                    weight: 6,
                }).bindPopup(name));


                var features = cluster.locations.map(item => (
                    {
                        type:'Point', 
                        coordinates: [item[0], item[1]]
                    })
                );
                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
                        });
                    }
                }).addTo(overlay);

                polylineLayer.addOverlay(overlay, name);
                fillDatatable(empClusters);
                $.hideIndicator();
            },
            error: function (err) {
                $.alert("{!!__('strings.rate_request_error')!!}");
                console.log(err); 
                $.hideIndicator(); 
            },
        });
    }

    function skipEmployee(items) {
        console.log(items);
        if(items != null) {
            //$('#btn-skipped-employeed').show('slow');
            items.forEach(item => {
                invalidEmployees.push(item.data);
            });
        }
        
        fillInvalidEmpTable(invalidEmployees);
    }

    function nipCalendarRequest() {
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) {      
                    apiCalendarRequest(nip);
                }
            }
        });
    }

    function apiCalendarRequest(nip) {
        $.showPreloader("{{__('strings.processing_request')}}");
        $.post("{{route('add_employees_calendar')}}",{
            user_token: '{{Auth::user()->SECURE_TOKEN}}',
            date_time: $('#date_time').data("DateTimePicker").date().utc().format('YYYY-MM-DD HH:mm'),
            nip: nip,
            alias: "{{$calendar->alias}}" + " *"
            },
        function(data) {
            $.hidePreloader();
            
            if(socket){ 
                socket.emit('message', {to:'{{Auth::user()->EMAIL}}', code: 2});
            }
            //$.hidePreloader();
            var action = "{{route('attach_employees_calendar', ':id')}}";
            action = action.replace(':id', data.calendar.id);
            $('#nip').val(nip);
            $('#form_employee_directory').attr('action', action);
            $("#form_employee_directory").submit();
        })
        .fail(function(err) {
            console.log(err);
            $.hidePreloader();
            if(err.responseJSON) {
                $.alert(err.responseJSON.message + "<br>{{__('strings.route_generator_message')}}");
            } else {
                $.alert("{{__('strings.error_message')}} <br>{{__('strings.route_generator_message')}}");  
            }
        });
    }
</script>
@endpush