@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-->
@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='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 class="form-group">                                                        
                                <label for="">&nbsp;</label>
                                <button id="btn-skipped-employeed"  type="button" class="btn btn-block btn-danger " onclick="nipCalendarRequest()"  style="display: none;">
                                    {!! __('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>
                    <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()">
                        {{ __('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="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 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>
@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 type="text/javascript">
    var randName = "{{$calendar->alias}}";
    var map;    
    var routesTable;
    var emp2kTable;
    var startLocation;
    var employeesLayer;
    var skippedEmployeesLayer;
    var invalidEmployeedLayer;
    var polyline;
    var polylineLayer;
    var employees = @json($employees);
    var busLocations = @json($bus_stop);
    var busLayerGroup;
    var optimalLayerGroup;
    var maxEmployeesInOptimalRoute = 199;
    var invalidEmployeeDistance = 2000; // 2 km
    
    
    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);
        $('#btn-skipped-employeed').hide('slow');
        if(skippedEmployeesLayer != undefined) {
            skippedEmployeesLayer.clearLayers();
        }

        if($("#quiq_service").val() == 'plus' 
        || $("#quiq_service").val() == 'plus-2'
        || $("#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();
            }            
        } else {
            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"},
                        ],
                        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(), 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') !!}"
                        }
        });


        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});
        
        // 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
        }).addTo(map);
        
        busLayerGroup = L.layerGroup();
        optimalLayerGroup = L.layerGroup();
        skippedEmployeesLayer = L.layerGroup();
        invalidEmployeedLayer = L.layerGroup();
        busLayerGroup.addTo(map);
        optimalLayerGroup.addTo(map);
        skippedEmployeesLayer.addTo(map);
        invalidEmployeedLayer.addTo(map);
        // checkbox over map to show / hide bus stops and optimal routes.
        var overlays = {
            '{{__("strings.bus_addresses")}}' : busLayerGroup,
            '{{__("strings.optimal_routes")}}' : optimalLayerGroup,
            '{{__("strings.skipped_employeed")}}' : skippedEmployeesLayer,
        };
        L.control.layers(null, overlays, {collapsed: false}).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 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);
                    }
                }
            }).addTo(map);
    }
    
    /**
     * Show bus locatios on map
     */
    function addBusStopMarkers() {
        if(invalidEmployeedLayer != undefined) {
            invalidEmployeedLayer.clearLayers();
        }

        if(busLayerGroup != undefined) {
            busLayerGroup.clearLayers();
        }
        
        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
                }
            }
            
            if(dist < invalidEmployeeDistance && busStop != null) {
                // draw line between employee location and bus_stop location
                L.polyline([ addLoc, busStop ], {color: 'red'}).addTo(busLayerGroup);
            } 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);
            }
        }

        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);
        $('#btn-skipped-employeed').hide('slow');
        if(optimalLayerGroup != undefined) {
            optimalLayerGroup.clearLayers();
        }

        if(polylineLayer != undefined) {
            polylineLayer.clearLayers();
            polylineLayer.remove();
            polylineLayer = L.control.layers(null, null,{
                hideSingleBase: true,
                collapsed: false,
                sortLayers: true
            }).addTo(map);
        }

        map.spin(true);
        // 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.length);
            getOptimalRoute(locations, startLoc, sortEmployeesAux, true);
        } else {
            $.confirm('{{__("strings.generate_optimal_routes_ok")}}',function(){
                empClusters.forEach(function(cluster, cIndex) {   
                    setTimeout(function(){
                        getTripRute(cluster, cIndex)
                    }, cIndex * 500);            
                });
            }, function(){
                map.spin(false);
            });
        }
    }

    function getOptimalRoute(locations, startLoc, sortEmployeesAux, executeRatesRequest) {
        // 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) {
            var latLngs = [];
            trips.trips[0].geometry.coordinates.forEach(function(item) {
                var itemLatLng = L.latLng([item[1], item[0]]);
                latLngs.push([item[1], item[0],  startLoc.distanceTo(itemLatLng)]);
            });
            var color = randomColor();
            L.hotline(latLngs,{
                min: 0,
                max: trips.trips[0].distance,
                palette: {
                    0.0: color,
				    0.1: color,
				    1.0: color
                },
                weight: 5,
                outlineColor: '#ffffff',
                outlineWidth: 1
            }).addTo(optimalLayerGroup);      

            // 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...');
                $.confirm('{{__("strings.generate_optimal_routes_ok")}}',function(){
                    empClusters.forEach(function(cluster, cIndex) {   
                        setTimeout(function(){
                            getTripRute(cluster, cIndex);
                        }, cIndex * 500);            
                    });
                }, function(){
                    map.spin(false);
                });
            }
        }).fail(function(err) {  
            $.alert("{!!__('strings.optimal_route_error')!!}");
            map.spin(false);
        });

    }
    
    
    /**
     * 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'),
            });
        });
    }
    
    /**
     * Estimate trip rate for given employees cluster 
     */
    function getTripRute(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);
            if(getMaxPassengers() > 9) {
                if(duration > 5400) {
                    skipCluster(cluster, cIndex);
                    return;
                }
            }
            getTripRate(cluster, cIndex, routes.routes[0]);            
        }).fail(function(err) {
            $.alert("{!!__('strings.route_request_error')!!}");
            console.log(err);
        });
    }

    function skipCluster(cluster, cIndex) {
        $('#btn-skipped-employeed').show('slow');

        var waypoints = JSON.parse(JSON.stringify(cluster.waypoints));
        var features = [];
        empClusters[cIndex] = {};

        for(var index in waypoints) {
            var item = waypoints[index];
            if(item.id != null) {
                $("#form_employee_directory").append(
                    $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', 'employees[]')
                        .val(item.id)
                );
                features.push({
                            type:'Point', 
                            coordinates: [item.employee_location.lng, item.employee_location.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: "#FF0000",
                       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(skippedEmployeesLayer);
    }
    
    function getTripRate(cluster, cIndex, route) {
        map.spin(false);
        $.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();
                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));
                
                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: '#FF0000'}));
                            overlay.addLayer(L.marker(busLoc).bindPopup("<h4>" + cluster.waypoints[index].address + "</h4>"));
                        }
                    }
                    overlay.addLayer(L.heatLayer(hetLocations, {radius: 25, maxZoom: 20}));
                }
                polylineLayer.addOverlay(overlay, name);
                fillDatatable(empClusters);
                $.hideIndicator();
            },
            error: function (err) {
                $.alert("{!!__('strings.rate_request_error')!!}");
                console.log(err); 
                $.hideIndicator(); 
            },
        });
    }
    
    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 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 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 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