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

<section class="">
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <p class="card-title inline valign-wrapper">
            <img src="{{ $course->image }}" alt="" width="40" height="40" class="circle">
            <span>{!! $course->short_code !!} | {!! $course->name !!}</span> @if ($course->enabled)
            <span class="green-text"><i class="material-icons left">check_circle</i>Enabled</span> @else
            <span class="red-text"><i class="material-icons left">cancel</i>Disabled</span> @endif
          </p>
          <hr>
          <div class="row">
            <div class="col s12">
              <div class="row">
                <div class="col s12 m4">
                  <p class="valign-wrapper">
                    <i class="material-icons left">keyboard_arrow_down</i> Basic Level Index: {{ isset($course->basic_level_index)
                    ? $course->basic_level_index : "Not Set" }}
                  </p>
                </div>
                <div class="col s12 m4">
                  <p class="valign-wrapper">
                    <i class="material-icons left">keyboard_arrow_up</i> Advanced Level Index: {{ isset($course->advanced_level_index)
                    ? $course->advanced_level_index : "Not Set" }}
                  </p>
                </div>
                {{-- <div class="col s12 m4">
                  <p class="valign-wrapper">
                    <i class="material-icons left">stars</i> Exam Level ID: {{ isset($course->exam_level_id) ? $course->exam_level_id
                    : "Level Not Mapped" }}
                  </p>
                </div> --}}

              </div>


              <div class="row">
                <div class="col s12 m12">
                  <small>Description</small>
                  <p>
                    {{ $course->description }}
                  </p>
                </div>

              </div>

              <div class="row">
                <div class="col s12">
                  <table class="highlight">
                    <thead>
                      <tr>
                        <th>Image</th>
                        <th>Level Name</th>
                        <th>Order</th>
                        
                        <th>Points Awarded on Completion</th>
                        
                      </tr>
                    </thead>

                    <tbody>
                      @foreach ($levels as $level)
                      <tr>
                        <td><img src="{{ $level->image }}" alt="" width="40" height="40" class="circle"></td>
                        <td><a href="{{  route('level.show', $level->id) }}">{{ $level->name }}</a></td>
                        <td>{{ $level->order }}</td>
                        <td>{{ $level->points_awarded_on_completion }}</td>
                        
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>

              <a class="btn-floating btn waves-effect waves-light teal right tooltipped" data-position="left" data-tooltip="Edit">
                <i class="material-icons">edit</i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection