@extends('layouts.main')
@push('styles')
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}"/>
<!-- END DataTables-->
@endpush
@section('content')
<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="panel-heading">
                    <div class="col-md-12">
                        <div class="col-md-8">                                
                            <h1>
                                {{ __('strings.employees_directory') }}  
                            </h1>
                        </div>
                        <div class="col-md-4 text-right">            
                                <a href="#" class="btn btn-danger mr-3 mb-1" onclick="nipRequest()"> {{__('strings.delete_all')}}</a>            
                                <a href="{{route('employees_import_excel_view')}}" class="btn btn-primary mr-3 mb-1"> {{__('strings.import_from_excel')}}</a>
                                <a href="{{route('employees_add_view')}}" class="btn btn-primary mb-1"> {{__('strings.add_new')}}</a>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    <div class="col-md-12 mt-4">
                        <div class="table-responsive">
                            <table id="trips-table" class="table hover mb-0">
                                <thead class="thead-inverse">
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th>Qr</th>
                                        <th>{{__('strings.employee_number')}}</th>
                                        <th>QrCode</th>
                                        <th>{{__('strings.name')}}</th>
                                        <th>{{__('strings.last_name')}}</th>
                                        <th>{{__('strings.department')}}</th>
                                        <th>{{__('strings.phone')}}</th>
                                        <th>{{__('strings.sex')}}</th>
                                        <th>{{__('strings.blood_type')}}</th>
                                        <th>Lat</th>
                                        <th>Lng</th>
                                        <th>{{__('strings.address')}}</th>
                                        <th>{{__('strings.google_url')}}</th>
                                        <th>Registro</th>
                                        <th>Actualizado</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="panel-heading">
                    <div class="col-md-12">
                        <div class="col-md-8">                                
                            <h1>
                                MapView
                            </h1>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    <div class="col-md-12 mt-4">
                    <div class="panel-body" style="width: 100%; height: 440px;">                    
                        <div id="map" style="height: 100%;"></div>                              
                    </div>   
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<!-- BEGIN DataTables-->
<script src="{{asset('datatables/datatables.min_1.js')}}" type="text/javascript"></script>
<!-- END DataTables-->
<script src='{{asset('js/L.Control.Locate.min.js')}}'></script>
<script src="{{asset('js/jquery-qrcode-0.18.0.min.js')}}" type="text/javascript"></script>



<script type="text/javascript">
    
    var table;
    var map;

    // start latitude and longitude.
    var startLat = "{{Auth::user()->START_LAT}}" === undefined ? 22.148757 : parseFloat("{{Auth::user()->START_LAT}}");
    var startLng = "{{Auth::user()->START_LNG}}" === undefined ? -100.991894 : parseFloat("{{Auth::user()->START_LNG}}");
    var title = "{{Auth::user()->COMPANY_NAME}}";

    // start marker definition
    var start_marker = 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
    });

    $(document).ready(function() {

        //setting language for moment.js
        moment.locale('es');

        //initialize datetable
        table = $('#trips-table').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                ajax: {
                                    url: "{{route('get_employes_directory')}}",
                                    type: "POST",
                                    data: {
                                        user_token: "{{Auth::user()->SECURE_TOKEN}}"
                                    }
                                },
                                columns: [
                                        { data: 'edit', defaultContent: "---"},
                                        { data: 'id', render: function(data, type, row, meta){
                                            return "<a onclick='deleteEmployee(" + data + ")' class='danger' href='#'>Eliminar</a>";
                                        },defaultContent: "---"},
                                        { data: 'id', render: function(data, type, row, meta) {
                                            return "<div id='qrcode"  + data + "' style='width:203px'/>";
                                        }, defaultContent: "---"},
                                        { data: 'employee_number', defaultContent:"---"},
                                        { data: 'qr_code', defaultContent:"---"},
                                        { data: 'name', defaultContent:"---"},
                                        { data: 'last_name', defaultContent:"---"},
                                        { data: 'department', defaultContent:"---"},
                                        { data: 'phone', defaultContent:"---"},
                                        { data: 'sex', defaultContent: "---"},
                                        { data: 'blood_type', defaultContent: "---"},
                                        { data: 'lat', defaultContent: "---"},
                                        { data: 'lng', defaultContent: "---"},
                                        { data: 'address', defaultContent: "---"},
                                        { data: 'google_url', render: function(data, type, row, meta) {
                                            return "<a target='_blank' href=' "  + data + " '>" + data + "</a>";
                                        }, defaultContent: "---"},
                                        { data: 'created_at', defaultContent: "---", render: function(data, type, row, meta) {
                                            return moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss');
                                        }}, 
                                        { data: 'updated_at', defaultContent: "---", render: function(data, type, row, meta) {
                                            return moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss');
                                        }}, 
                                ],
                                dom: 'Bfrtip',
                                buttons: [
                                'copy', 'excel',  
                                {
                                    text: 'PDF',
                                    action: function (e, dt, node, config) {
                                        window.print();
                                    }
                                }
                                ],
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                },
                                "initComplete": function(settings, json) {
                                    console.log("datatable init completed");
                                    initMap();
                                }
                });

    });

    function initMap() {
        // initialize map
        map = new L.map('map',{preferCanvas:true, attributionControl: false});
        // 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 controls to map
        L.control.fullscreen().addTo(map);  
        // location control
        L.control.locate({
                locateOptions: {
                maxZoom: 16,
                enableHighAccuracy: true,
            },
            showPopup: false,
            strings: {
                title: "{{__('strings.go_to_my_position')}}"
            }
        }).addTo(map);
        // full screen support to map view
        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
            map.invalidateSize();
        });
        $(window).resize(function () {
            map.invalidateSize();
        });

        map.on('load', function(){
             L.marker([startLat,startLng], {icon: start_marker})    
            .bindTooltip(title)
            .on('click', function(e){
                map.setView(e.latlng, map.zoom);
            })
            .addTo(map);
            addEmployesLayer();
        });


        // initialize map view
        map.setView([startLat,startLng], 14);
    }

    function addEmployesLayer() {
        let features = [];
        let data = table.rows().data();

        $.each(data, function(key, item){
            features.push({
                        type:'Point', 
                        coordinates: [item.lng, item.lat],
                        properties : item,
                        title: item.employee_number,
                        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>"
            });
            // render qr code on datatable
            $('#qrcode'  + item.id).empty().qrcode({ quiet: 2, text: item.qr_code});
        });
        
        L.geoJson({type:'FeatureCollection', 'features': features},{
                style: {
                    "color": "#ffffff",
                    "weight": 3
                },
                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(latlng, {
                       radius: 9,
                       fillColor: "#00B0FF",
                       color: "#000",
                       weight: 1,
                       opacity: 1,
                       fillOpacity: 1
                    });
                },
                onEachFeature: function(feature, layer) {
                    // does this feature have a property named popupContent?
                    if (feature.properties && feature.popupContent) {
                        layer.bindPopup(feature.popupContent);
                        layer.bindTooltip(feature.popupContent, {direction:'top', offset:[0,-12]})
                    }
                }
        }).addTo(map);
    }
    
    function deleteEmployee(employeeId) {
        // request nip
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) {      
                    $.showPreloader("{{__('strings.processing_request')}}");
                    $.post("{{route('employees_preregistration_delete')}}",{
                        user_token: '{{Auth::user()->SECURE_TOKEN}}',
                        employee_id: employeeId,
                        nip
                        },
                    function(data) {
                        console.log(data);
                        $.hidePreloader();
                        table.ajax.reload();
                    })
                    .fail(function(err) {
                        console.log(err);
                        $.hidePreloader();
                        if(err.responseJSON) {
                            $.alert(err.responseJSON.message);
                        } else {
                            $.alert("{{__('strings.error_message')}}");  
                        }
                    });
                }
        }
        });  
    }

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

    function clearEmployees(nip) {
        $.showPreloader("{{__('strings.processing_request')}}");
        $.post("{{route('api_quiq_employees_clear')}}", {
            token: "{{\Auth::user()->SECURE_TOKEN}}",
            nip: nip
        }, function(response) {
            table.ajax.reload();
            $.hidePreloader();
        }).fail(function(error) {
            $.hidePreloader();
            $.alert(error?.responseJSON?.message || "{{__('strings.error_message')}}");
        });
    }
</script>
@endpush