@extends('layouts.main')
@push('styles')
<!-- BEGIN DataTables-->

<link href='{{asset('css/daterangepicker.css')}}' rel='stylesheet' />
<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-12">                                
                            <h1>
                                {{ __('strings.qr_code') }}  
                            </h1>

                            <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;" class="col-md-4">
                                <i class="fa fa-calendar"></i>&nbsp;
                                <span></span> <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    
                    <div class="col-md-12 mt-4">
                    <br/>
                        <table id="trips-table" class="table hover mb-0">
                            <thead class="thead-inverse">
                                <tr>
                                    <th>Id</th>
                                    <th>Mapa</th>
                                    <th>Fecha</th>
                                    <th>Hora</th>
                                    <th>Tipo</th>
                                    <th>{{__('strings.qr_code')}}</th>
                                    <th>{{__('strings.driver_name')}}</th>
                                    <th>{{__('strings.driver_lastname')}}</th>
                                    <th>{{__('strings.employee_name')}}</th>
                                    <th>{{__('strings.employee_lastname')}}</th>
                                    <th>Lat</th>
                                    <th>Lng</th>
                                    <th>Heading</th>
                                    <th>Altitude</th>
                                    <th>{{__('strings.google_url')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </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/daterangepicker.js')}}" type="text/javascript"></script>

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

    // 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() {

        $('#reportrange').daterangepicker({
                "timePicker": true,
                "timePicker24Hour": true,
                "locale": {
                    "format": "YYYY-MM-DD HH:mm",
                    "separator": " - ",
                    "applyLabel": "Aceptar",
                    "cancelLabel": "Cancelar",
                    "fromLabel": "De",
                    "toLabel": "A",
                    "customRangeLabel": "Personalizado",
                    "weekLabel": "S",
                },
        });

        function cb(start, end) {
            $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm') + ' - ' + end.format('YYYY-MM-DD HH:mm'));
            makeRequest(start.format('YYYY-MM-DD HH:mm'), end.format('YYYY-MM-DD HH:mm'));
        }
        
        $('#reportrange').on('apply.daterangepicker', function (ev, picker) {  
            $('#reportrange span').html(picker.startDate.format('YYYY-MM-DD HH:mm') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm'));
            makeRequest(picker.startDate.format('YYYY-MM-DD HH:mm'), picker.endDate.format('YYYY-MM-DD HH:mm'));
        });

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

        // call business trips on load page
        cb(moment().subtract(1, 'days'),  moment());
        
        //initialize datetable
        table = $('#trips-table').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                scrollY: 500,
                                scrollX: true,
                                scrollCollapse: true,
                                columns: [
                                        { data: 'id', defaultContent:"---"},
                                        { data: 'idd', defaultContent:  "<button class='btn btn-sm'>Mapa</button>"},
                                        { data: 'created_at', name: 'created_at', render: function(data, type, row, meta) {
                                            return moment.utc(data).local().format('YYYY-MM-DD');
                                            }
                                        }, 
                                        { data: 'created_at', name: 'created_at', render: function(data, type, row, meta) {
                                                    return moment.utc(data).local().format('HH:mm:ss');
                                            }
                                        },
                                        { data: 'trip_type', defaultContent:"---"},
                                        { data: 'qr_code', defaultContent:"---"},
                                        { data: 'driver_name', defaultContent:"---"},
                                        { data: 'driver_lastname', defaultContent:"---"},
                                        { data: 'employee_name', defaultContent:"---"},
                                        { data: 'employee_lastname', defaultContent:"---"},
                                        { data: 'lat', defaultContent: "---"},
                                        { data: 'lng', defaultContent: "---"},
                                        { data: 'bearing', defaultContent: "---"},
                                        { data: 'altitude', defaultContent: "---"},
                                        { data: 'lat', render: function(data, type, row, meta){
                                            return "<a href='https://www.google.com/maps/search/?api=1&query=" + row.lat + "," + row.lng +"' target='_black'>https://www.google.com/maps/search/?api=1&query=" + row.lat + "," + row.lng +"'</a>"
                                        },defaultContent: "---"}
                                ],
                                dom: 'Bfrtip',
                                buttons: [
                                'copy', 'excel'
                                ],
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                },
                                "initComplete": function(settings, json) {
                                    initMap()
                                }
                });

                $('#trips-table tbody').on( 'click', 'button', function () {
                    var data = table.row( $(this).parents('tr') ).data();

                    if(map) {
                        window.scrollTo(0,document.body.scrollHeight);
                        setTimeout(() => {
                            map.panTo(new L.LatLng(data.lat, data.lng));
                            //map.setZoom(16);
                        }, 500);
                    }
                } );
    });

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


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

    function addScanLayer() {
        if(scanGeoJSon){
            map.removeLayer(scanGeoJSon);
        }

        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.qr_code,
                        popupContent: "<strong><h5>Nombre: " + item.qr_code + " </h5></strong>" 
                                + "<strong>{{__('strings.name')}}:</strong> " + item.employee_name + ' ' + item.employee_lastname + "<br>"
            });
        });
        
        scanGeoJSon =  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 makeRequest(startDate, endDate) {
        $.showPreloader("{{__('strings.loading')}}");
        
        $.ajax({
            url: "{{route('employee_qr_history')}}",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                    token: '{{Auth::user()->SECURE_TOKEN}}',
                    start_date: moment(startDate).utc().format('YYYY-MM-DD HH:mm'),
                    end_date: moment(endDate).utc().format('YYYY-MM-DD HH:mm'),
            }),
            dataType: "json",
            success: function (json) {
                $.hidePreloader(); // hide the preloader
                if(json.success)  {
                    fillTable(json.data);
                    addScanLayer();
                }
            },
            error: function (err) {
                console.log(err);
                $.hidePreloader(); 
            }
        });
    }

    function fillTable(dataSet) {
	    table.clear();
	    table.rows.add(dataSet).draw();
    }
</script>
@endpush