@extends('adminlte::page')

@section('title', "Editar Notas"." | ".$teacher->name ." | ".App\Models\Period::find($course->period_id)->name
                                      .' - '.App\Models\Level::find($course->level_id)->name
                                      .' - Ciclo '.$course->cycle
                                      .' - Salón '.$course->classroom
)
@section('plugins.Datatables', true)
@section('plugins.Select2', true)

@section('content')
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          @include('admin.teachers.profile')
          <!-- /.col -->
          <div class="{{Auth::user()->hasRole('admin') ? 'col-md-9' : 'col-md-12'}}">
            <div class="form-group col-md-12">
              <section class="content">
                <div class="container-fluid">
                  <div class="row">
                    <div class="col-lg-12 col-12">
                      <!-- small box -->
                      
                      <div class="small-box bg-info">
                        <div class="inner">
                          <h3>{{$course->name}}</h3>
                          <p>
                            {{App\Models\Language::find($course->language_id)->name}}
                            {{App\Models\Level::find($course->level_id)->name}} -
                            {{App\Models\Period::find($course->period_id)->name}} - 
                            Ciclo {{$course->cycle}} -
                            Salón {{$course->classroom}}  
                          </p>
                          <div class="row">
                            <div class="col-2">
                              <p>Horarios:</p>
                            </div>
                            <div class="col-10">
                              <ul>
                                  @foreach ($course->timetables as $timetable)
                                  <li>
                                      {{$timetable->day}} - {{$timetable->time_start}} : {{$timetable->time_end}}
                                  </li>
                                  @endforeach
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="icon">
                          <i class="ion ion-ios-book"></i>
                        </div>
                        <a href="{{route('teachers.notes',array($teacher,$course))}}" class="small-box-footer"><i class="fas fa-arrow-circle-left"></i> Regresar </a>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <div class="flash-message"></div>
            <div class="card">
              
              <div class="card-body">
                <div class="row">
                  <button type="button" onclick="tableToJson(document.querySelector('table'))" class="btn btn-block btn-primary btn-sm">Guardar Cambios</button>
                </div>
                <br>
                <div class="tab-content">
                  
                  <table id="example2" class="table table-bordered table-striped">
                    <thead>
                      <tr style="display:none;">
                        <th>{{$teacher->id}}-{{$course->id}}</th>
                        <th>{{$teacher}}</th>
                        @for ($i = 0; $i < count($notes); $i++)
                        <th>{{$notes[$i]->id}}</th>
                        @endfor
                        <th>Perfil</th>
                        {{-- <th>Perfil</th> --}}
                      </tr>
                      <tr>
                        <th style="display:none;">id1</th>
                        <th>Estudiante</th>
                        @for ($i = 0; $i < count($notes); $i++)
                        <th>{{$notes[$i]->area}} - {{$notes[$i]->name}}</th>
                        @endfor
                        <th style="display:none;">Perfil</th>
                      </tr>
                    </thead>
                    <tbody>
                    @foreach ($groupedAlumnos as $key => $alumnos)
                        <tr>
                          <td style="display:none;">{{$listaAlumnos[$key][0]["id"]}}</td>
                          <td>{{$listaAlumnos[$key][0]["name"]}}</td>
                              @for ($i = 0; $i < count($notes); $i++)
                                <td contenteditable="true" style="text-align:center">
                                {{
                                    App\Models\Notevalue::
                                        where("note_id", "=", $notes[$i]->id)
                                        ->where("user_id", "=", $listaAlumnos[$key][0]["id"])
                                        ->get()[0]->value
                                }}
                          </td>
                              @endfor
                               <td style="display:none;"><a href="{{route('students.course',array($listaAlumnos[$key][0]["slug"],$course))}}" class="small-box-footer">Ver <i class="fas fa-arrow-circle-right"></i></a></td>
                        </tr>
                        @endforeach
                        
                    </tbody>
                  </table>
                      
                </div>
                <!-- /.tab-content -->
              </div><!-- /.card-body -->
            </div>
            <!-- /.card -->
          </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">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  {{-- <style>
    .DTFC_LeftBodyLiner{overflow-y:unset !important}
    .DTFC_RightBodyLiner{overflow-y:unset !important}
  </style> --}}
@stop

@section('js')
    <script>
        $(function () {
          $("#example2").DataTable({
            "paging":   false,
            "ordering": true,
            "info":     false,
              language: {
                  "decimal": "",
                  "emptyTable": "Aún no se cargaron datos",
                  "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                  "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                  "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                  "infoPostFix": "",
                  "thousands": ",",
                  "lengthMenu": "Mostrar _MENU_ entradas",
                  "loadingRecords": "Cargando...",
                  "processing": "Procesando...",
                  "search": "Buscar:",
                  "zeroRecords": "Sin resultados encontrados",
                  "paginate": {
                      "first": "Primero",
                      "last": "Ultimo",
                      "next": "Siguiente",
                      "previous": "Anterior"
                  }
              },
          });  
        });
        $('[contenteditable="true"]').keypress(function(e) {
            var x = event.charCode || event.keyCode;
            if (isNaN(String.fromCharCode(e.which)) && x!=46 || x===32 || x===13 || (x===46 && event.currentTarget.innerText.includes('.'))) e.preventDefault();
        });
        function tableToJson(tjTable) {
          var tjData = [];
          tjnRow = tjTable.rows.length;
          for (var i = 0; i < tjnRow; i++) {
            if (i != 1) {
              tjnCol = tjTable.rows[i].cells.length;
            var tjRow = [];
            for (var j = 0; j < tjnCol; j++) {
              if (j != 1 && j < tjnCol-1) {
                tjRow.push(tjTable.rows[i].cells[j].innerText);
              }
            }
            tjData.push(tjRow);
            }
          }
           //console.log(tjData);
           //debugger; // execution will pause at this line
          $.post('getNotes', {"_token": "{{ csrf_token() }}", tjData: tjData}, function (levels) {
            alert('Las notas se han actualizado correctamente'); // or whatever
            window.history.back();
            
          }).fail( function( jqXHR, textStatus, errorThrown ) {

            if (jqXHR.status === 0) {

              alert('Not connect: Verify Network.');

            } else if (jqXHR.status == 404) {

              alert('Requested page not found [404]');

            } else if (jqXHR.status == 500) {

              alert('Internal Server Error [500].');

            } else if (textStatus === 'parsererror') {

              alert('Requested JSON parse failed.');

            } else if (textStatus === 'timeout') {

              alert('Time out error.');

            } else if (textStatus === 'abort') {

              alert('Ajax request aborted.');

            } else {

              alert('Uncaught Error: ' + jqXHR.responseText);

            }

          });
        }
    </script>
@stop