@extends('adminlte::page')

@section('title', "Agregar Asistencias"." | ".$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('plugins.Date-picker', 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.assistances',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">

                    <!-- CUADRO DE NOTAS -->
                    <div class="container-fluid">
                      <div class="col-lg-12 text-center">
                        <div class="row align-items-center">
                          <!-- NOTAS -->
                          <div class="col-sm-12" style="background-color:lavender;">
                            <div class="well">
                              <div class="row">
                                <div class="col-md-12 d-flex" >
                                  <div class="well">
                                    <b> SOLO USAR ESTAS ABREVIACIONES ->&emsp;&emsp;&emsp;P: Present &emsp;&emsp; A: Absent &emsp;&emsp; HC: Half Class &emsp;&emsp; JA: Justified Absence </b>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>                      
                      </div>
                    </div>
                    <!-- /.CUADRO DE NOTAS 
                    
                  <div class="input-group date" id="reservationdate_start" data-target-input="nearest">
                              <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate_start" id="data_start" name="data_start" value="{{old('data_start')}}" placeholder="Fecha de Inicio" required>
                              <div class="input-group-append" data-target="#reservationdate_start" data-toggle="datetimepicker">
                                  <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                              </div>
                          </div>
                  
                  
                  
                  -->
                  <table id="example2" class="table table-bordered table-striped">
                    <thead>
                      <tr style="display:none;">
                        <th style="display:none;">{{$teacher->id}}-{{$course->id}}</th>
                        <th>Estudiante</th>
                        <th id="valueInput"></th>
                        <th style="display:none;">Perfil</th>
                        {{-- <th>Perfil</th> --}}
                      </tr>
                      <tr>
                        <th style="display:none;">id</th>
                        <th>Estudiante</th>
                        <th>
                          <div class="input-group date" id="reservationdate_start" data-target-input="nearest">
                            <input type="text" class="form-control datepicker" data-target="#reservationdate_start" id="data_start" value="{{Carbon\Carbon::now()}}" name="data_start" placeholder="Fecha de Asistencia" required>
                            <div class="input-group-append" data-target="#reservationdate_start" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                          </div>
                          
                        </th>
                        <th style="display:none;">Perfil>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>
                          <td contenteditable="true">
                          </td>
                          <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 () {
          $('#reservationdate_start').datetimepicker({
              viewMode: 'years',
              format: 'YYYY-MM-DD'
          });
      });
        $(function () {
          $("#example2").DataTable({
            "autoWidth": false,
            "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 (x===32 || x===13 /*x != 65 && x != 80 && x != 72 && x != 67 && x != 74*/) e.preventDefault();
        });
        function tableToJson(tjTable) {
          inputValue = document.getElementById("data_start").value; 
          document.getElementById("valueInput").innerHTML = inputValue;
          
          
          day= $("#data_start").val();
          if(day !=""){
            console.log("Entró: "+inputValue);
          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);
            }
          }
          $.post('getAssistance', {"_token": "{{ csrf_token() }}",tjData: tjData}, function (levels) {
            alert('La asistencia se ha registrado correctamente.'); // or whatever
            window.history.back();
           /*  $('div.flash-message').html(levels); */
          }).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);

              }

              });
          }else{

            alert("Por favor elija una fecha de asistencia");

          }

          
            }
</script>
@stop