@extends('layouts.app')
@section('content')
@if ($message= Session::get('success'))
<div class="col-sm-12">
               <div class="alert  alert-success alert-dismissible fade show" role="alert">
                   <span class="badge badge-pill badge-success">Success</span> {{ $message }}
                   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                   </button>
               </div>
           </div>
           @endif
           @if(count($naturenp)>0)
  <!-- Modal js-->
  <div class="content mt-3">
            <div class="animated fadeIn">
                <div class="row">

                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <strong class="card-title">Services et anuités</strong>
                            </div>
                            <div class="card-body">
                            <table table class="datatable table table-hover table-bordered yajra-datatable">
                                 <thead>
                                     <tr>
                                         <th>Nom et prenom</th>
                                
                                         <th>Matricule</th>
                                         <th>AnsT</th>
                                         <th>MoisT</th>
                                         <th>JoursT</th>
                                         <th>AnsV</th>
                                         <th>MoisV</th>
                                         <th>JoursV</th>
                                         <th>AnsM</th>
                                         <th>MoisM</th>
                                         <th>JoursM</th>
                                         <th>AnsB</th>
                                         <th>MoisB</th>
                                         <th>joursB</th>
                                         <th>TotalAns</th>
                                         <th>TotalMois</th>
                                         <th>TotalJours</th>
                                         <th></th>
                                         <th></th>

                                     </tr>
                                 </thead>
                                 <tfoot>
      <tr>
        
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
         </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
         </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
        <input type="text" class="form-control input-sm filter-column">
          </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
         </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
          <input type="text" class="form-control input-sm filter-column">
        </th>
        <th>
        </th>
        <th>
        </th>

      </tr>
    </tfoot>
          <tbody>
            @foreach($naturenp as $naturenps)
               <tr>
                <td>{{$naturenps->nom}}</td>

                <td>{{$naturenps->matricule}}</td>
                <td>{{$naturenps->ansT}}</td>
                <td>{{$naturenps->moisT}}</td>
                <td>{{$naturenps->joursT}}</td>
                <td>{{$naturenps->ansV}}</td>
                <td>{{$naturenps->moisV}}</td>
                <td>{{$naturenps->joursV}}</td>
                <td>{{$naturenps->ansM}}</td>
                <td>{{$naturenps->moisM}}</td>
                <td>{{$naturenps->joursM}}</td>
                <td>{{$naturenps->ansB}}</td>
                <td>{{$naturenps->moisB}}</td>
                <td>{{$naturenps->joursB}}</td>
                <td>{{$naturenps->totalA}}</td>
                <td>{{$naturenps->totalM}}</td>
                <td>{{$naturenps->totalJ}}</td>
                <td>
                  <a href="{{ url('afficheservicereversion', $naturenps->id)}}" class="btn btn-info">Modifier</a>
                </td>
                <td>
                 
                <form action="{{ url('afficheservicereversion.destroy', $naturenps->id)}}" method="POST">
                    @csrf
                    @method('DELETE')
                     <button  class="btn btn-danger" type="submit">Supprimer </button>
                   </form>
                  
                </td>

                 </tr>
                  @endforeach
                                   </tbody>
                             </table>
</div>
</div>
                        </div>
                    </div>


                </div>
            </div>
@endif

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- Responsive extension -->
    <script src="https://cdn.datatables.net/responsive/2.1.0/js/responsive.bootstrap.min.js"></script>
    <!-- Buttons extension -->
    <script src="//cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.2.1/js/buttons.bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>

    <script>
    var dataTable = $('.datatable').DataTable({
  buttons: [
    {
      extend: 'excel',
      text: 'Export to Excel',
      className: 'btn-sm btn-flat',
    },
  ],
  dom: "<'row'<'col-md-3'l><'col-md-6 text-center'B><'col-md-3'f>>" +
         "<'row'<'col-md-12'tr>>" +
         "<'row'<'col-md-5'i><'col-md-7'p>>",
  drawCallback: function(settings) {
    if (!$('.datatable').parent().hasClass('table-responsive')) {
      $('.datatable').wrap("<div class='table-responsive'></div>");
    }
  }
});

dataTable.columns().every(function() {
  var column = this;

  $('.filter-column', this.footer()).on('keyup change', function() {
    if (column.search() !== this.value) {
      column
        .search(this.value)
        .draw();
      this.focus();
    }
  });
});

    </script>
    <style>/* Styles go here */

/* Column Filter row at top of table  */
.datatable tfoot {
  display: table-header-group;
}

.datatable tfoot .filter-column {

  width: 100% !important;
}</style>
             
             @endsection
</body>