@extends('layouts.main')

@section('content')
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12" >
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="devices-table" class="table hover mb-0">
                        <thead class="thead-inverse">
                            <tr>
                                <th>{{__('strings.type')}}</th>
                                <th>ALIAS</th>
                                <th>IMEI</th>
                                <th>{{__('strings.cmd')}}</th>
                                <th>{{__('strings.geofences')}}</th>
                                <th>{{__('strings.fuel')}}</th>
                                <th>{{__('strings.last_report')}}</th>
                                <th>{{__('strings.date_time')}}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
var map;
$(document).ready(function () {
    
    $('#devices-table').DataTable({
            processing: true,
            data: {!!$devices->toJson()!!},
            paging: true,
            pageLength: 25,
            columns: [
            { data: 'type', name: 'type', defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'ALIAS', name: 'ALIAS', defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'IMEI', name: 'IMEI',defaultContent: "<i>{{__('strings.undefined')}}</i>" },    
            { data: 'IMEI', name: 'IMEI', render:  function(data, type, row) {
              return '<a href="{{URL::to("/")}}/alerts/others/' + data + '/update"><i class="glyphicon glyphicon-edit"></i>{{__("strings.cmds")}}</a>';
            },defaultContent: "<i>{{__('strings.undefined')}}</i>" },         
            { data: 'IMEI', name: 'IMEI', render:  function(data, type, row) {
              return '<a href="{{URL::to("/")}}/alerts/others/geo/' + data + '/index"><i class="glyphicon glyphicon-edit"></i>{{__("strings.geofences")}}</a>';
            },defaultContent: "<i>{{__('strings.undefined')}}</i>" },   
            { data: 'IMEI', name: 'IMEI', render:  function(data, type, row) {
              return '<a href="{{URL::to("/")}}/alerts/fuel-tanks/' + data + '/update"><i class="glyphicon glyphicon-edit"></i>{{__("strings.fuel")}}</a>';
            },defaultContent: "<i>{{__('strings.undefined')}}</i>" },   
            
            { 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: 'Bfrtip',
            buttons: [
                'pageLength','copy', 'excel',
                /*{
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4'
                }*/
            ],
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
            },
            order: [[ 7, "desc" ]]
        });     
});

</script>
@endpush