/* global jAlert */

let lote, json = {}
const httpRequest = {
  listarFichasDocente() {
    defaultConfigDataTable()
    let contador = 0
    return new Promise((resolve) => {
      $(document.querySelector('#tblFichas')).DataTable().destroy()
      $(document.querySelector('#tblFichas')).DataTable({
        data: lote.detalle,
        bInfo: false,
        paging: false,
        columnDefs: [
          {targets: 0, orderable: false, width: '2%', className: 'text-center'},
          {targets: 1, orderable: false, width: '20%'},
          {targets: 2, orderable: false, width: '10%'},
          {targets: 3, orderable: false, width: '10%', className: 'text-center'},
          {targets: 4, orderable: false, width: '7%', className: 'text-center'},
          {targets: 5, orderable: false, width: '6%', className: 'text-center'},
          {targets: 6, orderable: false, width: '6%', className: 'text-center'},
          {targets: 7, orderable: false, width: '6%', className: 'text-center'},
          {targets: 9, orderable: false, width: '2%', className: 'text-center'}
        ],
        columns: [
          {
            data: null,
            render: () => ++contador
          },
          {
            data: null,
            render: (data) => `${data.apellidoPaterno} ${data.apellidoMaterno} ${data.nombre}`
          },
          {
            data: 'numeroDocumento'
          },
          {
            data: 'fechaInicio'
          },
          {
            data: 'costoMensual',
            render: (data) => {
              return data === '0.00' ? data : `<a href="#" class="costoMensual"  data-prop="" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual"></a>`
            }
          },
          {
            data: 'costoa',
            render: (data) => {
              return data === '0.00' ? data : `<a href="#" class="costoa" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual"></a>`
            }
          },
          {
            data: 'costob',
            render: (data) => {
              return data === '0.00' ? data : `<a href="#" class="costob" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual"></a>`
            }
          },
          {
            data: 'costoc',
            render: (data) => {
              return data === '0.00' ? data : `<a href="#" class="costoc" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual"></a>`
            }
          },
          {
            data: null,
            render: () => `<input type="text" class="form-control observacion" value="" placeholder="Ingrese observación"/>`
          },
          {
            data: null,
            render: (data) => {
              return `<ul class="icons-list">
                        <li class="text-primary">
                            <a href="#" onclick="javascript: return false" class="verDetalleFicha" data-toggle="tooltip" data-placement="top" title="Ver detalle lote"><i style="font-size:22px;" class="fa fa-file-text-o fa-lg"></i></a>
                        </li>
                      </ul>
                      `
            }
          }
        ],
        initComplete: function (settings, data) {
          resolve(data)
        }
      })
    })
  },
  listarFichasAdministrativo() {
    defaultConfigDataTable()
    let contador = 0
    return new Promise((resolve, reject) => {
      $(document.querySelector('#tblFichas')).DataTable().destroy()
      $(document.querySelector('#tblFichas')).DataTable({
        data: lote.detalle,
        bInfo: false,
        paging: false,
        columnDefs: [
          {targets: 0, orderable: false, width: '2%', className: 'text-center'},
          {targets: 1, orderable: false, width: '12%'},
          {targets: 2, orderable: false, width: '8%'},
          {targets: 3, orderable: false, width: '5%', className: 'text-center'},
          {targets: 4, orderable: false, width: '4%', className: 'text-center'},
          {targets: 5, orderable: false, width: '4%', className: 'text-center'},
          {targets: 6, orderable: false, width: '4%', className: 'text-center'},
          {targets: 7, orderable: false, width: '25%', className: 'text-center'},
          {targets: 8, orderable: false, width: '2%', className: 'text-center'}
        ],
        columns: [
          {
            data: null,
            render: () => ++contador
          },
          {
            data: null,
            render: (data) => `${data.apellidoPaterno} ${data.apellidoMaterno} ${data.nombre}`
          },
          {
            data: 'numeroDocumento'
          },
          {
            data: 'fechaInicio'
          },
          {
            data: 'sueldoEscalafon',
            render: (data) => {
              return `<b> S/. ${data} </b>`
            }
          },
          {
            data: 'sueldoMensual',
            render: (data) => {
              return `<b> S/. ${data} </b>`
            }
          },
          {
            data: 'sueldoMensual',
            render: (data) => {
              return `<a href="#" style="font-size:16px;" class="costoPresidencia" data-type="text" data-inputclass="form-control" data-pk="1" data-value="${data}" data-title="Costo mensual a asignar"></a>`
            }
          },
          {
            data: null,
            render: () => `<input type="text" class="form-control observacion" value="" placeholder="Ingrese observación"/>`
          },
          {
            data: null,
            render: (data) => {
              return `<ul class="icons-list">
                        <li class="text-primary">
                            <a href="#" onclick="javascript: return false" class="verDetalleFicha" data-toggle="tooltip" data-placement="top" title="Ver detalle lote"><i style="font-size:22px;" class="fa fa-file-text-o fa-lg"></i></a>
                        </li>
                      </ul>
                      `
            }
          }
        ],
        initComplete: function (settings, data) {
          resolve(data)
        }
      })
    })
  },
  registrarSueldoDocente(obj) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: '../DetalleLoteFichaDocenteServlet',
        dataType: 'json',
        type: 'POST',
        data: {
          accion: 'registrarSueldosPresidenciaLoteDocente',
          json: JSON.stringify(obj)
        },
        success: function (data, textStatus, jqXHR) {
          resolve(data)
        },
        error: function (jqXHR, textStatus, errorThrown) {
          reject(errorThrown)
        }
      })
    })
  },
  registrarSueldoAdministrativo(obj) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: '../DetalleLoteFichaDocenteServlet',
        dataType: 'json',
        type: 'POST',
        data: {
          accion: 'registrarSueldosPresidenciaLoteAdministrativo',
          json: JSON.stringify(obj)
        }, beforeSend: function (xhr) {
          load("Actualizando lote administrativo")
        }, success: function (data, textStatus, jqXHR) {
          unload()
          resolve(data)
        }, error: function (jqXHR, textStatus, errorThrown) {
          reject({
            req: obj,
            error: errorThrown
          })
        }
      })
    })
  },
  obtenerDetalle(obj) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: '../DetalleLoteFichaDocenteServlet',
        dataType: 'json',
        type: 'POST',
        data: {
          accion: 'obtenerDetalleFicha',
          json: JSON.stringify(obj)
        }, beforeSend: function (xhr) {
          load("Obteniendo detalle de la ficha")
        }, success: function (data, textStatus, jqXHR) {
          unload()
          resolve(data)
        }, error: function (jqXHR, textStatus, errorThrown) {
          reject({
            req: obj,
            error: errorThrown
          })
        }
      })
    })
  },
  imprimirLote() {
    $('#btnImprimir').on('click', () => {
      if (lote.tipoLote === "A") { // ADMINISTRATIVO
        document.querySelector('#formPDF').action = '../DetalleLoteFichaAdministrativaServlet';
        $('#numeroLote').val(lote.numeroLote);
        $('#numeroFilas').val(lote.detalle.length);
        $('#data').val(JSON.stringify(lote.detalle));
        $('#formPDF').submit();
      } else if (lote.tipoLote === "D") { // DOCENTE
        document.querySelector('#formPDF').action = '../DetalleLoteFichaDocenteServlet';
        $('#numeroLote').val(lote.numeroLote);
        $('#numeroFilas').val(lote.detalle.length);
        $('#data').val(JSON.stringify(lote.detalle));
        $('#formPDF').submit();
      }
    })
  }
}
const DOMComponents = {
  init() {
    this.initializePluginComponents()
  },
  initializePluginComponents() {
    $('.costoMensual, .costoa, .costob, .costoc, .costoPresidencia').editable({
      clear: false
    })
    $('.costoMensual, .costoPresidencia').on('shown', function (e, editable) {
      editable.input.$input.TouchSpin({
        min: 0,
        max: 10000,
        step: 0.1,
        decimals: 2
      }).parent().parent().addClass('editable-touchspin')
    })
    $('.costoa, .costob, .costoc').on('shown', function (e, editable) {
      editable.input.$input.TouchSpin({
        min: 0,
        max: 30,
        step: 0.1,
        decimals: 2
      }).parent().parent().addClass('editable-touchspin')
    })
  }
}
const getDataFromLocalStorage = () => {
  if (localStorage.getItem('lote')) {
    lote = JSON.parse(localStorage.getItem('lote'))
  } else {
    window.location = "lotesFicha.jsp"
  }
}
const DOMEvents = () => {
  $('.observacion').on('change', (e) => {
    console.log('stee')
    if ($(e.currentTarget).val() !== '') {
      $(e.currentTarget).removeClass('tp-error-input-observacion')
      $(e.currentTarget).next().remove()
    }
  })

  $('#tblFichas tbody').on('click', '.verDetalleFicha', (e) => {
    let data = $('#tblFichas').DataTable().row($(e.currentTarget).parents('tr')).data()
    httpRequest.obtenerDetalle({codigoPersona: data.codigoPersona, codigoFicha: data.codigoFicha, tipoFicha: lote.tipoLote})
      .then((data) => {
        localStorage.setItem('detalleFichaLote', JSON.stringify(data))
        localStorage.setItem('paginaActual', 'detalleLoteDocente')
        window.location.href = 'detalleFicha.jsp'
      })
      .catch(err => jAlert({type: 'error', content: err, buttons: {left: 'Aceptar'}}))
  })
}
const getDataDocenteJSON = () => {
  let table = $(document.querySelector('#tblFichas tbody'))
  let jsonData = []
  table.find('tr').each(function (i, el) {
    let row = $(this).find('td')
    let codigoFicha = $('#tblFichas').DataTable().row(i).data().codigoFicha
    let codigoPago = $('#tblFichas').DataTable().row(i).data().codigoPago
    let costoMensual = row.eq(4).text()
    let costoa = row.eq(5).text()
    let costob = row.eq(6).text()
    let costoc = row.eq(7).text()
    let observacion = row.eq(8).find('input').val()
    let json = `
                {
                  "codigoFicha" : ${codigoFicha},
                  "codigoPago" : ${codigoPago},
                  "costoMensual": "${costoMensual}",
                  "costoa":"${costoa}",
                  "costob":"${costob}",
                  "costoc":"${costoc}",
                  "observacion":"${observacion}"
                }
                `
    jsonData.push(JSON.parse(json))
  })
  return jsonData
}
const getDataAdministrativoJSON = () => {
  let table = $(document.querySelector('#tblFichas tbody'))
  let jsonData = []
  table.find('tr').each(function (i, el) {
    let row = $(this).find('td')
    let codigoFicha = $('#tblFichas').DataTable().row(i).data().codigoFicha
    let codigoAreaCargoTipoPago = $('#tblFichas').DataTable().row(i).data().codigoAreaCargoTipoPago
    let sueldoEscalafon = `${row.eq(4).text().split('.')[1]}.${row.eq(4).text().split('.')[2]}`.trim()
    let sueldoMensual = `${row.eq(5).text().split('.')[1]}.${row.eq(5).text().split('.')[2]}`.trim()
    let sueldoPresidencia = row.eq(6).text()
    let observacion = row.eq(7).find('input').val()
    let json = `
                {
                  "codigoFicha" : ${codigoFicha},
                  "codigoAreaCargoTipoPago" : ${codigoAreaCargoTipoPago},
                  "sueldoEscalafon": "${sueldoEscalafon}",
                  "sueldoMensual":"${sueldoMensual}",
                  "sueldoPresidencia":"${sueldoPresidencia}",
                  "observacion":"${observacion}"
                }
                `
    jsonData.push(JSON.parse(json))
  })
  return jsonData
}
const printComponents = {
  panelLote() {
    document.querySelector('#lblNumeroLote').innerHTML = lote.numeroLote
    document.querySelector('#lblFechaRegistro').innerHTML = lote.fechaRegistro
    document.querySelector('#lblTipoLote').innerHTML = lote.tipoLote === 'A' ? '<span class="label bg-primary">ADMINISTRATIVO</span>' : '<span class="label bg-success">DOCENTE</span>'
    document.querySelector('#divEstadoLote').innerHTML = `
                <div class="form-group">
                  <label class="text-semibold">Estado de lote:</label>
                  <span class="pull-right-sm label bg-orange"">${lote.estadoLote}</span>
                </div>
    `
    document.querySelector('#lblCantidadFichas').innerHTML = lote.detalle.length
  },
  tablaHead(obj) {
    return new Promise((resolve) => {
      let head = ''
      if (obj.tipoLote === 'D') {
        head = `<tr>
                  <th class="text-center" rowspan="2">#</th>                    
                  <th class="text-center" rowspan="2">APELLIDOS Y NOMBRES</th>
                  <th class="text-center" rowspan="2">N° DOCUMENTO</th>
                  <th class="text-center" rowspan="2">FECHA DE INICIO</th>
                  <th class="text-center" colspan="4" class="text-center">COSTOS</th>
                  <th class="text-center" rowspan="2">OBSERVACION</th>
                  <th class="text-center" rowspan="2">ACCIONES</th>
                </tr>
                <tr>
                  <th class="text-center">MENSUAL</th>
                  <th class="text-center">A</th>
                  <th class="text-center">B</th>
                  <th class="text-center">C</th>
                </tr>`
      } else if (obj.tipoLote === 'A') {
        head = `<tr>
                  <th class="text-center" rowspan="2">#</th>                    
                  <th class="text-center" rowspan="2">APELLIDOS Y NOMBRES</th>
                  <th class="text-center" rowspan="2">N° DOCUMENTO</th>
                  <th class="text-center" rowspan="2">FECHA DE INICIO</th>
                  <th class="text-center" colspan="3" class="text-center">COSTOS</th>
                  <th class="text-center" rowspan="2">OBSERVACION</th>
                  <th class="text-center" rowspan="2">ACCIONES</th>
                </tr>
                <tr>
                  <th class="text-center">ESCALAFÓN</th>
                  <th class="text-center">PROPUESTO</th>
                  <th class="text-center">COSTO MENSUAL</th>
                </tr>`
      } else {
        jAlert({type: 'error', content: 'Error al obtener el tipo de lote', buttons: {left: 'Aceptar'}})
      }
      document.querySelector('#tblFichasHead').innerHTML = head
      resolve(obj.tipoLote)
    })
  }
}
const fichasDocente = {
  init() {
    this.actualizarFichas()
  },
  actualizarFichas() {
    document.querySelector('#btnEvaluarFichasDocente').addEventListener('click', (e) => {
      let obj = this.validarFichas()
      if (obj.status) {
        delete obj["status"]
        jAlert({
          type: 'confirm',
          content: 'Asegúrese de revisar bien la información de los sueldos de las fichas.',
          buttons: {left: 'Si', right: 'No'}
        }).then(flag => {
          if (flag) {
            httpRequest.registrarSueldoDocente(obj)
              .then(data => {
                if (data.status) {
                  jAlert({
                    type: 'success',
                    content: `Se actualizó el lote número <mark>${lote.numeroLote}</mark> correctamente!`,
                    buttons: {left: 'Aceptar'}
                  }).then(flag => {
                    if (flag) {
                      window.location = 'lotesFicha.jsp'
                    }
                  })
                } else {
                  jAlert({type: 'error', content: data.message, buttons: {left: 'Aceptar'}})
                }
              })
              .catch(err => jAlert({type: 'error', content: err, buttons: {left: 'Aceptar'}}))
          }
        })
      }
    })
  },
  validarFichas() {
    let json = this.obtenerData()
    let flagActualizar = false
    if (json.estadoLote) {
      let fichas = json.fichas
      for (let ficha in fichas) {
        if (fichas[ficha].estadoFicha) {
          if (fichas[ficha].observacion === "") {
            let input = $($($('#tblFichas tbody').find('tr')[ficha]).find('td')[8]).children()
            input.next().remove()
            input.addClass('tp-error-input-observacion')
            input.after('<span style="color: #F44336">Debe ingresar una observación</span>')
            flagActualizar = false
          } else {
            flagActualizar = true
          }
        } else {
          $($($('#tblFichas tbody').find('tr')[ficha]).find('td')[8]).children().removeClass('tp-error-input-observacion')
        }
      }
    } else {
      $('#tblFichas tbody tr').each((i, el) => {
        $($(el).find('td')[8]).children().removeClass('tp-error-input-observacion')
      })
      flagActualizar = true
    }
    json.status = flagActualizar
    return json
  },
  obtenerData() {
    let new_data = getDataDocenteJSON(), flag = false
    let data = lote.detalle
    for (let ficha in data) {
      if (data[ficha].costoMensual === new_data[ficha].costoMensual &&
        data[ficha].costoa === new_data[ficha].costoa &&
        data[ficha].costob === new_data[ficha].costob &&
        data[ficha].costoc === new_data[ficha].costoc) {
        new_data[ficha].estadoFicha = false
      } else {
        new_data[ficha].estadoFicha = true
        flag = true
      }
    }
    json.fichas = new_data
    json.codigoLote = parseInt(lote.codigoFichaLote)
    json.estadoLote = flag
    return json
  }
}
const fichasAdministrativo = {
  init() {
    this.actualizarFichas()
  },
  actualizarFichas() {
    document.querySelector('#btnEvaluarFichasAdministrativo').addEventListener('click', (e) => {
      let obj = this.validarFichas()
      if (obj.status) {
        delete obj["status"]
        jAlert({
          type: 'confirm',
          content: 'Asegúrese de revisar bien la información de los sueldos de las fichas.',
          buttons: {left: 'Si', right: 'No'}
        }).then(flag => {
          if (flag) {
            httpRequest.registrarSueldoAdministrativo(obj)
              .then(data => {
                if (data.status) {
                  jAlert({
                    type: 'success',
                    content: `Se actualizó el lote número <mark>${lote.numeroLote}</mark> correctamente!`,
                    buttons: {left: 'Aceptar'}
                  }).then(flag => {
                    if (flag) {
                      window.location = 'lotesFicha.jsp'
                    }
                  })
                } else {
                  jAlert({type: 'error', content: data.message, buttons: {left: 'Aceptar'}})
                }
              })
              .catch(err => jAlert({type: 'error', content: err, buttons: {left: 'Aceptar'}}))
          }
        })
      }
    })
  },
  validarFichas() {
    let json = this.obtenerData()
    let flagActualizar = false
    if (json.estadoLote) {
      let fichas = json.fichas
      for (let ficha in fichas) {
        if (fichas[ficha].estadoFicha) {
          if (fichas[ficha].observacion === "") {
            let input = $($($('#tblFichas tbody').find('tr')[ficha]).find('td')[7]).children()
            input.next().remove()
            input.addClass('tp-error-input-observacion')
            input.after('<span style="color: #F44336">Debe ingresar una observación</span>')
            input.parent('td').css({textAlign: 'left'})
            flagActualizar = false
          } else {
            flagActualizar = true
          }
        } else {
          $($($('#tblFichas tbody').find('tr')[ficha]).find('td')[7]).children().removeClass('tp-error-input-observacion')
        }
      }
    } else {
      $('#tblFichas tbody tr').each((i, el) => {
        $($(el).find('td')[7]).children().removeClass('tp-error-input-observacion')
      })
      flagActualizar = true
    }
    json.status = flagActualizar
    return json
  },
  obtenerData() {
    let new_data = getDataAdministrativoJSON(), flag = false
    let data = lote.detalle
    for (let ficha in data) {
      if (data[ficha].sueldoMensual === new_data[ficha].sueldoPresidencia) {
        new_data[ficha].estadoFicha = false
      } else {
        new_data[ficha].estadoFicha = true
        flag = true
      }
    }
    json.fichas = new_data
    json.codigoLote = parseInt(lote.codigoFichaLote)
    json.estadoLote = flag
    return json
  }
}


// METODOS
getDataFromLocalStorage()
printComponents.tablaHead(lote)
  .then((tipoLote) => {
    if (tipoLote === 'D') {
      httpRequest.listarFichasDocente()
    } else if (tipoLote === 'A') {
      httpRequest.listarFichasAdministrativo()
    } else {
      jAlert({type: 'error', content: 'Error al obtener el tipo de lote', buttons: {left: 'Aceptar'}})
    }

  })
httpRequest.imprimirLote()
printComponents.panelLote()
setTimeout(() => {
  DOMComponents.init()
}, 0)
if (lote.tipoLote === 'A') {
  document.querySelector('.tp-btn-evaluar').setAttribute('id', 'btnEvaluarFichasAdministrativo')
  fichasAdministrativo.init()
} else if (lote.tipoLote === 'D') {
  document.querySelector('.tp-btn-evaluar').setAttribute('id', 'btnEvaluarFichasDocente')
  fichasDocente.init()
} else {
  jAlert({type: 'error', content: 'Error al obtener el tipo de lote', buttons: {left: 'Aceptar'}})
}

setTimeout(function () {
  DOMEvents()
}, 0)

removeLocal('detalleFichaLote')