@extends('layouts.main')

@section('content')
<div class="row" >
    <div class="col-md-12" >
            <div class="card">   
            <div class="card-header">
                <h1 class="form-section">{{ __('strings.my_devices') }}</h1>
            </div>     
            <hr>
            <div class="card-body">
                <div class="dashboard-widget-content">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="table-responsive">
                            <table id="devices-table" class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>IMEI</th>
                                        <th>ALIAS</th>
                                        <th>CMD</th>
                                        <th>HMR</th>
                                        <th>HMR_TEST</th>
                                        <th>{{__('strings.last_report')}}</th>
                                        <th>TESTS</th>
                                        <th>Google</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
 </div>
<p></p>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12" >
        <div class="card">
            
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    
$(document).ready(function () {
    
    const table = $('#devices-table').DataTable({
            processing: false,
            serverSide: true,
            responsive: false,  
            searching: false,
            ajax: {
                url: "{{route('user_devices_datatable')}}",
                type: "POST",
                data: {
                    'user_token': '{{Auth::user()->TOKEN}}'
                }                
            },
            columns: [                
            { data: 'IMEI', name: 'IMEI', type: "string", defaultContent: "" },
            { data: 'ALIAS', name: 'ALIAS', defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'trama.CMD', name: 'CMD', type: "string", defaultContent: "" },
            { data: 'trama.HMR', name: 'HMR', defaultContent: "<i>{{__('strings.undefined')}}</i>"  },
            { data: 'trama.HMR_TEST', name: 'HUM', defaultContent: "<i>{{__('strings.undefined')}}</i>"  },
            { data: 'trama.CREATED_AT', name: 'trama.CREATED_AT', render: function ( data, type, row ) {
                    return moment.utc(data || null).local().fromNow();
                } 
            },
            { data: 'IMEI', name: 'IMEI', defaultContent: "", render: function(data, type, row){
                return "<a href='{{URL::to('/')}}/device/" + data + "/historical'>{{__('strings.show_tests')}}</a>";
            }},
            {data:"trama", name:"trama", defaultContent:"<i>{{__('strings.undefined')}}</i>", render: function(data, type, row){
                    if(data) {
                        return '<a href="http://maps.google.com/maps?q=&layer=c&cbll=' + data.LAT + ',' + data.LNG + '" target="_blank">StreetView</a>';
                    }
                    return null;
            }},
            ],
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel',
                /*{
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4'
                }*/
            ],
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
            },
            rowCallback: function( row, data, index ) {
                if (!data.IN_ROUTE) {
                    $(row).hide();
                }
            },
        });  
        
        setInterval(function () {
            table.ajax.reload();
        }, 5000);
});
</script>
@endpush