@extends('adminlte::page')

@section('title', 'NIVEL')

@section('content')
    @include('admin.parts.info')
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-3">
            <!-- Profile Image -->
            <div class="card card-primary card-outline">
              <div class="card-body box-profile">
                <div class="text-center">
                  <img class="img-fluid img-circle"
                       src="https://ui-avatars.com/api/?name={{$level->name}}&background=0D8ABC&color=fff"
                       alt="User profile picture" width="80">
                </div>

                <h3 class="profile-username text-center">{{$level->language->name}} <br> <b>{{$level->name}}</b></h3>
                <hr>

                <a href="{{route('levels.edit',$level)}}" class="btn btn-primary btn-block">Editar</a><br>
                {{-- <form action="{{ route('levels.destroy',$level)}}" method="post" style="display: inline">
                  @csrf @method('delete')
                  <button class="btn btn-danger btn-block" onclick="return confirm('¿Estás seguro de eliminar este Nivel?')">Eliminar</i></button>  
                </form> --}}
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <!-- About Me Box -->
            <div class="card card-primary">
                <div class="card-header">
                <h3 class="card-title">Detalles</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                <strong><i class="fas fa-calendar-alt mr-1"></i> Fecha de Creación</strong>

                <p class="text-muted">
                    {{$level->created_at}}
                </p>

                <hr>

                <strong><i class="fas fa-calendar-alt mr-1"></i> Última Modificación</strong>

                <p class="text-muted">
                    {{$level->updated_at}}
                </p>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
          <div class="col-md-9">
            <div class="col-md-12">
              <h3>Cursos Creados</h3>
              <a href="{{route('languages.show',$level->language)}}" class="small-box-footer"><i class="fas fa-arrow-circle-left"></i> Regresar al Idioma {{$level->language->name}}</a>
            </div>
            <br>
            <div class="col-md-12">
              @php($groupCourses = $level->courses->sortByDesc('period_id')->groupBy('period_id'))
              @foreach($groupCourses as $posicion=>$curso)
              @php($coursePivot = $groupCourses[$posicion])
                <div class="card card-dark">
                  <div class="card-header" data-card-widget="collapse">
                      <h3 class="card-title">PERIODO {{App\Models\Period::find($coursePivot[0]->period_id)->name}}</h3>
                      <div class="card-tools">
                          <!-- Collapse Button -->
                          <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                      </div>
                  <!-- /.card-tools -->
                  </div>
                      <!-- /.card-header -->
                  <div class="card-body">
                      <div class="row">
                          <div class="col-12 col-sm-12">
                            <div class="card card-dark card-outline card-outline-tabs">
                              <section class="content">
                                <div class="container-fluid">
                                  <div class="row">
                                  <br><br>
                                    @foreach($coursePivot as $j=>$cursoPivot)
                                      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                        <!-- small box -->
                                        <div class="small-box bg-info">
                                          <div class="inner">
                                            <h5>
                                              {{App\Models\Language::find($coursePivot[$j]->language_id)->name}} 
                                              - Ciclo {{$coursePivot[$j]->cycle}} 
                                              - Salón {{$coursePivot[$j]->classroom}}
                                            </h5>
                                            <p>
                                              Nivel {{App\Models\Level::find($coursePivot[$j]->level_id)->name}}<br>
                                              @if (App\Models\Period::find($coursePivot[$j]->period_id)->state == 1)
                                                <span class="badge badge-success">En proceso</span>
                                              @else
                                                <span class="badge badge-warning">Finalizado</span>
                                              @endif 
                                            </p>
                                          </div>
                                          <div class="icon">
                                            <i class="ion ion-ios-book"></i>
                                          </div>
                                          <a href="{{route('courses.show',$coursePivot[$j])}}" class="small-box-footer">Ir al curso <i class="fas fa-arrow-circle-right"></i></a>
                                        </div>
                                      </div>
                                    @endforeach
                                  </div>
                                </div>
                              </section>
                              <!-- /.card -->
                            </div>
                          </div>
                      </div>       
                  </div>
                  <!-- /.card-body -->
                </div>
              @endforeach
              <!-- /.nav-tabs-custom -->
            </div>
						
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>

@stop
@section('css')
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
@stop