@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

<div class="content mt-3">
           <div class="animated">

               <div class="card">
                   <div class="card-header">
                       <i class="mr-2 fa fa-align-justify"></i>
                       <strong class="card-title" v-if="headerText">Menus d'insertion</strong>
                   </div>
                   <div class="card-body">
                   <button type="button" class="btn btn-secondary mb-1" data-toggle="modal" data-target="#calcul">
                          P Etrangere
                       </button>
                       </div>
               </div>


               <script type="text/javascript">

$(document).ready(function() {

  $(".btn-success").click(function(){ 
      var html = $(".clone").html();
      $(".increment").after(html);
  });

  $("body").on("click",".btn-danger",function(){ 
      $(this).parents(".control-group").remove();
  });

});

</script>

<!-------------------------------------------------------------------->

               <div class="modal fade" id="calcul" tabindex="-1" role="dialog" aria-labelledby="calculLabel" aria-hidden="true">
                   <div class="modal-dialog modal-lg" role="document">
                       <div class="modal-content">
                           <div class="modal-header">
                               <h5 class="modal-title" id="calculLabel">Pension Etrangere</h5>
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                   <span aria-hidden="true">&times;</span>
                               </button>
                           </div>
                           <div class="modal-body">
        <form action="{{ url('addpe')}}" method="POST" enctype="multipart/form-data">
                               @csrf
    
    <div class="row">
        <div class="col-sm-3">
         <label>N° DE PENSION:</label>
          <input type="text"  name="numpension" class="form-control @error('fnr') is-invalid @enderror" id="fnr" placeholder="Numero" required>
   </div>
   <div class="col-sm-3">
         <label>TYPE DE PENSION:</label>
          <input type="text"  name="nature" class="form-control @error('nature') is-invalid @enderror" id="nature" placeholder="nature" required>
   </div>
   <div class="col-sm-6">
       <label>Nom et prenom:</label>
     <input type="text" name="nom" class="form-control @error('nom') is-invalid @enderror" id="nom" placeholder="Nom et prenom"  value="{{ old('nom')}}" required>
      </div>
      </div>
      <div class="row">
      <div class="col-sm-4">
         <label>MATRICULE:</label>
          <input type="text"  name="matricule" class="form-control @error('matricule') is-invalid @enderror" id="matricule" placeholder="matricule" required>
   </div>
   <div class="col-sm-4">
         <label>ASSIGNATION:</label>
          <input type="text"  name="assignations" class="form-control @error('nature') is-invalid @enderror" id="nature" placeholder="Assignation" required>
   </div>
   <div class="col-sm-4">
         <label>MODE DE PAIEMENT:</label>
         <select name='modepaiement' class="form-control @error('genre') is-invalid @enderror" id="genre" placeholder="Genre"  value="{{ old('genre')}}"   required>
   <option  value=''>Choisissez  SVP!</option>
           <option  value='ESPECES'>ESPECES</option>
   <option  value='VIREMENT'>VIREMENT</option>
   </select>
   </div>
   </div>
   <div class="row">
   <div class="col-sm-3">
         <label>BANQUE:</label>
          <input type="text"  name="domiciliation" class="form-control @error('nature') is-invalid @enderror" id="nature" placeholder="Numero compte">
   </div>
   <div class="col-sm-3">
         <label>NUMERO COMPTE:</label>
          <input type="text"  name="numerocompte" class="form-control @error('nature') is-invalid @enderror" id="nature" placeholder="Numero compte">
   </div>
   <div class="col-sm-3">
         <label>ELEMENT PENSION:</label>
          <input type="text"  name="elementpension" class="form-control @error('nature') is-invalid @enderror" id="nature" placeholder="Element de pension"  required>
   </div>
      <div class="col-sm-3">
       <label>AVOIR:</label>
       <input type="number"  name="pensiongenerale" class="form-control @error('montant') is-invalid @enderror" id="montant" placeholder="montant" required>
     </div>
     </div>
     <div class="row">
   <div class="col-sm-4">
         <label>CODE ARCHIVE:</label>
          <input type="text"  name="code" class="form-control @error('nature') is-invalid @enderror" id="nature" placeholder="Code archives"  required>
   </div>
   <div class="col-sm-4">
         <label>GROUPE DE PAIEMENT:</label>
          <input type="text"  name="groupe" class="form-control @error('nature') is-invalid @enderror" id="nature" placeholder="Groupe"  required>
   </div>
      <div class="col-sm-4">
       <label>NUMERO D'ORDRE:</label>
       <input type="number"  name="numeroordre" class="form-control @error('montant') is-invalid @enderror" id="montant" placeholder="Numero" required>
     </div>
     </div>
    
     </div>
  
   
                           <div class="modal-footer">
                               <button type="button" class="btn btn-warning" data-dismiss="modal">Anuler</button>
                               <button type="submit" class="btn btn-primary btn-block">Valider</button>
                                  </form>
                           </div>
                       </div>
                   </div>
               </div>


             



               </div>
            
               <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">Listes</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>Montant</th>
                                         <th>Nature</th>

                                         <th>Numero</th>

                                         <th>Assignation</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>
          
        </th>

      </tr>
    </tfoot>
          <tbody>
            
               <tr>
                <td></td>
                
                <td></td>
             

                <td></td>
                <td></td>
                <td></td>
                <td>
                 
                </td>
                 </tr>
            
                                   </tbody>
                             </table>
</div>
</div>
                        </div>
                    </div>


                </div>
            </div>


<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 en 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>