<%- include('block_inicio') %>
<%- include('barra_menu') %>
<div class="container">
    
  <!--Mobile first-->
  <div class="d-block d-sm-none">
    <br>
      <h5>Solo Visible en PC</h5>
    <br>
  </div>

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

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

    </div>
     

      
  </div>


</div>



<!-- 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">AGREGAR OBSERVACIÓN</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">
        <br>
        <form action="">
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Observación:</label>
            <textarea class="form-control" id="idTextArea" rows="3"></textarea>
          </div>
        </form>
      </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>

<!-- Modal2 -->
<div class="modal fade" id="myModal2" 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">EDITAR OBSERVACIÓN</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">
        <br>
        <form action="">
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Observación:</label>
            <textarea class="form-control" id="idTextArea2" rows="3"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="btnGuardar2" type="button" class="btn btn-primary">Guardar</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>


<br><br>
<%- include('block_end') %>


<style>
img{cursor:pointer;}

.cursor{
    cursor: pointer;
  }
.fa-plus-circle:hover{
    color: rgb(75, 129, 211);
}
.fa-trash:hover{
  color: brown;
}
</style>

<script>
let txtArea = document.getElementById('idTextArea')
let btnGuardar = document.getElementById('btnGuardar')
let txtArea2 = document.getElementById('idTextArea2')
let btnGuardar2 = document.getElementById('btnGuardar2')
let body_table = document.getElementById('body-table')
var apellido;
var nombre;
var curso;
var id = ''

//tabla
/*$('#example').DataTable({
    ajax: "/api-alumnos",
    language: {url: "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"},
    order: [[ 3, "asc" ]],
    columns: [
            { "data": "_id" },
            { "data": "last_name" },
            { "data": "name" },
            { "data": "curso" },
            {
            "defaultContent": "<div class='d-flex justify-content-center'> <i data-toggle='tooltip' data-placement='top' title='Agregar Comentario' class='cursor mr-4 fas fa-plus-circle fa-lg' aria-hidden='true'></i> <i data-toggle='tooltip' data-placement='top' title='Borrar' class='cursor fa fa-trash fa-lg' aria-hidden='true'></i> </div>"
            }],
})//end tabla*/

window.onload = () => {
  $.ajax({
    type:'GET',
    url:'/api-alumnos',
    //data:{}
    }).done(async function(res){
      body_table.innerHTML = ''
      res.forEach(e => {
              body_table.innerHTML += `<tr>
              <td id="alumno" idAlumno="${e.id_alumno}">${e.id_obs}</td>
              <td>${e.last_name}</td>
              <td>${e.name}</td>
              <td>${e.curso}</td>
              <td>${btn(e.obs)}</td>
          <tr/>`
      })
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end

 
//Crear observacion
$('#example tbody').on( 'click', '.fa-plus-circle', function () {
    
    apellido = $(this).parents("tr").find("td").eq(1).text()
    nombre = $(this).parents("tr").find("td").eq(2).text()
    curso = $(this).parents("tr").find("td").eq(3).text()
    $('#myModal').modal('show') 
})

//Borrar
$('#example tbody').on( 'click', '.fa-trash', function () {
    id = $(this).parents("tr").find("td").eq(0).text()
    if(id === ''){alert('ATENCIÓN: NO PUEDE ELIMINAR PORQUE NO EXISTE COMENTARIO PARA ESTE ALUMNO...');return false}

    let resp = confirm('ATENCIÓN: UD. VA A ELIMINAR ESTE COMENTARIO. ¿DESEA HACERLO?')
    if(resp){
      Obj.ajaxConfigMsg('DELETE','/deleteobs',{id},
    'SE ELIMINÓ CORRECTAMENTE',[{code:401, msg:'ERROR ON SERVER: DATO DUPLICADO...'},
    {code:402, msg:'ERROR ON SERVER: INFORME CONCEPTUAL DUPLICADO...'}])
    }
  })

//Editar
$('#example tbody').on( 'click', '.fa-edit', function () {
    id = $(this).parents("tr").find("td").eq(0).text()
    
    $.ajax({
    type:'POST',
    url:'/getObs',
    data:{id}
    }).done(async function(res){
      txtArea2.innerHTML = res[0].observacion
      $('#myModal2').modal('show') 
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      window.location.reload()
    })
   
})
   
btnGuardar.onclick = () => {
  if(txtArea.value === ''){alert('ATENCIÓN: DEBE COMPLETAR EL CAMPO...');return false}
  let comentario = txtArea.value

  Obj.ajaxConfigMsg('POST','/addObs',{apellido, nombre, curso, comentario},
    'SE CARGÓ CORRECTAMENTE',[{code:401, msg:'ERROR ON SERVER: DATO DUPLICADO...'},
    {code:402, msg:'ERROR ON SERVER: INFORME CONCEPTUAL DUPLICADO...'}],'#myModal')

}//end  


btnGuardar2.onclick = () => {
  if(txtArea2.value === ''){alert('ATENCIÓN: DEBE COMPLETAR EL CAMPO...');return false}
  let comentario = txtArea2.value

  Obj.ajaxConfigMsg('PUT','/editObs',{id,comentario},
    'SE EDITÓ CORRECTAMENTE',[{code:401, msg:'ERROR ON SERVER: DATO DUPLICADO...'},
    {code:402, msg:'ERROR ON SERVER: INFORME CONCEPTUAL DUPLICADO...'}],'#myModal2')
}



function btn(obs){
  if(obs === true){
    return `<div class='d-flex justify-content-center'> 
      <i data-toggle='tooltip' data-placement='top' title='Editar Comentario' class='cursor mr-4 fas fa-edit fa-lg' aria-hidden='true'></i> 
      <i data-toggle='tooltip' data-placement='top' title='Borrar' class='cursor fa fa-trash fa-lg' aria-hidden='true'></i> 
      </div>`
  }else{
    return `<div class='d-flex justify-content-center'> 
      <i data-toggle='tooltip' data-placement='top' title='Agregar Comentario' class='cursor mr-4 fas fa-plus-circle fa-lg' aria-hidden='true'></i> 
      <i data-toggle='tooltip' data-placement='top' title='Borrar' class='cursor fa fa-trash fa-lg' aria-hidden='true'></i> 
      </div>`
  }
}


function queCuatrimestreEs(){
  let mes = new Date()
  if((mes.getMonth() + 1) <= 7){
    return '1'
  }
  if((mes.getMonth() + 1) >= 8){
    return '2'
  }
}
  
</script>