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

<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.clustering_view') }}    
                        </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 id="directions">

                        <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="col-md-6">
                                <div class="form-group">
                                    <label for="quiq_service">{{__('strings.service_type')}}</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-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 (m)</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">                                                        
                                <button  type="button" class="btn btn-block btn-primary " onclick="runKMeans()">
                                    Agrupar
                                </button>
                            </div>
                            <div class="form-group">                                                        
                                <button id="bntSaveBusStop"  type="button" class="btn btn-block btn-info " onclick="apiRequest()">
                                    Guardar Estaciones
                                </button>
                            </div>
                        </div>      
                        </div>
                        
                    </div>
                    <div class="col-md-8 mb-4">
                        <div class="col-md-12 mb-3">
                            <div style="width: 100%; height: 500px;">                    
                                <div id="map" style="height: 100%;"></div>                              
                            </div>  
                        </div>
                        
                        <div id="route_progress" style="height: 25px;">
                            <div class="progress">
                                <div id="routes_progress_bar" class="progress-bar" style="width: 0%" aria-valuenow="0" role="progressbar" aria-valuemin="0" aria-valuemax="100"><span id="current-progress"><span></div>
                            </div>
                        </div>               
                    </div>
                    
            </div>
        </div>
    </div>
    </div>   
</div>

<div class="card">
    <div class="card-block">
        <div class="panel-heading">
            <h1>
                {{ __('strings.skipped_employeed') }}    
            </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>
    </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/leaflet.textpath.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 src="{{asset('js/leaflet.contextmenu.min.js')}}" type="text/javascript"></script>


<script type="text/javascript">
    var calendarName = "{{$calendar->alias}}";
    var map;    // leaflet object to interact with map view
    var invalidEmpTable; // employyes beyond K distance from nearest centroid
    var startLocation;
    var invalidEmployeedLayer;
    var polyline;
    var polylineLayer;
    var employees = @json($employees);    
    
    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}};

            

    
    // clustering vars
    let K_ITERATIONS = 25;

    let kMeans = null;
    let centroids = null;
    var centroidsMarkers = L.layerGroup();
    var progress = 1; // progressBar control

    $("#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() {
        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,
            contextmenu: true,
            contextmenuWidth: 180,
            contextmenuItems: [
                {
                    text: "{{__('strings.add_centroid')}}",
                    callback: function(e) {
                        addCentroidManually(e.latlng.lat, e.latlng.lng)
                    }
                }
            ]
        });
        
        // 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) {
                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);
        
        let 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();
        // when layerGroup is added to map, then is visible by default
        
        centroidsMarkers.addTo(map);
        invalidEmployeedLayer.addTo(map);

        // checkbox over map to show / hide layers
        let overlays = {
            '{{__("strings.skipped_employeed")}}' : invalidEmployeedLayer,
            '{{__("strings.clusters")}}' : centroidsMarkers
        };
        L.control.layers(null, overlays, {collapsed: false,  hideSingleBase: true}).addTo(map);
    }
    
    /**
     * Show blue circles on map, i.e employees locations
     */
    function addEmployeesMarkers() {
        
        let 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);
    }
    

    function fillInvalidEmpTable(data) {
        $("#passengers_count").val(employees.length);
        invalidEmpTable.clear();
        invalidEmpTable.rows.add(data).draw();
    }
    
    /**
     * Execute k-menas algorithm
     */
    async function runKMeans() {

        map.spin(true);
        clearLayers();

        invalidEmployees = [];
        fillInvalidEmpTable(invalidEmployees);

        let maxDistance = $("#max_cluster_dist").val();
        let data = [];
        // cast employee data as nVector array
        employees.forEach(item => {
            const nVector = new NVector(item.lat, item.lng, item);
            data.push(nVector);
        });

        // get K value, i.e, the number of centroids
        let numCentroids = $("#k_clusters").val();

        // The k-menas algorithm can generate random locations values (lat, lng) given bounds.
        // let mBounds = map.getBounds();
        //const locPadding = 0.01;
        //kMeans = new KMeans(data, numCentroids , K_ITERATIONS, [mBounds.getNorth() - locPadding,mBounds.getWest() + locPadding, mBounds.getSouth() + locPadding, mBounds.getEast() - locPadding]);
        kMeans = new KMeans(data, numCentroids , K_ITERATIONS);

        while(!kMeans.shouldStop()) {
            await sleep(100);
            centroids = await kMeans.process();
            drawCentroids();
        }

        // delete all attached object to centroid that has distance greather than k_distance
        filterKDistance();
        // delete all centorid with empty attached data
        filterEmptyCentroids();
        // redraw centroids
        drawCentroids();
        // stop map spin
        map.spin(false);
    }

    function drawCentroids() {

            clearLayers();

            // polyLinesMap and centroidPolyLines are used to quick access to L.polyline objects linked to each centroid
            const polyLinesMap = new Map();

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

                const centroidPolyLines = new Map();
                centroid.data.forEach(function(item, itemId) {
                    // draw red and black lines on  layer
                    let itemLatLng = L.latLng([item._lat, item._lng]);
                    let latlngs = [
                        [clusterLoc.lat, clusterLoc.lng],
                        [item._lat, item._lng]
                    ];
                    // compute user distance
                    item._dist = clusterLoc.distanceTo(itemLatLng);
                    let line = L.polyline(latlngs, {
                        color: '#000',
                        weight: 3,
                        opacity: 0.7,
                    });
                    line.setText(item._dist.toFixed(0) + ' m', {center:true, offset:12, below: true, attributes: {fill: '#000000','font-weight': 'bold'}});
                    line.bindPopup("<button class='btn btn-block btn-danger' onClick='deleteItemOnCluster(" + centroidId + "," + itemId + ")'> Eliminar </button>");
                    line.addTo(centroidsMarkers);

                    centroidPolyLines.set(itemId, line);
                });

                polyLinesMap.set(centroidId, centroidPolyLines);

                // add centroid marker
                L.marker([clusterLoc.lat, clusterLoc.lng], {
                    draggable: true
                }).on('drag', function(e) {
                    // when user draw centroid, get attached polylines, 
                    // redraw each of them and calculate new distances
                    const lat = e.target.getLatLng().lat;
                    const lng =e.target.getLatLng().lng;
                    let clusterLoc = L.latLng([lat, lng]);
                    centroid.setLocation(lat, lng);
                    centroid.data.forEach(function(item, itemId) {
                        let itemLatLng = L.latLng([item._lat, item._lng]);
                        // compute new distance
                        item._dist = clusterLoc.distanceTo(itemLatLng);
                        let latlngs = [
                            [lat, lng],
                            [item._lat, item._lng]
                        ];
                        const _polyline = polyLinesMap.get(centroidId).get(itemId);
                        _polyline.setText('');
                        _polyline.setText(item._dist.toFixed(0) + ' m', {center:true, offset:12, below: true, attributes: {fill: '#000000','font-weight': 'bold'}});
                        _polyline.setLatLngs(latlngs);
                    });
                })
                .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 red cirecle on map
                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 filterEmptyCentroids() {
        const filtered = centroids.filter(c => c.data.length > 0);
        centroids = filtered;
    }

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

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

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

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

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


    function skipEmployee(items) {
        if(items != null) {
            $("#btn-skipped-employeed").removeAttr("disabled");
            items.forEach(item => {
                invalidEmployees.push(item.data);
            });
        }
        
        fillInvalidEmpTable(invalidEmployees);
    }

    async function apiRequest() {
        console.log(centroids)
        map.spin(true);

        progress = 1;
        $('#route_progress').show('slow');
        updateProgressBar(0);

        $("#bntSaveBusStop").attr("disabled", true);
        
        for(const centroid of centroids) {
            const address = "https://www.google.com/maps/search/?api=1&query=" + centroid._lat + "," + centroid._lng;
            const alias = calendarName + ', Estacion ' +  centroid.label;
            let _cLatLng = centroid.toLatLng();
            const lat = _cLatLng.lat;
            const lng = _cLatLng.lng;
            const total = centroid.data.length;

            try {
                const result = await $.post("{{route('api_quiq_stop_address_add')}}", {
                    token: "{{\Auth::user()->SECURE_TOKEN}}",
                    address,
                    alias,
                    lat,
                    lng,
                    total,
                    clustering: true
                }).then();

                console.log('result',result);

                var pValue = Math.ceil( progress * 100 / centroids.length );
                updateProgressBar(pValue);
                progress += 1;
            } catch(error) {
                if(error.responseJSON) {
                    const message = "Error al registrar " + alias + ', ' + error.responseJSON.message;
                    $.alert(message)
                }
                console.log(error);
            }

            console.log(progress, centroids.length)
            await sleep(100);
        }

        if(progress >= centroids.length){
            $.alert("Registro de Estaciones exitoso !");
        }
        $("#bntSaveBusStop").removeAttr("disabled");

        map.spin(false);
    }

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

    function addCentroidManually(lat, lng) {

        const label = centroids.length;
        const dist = 0;
        const data  = [];

        const nVector = new NVector(lat, lng);
        nVector.label = label;
        nVector.dist = dist;
        nVector.data = data;
        centroids.push(nVector);
        console.log(nVector);
        drawCentroids();
    }
</script>
@endpush