@extends('layouts.app')
  @include('layouts.datatables_css') 
@section('content')
  @include('tutor.header')

<section class="">
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <span class="card-title">Tutors</span>
          <hr>

          <div class="row">
            <div class="col s12">
              <table class="js-exportable">
                <thead>
                  <tr>
                    
                    <th>Name</th>
                    <th>Email</th>
                    <th>Course</th>
                    
                  
                    {{--
                    <th>Action</th> --}}
                  </tr>
                </thead>

                <tbody>
                  @foreach ($tutors as $tutor)
                  <tr>
                  <td>{{ isset($tutor->username) ? $tutor->username :"Not Set" }}</td>
                    <td>{{ isset($tutor->email) ? $tutor->email:"Not Set" }}</td>
                    <td>{{ isset($tutor->course) ? $tutor->course : "Not Set" }}</td>
                
                  </tr>
                  @endforeach
                </tbody>
                <tfoot>
                  <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Course</th>
                   
                    {{--
                    <th>Action</th> --}}
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
@endsection

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" defer></script>



<script>
  $(function(){
      $('.js-exportable tfoot th').each( function () {
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
      } );
   
      // DataTable
      var table = $('.js-exportable').DataTable({
        pageLength:10,
        lengthMenu: [5, 10, 20,30,50,100]
      });
   
      // Apply the search
      table.columns().every( function () {
          var that = this;
   
          $( 'input', this.footer() ).on( 'keyup change', function () {
              if ( that.search() !== this.value ) {
                  that
                      .search( this.value )
                      .draw();
              }
          } );
      } );
  
    });
</script>