@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row py-md-2">
        
        <div class="col-md-6">
        <a href="{{ route('users.create') }}" class="btn btn-success">Nueva Usuario Cliente</a>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered" id="tbl_client">
                <thead>
                    <tr>
                        <td>Id</td>
                        <td>Cliente</td>
                        <td>Usuario</td>
                        <td>Accion</td>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@stop
@push('scripts')
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> defer</script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script>
var tblProducts;
$( document ).ready(function() {
   
    tblProducts =  $('#tbl_client').DataTable({
        processing: true,
        serverSide: false,
        dom: 'lBfrtip',
        ajax: {
          url: '{!! route('usrclientdata') !!}',
        },
        language: {
              "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
              },
              dom: 'Bfrtip',
        buttons: [
            { extend:'pdf',
              exportOptions: {
                modifier: {
                  page: 'all',
                  search: 'none'   
                }
              },
              customize: function (doc) {
            var tblBody = doc.content[1].table.body;
                for(var i=0;i<tblBody[0].length;i++){
                  tblBody[0][i].fillColor = '#FFFFFF';
                  tblBody[0][i].color = 'black';
                }
           
 
                        var objLayout = {};
                        objLayout['hLineWidth'] = function(i) { return .5; };
                        objLayout['vLineWidth'] = function(i) { return .5; };
                        objLayout['hLineColor'] = function(i) { return '#aaa'; };
                        objLayout['vLineColor'] = function(i) { return '#aaa'; };
                        objLayout['paddingLeft'] = function(i) { return 4; };
                        objLayout['paddingRight'] = function(i) { return 4; };
                        doc.content[1].layout = objLayout;
                        var obj = {};
                        obj['hLineWidth'] =  function(i) { return .5; };
                        obj['hLineColor'] = function(i) { return '#aaa'; };
                     //   doc.content[1].margin = [ 150, 0, 150, 0 ];
            }
            }
        ],
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'created_at', name: 'created_at' }
        ],
        aoColumnDefs: [
            {
                "targets":[3],
                "mRender": function (data,type, row) {
                    return "<a href='#' class='btn btn-success btnEdit' data-id='"+row.id+"' >Editar</a>";
                }
            }
        ]
    });

    $(document).on('click','.btnEdit', function() {
        
        alert($(this).data('id'));
    })
    
});

</script>
@endpush