@extends('layouts.main')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <h4 class="card-title col-md-11">{{ __('strings.clients') }}</h4>
                    <form action="{{ route('man_add_client')}}">
                        <button type="submit" class="btn btn-primary "><i class="fas fa-user-plus"></i></button>
                    </form>             
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="table-responsive">
                    <table id="support-table" class="table hover mb">
                        <thead class="thead-i   nverse">
                            <tr>
                                <th>{{ __('strings.id') }}</th>
                                <th>{{ __('strings.user') }}</th>
                                <th>{{ __('strings.password') }}</th>
                                <th>{{ __('strings.company') }}</th>
                                <th>{{ __('strings.date') }}</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,
            responsive: true,   
            serverSide: true,
            ajax: '{!! route('data_table_clients') !!}',
            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: 'USER',defaultContent: " "},
            { data: 'PASSWORD',defaultContent: " "},
            { data: 'COMPANY',defaultContent: " "},
            { data: 'CREATED_AT',defaultContent: " ", render: function(data, type, row, meta)
                {
                        return moment.utc(data).local().format('YYYY-MM-DD');
                }
            }
            ],
            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