@extends('adminlte::page')

@section('title', $student->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')
    @include('admin.parts.info')
    <p id="nameAlumno" hidden>{{$student->name}}</p>
    <p id="nameLenguaje" hidden>{{App\Models\Language::find($course->language_id)->name}}</p>
    <p id="nameNivel" hidden>{{App\Models\Level::find($course->level_id)->name}}</p>
    <p id="namePeriodo" hidden>{{App\Models\Period::find($course->period_id)->name}}</p>
    <p id="nameCiclo" hidden>{{$course->cycle}}</p>
    <p id="nameSalon" hidden>{{$course->classroom}}</p>
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          @include('admin.students.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>
                              @if (Auth::user()->hasRole('admin'))
                              <a style="color: white;" href="{{route('courses.show',$course->slug)}}" target="_blank" rel="noopener noreferrer">
                                {{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}}
                              </a>
                              @else
                                {{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}}  
                              @endif
                              
                              @if ($student->courses()->wherePivot('course_id', $course->id)->select("*","course_user.state as stateCU")->get()[0]->stateCU == 1)
                                <span class="badge badge-success">Matriculado</span>
                              @else
                              <span class="badge badge-warning">Retirado</span>
                              @endif
                              @if (App\Models\Period::find($course->period_id)->state == 1)
                                <span class="badge badge-success">Curso en proceso</span>
                              @else
                              <span class="badge badge-warning">Curso Finalizado</span>
                              @endif
                            </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 class="col-2">
                                <p>Docente:</p>
                              </div>
                              <div class="col-10">
                                <ul>
                                  
                                  @foreach ($docentes as $docente)
                                  <li>
                                    <a target="_blank" style="color: white;" 
                                      @can('viewAny', new App\Models\User)
                                      href="{{route('teachers.show',$docente->slugu)}}"
                                      @endcan >
                                      {{$docente->name}}&nbsp;
                                    </a>
                                  </li>
                                  @endforeach
                                </ul>
                              </div>
                              
                            </div>
                          </div>
                          <div class="icon">
                            <i class="ion ion-ios-book"></i>
                          </div>
                          <a href="{{route('students.show',$student)}}" class="small-box-footer"><i class="fas fa-arrow-circle-left"></i> Regresar a ver todos los cursos </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            <div class="card">
              <div class="card-header p-2">
                <ul class="nav nav-pills">
                  <li class="nav-item"><a class="nav-link active" href="#Notas" data-toggle="tab">Notas</a></li>
                  <li class="nav-item"><a class="nav-link" href="#Asistencia" data-toggle="tab">Asistencia</a></li>
                </ul>
              </div><!-- /.card-header -->
              <div class="card-body">
                <div class="tab-content">
                  <div class="active tab-pane" id="Notas">
                    <!-- CUADRO DE NOTAS -->
                    <div id="capture" class="container-fluid">
                      <div class="col-lg-12 text-center">
                        <div class="row">
                        <div class="col-sm-2">
                              
                          </div>
                          <div class="col-sm-5">
                              
                          </div>
                          <div class="col-sm-2">
                              <div class="well">
                                <p>AVARAGE</p>
                              </div>
                          </div>
                          <div class="col-sm-3">
                              <div class="well">
                                <p>FINAL SCORE (/100)</p>
                              </div>
                          </div>
                        </div>
                        <div class="row align-items-center">
                          <!-- NOTAS -->
                          <div class="col-sm-9" style="background-color:lightcyan;">
                            <div class="well">
                              <div class="row align-items-center">
                                                              @foreach ($areas as $area)
                                                                  <!-- NOTAS INDIVIDUALES -->
                                  <div class="col-sm-3" >
                                    <div class="well">
                                      <p>{{$area[0]->area}}</p>
                                    </div>
                                  </div>
                                  <div class="col-sm-6" style="background-color:lavender;">
                                    <div class="well">
                                                                        @for ($i = 0; $i < count($area); $i++)
                                                                          <div class="row">
                                        <div class="col-md-6 d-flex" >
                                          <div class="well">
                                            <p>{{$area[$i]->name}}</p>
                                          </div>
                                        </div>
                                        <div class="col-md-6">
                                          <div class="well">
                                            <p>{{$area[$i]->value}}</p>
                                          </div>
                                        </div>
                                      </div>
                                    @endfor
                                                                                                            </div>
                                  </div>
                                  <!-- NOTAS PROMEDIOS -->
                                  <div class="col-sm-3" >
                                    <div class="well">
                                      <p>{{$promedioNota}}</p>
                                    </div>
                                  </div>
                                  <div class="col-sm-12" style="background-color:#EEEEEE;"><BR></div>
                                @endforeach
                              </div>
                            </div>
                          </div>
                          <!-- PROMEDIO FINAL -->
                          <div class="col-sm-3" style="background-color:#EEEEEE;">
                            <div class="well">
                              <p>{{round(array_sum($TOTAL)/count($TOTAL))}}</p>
                            </div>
                          </div>
                        </div>                      
                      </div>
                    </div>

                  </div>
                  <!-- /.tab-pane -->
                  <div class="tab-pane" id="Asistencia">
                    <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>Present: P &emsp;&emsp; Absent: A &emsp;&emsp; Half Class: HC &emsp;&emsp; Justified Absence: JA </b>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <br>
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Fecha</th>
                                <th style="text-align:center">Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($asistencias as $nota)
                              @if ($nota->day != null && $nota->estado != null)
                              <tr>
                                <td>{{Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $nota->day)->format('d-M-Y') }}</td>
                                <td style="text-align:center">{{$nota->estado}}</td>
                              </tr>
                              @endif
                            @endforeach
                            
                        </tbody>

                    </table>
                    
                  <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
              </div><!-- /.card-body -->
              <a class="btn btn-outline-white" target="_blank" role="button">
                        <div onclick="sendData();">Descargar Notas<i class="fas fa-download ml-2"></i></div>
                        <a id="test" href=""></a>
                    </a>
            </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">
@stop

@section('js')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>

    <script>
        function b64toBlob(b64Data, contentType, sliceSize) {
            contentType = contentType || '';
            sliceSize = sliceSize || 512;

            var byteCharacters = atob(b64Data);
            var byteArrays = [];

            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);

                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }

                var byteArray = new Uint8Array(byteNumbers);

                byteArrays.push(byteArray);
            }

            var blob = new Blob(byteArrays, { type: contentType });
            return blob;
        }
        function sendData() {
          
          
            html2canvas($('#capture')[0],{scale: 1, windowWidth: 780}).then(function (canvas) {

                // Generate the base64 representation of the canvas
                var base64image = canvas.toDataURL("image/jpg");

                // Split the base64 string in data and contentType
                var block = base64image.split(";");
                // Get the content type
                var mimeType = block[0].split(":")[1];// In this case "image/png"
                // get the real base64 content of the file
                var realData = block[1].split(",")[1];// For example:  iVBORw0KGgouqw23....

                // Convert b64 to blob and store it into a variable (with real base64 as value)
                var canvasBlob = b64toBlob(realData, mimeType);

                /** 
                // Generate file download
                url = window.URL.createObjectURL(canvasBlob);
                $('#test').attr('href', url);
                $('#test').attr('download', 'Notas.png');
                $('#test')[0].click();
                */

                nameAlumno = document.getElementById("nameAlumno");
                nameNivel = document.getElementById("nameNivel");
                namePeriodo = document.getElementById("namePeriodo");
                nameLenguaje = document.getElementById("nameLenguaje");
                nameNivel = document.getElementById("nameNivel");
                nameCiclo = document.getElementById("nameCiclo");
                nameSalon = document.getElementById("nameSalon");
                var doc = new jsPDF();
                doc.setFontSize(15);
                doc.text(70, 10, "LIBRETA DE NOTAS - CIUNIB");
                doc.setFontSize(10);
                doc.text(20, 20, "Alumno: "+nameAlumno.innerHTML);
                doc.text(20, 25, "Curso: "+nameLenguaje.innerHTML);
                doc.text(20, 30, "Periodo: "+namePeriodo.innerHTML);
                doc.text(100, 30, "Nivel: "+nameNivel.innerHTML);
                doc.text(20, 35, "Ciclo: "+nameCiclo.innerHTML);
                doc.text(100, 35, "Salón: "+nameSalon.innerHTML);
                doc.addImage(base64image, 'JPG', 15, 40);
                doc.save(nameAlumno.innerHTML+' - Libreta de Notas.pdf');
                


            });
        }
    </script>

    <script>
        $(function () {
          $("#example1").DataTable({
              
            "responsive": true, "lengthChange": false, "autoWidth": false,
            "buttons": [
                {
                    extend: 'excel', 
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdf', 
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'print',
                    exportOptions: {
                        columns: ':visible'
                    },
                    text: 'Imprimir'
                },
                {
                    extend: 'colvis',
                    text: 'Columnas' 
                },
            ],
            /* columnDefs: [ 
                {
                    targets: -1,
                    visible: 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"
                }
            },
          }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');  
          
          $("#example2").DataTable({
              
              "responsive": true, "lengthChange": false, "autoWidth": false,
              "buttons": [
                  {
                      extend: 'excel', 
                      exportOptions: {
                          columns: ':visible'
                      }
                  },
                  {
                      extend: 'pdf', 
                      exportOptions: {
                          columns: ':visible'
                      }
                  },
                  {
                      extend: 'print',
                      exportOptions: {
                          columns: ':visible'
                      },
                      text: 'Imprimir'
                  },
                  {
                      extend: 'colvis',
                      text: 'Columnas' 
                  },
              ],
              /* columnDefs: [ 
                  {
                      targets: -1,
                      visible: 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"
                  }
              },
            }).buttons().container().appendTo('#example2_wrapper .col-md-6:eq(0)');  
            
          $("input[data-bootstrap-switch]").each(function(){
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
          });   

          $('.select2').select2()
        });
    </script>
@stop