<%- 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>EDITAR CONCEPTOS</h4>
    </div>
    <br>

    <div class="bt" style="display: flex; flex-direction: column; align-items: center;">
      
      <img src="/img/Group 13.png" alt="" style="width: 30%; height: auto;">
      <p>VER INFORME</p>
        <br>

        <img src="/img/Group 12.png" alt="" style="width: 30%; height: auto;">
        <p>EDITAR INFORME</p>
    </div>

  </div>



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

    <div class="d-flex justify-content-end">
      <button id="btnCrear" class="btn btn-primary">Crear</button>
    </div>
    <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>GRUPO</th>
                  <th>CONCEPTO</th>
                  <th>VALORACIÓN</th>
                  <th>ACCIÓN</th>
              </tr>
          </thead>
          <tbody>
          </tbody>
      </table>
  
      </div>
    </div>


</div>

<br><br>

<!-- Modal crear-->
<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"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body d-flex justify-content-center" id="content_modal">
        <div class="form-group" style="text-align: center; width: 50%;">
          <label for="select1">GRUPO</label>
          <select id="idSelectGrupo" class="custom-select">
            
          </select>
          <br><br>

          <input autocomplete="oof" type="text" class="form-control mt-4" id="txtInput"  placeholder="Concepto aquí">
          
          <br><br>
          <label for="select2">VALORACIÓN</label>
          <select id="idSelectValoracion" class="custom-select">
            <option value="">Seleccionar...</option>
            <option value="">Positiva</option>
            <option value="">Negativa</option>
          </select> 
        </div>
        
        
      </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>

<!-- Modal editar-->
<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 CONCEPTO</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body d-flex justify-content-center" id="content_modal">
        <div class="form-group" style="text-align: center; width: 50%;">
          <label for="select1">GRUPO</label>
          <select id="idSelectGrupo2" class="custom-select">
            
          </select>
          <br><br>

          <input autocomplete="off" type="text" class="form-control mt-4" id="txtInput2"  placeholder="Definir Grupo">
          
          <br><br>
          <label for="select2">VALORACIÓN</label>
          <select id="idSelectValoracion2" class="custom-select">
            <option value="">Seleccionar...</option>
            <option value="">Positiva</option>
            <option value="">Negativa</option>
          </select> 
        </div>
        
        
      </div>
      <div class="modal-footer">
        <button id="btnActualizar" type="button" class="btn btn-primary">Actualizar</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-edit:hover{
    color: rgb(75, 129, 211);
}
.fa-trash:hover{
  color: brown;
}


</style>

<script>
let btnCrear = document.getElementById('btnCrear')
let selectGrupo = document.getElementById('idSelectGrupo')
let txtInput = document.getElementById('txtInput')
let selectVal = document.getElementById('idSelectValoracion')
let selectGrupo2 = document.getElementById('idSelectGrupo2')
let txtInput2 = document.getElementById('txtInput2')
let selectVal2 = document.getElementById('idSelectValoracion2')
let btnGuardar = document.getElementById('btnGuardar')
let tituloModal = document.getElementById('exampleModalLabel')
let btnActualizar = document.getElementById('btnActualizar')


window.onload = () =>{
  $.ajax({
    type:'GET',
    url:'/grupos',
    //data:{}
    }).done(async function(res){
          cargarCombo1(res)
          cargarCombo2(res)
    }).fail(async function(err){
      toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
      await sleep(2000)
      //window.location.reload()
    })
}//end




//Muestra la tabla
$('#example').DataTable({
    ajax: "/api-conceptos",
    language: {url: "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"},
    order: [[ 1, "asc" ]],
    columns: [
            { "data": "id" },
            { "data": "tipo" },
            { "data": "concepto" },
            { "data": "valoracion" },
            {
            "defaultContent": "<div class='d-flex justify-content-center'> <i  data-toggle='tooltip' data-placement='top' title='Editar' class='cursor fas fa-edit fa-lg icon mr-4'></i> <i data-toggle='tooltip' data-placement='top' title='Borrar' class='cursor fa fa-trash fa-lg' aria-hidden='true'></i></div>"
            }],
})//end tabla

 
 //Selecciona elementos en tabla Borrar
$('#example tbody').on( 'click', '.fa-trash', function () {
    id = $(this).parents("tr").find("td").eq(0).text()
    
    if (confirm("UD. BORRARÁ EL ELEMENTO SELECCIONADO. ¿DESEA HACERLO?")) {
      Obj.ajaxConfigMsg('DELETE','/deleteConcept',{id}, 'SE BORRÓ CORRECTAMENTE',
      [{code:401, msg:'ERROR ON SERVER: TIPO DE DATO INCORRECTO...'},
      {code:402, msg:'ERROR ON SERVER: NO SE ENCONTRÓ ELEMENTO SELECCIONADO...'}])
    } else {
      return false
    }
    //alert(id)
})

//Selecciona elementos tabla editar
$('#example tbody').on( 'click', '.fa-edit', function () {
    id = $(this).parents("tr").find("td").eq(0).text()
    
    $.ajax({
    type:'POST',
    url:'/searchConcept',
    data:{id}
    }).done(async function(res){
      
      selectGrupo2.options[0].text = res.tipo
      selectVal2.options[0].text = res.positivo
      $('#txtInput2').val(res.concepto)
      $('#myModal2').modal('show')
          
    }).fail(async function(err){
      if(err === '401'){
        toastr.error('Elemento Duplicado...', 'ERROR', { timeOut: 3000 })
        await sleep(2000)
      }else{
        toastr.error('La Operacion NO Pudo Resolverse...', 'ERROR', { timeOut: 3000 })
        await sleep(2000)
      }
      //console.log(err)
      window.location.reload()
    })

})//end


 btnCrear.onclick = ()=>{
   tituloModal.innerHTML = 'CREAR CONCEPTO'
   $('#myModal').modal('show')
}  
    

btnGuardar.onclick = ()=>{
  if ($("#idSelectGrupo option:selected").val() == 'Seleccionar...') {alert('ERROR: DEBE SELECCIONAR UN GRUPO...'); return false}
  if (selectVal.options[selectVal.selectedIndex].text == 'Seleccionar...') {alert('ERROR: DEBE SELECCIONAR UNA VALORACIÓN...'); return false}
  if(txtInput.value === ''){alert('ERROR: EL CAMPO ESTÁ VACIO...'); return false}

  let tipo = $("#idSelectGrupo option:selected").val()
  let positivo = selectVal.options[selectVal.selectedIndex].text
  let concepto = txtInput.value


  Obj.ajaxConfigMsg('POST','/addconcept',{concepto,positivo,tipo}, 'SE AGREGÓ CORRECTAMENTE',
      [{code:401, msg:'ERROR ON SERVER: TIPO DE DATO INCORRECTO...'},
      {code:402, msg:'ERROR ON SERVER: NO SE ENCONTRÓ ELEMENTO SELECCIONADO...'}],'#myModal')

}//end  


btnActualizar.onclick = ()=>{
  if ($("#idSelectGrupo2 option:selected").val() == 'Seleccionar...') {alert('ERROR: DEBE SELECCIONAR UN GRUPO...'); return false}
  if (selectVal2.options[selectVal2.selectedIndex].text == 'Seleccionar...') {alert('ERROR: DEBE SELECCIONAR UNA VALORACIÓN...'); return false}
  if(txtInput2.value === ''){alert('ERROR: EL CAMPO ESTÁ VACIO...'); return false}

  let tipo = $("#idSelectGrupo2 option:selected").val()
  let positivo = selectVal2.options[selectVal2.selectedIndex].text
  let concepto = txtInput2.value

  //alert(concepto)
  Obj.ajaxConfigMsg('POST','/updateConcept',{id,concepto,positivo,tipo}, 'SE ACTUALIZÓ CORRECTAMENTE',
      [{code:401, msg:'ERROR ON SERVER: TIPO DE DATO INCORRECTO...'},
      {code:402, msg:'ERROR ON SERVER: NO SE ENCONTRÓ ELEMENTO SELECCIONADO...'}],'#myModal')

}//end  




const limpiar = () => {
  const $select = document.querySelector("#idSelectGrupo");
  for (let i = $select.options.length; i >= 0; i--) {
    $select.remove(i);
  }
  //$select.innerHTML =  '<option selected disabled></option>'
}

const limpiar2 = () => {
  const $select = document.querySelector("#idSelectGrupo2");
  for (let i = $select.options.length; i >= 0; i--) {
    $select.remove(i);
  }
  //$select.innerHTML =  '<option selected disabled></option>'
}

const cargarCombo1 = (respuesta) =>{
  limpiar()
  $('#idSelectGrupo').append(`<option>Seleccionar...</option>`)
  $.each(respuesta,function(key,val){
    $('#idSelectGrupo').append(`<option>${val.name}</option>`)
  })//end each
}

const cargarCombo2 = (respuesta) =>{
  limpiar2()
  $('#idSelectGrupo2').append(`<option>Seleccionar...</option>`)
  $.each(respuesta,function(key,val){
    $('#idSelectGrupo2').append(`<option>${val.name}</option>`)
  })//end each
}



  
</script>