@extends('cultural.plantillaDocente')
@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
@endsection
@section('breadcrumb')

@endsection
@section('titulo', "Disponibilidad de mesas")
@section('contenido')
<div class="col-9">
  @if(isset($msg))
  <div class="row">
    <div class="col-12 text-center">
      <div class="alert alert-secondary">
        <p>{{$msg}}</p>
      </div>
    </div>
  </div>
  @endif
  <div class="row pt-2">
    <div class="col-sm-12">
      <form id="form1" method="POST">
        <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
        <div class="row">
          <div class="col-sm-6 col-12 mt-2">
            <label>Seleccione las fechas disponibles:</label>
            <select id="lstMesa" name="lstMesa" class="form-control" onchange="traerAlumnos()" required>
              <option value="" disabled selected>Seleccionar</option>

              @for ($i = 0; $i < count($array_mesa); $i++)  @if($vacante> 0 )
                <option value="{{ $array_mesa[$i]->idmesaexamen }}">{{ $array_mesa[$i]->fecha }} - {{ $array_mesa[$i]->hora_inicio }} hs - vacantes: {{ $vacante }}</option>
                @endif
                @endfor
            </select>
          </div>
        </div>
    </div>
    </form>
    <div class="col-12 mt-4">
      <div class="card mb-3" id="card">
        <div class="card-header">
          <div class="row">
            <div class="col-6 text-left">
              <h6 class="font-weight-bold" style="color:#FF0000;">Alumnos asignados</h6>
            </div>
            <div class="col-6 text-right">
              <button type="button" class="btn btn-secondary fa fa-plus-circle" onclick="fAbrirModalAlumno()"></button>
            </div>
          </div>
        </div>
        <div class="panel-body p-2">
          <table id="grilla" class="display" style="width:100%">
            <thead>
              <tr>
                <th> </th>
                <th>Nombre y Apellido</th>
                <th>DNI</th>
                <th>Estado del examen</th>

              </tr>
            </thead>
          </table>
        </div>
      </div>

    </div>
  </div>

</div>
<div class="modal fade" id="mdlEliminar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Eliminar registro?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <input type="hidden" id="id" name="id" class="form-control" value="" required>
      <div class="modal-body">¿Deseas eliminar el registro actual?</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-primary" onclick="eliminarAlumno();">Sí</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalAlumno" tabindex="-1" role="dialog" aria-labelledby="modalAlumnoLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form action="/docente/gestion-fechas/agregar-alumno" id="form2" method="GET">
        <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>

        <div class="modal-header">
          <h5 class="modal-title" id="modalAlumnoLabel">Alumnos</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-12 form-group">
             
                <div class="form-check mb-2 pl-0">
                <div id="todos">
                  <input class="form-check-input check-all" type="checkbox" value="" id="defaultCheck1">
                  <label class="form-check-label" for="defaultCheck1">
                    Todos
                  </label>
                </div>
              </div>

              <div id="alumnosMesa">

              </div>

            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onchange="limpiar();" data-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-primary" onclick="agregarAlumno();">Agregar</button>

          </div>
      </form>
    </div>
  </div>
</div>

<script>
  function cargarGrilla() {
    $('#grilla').dataTable().fnClearTable();
    $('#grilla').dataTable().fnDestroy();
    var dataTable = $('#grilla').DataTable({
      "processing": true,
      "serverSide": false,
      "bFilter": false,
      "bInfo": true,
      "bSearchable": false,
      "paging": false,
      "pageLength": 25,
      "order": [
        [0, "asc"]
      ],
      "ajax": "{{ route('docenteFechas.cargarGrillaMesa') }}?idMesa=" + $('#lstMesa').val()
    });

  }


  function traerAlumnos() {
    idMesa = $('#lstMesa option:selected').val();
    $.ajax({
      type: "GET",
      url: "/fecha/traerAlumnos",
      data: {
        idMesa: idMesa
      },
      async: true,
      dataType: "json",
      success: function(data) {
        $(".form-check-input").remove();
        $(".form-check-label").remove();
        $("<div>", {
          class: "form-check"
        }).append($("<input>", {
          id: "defaultCheck1",
          class: "form-check-input check-all",
          type: "checkbox",
          value: "",
          onclick: "fCheckAll();"
        })).append($("<label>", {
          class: "form-check-label",
          text: "Todos",
          for: "defaultCheck1"
        })).appendTo("#todos");

        for (i = 0; i < data.length; i++) {
          $("<div>", {
            class: "form-check"
          }).append($("<input>", {
            id: "chk_" + data[i].valor,
            name: "chk_" + data[i].valor,
            class: "form-check-input check",
            type: "checkbox",
            style: "display:inline",
            value: data[i].valor
          })).append($("<label>", {
            style: "color: black !important;",
            class: "form-check-label",
            text: data[i].texto
          })).appendTo("#alumnosMesa");
        }


        cargarGrilla();

      }
    });

  }

  function fAbrirModalAlumno() {
    $('#modalAlumno').modal('toggle');
  }

  function agregarAlumno() {
    idMesa = $('#lstMesa option:selected').val();
    formulario = $("#form2").serializeArray();
    $.ajax({
      type: "GET",
      dataType: 'json',
      url: "/docente/gestion-fechas/agregar-alumno",
      data: {
        formulario: formulario,
        idMesa: idMesa,
        _token: "{{ csrf_token() }}"
      },
    }).done(function(data) {

      cargarGrilla();
      traerAlumnos();
      $('#modalAlumno').modal('toggle');
    });

  }

  function fAbrirModalEliminar(id) {
    $('#mdlEliminar').modal('toggle');
    $('#id').val(id);
  }

  function eliminarAlumno() {
    idExamenAlumno = $('#id').val();
    idMesa = $('#lstMesa option:selected').val();

    $.ajax({
      type: "GET",
      url: "{{ asset('/docente/gestion-fechas/eliminar-alumno') }}",
      data: {
        idMesa: idMesa,
        idExamenAlumno: idExamenAlumno
      },
      async: true,
      dataType: "json",
      success: function(data) {

        $('#grilla').DataTable().ajax.reload();
        $('#mdlEliminar').modal('toggle');

      }
    });
  }

  function limpiar() {
    $("#lstAlumno").val(0);
    $('#check').val();
    $('#msg').html('');
  }

  function todos() {
    $('#check').val(2);
  }

  cargarGrilla();


  var checked = false;

   function fCheckAll(){

    if (checked == false) {
      $('.check').prop('checked', true);
      checked = true;
    } else {
      $('.check').prop('checked', false);
      checked = false;
    }

  }
</script>

@endsection