@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">
                        <tr>
                            <th>{{__('strings.type')}}</th>
                            <th>ALIAS</th>
                            <th>{{__('strings.company')}}</th>
                            <th>IMEI</th>
                            <th>CUSTOM_1</th>
                            <th>CUSTOM_2</th>
                            <th>{{__('strings.in_route')}}</th>
                            <th>{{__('strings.last_report')}}</th>
                            <th>{{__('strings.date_time')}}</th>
                            <th></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: 'ALIAS', name: 'ALIAS', render: function(trama, type, row) { 
                return '{{Auth::user()->COMPANY}}';
            }},
            { data: 'IMEI', name: 'IMEI', render:  function(data, type, row) {
              return '<a href="{{URL::to("/")}}/device/' + data + '/info"><i class="glyphicon glyphicon-edit"></i> ' + data + '</a>';
            },defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'CUSTOM_1', name: 'CUSTOM_1', type: "string", defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'CUSTOM_2', name: 'CUSTOM_2', type: "string", defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'IN_ROUTE', name: 'IN_ROUTE', type: "string", 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";
                    }
                } 
            },                    
            {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: [
                'pageLength','copy', 'excel',
                /*{
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4'
                }*/
            ],
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
            },
        });     
});

</script>
@endpush