@extends('layouts.app0/dash2')
@section('content')

<div class="row">
    <div class="col-md-12">

        <div class="portlet light bordered">

            <div class="portlet-body">
                <span id="titre"></span>
                <table class="table table-striped table-bordered table-hover table-checkable order-column" id="tableau">
                    <thead>
                    <tr>
                        <th class="text-center">N°</th>
                        <th class="text-center">produits</th>
                        <th class="text-center">A Payer</th>
                        <th class="text-center">Payé</th>
                        <th class="text-center">Reste à payer</th>
                        {{-- <th class="text-center">Action</th> --}}

                    </tr>
                    </thead>
                    <tbody>
                        @php($i=1)
                        @foreach($factures as $key =>$value )
                      
                        <tr>
                            <td class="text-center">{{ $i  }} </td>
                            <td class="text-center">
                                {{ $value->libellepro  }}
                            </td>
                            <td class="text-center" >
                               {{ $value->pu  }}
                            </td>
                            <td class="text-center" >
                                {{ $value->paye }}
                            </td>
                            <td class="text-center" >
                                {{ $value->solde }}
                            </td>
                           
                        </tr>
                        @php($i=$i+1)
                        @endforeach
                </table>
            </div>
        </div>

    </div>
</div>

@endsection
@section('stylesheets')
<style>

</style>
@endsection
@section('javascripts')

<script>
       $('#tableau').dataTable({

// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
   "aria": {
       "sortAscending": ": activate to sort column ascending",
       "sortDescending": ": activate to sort column descending"
   },
   "emptyTable": "No data available in table",
   "info": "Showing _START_ to _END_ of _TOTAL_ records",
   "infoEmpty": "No records found",
   "infoFiltered": "(filtered1 from _MAX_ total records)",
   "lengthMenu": "Voir _MENU_",
   "search": "Rechercher:",
   "zeroRecords": "Aucun enregistrement",
   "paginate": {
       "previous":"Prev",
       "next": "Next",
       "last": "Last",
       "first": "First"
   }
},

// Or you can use remote translation file
//"language": {
//   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},

// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

"columnDefs": [ {
   "targets": 0,
   "orderable": false,
   "searchable": false
}],

"lengthMenu": [
   [5, 15, 20, -1],
   [5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 20,
"pagingType": "bootstrap_full_number",
"columnDefs": [{  // set default column settings
   'orderable': false,
   'targets': [0]
}, {
   "searchable": false,
   "targets": [0]
}],
"order": [
   [1, "asc"]
] // set first column as a default sort by asc
});
</script>
@endsection