@extends('layouts.guest')

@section('content')
    
    
    <!-- BEGIN DataTables-->
    <link rel="stylesheet" type="text/css" href="{{asset('DataTables/datatables.min_1.css')}}"/>
    <!-- END DataTables-->
    <div>
    <div class="">   
    <div class="col-md-6" style="height:500px;">
                        <div id='map'></div>
                    </div>

    <div class="col-md-6" >
        <div class="card">
            <div class="table-responsive">
                <table id="device-table" class="table hover mb-0">
                    <thead>
                        <tr>
                            <th>HIST.</th>
                            <th>IMEI</th>
                            <th>ALIAS</th>
                            <th>CMD</th>
                            <th>---</th>
                            <th>LAT</th>
                            <th>LNG</th>
                            <th>DATA</th>
                            <th>HUM</th>
                            <th>BAT</th>
                            <th>{{__('strings.last_report')}}</th>
                            <th>{{__('strings.date')}}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    </div>
</div>

@endsection

@push('scripts')
    <!-- BEGIN VENDOR JS-->
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/jquery.min.js') }}"></script>  
    <!-- BEGIN Momment-->
    <script src="{{asset('js/moment-with-locales.min.js')}}" type="text/javascript"></script>
    <!-- END momment-->
    <!-- BEGIN DataTables-->
    <script src="{{asset('DataTables/datatables.min_1.js')}}" type="text/javascript"></script>
    <!-- END DataTables-->
    <script>

    var map;
    var table;
    $(document).ready(function () {
        initMap();
        // setting moment.js language
        moment.locale('es');
        $.fn.dataTable.ext.errMode = 'none';
        table = $('#device-table').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            ajax: {
                url: "{{route('guest_devices_datatable')}}",
                type: "POST",
                data: {
                    'token': '{{Auth::user()->token}}'
                },
                error: function(error, textStatus, errorThrown){
                    console.log(error);
                }                
            },
            columns: [
            { data: 'IMEI', name: 'IMEI', defaultContent: "", render: function(data, type, row){
                return "<a class='btn btn-rounded btn-primary btn-sm' href='{{URL::to('/')}}/guest/device/" + data + "/historical' target='_blank'><i class='fa fa-search'></i></a>";
            }},
            { data: 'IMEI', name: 'IMEI', type: "string", defaultContent: "" },
            { data: 'ALIAS', name: 'ALIAS', defaultContent: "<i>NO DEFINIDO</i>" },
            { data: 'trama.CMD', name: 'trama.CMD', type: "string", defaultContent: "" },
            { data: 'trama.cmd_translate', name: 'trama.IMEI', type: "string", defaultContent: "", searchable: false  },
            { data: 'trama.LAT', name: 'trama.LAT', defaultContent: ""  },
            { data: 'trama.LNG', name: 'trama.LNG', defaultContent: ""  },
            { data: 'trama', name: 'trama',  defaultContent: "", render: function(trama, type, row) { 
                    if(trama){
                        var value = "";
                        switch(trama.BEGIN) {
                            case "PJ":
                                value = trama.TEMP + "ºC";
                                break;
                            case "PM":
                                value = trama.TEMP + "ºC";
                                break;                
                            case "PH":
                                value = trama.TEMP + " PH";
                                break;
                            case "BF":
                                value = trama.TEMP + " LTRS";
                                break;
                            case "PF":
                                value = trama.TEMP + " LTRS";
                                break;
                            case "MVT":
                                value = trama.TEMP + " LTRS";
                                break;
                            case "ANDR":
                                value = "---";
                                break;
                        }
                        return "<font color='black'>" + value + "</font>";
                    }
                    return null
                },
                searchable: false 
            },
            { data: 'trama.HUM', name: 'trama.HUM', render: function(data, type, row){ return data + "%";} },
            { data: 'trama.BAT', name: 'trama.BAT', render: function(data, type, row){ return data + "%";} },
            { data: 'trama.CREATED_AT', name: 'trama.CREATED_AT', render: function ( data, type, row ) {
                    if(data) {
                        return moment.utc(data).local().fromNow();
                    } else {
                        return "0000-00-00 00:00";
                    }
                } 
            },
            { data: 'trama.CREATED_AT', name: 'trama.CREATED_AT', render: function ( data, type, row ) {
                    if(data) {
                        return moment.utc(data).local().format("YYYY-MM-DD HH:mm");
                    } else {
                        return "0000-00-00 00:00";
                    }
                } 
            },
            ],
            dom: 'Bftip',
            buttons: [
                {
                    className:'btn-dark',
                    extend: 'pageLength'
                },
                {
                    className:'btn-danger',
                    extend: 'excel'
                },
                {
                    className:'btn-dark',
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4'
                }
            ],
            order: [[ 10, "desc" ]],
            lengthMenu: [[10, 100, 300], [10, 100, 300]],
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json)"
            }
        });   
    
    });
        
    setInterval(function(){
        table.ajax.reload();
        clearMarkers();
        const data = table.rows().data().toArray();
        for(let device of data) {
            addMarker(device);
        }
    }, 15000);


    function initMap() {
        map = new L.map('map',{attributionControl: false});
        map.setView([22.148726, -100.991923], 5);
        L.tileLayer("{{config('app.style_map_uri')}}", {
                maxZoom: 19,
        }).addTo(map);
        
        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();
        });
        
    }

    function clearMarkers() {
        map.eachLayer((layer) => {
            if (layer instanceof L.Marker) {
                layer.remove();
            }
        });
    }
    </script>
    

@endpush