@extends('layouts.app')

@section('content')

@include('level.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="{{ $level->image }}" alt="" width="40" height="40" class="circle">
            <span>{!! $level->name !!}</span>
          </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">group_work</i>
                    Group: {{ $level->group }}
                  </p>
                </div>
                <div class="col s12 m4">
                  <p class="valign-wrapper">
                    <i class="material-icons left">reorder</i>
                    Order: {{ $level->order }}
                  </p>
                </div>
                
              </div>

              <div class="row">
                
                <div class="col s12 m3">
                  <p class="valign-wrapper">
                    <i class="material-icons left">lock_open</i>
                    Points awarded on completion: {{ $level->points_awarded_on_completion }}
                  </p>
                </div>
               
              </div>

              <div class="row">
                
                <div class="col s12 m3">
                  <p class="valign-wrapper">
                    @if ($level->is_exam)
                      <i class="material-icons left green-text">check_circle</i>
                    @else
                      <i class="material-icons left red-text">cancel</i>
                    @endif
                    Is Exam?
                  </p>
                </div>
                @isset($level->courseId)
                <div class="col s12 m3">
                  <p  class="valign-wrapper">
                    <i class="material-icons left">book</i>
                    Course:&nbsp;
                    <a href="{{ route('course.show', $level->courseId) }}">
                      {{ $level->course->name }}
                    </a>
                  </p>
                </div>
                @endisset
              </div>

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

              <div class="row">
                <div class="col s6">
                  <small>Level Group</small>
                  <p>
                    {{ $levelGroupName }}
                  </p>
                </div>
                <div class="col s6">
                  <small>Games</small>
                  <ul class="collection">
                    @foreach($games as $game)
                        <li class="collection-item">{{ $game }}</li>
                    @endforeach
                  </ul>
                </div>
              </div>

              <div class="row">
                <div class="col s12">
                  <table class="highlight">
                    <thead>
                      <tr>
                        <th>Phrase Local</th>
                        <th>Phrase English </th>
                        <th>Action</th>
                      </tr>
                    </thead>

                    <tbody>
                      @foreach ($phrases as $phrase)
                      <tr>
                        
                        <td>{{ $phrase->phrase_local }}</td>
                        <td>{{ $phrase->phrase_english }}</td>

                        <td>
                          <a href="{{ route('phrase.show', $phrase->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>
                        </td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>

              <a href="{{ route('level.edit', $level->id) }}" 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