@extends('admin.base')
@section('title')

   EDUCATIVE | LISTE | ELEVE
    
@endsection

@section('stylesheet')

  <!-- <link href="{{url('admin/table/vendor/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet"> -->
  <link href="{{url('admin/table/vendor/bootstrap-icons/bootstrap-icons.css')}}" rel="stylesheet">
  <link href="{{url('admin/table/vendor/boxicons/css/boxicons.min.css')}}" rel="stylesheet">
  <link href="{{url('admin/table/vendor/quill/quill.snow.css')}}" rel="stylesheet">
  <link href="{{url('admin/table/vendor/quill/quill.bubble.css')}}" rel="stylesheet">
  <link href="{{url('admin/table/vendor/remixicon/remixicon.css}')}}" rel="stylesheet">
  <link href="{{url('admin/table/vendor/simple-datatables/style.css')}}" rel="stylesheet">
  <link href="{{url('admin/table/css/style.css')}}" rel="stylesheet">
  @endsection

@section('body')

 <div class="card">
    <div class="card-header">
        <h5>Elève</h5>
        <a href="{{route('eleves.create')}}" class="btn btn-primary float-right" ><i class="bi bi-people-fill"></i>Ajouter</a>
    </div>
    <div class="card-block table-border-style">
        <div class="table-responsive">
      <table class="table datatable ">
         <thead class="table-info w-100">
           <tr>
             <th scope="col">N°</th>
             <th scope="col">Nom</th>
             <th scope="col">Prenom</th>
             <th scope="col">Matricule</th>
             <th scope="col">Code parent</th>
             <!-- <th scope="col">Classe</th> -->
             <th class="text-center" style="text-align: center; width: 300px" colspan="3">Action</th>
           </tr>
         </thead>
         <tbody class="table">
          @foreach($eleves as $key=>$eleve)
           <tr>
             <td><strong>{{$key+1}}</strong> </td>
             <td> {{$eleve->nom}}</td>
              <td>{{$eleve->prenom}}</td>
             <td>{{$eleve->matricule}}</td>
             <td>{{$eleve->codeparent}}</td>
             <!-- <td>{{$eleve->nom}}</td> -->
             <td style="width: 100px" colspan="" class="text-center">
                   <a href="{{ route('eleves.show',$eleve->id)}}" style="border-radius: 20px" type="button" class="btn btn-primary btn-xs" title="Voir"><i class="fas fa-eye"></i></a> 
             </td>
             <td style="width: 100px" colspan="" class="text-center">
                   <a href="{{ route('eleves.edit',$eleve->id)}}" style="border-radius: 20px" type="button" class="btn btn-success btn-xs" title="Modifier"><i class="fas fa-pencil"></i></a> 
             </td>
             <td style="width: 100px" class="text-center">
                  <a data-toggle="modal" data-target="#eleve{{$eleve->id}}" href="#" style="border-radius: 20px" type="button" class="btn btn-danger btn-xs" title="Supprimer"><i class="fas fa-trash"></i></a> 
             </td>
              
              <!--Modal-->
                <div id="eleve{{$eleve->id}}" class="modal" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Suppression</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Voulez-vous vraiment supprimer cet enregistrement ?</p>
                      </div>
                      <div class="modal-footer">
                        <button data-dismiss="modal" type="button" class="btn btn-primary">Annuler</button>
                      <form action="{{ route('eleves.destroy', $eleve->id) }}" method="post">
                       @csrf
                        @method('DELETE')
                        <button class="btn btn-danger btn-xs" type="submit">Supprimer</button>
                      </form>
                      </div>
                    </div>
                  </div>
                </div>
                <!--EndModal-->
          </tr>
          @endforeach
         </tbody>
       </table>
        </div>
    </div>
 </div>

@endsection

@section('javascript')
    <!-- Jquery JS-->
   
    <!-- jQuery -->
    <script src="{{asset('admin/plugins/jquery/jquery.min.js')}}"></script>
    <!-- Bootstrap 4 -->
    <script src="{{asset('admin/plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
    <!-- AdminLTE App -->
    <script src="{{asset('admin/dist/js/adminlte.min.js')}}"></script>
    @if(session()->has('info'))
    <script >

      Swal.fire('{{session('info')}}')
      
    </script>
    @endif  

    <script type="text/javascript">
      
      $('#note').on('show.bs.modal', function (event) {
       var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('whatever') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      modal.find('.modal-title').text('Enregistrement de note ')
      // modal.find('.modal-body input').val(recipient)
    })
    </script>

  <script src="{{url('admin/table/vendor/apexcharts/apexcharts.min.js')}}"></script>
  <script src="{{url('admin/table/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
  <script src="{{url('admin/table/vendor/chart.js/chart.min.js')}}"></script>
  <script src="{{url('admin/table/vendor/echarts/echarts.min.js')}}"></script>
  <script src="{{url('admin/table/vendor/quill/quill.min.js')}}"></script>
  <script src="{{url('admin/table/vendor/simple-datatables/simple-datatables.js')}}"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
  <script src="{{url('admin/table/vendor/php-email-form/validate.js')}}"></script>

  <!-- Template Main JS File -->
  <script src="{{url('admin/table/js/main.js')}}"></script>

  <script src="{{URL::to('admin/table/vendor/js/tinymce.min.js')}}"></script>

    <script src="{{asset('eleve_form/js/global.js')}}"></script>

@endsection