<%- include('block_inicio') %>
<%- include('barra_menu') %>
<div class="container">
    
  <!--Mobile first-->
  <div class="d-block d-sm-none">
    <br>
    <div class="row d-flex justify-content-center" >
      <h4>CARGAR NOTAS</h4>
    </div>
    <br>

  </div>



  <!--Resto dispositivos-->
  <div class="row d-none d-sm-block">
      <br><br>
    <div class="row d-flex justify-content-center" >
      <h2>CARGAR/EDITAR NOTAS</h2>
    </div>
    <br><br><br>

    <div class="d-flex justify-content-center">
      <button id="1-a" class="btn btn-primary ml-2">1A</button>
      <button id="1-b" class="btn btn-primary ml-2">1B</button>  
      <button id="2-a" class="btn btn-primary  ml-2">2A</button>
      <button id="2-b" class="btn btn-primary  ml-2">2B</button> 
      <button id="3-h" class="btn btn-primary  ml-2">3H</button>
      <button id="3-cn" class="btn btn-primary  ml-2">3CN</button> 
      <button id="4-h" class="btn btn-primary  ml-2">4H</button>
      <button id="4-cn" class="btn btn-primary  ml-2">4CN</button> 
      <button id="5-h" class="btn btn-primary  ml-2">5H</button>
      <button id="5-cn" class="btn btn-primary  ml-2">5CN</button>   
</div>
   <br><br>

    <div class="d-flex justify-content-center">
      
      <div class="mt-2" style="width: 100%;">
        <table id="example" class="table table-bordered" style="text-align: center; 
        background: rgb(209, 207, 207);">
          <thead>
              <tr>
                  <th>ID</th>
                  <th>APELLIDO</th>
                  <th>NOMBRE</th>
                  <th>CURSO</th>
                  <th>MATERIA</th>
                  <th>NOTA</th>
                  <th>ACCIÓN</th>
              </tr>
          </thead>
          <tbody id="body-table">
          </tbody>
      </table>
  
      </div>
    </div>


</div>

<br><br>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">NOTA CARGADA</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="content_modal">
        
      </div>
      <div class="modal-footer">
        <button id="btnGuardar" type="button" class="btn btn-primary">Guardar</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<%- include('block_end') %>


<style>
img{cursor:pointer;}

.cursor{
    cursor: pointer;
  }
.fa-search:hover{
    color: rgb(75, 129, 211);
}



</style>

<script>
var id;
var materia;
let txt = document.getElementById('txtinput')
let btnGuardar = document.getElementById('btnGuardar')
let body_table = document.getElementById('body-table')
let _1A = document.getElementById('1-a')
let _1B = document.getElementById('1-b')
let _2A = document.getElementById('2-a')
let _2B = document.getElementById('2-b')
let _3H = document.getElementById('3-h')
let _3CN = document.getElementById('3-cn')
let _4H = document.getElementById('4-h')
let _4CN = document.getElementById('4-cn')
let _5H = document.getElementById('5-h')
let _5CN = document.getElementById('5-cn')

//Muestra la tabla
/*$('#example').DataTable({
    ajax: "/getAlumnos3",
    language: {url: "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"},
    order: [[ 1, "asc" ]],
    columns: [
            { "data": "_id" },
            { "data": "last_name" },
            { "data": "name" },
            { "data": "curso" },
            { "data": "materia" },
            { "data": "nota" },
            {
            "defaultContent": "<div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div>"
            }
            ],
})//end tabla*/


 
 //Selecciona elementos en tabla Ver
$('#example tbody').on( 'click', '.ver', function () {
  $('#content_modal').html('')
    id = $(this).parents("tr").find("td").eq(0).text()
    //materia = $(this).parents("tr").find("td").eq(5).text()
   
    $.ajax({
    type:'POST',
    url:'/getNota',
    data:{id}
    }).done(async function(res){
      $('#content_modal').html('')

      $('#content_modal').append(`<div>
         <h5>Nota:</h5>
         <input id="txtinput" type="text" class="form-control" value=${res}>
       </div>`)
      
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      window.location.reload()
    })

    $('#myModal').modal('show')
    
})


btnGuardar.onclick = () => {
  let nota = $('#txtinput').val()
  
$.ajax({
    type:'POST',
    url:'/addNota',
    data:{id,nota}
    }).done(async function(res){
      
      toastr.success('La Operacion Fue Exitosa', '¡OK!', { timeOut: 3000 })
      await sleep(3000)
      window.location.reload()
    }).fail(async function(err){
      if(err.status == 401){
        toastr.error('El Alumno NO Posee Concepto Cargado para esta Materia...', 'ERROR', { timeOut: 3000 })
        await sleep(3000)
        window.location.reload()
      }
      
    })
}//end



_1A.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/1A',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_1B.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/1B',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_2A.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/2A',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_2B.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/2B',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_3H.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/3H',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_3CN.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/3CN',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_4H.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/4H',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_4CN.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/4CN',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_5H.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/5H',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

_5CN.onclick = () => {
  $.ajax({
    type:'GET',
    url:'/getAlumnos3/5CN',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="">${e._id}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${e.materia}</td>
              <td>${e.nota}</td>
              <td><div class='d-flex justify-content-center'> <button class = 'btn btn-primary ver'>Ver</button> </div></td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end




function Valoracion(val){
  if(val === true){
    return 'Positiva'
  }
  if(val === false){
    return 'Positiva'
  }
  return 'sin datos'
}





  
</script>