@extends('layouts.main')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('strings.photo') }}<span class="float-sm-right"> </span></h4>                
            </div>
            <div class="card-body collapse in">
                <div class="table-responsive">
                    <table id="support-table" class="table hover mb">
                        <thead class="thead-inverse">
                            <tr>
                                <th>{{ __('strings.code') }}</th>
                                <th>{{ __('strings.name') }}</th>
                                <th>{{ __('strings.imei') }}</th>
                                <th>{{ __('strings.phone') }}</th>
                                <th>{{ __('strings.client') }}</th>
                                <th>{{ __('strings.type') }}</th>
                                <th>{{ __('strings.line') }}</th>
                                <th>{{ __('strings.enabled') }}</th>
                                <th>{{ __('strings.date') }}</th>
                                <th>{{ __('strings.time_at') }}</th>
                                <th>{{ __('strings.city') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <meta http-equiv="refresh" content="900">
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
    moment.locale('es');
        
        $('#support-table').DataTable({
            processing: true,
            ajax: '{!! route('data_table') !!}',
            columns: [
            { data: 'id',
                "render": function(data, type, row, meta){
                    if(type === 'display'){
                        var url = "{{route('edit_client', ':data')}}";
                        url = url.replace(':data', data);
                        return '<a href="' + url +'">' + data + '</a>';
                    }
                    return data;
                }  
            
            },
            { data: 'ALIAS',defaultContent: " "},
            { data: 'IMEI',defaultContent: " "},
            { data: 'CUSTOM_2',defaultContent: " "},
            { data: 'COMPANY',defaultContent: " "},
            { data: 'BEGIN',defaultContent: " "},
            { data: 'COMMODITY',defaultContent: " "},
            { data: 'ENABLED',defaultContent: " "},
            { data: 'CREATED_AT',defaultContent: " ", render: function(data, type, row, meta)
                {
                        return moment.utc(data).local().format('YYYY-MM-DD');
                }
            },
            { data: 'CREATED_AT',defaultContent: " ", render: function(data, type, row, meta)
                {
                        return moment.utc(data).local().format('HH:mm:ss');
                }
            },
            { data: 'CUSTOM_1',defaultContent: " "}
            ],
            dom: 'Bfrtip',
            buttons: [
                'pageLength','copy', 'excel', 'pdf'
            ],
            "lengthMenu": [[10, 100, 1000], [10, 100, 1000]],
            "language": {
                "url": "{!! asset('Datatables/languages/spanish.json') !!}"
            },
            "order": [[ 0, "desc" ]]
        });
    });
</script>
@endpush