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

<section class="">
  {{--
  <div class="row">

    <div class="input-field col s12 m6">
      {!! Form::select('courseId', $courses, null, ['id' => 'courseId']); !!} {!! Form::label('courseId', 'Course') !!}
    </div>
    <div class="input-field col s12 m6">
      {!! Form::select('levelGroup',[], null, ['id' => 'levelGroup']); !!} {!! Form::label('levelGroup', 'Level Groups') !!}
    </div>

  </div> --}}
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <span class="card-title">Levels</span>
          <hr>
          <div class="row">
            <div class="col s12">
              <table class="js-exportable">
                <thead>
                  <tr>
                    <th>Course</th>
                    <th>Level Group</th>
                    <th>Image</th>
                    <th>Story</th>
                    <th>Level Name</th>

                    <th>Order</th>
                    <th>Points Awarded</th>

                    <th>Actions</th>
                  </tr>
                </thead>
            

                <tbody>
                  @foreach ($levels as $level)
                  <tr>
                    <td>
                      @isset($level->course)
                      <a href="{{ route('course.show', $level->course->id) }}">{{ $level->course->name }}</a> @endisset
                    </td>
                    <td> @isset($level->levelGroup)
                      <a href="{{ route('levelGroup.show', $level->levelGroup->id) }}">{{ $level->levelGroup->name }}</a>                      @endisset
                    </td>
                    <td><img src="{{ $level->image }}" alt="" width="40" height="40" class="circle"></td>
                    <td> @isset($level->stories)
                      <a href="{{ route('story.show', $level->stories->id) }}">{{ isset($level->stories->name) ? $level->stories->name : "Not Set"  }}</a>                      @endisset
                    </td>
                    <td>{{ $level->name }}</td>

                    <td>{{ $level->order }}</td>
                    <td>{{ $level->points_awarded_on_completion }}</td>

                    <td>
                      <span class="">
                        <a href="{{ route('level.show', $level->id) }}" class="waves-effect waves-green btn-flat tooltipped"
                          data-position="bottom" data-tooltip="view">
                          <i class="material-icons green-text">remove_red_eye</i>
                        </a>
                        <a href="{{ route('level.edit', $level->id) }}" class="waves-effect waves-teal btn-flat tooltipped"
                          data-position="bottom" data-tooltip="edit">
                          <i class="material-icons cyan-text">edit</i>
                        </a>
                        {{-- {{ Form::open(['route' => ['level.destroy', $level->id], 'class' => 'inline-block','onclick' => "return confirm('Are you sure ? You will have to re-link the phrases and the respective story attached to this level')"]) }}
                        {{ Form::hidden('_method', 'DELETE') }}
                        <button class="waves-effect waves-red btn-flat tooltipped" data-position="bottom" data-tooltip="delete">
                          <i class="material-icons red-text">delete_forever</i>
                        </button>
                        {{ Form::close() }} --}}
                      </span>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
                <tfoot>
                    <tr>
                      <th>Course</th>
                      <th>Level Group</th>
                      <th>Image</th>
                      <th>Story</th>
                      <th>Level Name</th>
  
                      <th>Order</th>
                      <th>Points Awarded</th>
  
                      <th>Actions</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:5,
        lengthMenu: [5, 10, 20]
      });
   
      // 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>