//<script>
let deptoActual = ''
let activosDeptoActualPermitidos = []
let ultimoProyectoLlenado = 0
let proyectoGdeActual = ''
let recPersonal = 0
let recTiempo = 0
let recCapital = 0
let originalPosition
let siguientesProyectos = []
let proyectoAQuitar = 1000
let proyectosAbiertos = []
let habilidadesAcreditadasActivas = false
let habilidadAcreditadaEnEspera = ''
let habilidadesAcreditadasDisponibles = 0
let beneficioTiempo = 0
let beneficioPersonal = 0
let beneficioCapital = 0
let datosCarga = []
let divisorDeProyectosTerminados = 1
$('#asignarRecursos').button()
//$('.departamentos').css('height', $('#renglonDeptos').height());
//$('.renglonSup').css('height', $('#renglonSuperior').height());
$('.proyectos').css('height', $('#renglonProyectos').height())
$('#tablaAccionesPosibles').css('height', $('#tablaActivos').height())
// let arreglosCapacitaciones = {}

/**
 * Pone los datos del departamento seleccionado en el depto actual (grande).
 */
function llenaDepartamentoGde(depto) {
  // console.log(depto);
  // console.log($("#"+depto+" .deptoNombre").text());
  // console.log($("#"+depto+" #activoCh1").text());
  // console.log($("#"+depto+" #activoCh2").text());
  // console.log($("#"+depto+" #tiempoCh").text());
  // console.log($("#"+depto+" #personalCh").text());
  // console.log($("#"+depto+" #capitalCh").text());
  // console.log($("#"+depto+" #tiempoHA").text());
  // console.log($("#"+depto+" #personalHA").text());
  // console.log($("#"+depto+" #capitalHA").text());
  // console.log("arr"+depto);
  $('.departamentos').css('border', '0px')
  beneficioCapital = 0
  beneficioPersonal = 0
  beneficioTiempo = 0
  let elArreglo = arreglosDeptos['arr' + depto]

  $('#' + deptoActual + ' #recursoDispCapitalGde')
    .draggable('disable')
    .removeClass('recursoDispCapitalGde')
  $('#' + deptoActual + ' #recursoDispTiempoGde')
    .draggable('disable')
    .removeClass('recursoDispTiempoGde')
  $('#' + deptoActual + ' #recursoDispPersonalGde')
    .draggable('disable')
    .removeClass('recursoDispPersonalGde')

  $('#' + deptoActual + ' #recursoDispTiempoGde').attr('id', 'tiempoCh')
  $('#' + deptoActual + ' #recursoDispPersonalGde').attr('id', 'personalCh')
  $('#' + deptoActual + ' #recursoDispCapitalGde').attr('id', 'capitalCh')

  $('#' + deptoActual).droppable('enable')

  deptoActual = depto

  // console.log("xxxxxx: " + $("#" + deptoActual).attr("id"));
  // console.log("YYYYY: " + $("#" + deptoActual + " #tiempoCh").text())

  $('#' + deptoActual + ' #tiempoCh').attr('id', 'recursoDispTiempoGde')
  $('#' + deptoActual + ' #personalCh').attr('id', 'recursoDispPersonalGde')
  $('#' + deptoActual + ' #capitalCh').attr('id', 'recursoDispCapitalGde')

  $('#' + deptoActual + ' #recursoDispCapitalGde')
    .draggable('enable')
    .addClass('recursoDispCapitalGde')
  $('#' + deptoActual + ' #recursoDispTiempoGde')
    .draggable('enable')
    .addClass('recursoDispTiempoGde')
  $('#' + deptoActual + ' #recursoDispPersonalGde')
    .draggable('enable')
    .addClass('recursoDispPersonalGde')

  $('#' + deptoActual).droppable('disable')

  $('#' + deptoActual).css('border', '5px solid red')
  activosDeptoActualPermitidos = [] //limpia el arreglo de activos permitidos
  activosDeptoActualPermitidos.push(findArrayValue(elArreglo, 'activo1Tipo'))
  activosDeptoActualPermitidos.push(findArrayValue(elArreglo, 'activo2Tipo'))
  $('#deptoNombresGde').text('')
  $('#nombreDeptoGde').attr('deptoactual', depto)
  $('#nuevoNombreDeptoGde').html(
    '<br><br>' + findArrayValue(elArreglo, 'nombre')
  )

  console.log('arreglo:', elArreglo)
  // $("#nombreDeptoGde").text(findArrayValue(elArreglo, "nombre"));
  $('#nombreDeptoGde').html("<span id='deptoNombresGde'></span>")
  $('#deptoNombresGde').text(findArrayValue(elArreglo, 'integrantes'))
  $('#activoGde1')
    .text(findArrayValue(elArreglo, 'activo1'))
    .removeAttr('class')
    .addClass('draggable')
    .addClass('act' + findArrayValue(elArreglo, 'activo1Tipo'))
  $('#activoGde2')
    .text(findArrayValue(elArreglo, 'activo2'))
    .removeAttr('class')
    .addClass('draggable')
    .addClass('act' + findArrayValue(elArreglo, 'activo2Tipo'))
  $('#recursoDispTiempoGde').text(findArrayValue(elArreglo, 'recursoTiempo'))
  $('#recursoDispPersonalGde').text(
    findArrayValue(elArreglo, 'recursoPersonal')
  )
  $('#recursoDispCapitalGde').text(findArrayValue(elArreglo, 'recursoCapital'))
  // $("#habilidadAcreditadaCantTiempoGde").text(findArrayValue(elArreglo, "habilidadTiempo"));
  // $("#habilidadAcreditadaCantPersonalGde").text(findArrayValue(elArreglo, "habilidadPersonal"));
  // $("#habilidadAcreditadaCantCapitalGde").text(findArrayValue(elArreglo, "habilidadCapital"));
  $('#accionEspecialGde').text(
    findArrayValue(elArreglo, 'accionEspecialQuincenal')
  )

  $('#habilidadesAcreditadasGde1').text('')
  $('#habilidadesAcreditadasGde2').text('')
  $('#habilidadesAcreditadasGde3').text('')

  let laHabilidad

  if (findArrayValue(elArreglo, 'habilidadPersonal') != 0) {
    laHabilidad = findArrayValue(elArreglo, 'habilidadPersonal')
    let beneficio = findArrayValue(
      arreglosCapacitaciones[laHabilidad],
      'beneficio'
    )
    beneficioPersonal = beneficio
    let tipoRecurso = findArrayValue(
      arreglosCapacitaciones[laHabilidad],
      'tipoRecurso'
    )
    let tipo = findArrayValue(arreglosCapacitaciones[laHabilidad], 'tipo')
    if (tipo == 'HH') {
      tipo = 'Habilidad Humana'
    }
    if (tipo == 'HC') {
      tipo = 'Habilidad Conceptual'
    }
    if (tipo == 'HT') {
      tipo = 'Habilidad Técnica'
    }
    // if (tipoRecurso == "Personal") {
    //     tipoRecurso = "<img src='img/personalCH.png' width='20px'>"
    // }
    // if (tipoRecurso == "Tiempo") {
    //     tipoRecurso = "<img src='img/tiempoCH.png' width='20px'>"
    // }
    // if (tipoRecurso == "Capital") {
    //     tipoRecurso = "<img src='img/capitalCH.png' width='20px'>"
    // }
    if ($('#habilidadesAcreditadasGde1').text() == '') {
      $('#habilidadesAcreditadasGde1').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    } else if ($('#habilidadesAcreditadasGde2').text() == '') {
      $('#habilidadesAcreditadasGde2').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    } else if ($('#habilidadesAcreditadasGde3').text() == '') {
      $('#habilidadesAcreditadasGde3').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    }
  }
  if (findArrayValue(elArreglo, 'habilidadTiempo') != 0) {
    laHabilidad = findArrayValue(elArreglo, 'habilidadTiempo')
    let beneficio = findArrayValue(
      arreglosCapacitaciones[laHabilidad],
      'beneficio'
    )
    beneficioTiempo = beneficio
    let tipoRecurso = findArrayValue(
      arreglosCapacitaciones[laHabilidad],
      'tipoRecurso'
    )
    let tipo = findArrayValue(arreglosCapacitaciones[laHabilidad], 'tipo')
    if (tipo == 'HH') {
      tipo = 'Habilidad Humana'
    }
    if (tipo == 'HC') {
      tipo = 'Habilidad Conceptual'
    }
    if (tipo == 'HT') {
      tipo = 'Habilidad Técnica'
    }
    if ($('#habilidadesAcreditadasGde1').text() == '') {
      $('#habilidadesAcreditadasGde1').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    } else if ($('#habilidadesAcreditadasGde2').text() == '') {
      $('#habilidadesAcreditadasGde2').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    } else if ($('#habilidadesAcreditadasGde3').text() == '') {
      $('#habilidadesAcreditadasGde3').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    }
  }
  if (findArrayValue(elArreglo, 'habilidadCapital') != 0) {
    laHabilidad = findArrayValue(elArreglo, 'habilidadCapital')
    let beneficio = findArrayValue(
      arreglosCapacitaciones[laHabilidad],
      'beneficio'
    )
    beneficioCapital = beneficio
    let tipoRecurso = findArrayValue(
      arreglosCapacitaciones[laHabilidad],
      'tipoRecurso'
    )
    let tipo = findArrayValue(arreglosCapacitaciones[laHabilidad], 'tipo')
    if (tipo == 'HH') {
      tipo = 'Habilidad Humana'
    }
    if (tipo == 'HC') {
      tipo = 'Habilidad Conceptual'
    }
    if (tipo == 'HT') {
      tipo = 'Habilidad Técnica'
    }
    if ($('#habilidadesAcreditadasGde1').text() == '') {
      $('#habilidadesAcreditadasGde1').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    } else if ($('#habilidadesAcreditadasGde2').text() == '') {
      $('#habilidadesAcreditadasGde2').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    } else if ($('#habilidadesAcreditadasGde3').text() == '') {
      $('#habilidadesAcreditadasGde3').html(
        tipo +
          '<br>' +
          findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
          ' ' +
          beneficio +
          tipoRecurso.charAt(0).toUpperCase()
      )
    }
  }

  console.log(
    'BeneficioT:',
    beneficioTiempo,
    'BeneficioP:',
    beneficioPersonal,
    'BeneficioC:',
    beneficioCapital
  )

  $('#imagenDeptoGde').attr('src', 'img/' + findArrayValue(elArreglo, 'imagen')) //imagenDepto

  // console.log(findArrayValue(elArreglo, "imagen"))
  console.log('departamentoActual', deptoActual)
  // $("#recursoDispTiempoGde").draggable("enable"); //para que se pueda arrastrar
  // $("#recursoDispPersonalGde").draggable("enable");
  // $("#recursoDispCapitalGde").draggable("enable");
}

/**
 * Pone los datos del proyecto seleccionado en el proyecto actual (grande).
 */
function llenaProyectoGde(proyectoNum) {
  proyectoNum = parseInt(proyectoNum) - 1 //para que coincida con el id del proyecto en el arreglo de proyectos
  proyectoGdeActual = proyectoNum
  proyectoActual = 'proyecto_' + proyectoNum

  if (proyectos[proyectoNum].estatus === 'Completado') {
    $('#TablaProyectoGde').css('background-color', 'lightgray')
  } else {
    $('#TablaProyectoGde').css('background-color', 'white')
  }

  console.log(proyectos[proyectoNum])

  // console.log(proyectoActual)
  console.log(
    proyectoActual,
    proyectoNum,
    proyectos[proyectoNum].nombreProyecto
  )

  $('#TablaProyectoGde').attr('num', proyectoNum)
  $('#nombreProyectoGde').html(
    proyectos[proyectoNum].nombreProyecto +
      '<br><span>' +
      proyectos[proyectoNum].departamento +
      '</span>'
  )
  $('#descripcionProyectoGde').html(proyectos[proyectoNum].descripcion)

  let signoPuntosGanados = '+'
  let signoPuntosPerdidos = '-'
  if (proyectos[proyectoNum].puntosGanados == 0) {
    signoPuntosGanados = ''
  } else {
    signoPuntosGanados = '+'
  }
  if (proyectos[proyectoNum].puntosPerdidos == 0) {
    signoPuntosPerdidos = ''
  } else {
    signoPuntosPerdidos = '-'
  }

  // $("#TablaProyectoGde #puntosGanados").html(signoPuntosGanados + proyectos[proyectoNum].puntosGanados);

  const elPotencial = proyectos[proyectoNum].potencial || 'N/A'
  $('#TablaProyectoGde #puntosGanados')
    .html('Potencial<br>' + elPotencial)
    .removeClass('dificultad1 dificultad2 dificultad3')
    .addClass('dificultad' + proyectos[proyectoNum].dificultad)

  // $("#puntosPerdidos").html(signoPuntosPerdidos + proyectos[proyectoNum].puntosPerdidos);

  let laCantidad = new Intl.NumberFormat('es-MX', {
    style: 'decimal',
    minimumFractionDigits: 0, // Mínimo 0 decimales
    maximumFractionDigits: 0, // Máximo 0 decimales
  }).format(proyectos[proyectoNum].penalizacion) // Salida: "$1,500.50" (Nota: México usa punto para miles)

  $('#puntosPerdidos')
    .html('Penalización<br>' + laCantidad)
    .removeClass('dificultad1 dificultad2 dificultad3')
    .addClass('dificultad' + proyectos[proyectoNum].dificultad)

  const colores = [
    'amarillo',
    'naranjas',
    'verdes',
    'azules',
    'rojos',
    'morados',
  ]
  arrProyecto = proyectos[proyectoNum]
  //proyectoActual = "proyecto_" + (proyectoNum + 1)
  //const coloresNoNulos = colores.filter(color => arrProyecto[color] !== null);
  const coloresConValores = colores
    .filter((color) => arrProyecto[color] !== null)
    .map((color) => ({
      color,
      valor: arrProyecto[color],
    }))
  $('#activoReqProyectoNom1').attr('class', '').text('')
  $('#activoReqProyectoNom2').attr('class', '').text('')
  $('#activoReqProyectoNom3').attr('class', '').text('')
  $('#activoReqProyectoCantX1').text('0')
  $('#activoReqProyectoCantX2').text('0')
  $('#activoReqProyectoCantX3').text('0')
  $('#activoReqProyectoCant1').attr('class', '')
  $('#activoReqProyectoCant2').attr('class', '')
  $('#activoReqProyectoCant3').attr('class', '')
  for (let i = 0; i < coloresConValores.length; i++) {
    let laClase
    let elActivo
    // console.log(`Color: ${coloresConValores[i].color}, Valor: ${coloresConValores[i].valor}`);
    laClase = 'actNinguno'
    switch (coloresConValores[i].color) {
      case 'amarillo':
        laClase = 'actPersonalCalificado'
        elActivo = 'Personal Calificado'
        break
      case 'naranjas':
        laClase = 'actAnalistas'
        elActivo = 'Analistas'
        break
      case 'verdes':
        laClase = 'actFlujoDeEfectivo'
        elActivo = 'Flujo de Efectivo'
        break
      case 'azules':
        laClase = 'actTransporteYMaquinaria'
        elActivo = 'Transporte y Maquinaria'
        break
      case 'rojos':
        laClase = 'actTecnologia'
        elActivo = 'Tecnologia'
        break
      case 'morados':
        laClase = 'actCreditoEInversion'
        elActivo = 'Credito e Inversion'
        break
    }
    $('#activoReqProyectoCantX' + (i + 1)).text(coloresConValores[i].valor)
    $('#activoReqProyectoNom' + (i + 1))
      .attr('class', '')
      .text(elActivo)
      .addClass(laClase)
    $('#activoReqProyectoCant' + (i + 1))
      .attr('class', '')
      .addClass(laClase)
    $('#imagenProyectoGde').attr(
      'src',
      'img/p' + (parseInt(proyectoNum) + 1) + '.jpg'
    )
  }
  $('#activoReqProyectoCant1').text(proyectos[proyectoNum].activoAsignado1)
  $('#activoReqProyectoCant2').text(proyectos[proyectoNum].activoAsignado2)
  $('#activoReqProyectoCant3').text(proyectos[proyectoNum].activoAsignado3)
  $('#mantoGde').text('MANTENIMIENTO ' + proyectos[proyectoNum].mantenimiento)
}

/**
 * Pone los datos del departamento seleccionado en el depto chico.
 */
function llenaDepartamentoChico(depto) {
  console.log(`[llenaDepartamentoChico] -> INICIO para depto: '${depto}'`)
  // console.log(depto);
  // console.log($("#"+depto+" .deptoNombre").text());
  // console.log($("#"+depto+" #activoCh1").text());
  // console.log($("#"+depto+" #activoCh2").text());
  // console.log($("#"+depto+" #tiempoCh").text());
  // console.log($("#"+depto+" #personalCh").text());
  // console.log($("#"+depto+" #capitalCh").text());
  // console.log($("#"+depto+" #tiempoHA").text());
  // console.log($("#"+depto+" #personalHA").text());
  // console.log($("#"+depto+" #capitalHA").text());
  // console.log("arr"+depto);
  let elArreglo = arreglosDeptos['arr' + depto]
  console.log(
    `[llenaDepartamentoChico] -> Cambiando variable global 'deptoActual' a: '${depto}'`
  )
  deptoActual = depto
  $('#' + deptoActual + ' #capitalCh').draggable('disable')
  $('#' + deptoActual + ' #tiempoCh').draggable('disable')
  $('#' + deptoActual + ' #personalCh').draggable('disable')
  // console.log("arreglo:", elArreglo);
  $('#' + deptoActual + ' #nombreDeptoGde').attr('deptoactual', depto)
  $('#' + deptoActual + ' #nombreDeptoCh').text(
    findArrayValue(elArreglo, 'nombre')
  )
  $('#' + deptoActual + ' .personasDepto').text(
    findArrayValue(elArreglo, 'integrantes')
  )
  $('#' + deptoActual + ' .personasDepto').attr('depto', deptoActual)
  // console.log("ARREGLO:", elArreglo, "INTEGRANTES:", findArrayValue(elArreglo, "integrantes"))
  // $("#deptoNombresGde").text(findArrayValue(elArreglo, "integrantes"));
  $('#' + deptoActual + ' #activoCh1').text(
    findArrayValue(elArreglo, 'activo1')
  )
  $('#' + deptoActual + ' #activoCh2').text(
    findArrayValue(elArreglo, 'activo2')
  )
  $('#' + deptoActual + ' #tiempoCh').text(
    findArrayValue(elArreglo, 'recursoTiempo')
  )
  $('#' + deptoActual + ' #personalCh').text(
    findArrayValue(elArreglo, 'recursoPersonal')
  )
  $('#' + deptoActual + ' #capitalCh').text(
    findArrayValue(elArreglo, 'recursoCapital')
  )
  $('#' + deptoActual + ' #tiempoHA').text(
    findArrayValue(elArreglo, 'habilidadTiempo')
  )
  $('#' + deptoActual + ' #personalHA').text(
    findArrayValue(elArreglo, 'habilidadPersonal')
  )
  $('#' + deptoActual + ' #capitalHA').text(
    findArrayValue(elArreglo, 'habilidadCapital')
  )
  $('#' + deptoActual + ' #accionEspecialGde').text(
    findArrayValue(elArreglo, 'accionEspecialQuincenal') || ''
  )
  console.log(`[llenaDepartamentoChico] <- FIN para depto: '${depto}'`)
}

function cuantaProyectosAsignados() {
  let contador = 0
  for (let i = 0; i < proyectos.length; i++) {
    if (proyectos[i].estatus == 'En proceso') {
      contador++
    }
  }
}

function limpiaProyectoChico(elProyecto) {
  console.log('Limpia proyecto chico', elProyecto)
  // console.log($("#" + proyectoActual + " #activoReqProyectoNom1").text())
  $('#' + elProyecto).removeAttr('elid')
  $('#' + elProyecto).removeAttr('estatus')
  $('#' + elProyecto).css('background-color', '')
  $('#' + elProyecto + ' .proyectoEncabezado').removeAttr('estatus')
  $('#' + elProyecto + ' #proyectoNombre').text('')
  $('#' + elProyecto + ' #proyectoDepto').text('')
  $('#' + elProyecto + ' #puntos').text('')
  $('#' + elProyecto + ' #proyectoDescripcion').text('')
  $('#' + elProyecto + ' #activoReq1').text('')
  $('#' + elProyecto + ' #activoReq2').text('')
  $('#' + elProyecto + ' #activoReq3').text('')
  $('#' + elProyecto + ' #recursosManto').text('')
  $('#' + elProyecto + ' #activoAsignado1').text('')
  $('#' + elProyecto + ' #activoAsignado2').text('')
  $('#' + elProyecto + ' #activoAsignado3').text('')
  // Quitamos el texto de "En Proceso" del proyecto chico.
  let tdEnProceso = $('#' + elProyecto).find('td:contains("En proceso")')
  if (tdEnProceso.length > 0) {
    let nuevoTexto = tdEnProceso.html().replace(/En proceso/g, ' ')
    tdEnProceso.html(nuevoTexto)
  }
}

function limpiaProyectoGrande() {
  console.log('Limpia proyecto grande')
  $('#TablaProyectoGde').removeAttr('num')
  $('#TablaProyectoGde').removeAttr('estatus')
  $('#TablaProyectoGde').css('background-color', '')
  $('#nombreProyectoGde').text('')
  $('#descripcionProyectoGde').text('')
  $('#TablaProyectoGde #puntosGanados').text('')
  $('#puntosPerdidos').text('')
  $('#activoReqProyectoNom1').attr('class', '').text('')
  $('#activoReqProyectoNom2').attr('class', '').text('')
  $('#activoReqProyectoNom3').attr('class', '').text('')
  $('#activoReqProyectoCantX1').text('0')
  $('#activoReqProyectoCantX2').text('0')
  $('#activoReqProyectoCantX3').text('0')
  $('#activoReqProyectoCant1').attr('class', '').text('')
  $('#activoReqProyectoCant2').attr('class', '').text('')
  $('#activoReqProyectoCant3').attr('class', '').text('')
  $('#mantoGde').text('MANTENIMIENTO')
}

function llenaProyectoChico(proyectoNum) {
  console.log('Llenando proyectos! ', proyectoNum)
  const colores = [
    'amarillo',
    'naranjas',
    'verdes',
    'azules',
    'rojos',
    'morados',
  ]
  arrProyecto = proyectos[proyectoNum]
  console.log(
    'Este ID:',
    arrProyecto.id,
    proyectos[proyectoNum].id,
    proyectos[proyectoNum].nombreProyecto
  )
  ultimoProyectoLlenado++
  proyectoActual = 'proyecto_' + ultimoProyectoLlenado
  $('#' + proyectoActual).attr('elid', arrProyecto.id - 1)
  const coloresNoNulos = colores.filter((color) => arrProyecto[color] !== null)
  const coloresConValores = colores
    .filter((color) => arrProyecto[color] !== null)
    .map((color) => ({
      color,
      valor: arrProyecto[color],
    }))
  // console.log(coloresNoNulos)
  // console.log(coloresConValores)
  console.log(
    proyectoActual,
    proyectos[proyectoNum].nombreProyecto,
    proyectos[proyectoNum].dificultad
  )
  let signoPuntosGanados = '+'
  let signoPuntosPerdidos = '-'
  if (proyectos[proyectoNum].puntosGanados == 0) {
    signoPuntosGanados = ''
  } else {
    signoPuntosGanados = '+'
  }
  if (proyectos[proyectoNum].puntosPerdidos == 0) {
    signoPuntosPerdidos = ''
  } else {
    signoPuntosPerdidos = '-'
  }
  const penalizacionFormateada = new Intl.NumberFormat('es-MX', {
    style: 'decimal',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(proyectos[proyectoNum].penalizacion)

  const losPuntos = `${proyectos[proyectoNum].potencial} | ${penalizacionFormateada}`

  $('#' + proyectoActual).attr('estatus', proyectos[proyectoNum].estatus)
  $('#' + proyectoActual + ' .proyectoEncabezado').attr(
    'estatus',
    proyectos[proyectoNum].estatus
  )
  if (proyectos[proyectoNum].estatus == 'Completado') {
    $('#' + proyectoActual).css('background-color', 'lightgray')
  }

  $('#' + proyectoActual + ' #proyectoNombre').text(
    proyectos[proyectoNum].nombreProyecto
  )
  $('#' + proyectoActual + ' #proyectoDepto')
    .text(proyectos[proyectoNum].departamento)
    .removeClass('dificultad1 dificultad2 dificultad3')
  $('#' + proyectoActual + ' #proyectoDescripcion').text(
    proyectos[proyectoNum].descripcion
  )
  $('#' + proyectoActual + ' #recursosManto').text(
    'MANTENIMIENTO ' + proyectos[proyectoNum].mantenimiento
  )

  $('#' + proyectoActual + ' #puntos')
    .text(losPuntos)
    .removeClass('dificultad1 dificultad2 dificultad3')
    .addClass('dificultad' + proyectos[proyectoNum].dificultad)
  $('#' + proyectoActual + ' .proyectoEncabezado').attr('id', arrProyecto.id)
  // console.log(coloresConValores);
  $('#' + proyectoActual + ' #activoReq1')
    .attr('class', 'actNinguno')
    .text('0')
  $('#' + proyectoActual + ' #activoReq2')
    .attr('class', 'actNinguno')
    .text('0')
  $('#' + proyectoActual + ' #activoReq3')
    .attr('class', 'actNinguno')
    .text('0')
  for (let i = 0; i < coloresConValores.length; i++) {
    // console.log(i, `Color: ${coloresConValores[i].color}, Valor: ${coloresConValores[i].valor}`);
    switch (coloresConValores[i].color) {
      case 'amarillo':
        laClase = 'actPersonalCalificado'
        break
      case 'naranjas':
        laClase = 'actAnalistas'
        break
      case 'verdes':
        laClase = 'actFlujoDeEfectivo'
        break
      case 'azules':
        laClase = 'actTransporteYMaquinaria'
        break
      case 'rojos':
        laClase = 'actTecnologia'
        break
      case 'morados':
        laClase = 'actCreditoEInversion'
        break
    }
    $('#' + proyectoActual + ' #activoReq' + (i + 1))
      .attr('class', '')
      .text(coloresConValores[i].valor)
      .addClass(laClase)
    if (i == 0) {
      activoAsignadoTmp = proyectos[proyectoNum].activoAsignado1
    }
    if (i == 1) {
      activoAsignadoTmp = proyectos[proyectoNum].activoAsignado2
    }
    if (i == 2) {
      activoAsignadoTmp = proyectos[proyectoNum].activoAsignado3
    }
    $('#' + proyectoActual + ' #activoAsignado' + (i + 1))
      .attr('class', '')
      .text(activoAsignadoTmp)
      .addClass(laClase)
  }
}

/**
 * Pone los datos del proyecto dado (id y proyecto_XX) en el proyecto chico seleccionado.
 * @param {number} proyectoNum - El número del proyecto a llenar.
 * @param {string} proyectoId - El Id del proyecto (proyecto_X), que es la posicion.
 */
function llenaProyectoChico2(proyectoNum, proyectoId) {
  console.log('Llenando proyecto chico ', proyectoNum)
  const colores = [
    'amarillo',
    'naranjas',
    'verdes',
    'azules',
    'rojos',
    'morados',
  ]
  arrProyecto = proyectos[proyectoNum]
  console.log(
    'Este ID:',
    arrProyecto.id,
    proyectos[proyectoNum].id,
    proyectos[proyectoNum].nombreProyecto
  )
  // ultimoProyectoLlenado++
  // proyectoActual = proyectoId
  $('#' + proyectoId).attr('elid', arrProyecto.id - 1)
  const coloresNoNulos = colores.filter((color) => arrProyecto[color] !== null)
  const coloresConValores = colores
    .filter((color) => arrProyecto[color] !== null)
    .map((color) => ({
      color,
      valor: arrProyecto[color],
    }))
  // console.log(coloresNoNulos)
  // console.log(coloresConValores)
  console.log(
    proyectoId,
    proyectos[proyectoNum].nombreProyecto,
    proyectos[proyectoNum].dificultad
  )
  let signoPuntosGanados = '+'
  let signoPuntosPerdidos = '-'
  if (proyectos[proyectoNum].puntosGanados == 0) {
    signoPuntosGanados = ''
  } else {
    signoPuntosGanados = '+'
  }
  if (proyectos[proyectoNum].puntosPerdidos == 0) {
    signoPuntosPerdidos = ''
  } else {
    signoPuntosPerdidos = '-'
  }
  const penalizacionFormateada = new Intl.NumberFormat('es-MX', {
    style: 'decimal',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(proyectos[proyectoNum].penalizacion)

  const losPuntos = `${proyectos[proyectoNum].potencial} | ${penalizacionFormateada}`

  $('#' + proyectoId).attr('estatus', proyectos[proyectoNum].estatus)
  $('#' + proyectoId + ' .proyectoEncabezado').attr(
    'estatus',
    proyectos[proyectoNum].estatus
  )
  if (proyectos[proyectoNum].estatus == 'Completado') {
    $('#' + proyectoId).css('background-color', 'lightgray')
  }

  $('#' + proyectoId + ' #proyectoNombre').text(
    proyectos[proyectoNum].nombreProyecto
  )
  $('#' + proyectoId + ' #proyectoDepto')
    .text(proyectos[proyectoNum].departamento)
    .removeClass('dificultad1 dificultad2 dificultad3')
  $('#' + proyectoId + ' #proyectoDescripcion').text(
    proyectos[proyectoNum].descripcion
  )
  $('#' + proyectoId + ' #recursosManto').text(
    'MANTENIMIENTO ' + proyectos[proyectoNum].mantenimiento
  )
  $('#' + proyectoId + ' #puntos')
    .text(losPuntos)
    .removeClass('dificultad1 dificultad2 dificultad3')
    .addClass('dificultad' + proyectos[proyectoNum].dificultad)
  $('#' + proyectoId + ' .proyectoEncabezado').attr('id', arrProyecto.id)
  // console.log(coloresConValores);
  $('#' + proyectoId + ' #activoReq1')
    .attr('class', 'actNinguno')
    .text('0')
  $('#' + proyectoId + ' #activoReq2')
    .attr('class', 'actNinguno')
    .text('0')
  $('#' + proyectoId + ' #activoReq3')
    .attr('class', 'actNinguno')
    .text('0')
  for (let i = 0; i < coloresConValores.length; i++) {
    // console.log(i, `Color: ${coloresConValores[i].color}, Valor: ${coloresConValores[i].valor}`);
    switch (coloresConValores[i].color) {
      case 'amarillo':
        laClase = 'actPersonalCalificado'
        break
      case 'naranjas':
        laClase = 'actAnalistas'
        break
      case 'verdes':
        laClase = 'actFlujoDeEfectivo'
        break
      case 'azules':
        laClase = 'actTransporteYMaquinaria'
        break
      case 'rojos':
        laClase = 'actTecnologia'
        break
      case 'morados':
        laClase = 'actCreditoEInversion'
        break
    }
    $('#' + proyectoId + ' #activoReq' + (i + 1))
      .attr('class', '')
      .text(coloresConValores[i].valor)
      .addClass(laClase)
    if (i == 0) {
      activoAsignadoTmp = proyectos[proyectoNum].activoAsignado1
    }
    if (i == 1) {
      activoAsignadoTmp = proyectos[proyectoNum].activoAsignado2
    }
    if (i == 2) {
      activoAsignadoTmp = proyectos[proyectoNum].activoAsignado3
    }
    $('#' + proyectoId + ' #activoAsignado' + (i + 1))
      .attr('class', '')
      .text(activoAsignadoTmp)
      .addClass(laClase)
  }
}

/**
 * Pone los "siguientes" proyectos en el renglon de deptos chicos.
 */
function llenaSiguienteProyectoChico() {
  proyectoNum = 0 // Pone los datos del primer proyecto siempre.
  console.log('Llenando proyectos ', proyectoNum)
  const colores = [
    'amarillo',
    'naranjas',
    'verdes',
    'azules',
    'rojos',
    'morados',
  ]
  arrProyecto = siguientesProyectos[proyectoNum]
  console.log('siguientesProyectos:', siguientesProyectos)
  console.log('Este ID:', arrProyecto.id, siguientesProyectos[proyectoNum].id)
  ultimoProyectoLlenado++
  proyectoActual = 'proyecto_' + ultimoProyectoLlenado
  $('#' + proyectoActual).attr('elid', arrProyecto.id - 1)
  const coloresNoNulos = colores.filter((color) => arrProyecto[color] !== null)
  const coloresConValores = colores
    .filter((color) => arrProyecto[color] !== null)
    .map((color) => ({
      color,
      valor: arrProyecto[color],
    }))
  // console.log(coloresNoNulos)
  // console.log(coloresConValores)
  // console.log(proyectoActual, siguientesProyectos[proyectoNum].nombreProyecto, siguientesProyectos[proyectoNum].dificultad)

  let signoPuntosGanados = '+'
  let signoPuntosPerdidos = '-'
  if (siguientesProyectos[proyectoNum].puntosGanados == 0) {
    signoPuntosGanados = ''
  } else {
    signoPuntosGanados = '+'
  }
  if (siguientesProyectos[proyectoNum].puntosPerdidos == 0) {
    signoPuntosPerdidos = ''
  } else {
    signoPuntosPerdidos = '-'
  }

  const penalizacionFormateada = new Intl.NumberFormat('es-MX', {
    style: 'decimal',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(siguientesProyectos[proyectoNum].penalizacion)

  const losPuntos = `${siguientesProyectos[proyectoNum].potencial} | ${penalizacionFormateada}`

  $('#' + proyectoActual + ' #proyectoNombre').text(
    siguientesProyectos[proyectoNum].nombreProyecto
  )

  $('#' + proyectoActual + ' #proyectoDepto')
    .text(siguientesProyectos[proyectoNum].departamento)
    .removeClass('dificultad1 dificultad2 dificultad3')
  $('#' + proyectoActual + ' #proyectoDescripcion').text(
    siguientesProyectos[proyectoNum].descripcion
  )
  $('#' + proyectoActual + ' #recursosManto').text(
    'MANTENIMIENTO ' + siguientesProyectos[proyectoNum].mantenimiento
  )
  $('#' + proyectoActual + ' #puntos')
    .text(losPuntos)
    .removeClass('dificultad1 dificultad2 dificultad3')
    .addClass('dificultad' + siguientesProyectos[proyectoNum].dificultad)
  $('#' + proyectoActual + ' .proyectoEncabezado').attr('id', arrProyecto.id)
  $('#' + proyectoActual + ' #activoReq1')
    .attr('class', 'actNinguno')
    .text('0')
  $('#' + proyectoActual + ' #activoReq2')
    .attr('class', 'actNinguno')
    .text('0')
  $('#' + proyectoActual + ' #activoReq3')
    .attr('class', 'actNinguno')
    .text('0')
  // console.log(coloresConValores);
  for (let i = 0; i < coloresConValores.length; i++) {
    // console.log(i, `Color: ${coloresConValores[i].color}, Valor: ${coloresConValores[i].valor}`);
    switch (coloresConValores[i].color) {
      case 'amarillo':
        laClase = 'actPersonalCalificado'
        break
      case 'naranjas':
        laClase = 'actAnalistas'
        break
      case 'verdes':
        laClase = 'actFlujoDeEfectivo'
        break
      case 'azules':
        laClase = 'actTransporteYMaquinaria'
        break
      case 'rojos':
        laClase = 'actTecnologia'
        break
      case 'morados':
        laClase = 'actCreditoEInversion'
        break
    }
    $('#' + proyectoActual + ' #activoReq' + (i + 1))
      .attr('class', '')
      .text(coloresConValores[i].valor)
      .addClass(laClase)
    if (i == 0) {
      activoAsignadoTmp = siguientesProyectos[proyectoNum].activoAsignado1
    }
    if (i == 1) {
      activoAsignadoTmp = siguientesProyectos[proyectoNum].activoAsignado2
    }
    if (i == 2) {
      activoAsignadoTmp = siguientesProyectos[proyectoNum].activoAsignado3
    }
    $('#' + proyectoActual + ' #activoAsignado' + (i + 1))
      .attr('class', '')
      .text(activoAsignadoTmp)
      .addClass(laClase)
  }
  // Quitamos el proyecto actual del arreglo siguientesProyectos.
  siguientesProyectos.splice(0, 1)
  const esteEnProyectos = proyectos.filter(
    (proyecto) => proyecto.id === arrProyecto.id
  )
  // console.log("XXX", esteEnProyectos, arrProyecto.id)
  esteEnProyectos[0].estatus = 'En proceso'
  // console.log("PROYECTOS PENDIENTES_1", siguientesProyectos.length);
  // for (i = 0; i < siguientesProyectos.length; i++) {
  //     console.log(siguientesProyectos[i]['id'], siguientesProyectos[i]['nombreProyecto']);
  // }
}

/**
 * Redibuja todo el tablero de proyectos (grande y chicos) basado en el estado actual.
 */
function redibujarTablero() {
  console.log('Redibujando tablero de proyectos...')

  // 1. Determinar cuál será el nuevo proyecto grande.
  let nuevoProyectoGde = null
  // Prioridad 1: El que ya era grande, si sigue 'En proceso'.
  if (
    proyectoGdeActual !== '' &&
    proyectos[proyectoGdeActual] &&
    proyectos[proyectoGdeActual].estatus === 'En proceso'
  ) {
    nuevoProyectoGde = proyectos[proyectoGdeActual]
  } else {
    // Prioridad 2: El primer proyecto 'En proceso' que se encuentre.
    nuevoProyectoGde = proyectos.find((p) => p.estatus === 'En proceso')
  }

  // Prioridad 3: Si no hay ninguno 'En proceso', tomar el primero de la cola 'En siguientes'.
  if (!nuevoProyectoGde) {
    nuevoProyectoGde = proyectos.find((p) => p.estatus === 'En siguientes')
    if (nuevoProyectoGde) {
      let index = siguientesProyectos.findIndex(
        (p) => p.id === nuevoProyectoGde.id
      )
      if (index !== -1) {
        siguientesProyectos.splice(index, 1)
        sincronizarColaSiguientes()
      }
    }
  }

  // 2. Limpiar todos los slots de proyectos chicos.
  for (let i = 1; i <= 7; i++) {
    limpiaProyectoChico('proyecto_' + i)
  }
  ultimoProyectoLlenado = 0 // Resetear contador

  // 3. Llenar o limpiar el proyecto grande.
  if (nuevoProyectoGde) {
    llenaProyectoGde(nuevoProyectoGde.id)
  } else {
    limpiarProyectoGde()
    proyectoGdeActual = '' // Asegurarse de que el ID del proyecto grande se limpie.
  }

  // 4. Llenar los proyectos chicos con los restantes 'En proceso'.
  const idProyectoGde = nuevoProyectoGde ? nuevoProyectoGde.id : -1
  const proyectosEnTableroChico = proyectos.filter(
    (p) => p.estatus === 'En proceso' && p.id !== idProyectoGde
  )

  proyectosEnTableroChico.forEach((proyecto) => {
    llenaProyectoChico(proyecto.id - 1)
  })

  // 5. Asegurarse de que la cola de 'siguientesProyectos' esté actualizada.
  obtenerProyectosPendientes()
}

/**
 * Limpia la vista del proyecto grande.
 */
function limpiarProyectoGde() {
  $('#TablaProyectoGde').attr('num', '').css('background-color', 'white')
  $('#nombreProyectoGde').html('')
  $('#descripcionProyectoGde').html('')
  $('#TablaProyectoGde #puntosGanados').html('')
  $('#puntosPerdidos').html('')
  $('#imagenProyectoGde').attr('src', '')

  for (let i = 1; i <= 3; i++) {
    $('#activoReqProyectoNom' + i)
      .attr('class', 'actNinguno')
      .text('')
    $('#activoReqProyectoCantX' + i).text('')
    $('#activoReqProyectoCant' + i)
      .attr('class', 'actNinguno')
      .text('')
  }
  $('#mantoGde').text('MANTENIMIENTO')
}

/**
 * Checks if the current project is completed and updates its status and the UI accordingly.
 */
function checkProjectCompletion() {
  // If the project is already completed, do nothing.
  if (proyectos[proyectoGdeActual].estatus === 'Completado') {
    return
  }

  if (
    parseInt($('#activoReqProyectoCantX1').text()) ==
      parseInt(proyectos[proyectoGdeActual].activoAsignado1) &&
    parseInt($('#activoReqProyectoCantX2').text()) ==
      parseInt(proyectos[proyectoGdeActual].activoAsignado2) &&
    parseInt($('#activoReqProyectoCantX3').text()) ==
      parseInt(proyectos[proyectoGdeActual].activoAsignado3)
  ) {
    console.log('Ya se llenaron todos los activos del proyecto actual')
    // Cambiamos el estatus del proyecto grande a "Completado"
    proyectos[proyectoGdeActual].estatus = 'Completado'

    // $("[elid='" + proyectoGdeActual + "']").css("background-color", "lightgray");
    // $("[elid='" + proyectoGdeActual + "'] .proyectoEncabezado").attr("estatus", "Completado");
    // $("[elid='" + proyectoGdeActual + "']").attr("estatus", "Completado");
    $('#TablaProyectoGde').css('background-color', 'lightgray')
    $('#TablaProyectoGde').attr('estatus', 'Completado')
    $('#incidenciasTerminadas').text(contarIncidenciasCompletadas())
    $('#proyectosTerminados').text(contarProyectosCompletados())

    const quincenaActual = parseInt($('#etQuincena').val())
    proyectos[proyectoGdeActual].quincenaCompletado = quincenaActual

    // Determinamos y guardamos el trimestre en que se completó el proyecto
    if (quincenaActual >= 1 && quincenaActual <= 6) {
      proyectos[proyectoGdeActual].trimestreCompletado = 1
    } else if (quincenaActual >= 7 && quincenaActual <= 12) {
      proyectos[proyectoGdeActual].trimestreCompletado = 2
    } else if (quincenaActual >= 13 && quincenaActual <= 18) {
      proyectos[proyectoGdeActual].trimestreCompletado = 3
    } else if (quincenaActual >= 19 && quincenaActual <= 24) {
      proyectos[proyectoGdeActual].trimestreCompletado = 4
    }

    if (proyectos[proyectoGdeActual].ganancia != '') {
      // Si el proyecto grande se ha completado, mostramos un mensaje de éxito
      const ganancia = parseInt(proyectos[proyectoGdeActual].ganancia)
      const trimestre = proyectos[proyectoGdeActual].trimestreCompletado
      if (trimestre) arregloGeneral['trimestre' + trimestre] += ganancia

      let laCantidad = new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN',
        minimumFractionDigits: 0, // Mínimo 0 decimales
        maximumFractionDigits: 0, // Máximo 0 decimales
      }).format(proyectos[proyectoGdeActual].ganancia) // Salida: "$1,500.50" (Nota: México usa punto para miles)
      alert('¡Felicidades, sumaste ' + laCantidad + '!')
    }

    console.log(proyectos[proyectoGdeActual])
  } else {
    console.log('No se han llenado todos los activos del proyecto chico')
    console.log(
      parseInt($('#activoReqProyectoCantX1').text()),
      parseInt(proyectos[proyectoGdeActual].activoAsignado1)
    )
    console.log(
      parseInt($('#activoReqProyectoCantX2').text()),
      parseInt(proyectos[proyectoGdeActual].activoAsignado2)
    )
    console.log(
      parseInt($('#activoReqProyectoCantX3').text()),
      parseInt(proyectos[proyectoGdeActual].activoAsignado3)
    )
  }
}

$('.departamentos').click(function () {
  // console.log('id', this.id);
  llenaDepartamentoGde(this.id)
})

$('#quitarProyectoCompleto').dialog({
  autoOpen: false,
  modal: true,
  resizable: false,
  width: 300,
  height: 150,
  closeOnEscape: false,
  open: function (event, ui) {
    $('.ui-dialog-titlebar-close').hide()
  },
  buttons: {
    Cancelar: function () {
      console.log('Cancelar')
      $(this).dialog('close')
    },
    Quitar: function () {
      console.log('Quitar proyecto completo:', proyectoAQuitar)
      limpiaProyectoChico(proyectoAQuitar)
      let pAbiertos = traeProyectosAbiertos()
      for (let j = 1; j <= 7; j++) {
        if ('proyecto_' + j != proyectoAQuitar) {
          limpiaProyectoChico('proyecto_' + j)
        }
      }

      console.log('Proyectos abiertos:', pAbiertos)

      // limpiaProyectoChico("proyecto_2");
      // limpiaProyectoChico("proyecto_3");
      // limpiaProyectoChico("proyecto_4");
      // limpiaProyectoChico("proyecto_5");
      // limpiaProyectoChico("proyecto_6");
      // limpiaProyectoChico("proyecto_7");
      ultimoProyectoLlenado = 0
      // Usamos un bucle for para iterar sobre cada elemento del arreglo
      for (let i = 0; i < pAbiertos.length; i++) {
        llenaProyectoChico(parseInt(pAbiertos[i]))
      }
      $(this).dialog('close')

      obtenerProyectosPendientes()
    },
  },
})

function contarProyectosCompletados() {
  return (
    proyectos.filter(
      (proyecto) =>
        proyecto.estatus === 'Completado' &&
        proyecto.dificultad !== 'Incidencia'
    ).length +
    '/' +
    divisorDeProyectosTerminados
  )
}

function contarIncidenciasCompletadas() {
  return (
    proyectos.filter(
      (proyecto) =>
        proyecto.estatus === 'Completado' && proyecto.dificultad == 'Incidencia'
    ).length +
    '/' +
    divisorDeProyectosTerminados
  )
}

$('.proyectos').click(function () {
  console.log('id Grande:', $('#TablaProyectoGde').attr('num'))
  console.log('id Chico:', $(this).attr('elid'))
  console.log('Posicion Chico:', $(this).attr('id'))
  console.log('#########################################')
  console.log(contarProyectosCompletados())
  console.log(contarIncidenciasCompletadas())
  $('#incidenciasTerminadas').text(contarIncidenciasCompletadas())
  $('#proyectosTerminados').text(contarProyectosCompletados())
  let proyectoGdeId = $('#TablaProyectoGde').attr('num')
  let proyectoChicoId = $(this).attr('elid')
  let proyectoChicoPos = $(this).attr('id')

  if (proyectoChicoId === undefined || proyectoChicoId === null) {
    // Si no hay Id, no hacemos nada.
    console.log('No hay Id de proyecto chico, no se puede continuar.')
    return
  }

  console.log(proyectos[$(this).attr('elid')])
  console.log('Estatus:', $(this, '.proyectoEncabezado').attr('estatus'))
  if ($(this, '.proyectoEncabezado').attr('estatus') != 'Completado') {
    console.log('NO COMPLETADO')
    llenaProyectoGde(parseInt($(this).attr('elid')) + 1)
    llenaProyectoChico2(proyectoGdeId, proyectoChicoPos)
  } else {
    console.log('Proyecto ya completado')
    proyectoAQuitar = this.id
    console.log('Proyecto a quitar:', proyectoAQuitar)
    $('#quitarProyectoCompleto').dialog('open')
  }
  traeProyectosAbiertos()
})

function traeProyectosAbiertos() {
  // Selecciona el elemento con el ID "renglonProyectos"
  var renglonProyectos2 = $('#renglonProyectos2')

  // Selecciona todos los elementos con la clase "proyectos" dentro de "renglonProyectos"
  var proyectos = renglonProyectos2.find('.proyectos')
  proyectosAbiertos = [] // Limpia el arreglo de proyectos abiertos

  // Itera sobre cada elemento con la clase "proyectos" y obtén el valor del atributo "elid"
  proyectos.each(function () {
    var elid = $(this).attr('elid')
    console.log('elid:', elid)
    if (elid !== null && elid !== undefined) {
      proyectosAbiertos.push(elid)
    }
  })
  console.log(proyectosAbiertos)
  return proyectosAbiertos
}

$('#RGR').click(function () {
  generarRecursosRandom()
})

/**
 * Encuentra el valor de un recurso en un arreglo
 */
function findArrayValue(arr, key) {
  return arr.find((recurso) => recurso.name === key)?.value
}

/**
 * Cambia el valor de un recurso en un arreglo
 */
function setArrayValue(arr, key, value) {
  console.log(`[setArrayValue] -> Intentando cambiar '${key}' a '${value}'`)
  let itemToUpdate = arr.find((item) => item.name === key)
  if (itemToUpdate) {
    itemToUpdate.value = value // Nuevo valor
    console.log(
      `[setArrayValue] <- ✅ Éxito. '${key}' ahora es '${itemToUpdate.value}'`
    )
  } else {
    console.error(
      `[setArrayValue] <- ❌ ERROR: No se encontró la llave '${key}' en el arreglo.`
    )
  }
}

/**
 * Encuentra el nombre de un recurso en un arreglo, teniendo el valor.
 */
function findArrayElementName(arr, value) {
  for (const element of arr) {
    if (element.value === value) {
      return element.name
    }
  }
  return null // Si no se encuentra el valor, devuelve null o un valor predeterminado
}

/**
 * Genera 3 recursos aleatorios para asignar a un departamento.
 */
function generarRecursosRandom() {
  recPersonal = 0
  recTiempo = 0
  recCapital = 0

  const resources = [
    {
      limit: 30,
      name: 'Personal',
      img: 'personalCH.png',
      counter: () => recPersonal++,
    },
    {
      limit: 60,
      name: 'Tiempo',
      img: 'tiempoCH.png',
      counter: () => recTiempo++,
    },
    {
      limit: 90,
      name: 'Capital',
      img: 'capitalCH.png',
      counter: () => recCapital++,
    },
  ]

  // Define cuántos recursos generar. Por defecto 3.
  let cantidadRecursos = 3
  if (
    // Si finanzas tiene habilidad especial, aqui se le da.
    deptoActual == 'Finanzas' &&
    findArrayValue(arreglosDeptos['arrFinanzas'], 'accionEspecialQuincenal') ===
      'Tener 1 recurso extra (4 recursos)'
  ) {
    cantidadRecursos = 4
  } else {
    if (document.getElementById('recRand4')) {
      document.getElementById('recRand4').innerHTML = ''
    }
  }

  console.log('cantidadRecursos', cantidadRecursos)
  for (let i = 1; i <= cantidadRecursos; i++) {
    const thisRand = getRandomIntInclusive(1, 90)
    let chosenResource

    if (thisRand <= resources[0].limit) {
      chosenResource = resources[0]
    } else if (thisRand <= resources[1].limit) {
      chosenResource = resources[1]
    } else {
      chosenResource = resources[2]
    }

    chosenResource.counter()
    // Validamos que el elemento HTML exista antes de intentar escribir en él
    let elementoDestino = document.getElementById(`recRand${i}`)
    if (elementoDestino) {
      elementoDestino.innerHTML = `<img src='img/${chosenResource.img}' width='50'>`
    }
  }

  // $("#asignarRecursos").removeAttr("disabled");
  $('#asignarRecursos').button('enable')
  // console.log("HABILITAMOS EL BOTON DE ASIGNAR RECURSOS")
  // console.log("Personal: " + recPersonal + " Tiempo: " + recTiempo + " Capital: " + recCapital);

  if (
    habilidadesAcreditadasActivas == true &&
    habilidadAcreditadaEnEspera == ''
  ) {
    // Filtrar las claves de los arreglos que contienen un elemento con 'departamentoAsignado' = ''
    let filteredKeys = Object.keys(arreglosCapacitaciones).filter((key) =>
      arreglosCapacitaciones[key].some(
        (item) => item.name === 'departamentoAsignado' && item.value == ''
      )
    )

    habilidadesAcreditadasDisponibles = parseInt(filteredKeys.length)
    console.log(
      'habilidades acreditadas disponibles: ',
      habilidadesAcreditadasDisponibles
    )
    // Si no hay arreglos que cumplan con la condición, retornar null
    if (filteredKeys.length === 0) {
      return null
    }

    // Obtener un índice aleatorio dentro del rango de las claves filtradas
    let randomIndex = Math.floor(Math.random() * filteredKeys.length)

    // Obtener el nombre del arreglo al azar
    let randomKey = filteredKeys[randomIndex]

    // changeDepartamentoAsignado(arreglosCapacitaciones, randomKey, 'En espera')
    habilidadAcreditadaEnEspera = randomKey
    $('#tablaHabilidadesAcreditadas').attr('actual', randomKey)
    $('#haNombre').text(
      findArrayValue(arreglosCapacitaciones[randomKey], 'nombre') +
        ' (' +
        findArrayValue(arreglosCapacitaciones[randomKey], 'tipoRecurso').charAt(
          0
        ) +
        ')'
    )
    $('#haCosto').text(
      findArrayValue(arreglosCapacitaciones[randomKey], 'costoTiempo') +
        'T + ' +
        findArrayValue(arreglosCapacitaciones[randomKey], 'costoPersonal') +
        'P + ' +
        findArrayValue(arreglosCapacitaciones[randomKey], 'costoCapital') +
        'C'
    )

    console.log(randomKey, arreglosCapacitaciones[randomKey])
  }
}

/**
 * Asigna los recursos al departamento actual (Grande)
 */
$('#asignarRecursos').click(function () {
  asignarRecursos()
  // $("#asignarRecursos").attr("disabled", "disabled");
  $('#asignarRecursos').button('disable')
  document.getElementById('recRand1').innerHTML = ''
  document.getElementById('recRand2').innerHTML = ''
  document.getElementById('recRand3').innerHTML = ''
  if (document.getElementById('recRand4')) {
    document.getElementById('recRand4').innerHTML = ''
  }
  // console.log("DESHABILITAMOS EL BOTON DE ASIGNAR RECURSOS")
})

$('#accionGestionarProyecto').click(function () {
  // for (i = 0; i < 7; i++) {
  //     if($("#proyecto_" + (i + 1) + " #proyectoNombre").text() == ""){
  if (ultimoProyectoLlenado < 7) {
    llenaSiguienteProyectoChico()
  }
  //     break;
  // }
  // console.log($("#proyecto_" + (i + 1) + " #proyectoNombre").text());
  // }
})

$('#accionComprarCapacitacion').click(function () {
  confirm(
    '¿Estás seguro de que quieres comprar la habilidad?',
    function (result) {
      if (result) {
        let tiempoRequerido = findArrayValue(
          arreglosCapacitaciones[habilidadAcreditadaEnEspera],
          'costoTiempo'
        )
        let personalRequerido = findArrayValue(
          arreglosCapacitaciones[habilidadAcreditadaEnEspera],
          'costoPersonal'
        )
        let capitalRequerido = findArrayValue(
          arreglosCapacitaciones[habilidadAcreditadaEnEspera],
          'costoCapital'
        )
        let beneficio = findArrayValue(
          arreglosCapacitaciones[habilidadAcreditadaEnEspera],
          'beneficio'
        )
        let tipoRecurso = findArrayValue(
          arreglosCapacitaciones[habilidadAcreditadaEnEspera],
          'tipoRecurso'
        )
        let tipo = findArrayValue(
          arreglosCapacitaciones[habilidadAcreditadaEnEspera],
          'tipo'
        )
        let tiempoActualx = parseInt($('#' + deptoActual + ' #tiempoCh').text())
        let personalActualx = parseInt(
          $('#' + deptoActual + ' #personalCh').text()
        )
        let capitalActualx = parseInt(
          $('#' + deptoActual + ' #capitalCh').text()
        )
        let tiempoActual = parseInt(
          $('#' + deptoActual + ' #recursoDispTiempoGde').text()
        )
        let personalActual = parseInt(
          $('#' + deptoActual + ' #recursoDispPersonalGde').text()
        )
        let capitalActual = parseInt(
          $('#' + deptoActual + ' #recursoDispCapitalGde').text()
        )
        // console.log("tiempoActual", tiempoActual, "personalActual", personalActual, "capitalActual", capitalActual);
        console.log('beneficio', beneficio, 'tipoRecurso', tipoRecurso)
        console.log(
          'habilidadTiempo',
          typeof findArrayValue(
            arreglosDeptos['arr' + deptoActual],
            'habilidadTiempo'
          )
        )
        console.log(
          'habilidadPersonal',
          typeof findArrayValue(
            arreglosDeptos['arr' + deptoActual],
            'habilidadPersonal'
          )
        )
        console.log(
          'habilidadCapital',
          typeof findArrayValue(
            arreglosDeptos['arr' + deptoActual],
            'habilidadCapital'
          )
        )

        if (tipoRecurso == 'Capital') {
          beneficioCapital = beneficio
        } else if (tipoRecurso == 'Tiempo') {
          beneficioTiempo = beneficio
        } else if (tipoRecurso == 'Personal') {
          beneficioPersonal = beneficio
        }
        console.log(
          'BeneficioT:',
          beneficioTiempo,
          'BeneficioP:',
          beneficioPersonal,
          'BeneficioC:',
          beneficioCapital
        )
        console.log(
          'TiempoActual:',
          tiempoActual,
          'PersonalActual:',
          personalActual,
          'CapitalActual:',
          capitalActual
        )
        if (
          tiempoActual >= tiempoRequerido &&
          personalActual >= personalRequerido &&
          capitalActual >= capitalRequerido
        ) {
          if (
            tipoRecurso == 'Tiempo' &&
            typeof findArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadTiempo'
            ) == 'string'
          ) {
            alert(
              'Solo se puede comprar 1 habilidad de tiempo por departamento'
            )
            console.log(
              'No se pueden comprar más capacitaciones, ya no hay espacio'
            )
            return
          }
          if (
            tipoRecurso == 'Personal' &&
            typeof findArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadPersonal'
            ) == 'string'
          ) {
            alert(
              'Solo se puede comprar 1 habilidad de personal por departamento'
            )
            console.log(
              'No se pueden comprar más capacitaciones, ya no hay espacio'
            )
            return
          }
          if (
            tipoRecurso == 'Capital' &&
            typeof findArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadCapital'
            ) == 'string'
          ) {
            alert(
              'Solo se puede comprar 1 habilidad de capital por departamento'
            )
            console.log(
              'No se pueden comprar más capacitaciones, ya no hay espacio'
            )
            return
          }

          if (tipo == 'HH') {
            tipo = 'Habilidad Humana'
          }
          if (tipo == 'HC') {
            tipo = 'Habilidad Conceptual'
          }
          if (tipo == 'HT') {
            tipo = 'Habilidad Técnica'
          }

          if ($('#habilidadesAcreditadasGde1').text() == '') {
            $('#habilidadesAcreditadasGde1').html(
              tipo +
                '<br>' +
                findArrayValue(
                  arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                  'nombre'
                ) +
                ', ' +
                beneficio +
                tipoRecurso.charAt(0).toUpperCase()
            )
            $('#' + deptoActual + ' #habilidadesAcreditadasCh1').html(
              tipo +
                '<br>' +
                findArrayValue(
                  arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                  'nombre'
                ) +
                ', ' +
                beneficio +
                tipoRecurso.charAt(0).toUpperCase() +
                '<br><br>'
            )
          } else if ($('#habilidadesAcreditadasGde2').text() == '') {
            $('#habilidadesAcreditadasGde2').html(
              tipo +
                '<br>' +
                findArrayValue(
                  arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                  'nombre'
                ) +
                ', ' +
                beneficio +
                tipoRecurso.charAt(0).toUpperCase()
            )
            $('#' + deptoActual + ' #habilidadesAcreditadasCh2').html(
              tipo +
                '<br>' +
                findArrayValue(
                  arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                  'nombre'
                ) +
                ', ' +
                beneficio +
                tipoRecurso.charAt(0).toUpperCase() +
                '<br><br>'
            )
          } else if ($('#habilidadesAcreditadasGde3').text() == '') {
            $('#habilidadesAcreditadasGde3').html(
              tipo +
                '<br>' +
                findArrayValue(
                  arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                  'nombre'
                ) +
                ', ' +
                beneficio +
                tipoRecurso.charAt(0).toUpperCase()
            )
            $('#' + deptoActual + ' #habilidadesAcreditadasCh3').html(
              tipo +
                '<br>' +
                findArrayValue(
                  arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                  'nombre'
                ) +
                ', ' +
                beneficio +
                tipoRecurso.charAt(0).toUpperCase()
            )
          } else {
            alert('No se pueden comprar más capacitaciones, ya no hay espacio')
            console.log(
              'No se pueden comprar más capacitaciones, ya no hay espacio'
            )
            return
          }
          // Modificamos los recursos del arreglo del departamento actual.
          setArrayValue(
            arreglosDeptos['arr' + deptoActual],
            'recursoTiempo',
            tiempoActual - tiempoRequerido
          )
          console.log('Actualizamos recursos de tiempo CH')
          $('#' + deptoActual + ' #recursoDispTiempoGde').text(
            tiempoActual - tiempoRequerido
          )
          setArrayValue(
            arreglosDeptos['arr' + deptoActual],
            'recursoPersonal',
            personalActual - personalRequerido
          )
          console.log('Actualizamos recursos de personal CH')
          $('#' + deptoActual + ' #recursoDispPersonalGde').text(
            personalActual - personalRequerido
          )
          setArrayValue(
            arreglosDeptos['arr' + deptoActual],
            'recursoCapital',
            capitalActual - capitalRequerido
          )
          console.log('Actualizamos recursos de capial CH')
          $('#' + deptoActual + ' #recursoDispCapitalGde').text(
            capitalActual - capitalRequerido
          )
          if (tipoRecurso == 'Tiempo') {
            setArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadTiempo',
              habilidadAcreditadaEnEspera
            )
          } else if (tipoRecurso == 'Personal') {
            setArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadPersonal',
              habilidadAcreditadaEnEspera
            )
          } else if (tipoRecurso == 'Capital') {
            setArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadCapital',
              habilidadAcreditadaEnEspera
            )
          }

          changeDepartamentoAsignado(
            arreglosCapacitaciones,
            habilidadAcreditadaEnEspera,
            deptoActual
          )

          console.log(
            'Nuevos datos del arreglo',
            arreglosDeptos['arr' + deptoActual]
          )
          console.log(
            'habilidadTiempo',
            findArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadTiempo'
            )
          )
          console.log(
            'habilidadPersonal',
            findArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadPersonal'
            )
          )
          console.log(
            'habilidadCapital',
            findArrayValue(
              arreglosDeptos['arr' + deptoActual],
              'habilidadCapital'
            )
          )

          // Modificamos los recursos del departamento actual (Grande)
          $('#recursoDispTiempoGde').text(tiempoActual - tiempoRequerido)
          $('#recursoDispPersonalGde').text(personalActual - personalRequerido)
          $('#recursoDispCapitalGde').text(capitalActual - capitalRequerido)
          // Modificamos los recursos del departamento actual (Chico)
          $('#' + deptoActual + ' #tiempoCh').text(
            tiempoActual - tiempoRequerido
          )
          $('#' + deptoActual + ' #personalCh').text(
            personalActual - personalRequerido
          )
          $('#' + deptoActual + ' #capitalCh').text(
            capitalActual - capitalRequerido
          )
          $('#tablaHabilidadesAcreditadas').attr('actual', '')
          if (habilidadesAcreditadasDisponibles > 0) {
            habilidadesAcreditadasDisponibles--
          }
          $('#haNombre').text(
            'Disponibles: ' + habilidadesAcreditadasDisponibles
          )
          $('#haCosto').text('')
          habilidadAcreditadaEnEspera = ''
        } else {
          console.log(
            'No se puede comprar la capacitacion, no hay recursos suficientes'
          )
          alert(
            'No se puede comprar la capacitacion, no hay recursos suficientes'
          )
        }

        console.log(
          'tiempoActual',
          tiempoActual,
          'personalActual',
          personalActual,
          'capitalActual',
          capitalActual
        )
        console.log(
          'tiempoRequerido',
          tiempoRequerido,
          'personalRequerido',
          personalRequerido,
          'capitalRequerido',
          capitalRequerido
        )

        console.log(
          'habilidadAcreditadaEnEspera = ',
          habilidadAcreditadaEnEspera
        )
        tieneTresHabilidades(deptoActual)
        // if (tieneTresHabilidades(deptoActual)) {
        //   console.log('El departamento está lleno', deptoActual)
        //   alert('Ya tienes las 3 habilidades máximas permitidas.')
        // } else {
        //   console.log('El departamento está incompleto', deptoActual)
        //   alert('Faltan habilidades.')
        // }
      } else {
        // Si contesta que no, no hace nada.
        console.log('No se compró la habilidad')
        return
      }
    }
  )
})

$('#accionHabilidadEspecial').click(function () {
  if (typeof deptoActual === 'undefined' || !deptoActual) {
    alert('Primero selecciona un departamento.')
    return
  }

  let elArreglo = arreglosDeptos['arr' + deptoActual]
  let accionQuincenal = findArrayValue(elArreglo, 'accionEspecialQuincenal')

  if (!accionQuincenal || accionQuincenal === '') {
    alert(
      'El departamento seleccionado no tiene una habilidad especial disponible.'
    )
    return
  }

  if (deptoActual === 'Finanzas') {
    window.alert(
      'La habilidad especial de Finanzas (Tener 1 recurso extra) ya está activa y se aplica automáticamente al generar recursos aleatorios.'
    )
    return
  }

  let lastUsed =
    parseInt(findArrayValue(elArreglo, 'accionEspecialLastUsed')) || 0
  let periodicidad =
    parseInt(findArrayValue(elArreglo, 'accionEspecialPeriodicidad')) || 2
  let quincenaActual = parseInt($('#etQuincena').val()) || 1

  let puedeUsar = false
  if (lastUsed === 0) {
    puedeUsar = true
  } else if (quincenaActual >= lastUsed + periodicidad) {
    puedeUsar = true
  }

  if (puedeUsar) {
    let proximoUso = quincenaActual + periodicidad
    let nombreDepto = findArrayValue(elArreglo, 'nombre')
      .toLowerCase()
      .replace(/(?:^|\s)\S/g, function (a) {
        return a.toUpperCase()
      })
    let textoConfirmacion =
      '¿Quieres utilizar la acción especial del departamento "' +
      nombreDepto +
      '"?<br><br>' +
      'Acción: <b>' +
      accionQuincenal +
      '</b><br><br>' +
      '<small><i>Periodicidad: Cada ' +
      periodicidad +
      ' quincenas.</i><br>' +
      '<i>Si la usas ahora, podrás usarla de nuevo en la quincena <b>' +
      proximoUso +
      '</b>.</i></small>'

    // Preguntamos si quiere usarla usando la función confirm personalizada
    confirm(
      textoConfirmacion,
      function (result) {
        if (result) {
          console.log('Se activa la accion especial: ' + accionQuincenal)

          if (accionQuincenal === 'Generar un activo sin costo') {
            let tipoActivo1 = findArrayValue(elArreglo, 'activo1Tipo')
            let tipoActivo2 = findArrayValue(elArreglo, 'activo2Tipo')

            $('<div>¿Qué activo deseas generar sin costo?</div>').dialog({
              modal: true,
              title: 'Generar Activo',
              width: 450,
              open: function () {
                var $btnset = $(this)
                  .closest('.ui-dialog')
                  .find('.ui-dialog-buttonset')
                $btnset.css({
                  display: 'flex',
                  'flex-wrap': 'wrap',
                  'justify-content': 'center',
                  width: '100%',
                  float: 'none',
                })
                $btnset
                  .find('button:contains("Cancelar")')
                  .before('<div style="flex-basis: 100%; height: 15px;"></div>')

                var coloresMapa = {
                  PersonalCalificado: 'yellow',
                  Analistas: 'orange',
                  FlujoDeEfectivo: 'green',
                  TransporteYMaquinaria: 'blue',
                  Tecnologia: 'red',
                  CreditoEInversion: 'purple',
                }

                // Aplicar estilos directos para evitar que jQuery UI sobreescriba el fondo y el ancho
                $btnset.find('.act' + tipoActivo1).css({
                  width: 'auto',
                  padding: '10px 20px',
                  background: coloresMapa[tipoActivo1] || '',
                  color:
                    tipoActivo1 === 'PersonalCalificado' ||
                    tipoActivo1 === 'FlujoDeEfectivo'
                      ? 'black'
                      : 'white',
                })
                $btnset.find('.act' + tipoActivo2).css({
                  width: 'auto',
                  padding: '10px 20px',
                  background: coloresMapa[tipoActivo2] || '',
                  color:
                    tipoActivo2 === 'PersonalCalificado' ||
                    tipoActivo2 === 'FlujoDeEfectivo'
                      ? 'black'
                      : 'white',
                })
              },
              buttons: [
                {
                  text: tipoActivo1,
                  class: 'act' + tipoActivo1,
                  click: function () {
                    $(this).dialog('close')
                    generarActivo(1)
                  },
                },
                {
                  text: tipoActivo2,
                  class: 'act' + tipoActivo2,
                  click: function () {
                    $(this).dialog('close')
                    generarActivo(2)
                  },
                },
                {
                  text: 'Cancelar',
                  click: function () {
                    $(this).dialog('close')
                  },
                },
              ],
            })

            function generarActivo(num) {
              // Actualizamos lastUsed
              setArrayValue(elArreglo, 'accionEspecialLastUsed', quincenaActual)

              let activoKey = 'activo' + num
              let valorActual =
                parseInt(findArrayValue(elArreglo, activoKey)) || 0
              let nuevoValor = valorActual + 1
              setArrayValue(elArreglo, activoKey, nuevoValor)

              // Modificar la Vista (Chica)
              $('#' + deptoActual + ' #activoCh' + num).text(nuevoValor)

              // Modificar la Vista (Grande)
              $('#activoGde' + num).text(nuevoValor)

              var audio = new Audio('./Microwave_bell.wav')
              audio.play()

              window.alert('¡Activo generado con éxito!')

              if (typeof guardaSesion === 'function') {
                guardaSesion()
              }
            }
          } else if (accionQuincenal === 'Tener 1 acción extra (3)') {
            // Actualizamos lastUsed
            setArrayValue(elArreglo, 'accionEspecialLastUsed', quincenaActual)

            // Aquí el código de Marketing y Ventas: "Tener 1 acción extra (3)"
            window.alert('¡Acción especial activada (Marketing y Ventas)!')

            // Se guarda el avance
            if (typeof guardaSesion === 'function') {
              guardaSesion()
            }
          } else if (accionQuincenal === 'Ordenar los próximos 5 proyectos') {
            abrirDialogoOrdenarProyectos(elArreglo, quincenaActual)
          } else if (accionQuincenal === 'Omitir un mantenimiento') {
            // Actualizamos lastUsed
            setArrayValue(elArreglo, 'accionEspecialLastUsed', quincenaActual)

            // Aquí el código de Logística y Sistemas: "Omitir un mantenimiento"
            window.alert('¡Acción especial activada (Logística y Sistemas)!')

            // Se guarda el avance
            if (typeof guardaSesion === 'function') {
              guardaSesion()
            }
          } else if (
            accionQuincenal ===
            'Descartar un proyecto (se va al limbo con todo y activos)'
          ) {
            // Actualizamos lastUsed
            const proyectosEnProceso = proyectos.filter(
              (p) => p.estatus === 'En proceso'
            )

            if (proyectosEnProceso.length === 0) {
              alert('No hay proyectos en proceso para descartar.')
              return // No se usa la habilidad si no hay nada que descartar
            }

            // Crear y mostrar el diálogo de selección
            let dialogContent = $(
              '<div><p>Selecciona el proyecto a descartar:</p></div>'
            )
            let projectList = $('<form>')
            proyectosEnProceso.forEach((p) => {
              projectList.append(
                `<div style="display: flex; align-items: flex-start; margin: 8px 0; text-align: left;">
                    <input type="radio" id="proj-discard-${p.id}" name="proyectoADescartar" value="${p.id}" style="margin-top: 2px; flex-shrink: 0;">
                    <label for="proj-discard-${p.id}" style="margin-left: 8px; cursor: pointer;">
                        ${p.nombreProyecto} <span style="color: #555; font-size: 0.9em;">(${p.departamento})</span>
                    </label>
                 </div>`
              )
            })
            dialogContent.append(projectList)

            dialogContent.dialog({
              modal: true,
              title: 'Descartar Proyecto',
              width: 450,
              buttons: {
                Descartar: function () {
                  const selectedProjectId = $(
                    'input[name="proyectoADescartar"]:checked'
                  ).val()

                  if (!selectedProjectId) {
                    alert('Por favor, selecciona un proyecto.')
                    return
                  }

                  const proyectoADescartar = proyectos.find(
                    (p) => p.id == selectedProjectId
                  )
                  if (proyectoADescartar) {
                    proyectoADescartar.estatus = 'descartado'
                    setArrayValue(
                      elArreglo,
                      'accionEspecialLastUsed',
                      quincenaActual
                    )
                    redibujarTablero()
                    var audio = new Audio('./Microwave_bell.wav')
                    audio.play()
                    alert('¡Proyecto descartado con éxito!')
                    if (typeof guardaSesion === 'function') {
                      guardaSesion()
                    }
                  }
                  $(this).dialog('close')
                },
                Cancelar: function () {
                  $(this).dialog('close')
                },
              },
              close: function () {
                $(this).dialog('destroy').remove()
              },
            })
          } else {
            // Acción desconocida (o Finanzas si llegara hasta aquí por error, aunque se bloquea antes)
            window.alert(
              'Esta acción no está programada todavía: ' + accionQuincenal
            )
          }
        }
      },
      450 // Aumentamos el ancho de la ventana
    )
  } else {
    let quincenasRestantes = lastUsed + periodicidad - quincenaActual
    window.alert(
      'Aún no puedes usar la habilidad especial. Debes esperar ' +
        quincenasRestantes +
        ' quincena(s) más.'
    )
  }
})

$('#habilidadesAcreditadas').change(function () {
  if ($(this).is(':checked')) {
    habilidadesAcreditadasActivas = true
    console.log('habilidadesAcreditadasActivas = true')
  } else {
    habilidadesAcreditadasActivas = false
    console.log('habilidadesAcreditadasActivas = false')
  }
})

/**
 * Asigna los recursos al departamento actual (Grande)
 */
function asignarRecursos() {
  $('#recursoDispTiempoGde').text(
    parseInt($('#recursoDispTiempoGde').text()) + recTiempo
  )
  $('#recursoDispPersonalGde').text(
    parseInt($('#recursoDispPersonalGde').text()) + recPersonal
  )
  $('#recursoDispCapitalGde').text(
    parseInt($('#recursoDispCapitalGde').text()) + recCapital
  )
  // Asignamos los recursos al departamento actual (Chico)
  $('#' + deptoActual + ' #tiempoCh').text(
    parseInt($('#recursoDispTiempoGde').text())
  )
  $('#' + deptoActual + ' #personalCh').text(
    parseInt($('#recursoDispPersonalGde').text())
  )
  $('#' + deptoActual + ' #capitalCh').text(
    parseInt($('#recursoDispCapitalGde').text())
  )

  $('#' + deptoActual + ' .recursoDispTiempoGde').text(
    parseInt($('#recursoDispTiempoGde').text())
  )
  $('#' + deptoActual + ' .recursoDispPersonalGde').text(
    parseInt($('#recursoDispPersonalGde').text())
  )
  $('#' + deptoActual + ' .recursoDispCapitalGde').text(
    parseInt($('#recursoDispCapitalGde').text())
  )

  // Asignamos los recursos al departamento actual (Arreglo)
  setArrayValue(
    arreglosDeptos['arr' + deptoActual],
    'recursoTiempo',
    parseInt($('#recursoDispTiempoGde').text())
  )
  setArrayValue(
    arreglosDeptos['arr' + deptoActual],
    'recursoPersonal',
    parseInt($('#recursoDispPersonalGde').text())
  )
  setArrayValue(
    arreglosDeptos['arr' + deptoActual],
    'recursoCapital',
    parseInt($('#recursoDispCapitalGde').text())
  )

  console.log(arreglosDeptos['arr' + deptoActual])
}

/**
 * Asigna recursos al azar a los departamentos al inicio.
 */
function asignarRecursosInicial() {
  // Asignamos los recursos al departamento actual (Arreglo)
  setArrayValue(
    arreglosDeptos['arrRecursosHumanos'],
    'recursoTiempo',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrRecursosHumanos'],
    'recursoPersonal',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrRecursosHumanos'],
    'recursoCapital',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrOperaciones'],
    'recursoTiempo',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrOperaciones'],
    'recursoPersonal',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrOperaciones'],
    'recursoCapital',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrFinanzas'],
    'recursoTiempo',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrFinanzas'],
    'recursoPersonal',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrFinanzas'],
    'recursoCapital',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrMarketingYVentas'],
    'recursoTiempo',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrMarketingYVentas'],
    'recursoPersonal',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrMarketingYVentas'],
    'recursoCapital',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrInvestigacionYDesarrollo'],
    'recursoTiempo',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrInvestigacionYDesarrollo'],
    'recursoPersonal',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrInvestigacionYDesarrollo'],
    'recursoCapital',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrLogisticaYSistemas'],
    'recursoCapital',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrLogisticaYSistemas'],
    'recursoTiempo',
    Math.floor(Math.random() * 2) + 1
  )
  setArrayValue(
    arreglosDeptos['arrLogisticaYSistemas'],
    'recursoPersonal',
    Math.floor(Math.random() * 2) + 1
  )

  console.log(arreglosDeptos['arr' + deptoActual])
}

// Función para cambiar el valor del elemento 'departamentoAsignado' en un arreglo específico
function changeDepartamentoAsignado(obj, arrayName, newValue) {
  console.log(obj, arrayName, newValue)

  // Verificar si el arreglo existe en el objeto
  if (obj.hasOwnProperty(arrayName)) {
    // Buscar el elemento 'departamentoAsignado' en el arreglo
    let array = obj[arrayName]
    let departamentoAsignadoElement = array.find(
      (item) => item.name === 'departamentoAsignado'
    )

    // Si se encuentra el elemento, cambiar su valor
    if (departamentoAsignadoElement) {
      departamentoAsignadoElement.value = newValue
    } else {
      console.log('El elemento "departamentoAsignado" no existe en el arreglo.')
    }
  } else {
    console.log('El arreglo no existe en el objeto.')
  }
}

/**
 * Genera un numero radondom entre min y max
 */
function getRandomIntInclusive(min, max) {
  const minCeiled = Math.ceil(min)
  const maxFloored = Math.floor(max)
  return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled) // The maximum is inclusive and the minimum is inclusive
}

$('.draggable').draggable({
  start: function (event, ui) {
    // Obtener y guardar la posición original al iniciar el arrastre
    originalPosition = ui.position
  },
  revert: 'invalid', // Revierte si no se suelta en el área droppable
})

/**
 * Mueve recursos del departamento grande a un departamento chico
 */
$('.droppableRecursos').droppable({
  accept: '.recurso-item',
  drop: function (event, ui) {
    // Obtiene el texto del elemento draggable
    var droppedText = ui.draggable.text()
    var originalValue = parseInt(droppedText) || 0 // Convierte a número o usa 0 si no es un número
    var newValue = originalValue - 1
    // Restaura la posición original del div del recurso
    ui.draggable.css({
      top: originalPosition.top,
      left: originalPosition.left,
    })

    console.log(ui.draggable.attr('id'))

    if (
      ui.draggable.attr('id') == 'activoGde1' ||
      ui.draggable.attr('id') == 'activoGde2'
    ) {
      // Si se estan arrastrando activos, no hacemos nada.
      return
    }
    if (originalValue == 0) {
      // Si el texto era 0, no se puede restar 1
      return
    }
    // Actualiza el texto del elemento original
    ui.draggable.text(newValue)

    //Si los recsursos llegan a 0 se desactiva el draggable
    // if (newValue == 0) {
    //     ui.draggable.draggable("disable");;
    // }
    // console.log(ui.draggable.attr("id"));
    // Restamos los recursos al departamento grande y los asignamos al departamento chico
    var audio = new Audio('./Microwave_bell.wav')
    audio.play()
    if (ui.draggable.attr('id') == 'recursoDispTiempoGde') {
      // console.log($(this).attr("id") , " #tiempoCh");
      $('#' + $(this).attr('id') + ' #tiempoCh').text(
        parseInt($('#' + $(this).attr('id') + ' #tiempoCh').text()) + 1
      )
      setArrayValue(
        arreglosDeptos['arr' + $(this).attr('id')],
        'recursoTiempo',
        parseInt($('#' + $(this).attr('id') + ' #tiempoCh').text())
      )
      // console.log(arreglosDeptos['arr'+$(this).attr("id")]);
      setArrayValue(
        arreglosDeptos['arr' + deptoActual],
        'recursoTiempo',
        newValue
      ) // Actualizamos el valor en el departamento chico
      $('#' + deptoActual + ' #tiempoCh').text(newValue)
      // console.log(arreglosDeptos['arr'+deptoActual]);
    } else if (ui.draggable.attr('id') == 'recursoDispPersonalGde') {
      // console.log($(this).attr("id") , " #personalCh");
      $('#' + $(this).attr('id') + ' #personalCh').text(
        parseInt($('#' + $(this).attr('id') + ' #personalCh').text()) + 1
      )
      setArrayValue(
        arreglosDeptos['arr' + $(this).attr('id')],
        'recursoPersonal',
        parseInt($('#' + $(this).attr('id') + ' #personalCh').text())
      )
      // console.log(arreglosDeptos['arr'+$(this).attr("id")]);
      setArrayValue(
        arreglosDeptos['arr' + deptoActual],
        'recursoPersonal',
        newValue
      ) // Actualizamos el valor en el departamento chico
      $('#' + deptoActual + ' #personalCh').text(newValue)
      // console.log(arreglosDeptos['arr'+deptoActual]);
    } else if (ui.draggable.attr('id') == 'recursoDispCapitalGde') {
      // console.log($(this).attr("id") , " #capitalCh");
      $('#' + $(this).attr('id') + ' #capitalCh').text(
        parseInt($('#' + $(this).attr('id') + ' #capitalCh').text()) + 1
      )
      setArrayValue(
        arreglosDeptos['arr' + $(this).attr('id')],
        'recursoCapital',
        parseInt($('#' + $(this).attr('id') + ' #capitalCh').text())
      )
      // console.log(arreglosDeptos['arr'+$(this).attr("id")]);
      setArrayValue(
        arreglosDeptos['arr' + deptoActual],
        'recursoCapital',
        newValue
      )
      $('#' + deptoActual + ' #capitalCh').text(newValue) // Actualizamos el valor en el departamento chico
      // console.log(arreglosDeptos['arr'+deptoActual]);
    }
  },
})

/**
 * Mueve recursos del departamento grande a un departamento chico
 */
$('.droppableActivos').droppable({
  accept: '.activo-item',
  drop: function (event, ui) {
    // Obtiene el texto del elemento draggable
    var droppedText = ui.draggable.text()
    var originalValue = parseInt(droppedText) || 0 // Convierte a número o usa 0 si no es un número
    var newValue = originalValue - 1
    // Restaura la posición original del div del recurso
    ui.draggable.css({
      top: originalPosition.top,
      left: originalPosition.left,
    })

    let sourceDeptoId
    let elActivoX
    let isActivoGde = false
    const draggedId = ui.draggable.attr('id')

    if (draggedId === 'activoGde1' || draggedId === 'activoGde2') {
      sourceDeptoId = deptoActual
      elActivoX = draggedId === 'activoGde1' ? 'activo1' : 'activo2'
      isActivoGde = true
    } else if (draggedId === 'activoCh1' || draggedId === 'activoCh2') {
      sourceDeptoId = ui.draggable.closest('.departamentos').attr('id')
      elActivoX = draggedId === 'activoCh1' ? 'activo1' : 'activo2'
    } else {
      return
    }

    var audio = new Audio('./Microwave_bell.wav')
    audio.play()

    if (
      originalValue > 0 &&
      ui.draggable.hasClass('actPersonalCalificado') &&
      $('#activosProyectoGde .actPersonalCalificado').attr('num') != null
    ) {
      const elActivoDelProyecto = $(
        '#activosProyectoGde #activoReqProyectoCant' +
          $('#activosProyectoGde .actPersonalCalificado').attr('num')
      )
      max = proyectos[proyectoGdeActual].amarillo
      nuevoAsignado = parseInt(elActivoDelProyecto.text()) + 1
      console.log('max:', max)
      let elActNum = $('#activosProyectoGde .actPersonalCalificado').attr('num')
      console.log('elActNum:', elActNum)
      console.log('personal calificado')
      if (nuevoAsignado <= max) {
        console.log('Nuevo asignado', elActivoDelProyecto.text())
        console.log($('#activosProyectoGde .actPersonalCalificado').attr('num'))
        console.log('TEXTO:', elActivoDelProyecto.text())
        console.log($('#activosProyectoGde #activoReqProyectoCant1').attr('id'))
        elActivoDelProyecto
          .text(parseInt(elActivoDelProyecto.text()) + 1)
          .text()
        console.log(
          proyectos[proyectoGdeActual],
          'activoAsignado' + elActNum,
          parseInt(elActivoDelProyecto.text())
        )
        proyectos[proyectoGdeActual]['activoAsignado' + elActNum] = parseInt(
          elActivoDelProyecto.text()
        )
        console.log(
          'Nuevo valor:',
          proyectos[proyectoGdeActual]['activoAsignado' + elActNum]
        )
        setArrayValue(
          arreglosDeptos['arr' + sourceDeptoId],
          elActivoX,
          newValue
        )
        ui.draggable.text(newValue)
        if (isActivoGde) {
          $(
            '#' + sourceDeptoId + ' #' + elActivoX.replace('activo', 'activoCh')
          ).text(newValue)
        }
        checkProjectCompletion()
        console.log(arreglosDeptos['arr' + sourceDeptoId])
      }
    } else if (
      originalValue > 0 &&
      ui.draggable.hasClass('actAnalistas') &&
      $('#activosProyectoGde .actAnalistas').attr('num') != null
    ) {
      const elActivoDelProyecto = $(
        '#activosProyectoGde #activoReqProyectoCant' +
          $('#activosProyectoGde .actAnalistas').attr('num')
      )
      max = proyectos[proyectoGdeActual].naranjas
      nuevoAsignado = parseInt(elActivoDelProyecto.text()) + 1
      console.log('max:', max)
      console.log('analistas')
      if (nuevoAsignado <= max) {
        console.log($('#activosProyectoGde .actAnalistas').attr('num'))
        let elActNum = $('#activosProyectoGde .actAnalistas').attr('num')
        console.log('elActNum:', elActNum)
        console.log('personal calificado')
        console.log('Nuevo asignado', parseInt(elActivoDelProyecto.text()) + 1)
        console.log($('#activosProyectoGde .actAnalistas').attr('num'))
        console.log('elActivoDelProyecto.text:', elActivoDelProyecto.text())
        console.log($('#activosProyectoGde #activoReqProyectoCant1').attr('id'))
        elActivoDelProyecto
          .text(parseInt(elActivoDelProyecto.text()) + 1)
          .text()
        console.log(
          proyectos[proyectoGdeActual],
          'activoAsignado' + elActNum,
          parseInt(elActivoDelProyecto.text())
        )
        proyectos[proyectoGdeActual]['activoAsignado' + elActNum] = parseInt(
          elActivoDelProyecto.text()
        )
        console.log(
          'Nuevo valor:',
          proyectos[proyectoGdeActual]['activoAsignado' + elActNum]
        )
        setArrayValue(
          arreglosDeptos['arr' + sourceDeptoId],
          elActivoX,
          newValue
        )
        ui.draggable.text(newValue)
        if (isActivoGde) {
          $(
            '#' + sourceDeptoId + ' #' + elActivoX.replace('activo', 'activoCh')
          ).text(newValue)
        }
        checkProjectCompletion()
        console.log(arreglosDeptos['arr' + sourceDeptoId])
      }
    } else if (
      originalValue > 0 &&
      ui.draggable.hasClass('actFlujoDeEfectivo') &&
      $('#activosProyectoGde .actFlujoDeEfectivo').attr('num') != null
    ) {
      const elActivoDelProyecto = $(
        '#activosProyectoGde #activoReqProyectoCant' +
          $('#activosProyectoGde .actFlujoDeEfectivo').attr('num')
      )
      max = proyectos[proyectoGdeActual].verdes
      nuevoAsignado = parseInt(elActivoDelProyecto.text()) + 1
      console.log('max:', max)
      console.log('flujo efectivo')
      if (nuevoAsignado <= max) {
        let elActNum = $('#activosProyectoGde .actFlujoDeEfectivo').attr('num')
        console.log('elActNum:', elActNum)
        console.log('personal calificado')
        console.log($('#activosProyectoGde .actFlujoDeEfectivo').attr('num'))
        console.log('TEXTO:', elActivoDelProyecto.text())
        console.log($('#activosProyectoGde #activoReqProyectoCant1').attr('id'))
        elActivoDelProyecto
          .text(parseInt(elActivoDelProyecto.text()) + 1)
          .text()
        console.log(
          proyectos[proyectoGdeActual],
          'activoAsignado' + elActNum,
          parseInt(elActivoDelProyecto.text())
        )
        proyectos[proyectoGdeActual]['activoAsignado' + elActNum] = parseInt(
          elActivoDelProyecto.text()
        )
        console.log(
          'Nuevo valor:',
          proyectos[proyectoGdeActual]['activoAsignado' + elActNum]
        )
        setArrayValue(
          arreglosDeptos['arr' + sourceDeptoId],
          elActivoX,
          newValue
        )
        ui.draggable.text(newValue)
        if (isActivoGde) {
          $(
            '#' + sourceDeptoId + ' #' + elActivoX.replace('activo', 'activoCh')
          ).text(newValue)
        }
        checkProjectCompletion()
        console.log(arreglosDeptos['arr' + sourceDeptoId])
      }
    } else if (
      originalValue > 0 &&
      ui.draggable.hasClass('actCreditoEInversion') &&
      $('#activosProyectoGde .actCreditoEInversion').attr('num') != null
    ) {
      const elActivoDelProyecto = $(
        '#activosProyectoGde #activoReqProyectoCant' +
          $('#activosProyectoGde .actCreditoEInversion').attr('num')
      )
      max = proyectos[proyectoGdeActual].morados
      nuevoAsignado = parseInt(elActivoDelProyecto.text()) + 1
      console.log('max:', max)
      console.log('credito inversion')
      if (nuevoAsignado <= max) {
        let elActNum = $('#activosProyectoGde .actCreditoEInversion').attr(
          'num'
        )
        console.log('elActNum:', elActNum)
        console.log('personal calificado')
        console.log($('#activosProyectoGde .actCreditoEInversion').attr('num'))
        console.log('TEXTO:', elActivoDelProyecto.text())
        console.log($('#activosProyectoGde #activoReqProyectoCant1').attr('id'))
        elActivoDelProyecto
          .text(parseInt(elActivoDelProyecto.text()) + 1)
          .text()
        console.log(
          proyectos[proyectoGdeActual],
          'activoAsignado' + elActNum,
          parseInt(elActivoDelProyecto.text())
        )
        proyectos[proyectoGdeActual]['activoAsignado' + elActNum] = parseInt(
          elActivoDelProyecto.text()
        )
        console.log(
          'Nuevo valor:',
          proyectos[proyectoGdeActual]['activoAsignado' + elActNum]
        )
        setArrayValue(
          arreglosDeptos['arr' + sourceDeptoId],
          elActivoX,
          newValue
        )
        ui.draggable.text(newValue)
        if (isActivoGde) {
          $(
            '#' + sourceDeptoId + ' #' + elActivoX.replace('activo', 'activoCh')
          ).text(newValue)
        }
        checkProjectCompletion()
        console.log(arreglosDeptos['arr' + sourceDeptoId])
      }
    } else if (
      originalValue > 0 &&
      ui.draggable.hasClass('actTecnologia') &&
      $('#activosProyectoGde .actTecnologia').attr('num') != null
    ) {
      const elActivoDelProyecto = $(
        '#activosProyectoGde #activoReqProyectoCant' +
          $('#activosProyectoGde .actTecnologia').attr('num')
      )
      max = proyectos[proyectoGdeActual].rojos
      nuevoAsignado = parseInt(elActivoDelProyecto.text()) + 1
      console.log('max:', max)
      console.log('tecnologia')
      if (nuevoAsignado <= max) {
        let elActNum = $('#activosProyectoGde .actTecnologia').attr('num')
        console.log('elActNum:', elActNum)
        console.log('personal calificado')
        console.log($('#activosProyectoGde .actTecnologia').attr('num'))
        console.log('TEXTO:', elActivoDelProyecto.text())
        console.log($('#activosProyectoGde #activoReqProyectoCant1').attr('id'))
        elActivoDelProyecto
          .text(parseInt(elActivoDelProyecto.text()) + 1)
          .text()
        console.log(
          proyectos[proyectoGdeActual],
          'activoAsignado' + elActNum,
          parseInt(elActivoDelProyecto.text())
        )
        proyectos[proyectoGdeActual]['activoAsignado' + elActNum] = parseInt(
          elActivoDelProyecto.text()
        )
        console.log(
          'Nuevo valor:',
          proyectos[proyectoGdeActual]['activoAsignado' + elActNum]
        )
        setArrayValue(
          arreglosDeptos['arr' + sourceDeptoId],
          elActivoX,
          newValue
        )
        ui.draggable.text(newValue)
        if (isActivoGde) {
          $(
            '#' + sourceDeptoId + ' #' + elActivoX.replace('activo', 'activoCh')
          ).text(newValue)
        }
        checkProjectCompletion()
        console.log(arreglosDeptos['arr' + sourceDeptoId])
      }
    } else if (
      originalValue > 0 &&
      ui.draggable.hasClass('actTransporteYMaquinaria') &&
      $('#activosProyectoGde .actTransporteYMaquinaria').attr('num') != null
    ) {
      const elActivoDelProyecto = $(
        '#activosProyectoGde #activoReqProyectoCant' +
          $('#activosProyectoGde .actTransporteYMaquinaria').attr('num')
      )
      max = proyectos[proyectoGdeActual].azules
      nuevoAsignado = parseInt(elActivoDelProyecto.text()) + 1
      console.log('max:', max)
      console.log('transporte maquinaria')
      if (nuevoAsignado <= max) {
        let elActNum = $('#activosProyectoGde .actTransporteYMaquinaria').attr(
          'num'
        )
        console.log('elActNum:', elActNum)
        console.log('personal calificado')
        console.log(
          $('#activosProyectoGde .actTransporteYMaquinaria').attr('num')
        )
        console.log('TEXTO:', elActivoDelProyecto.text())
        console.log($('#activosProyectoGde #activoReqProyectoCant1').attr('id'))
        elActivoDelProyecto
          .text(parseInt(elActivoDelProyecto.text()) + 1)
          .text()
        console.log(
          proyectos[proyectoGdeActual],
          'activoAsignado' + elActNum,
          parseInt(elActivoDelProyecto.text())
        )
        proyectos[proyectoGdeActual]['activoAsignado' + elActNum] = parseInt(
          elActivoDelProyecto.text()
        )
        console.log(
          'Nuevo valor:',
          proyectos[proyectoGdeActual]['activoAsignado' + elActNum]
        )
        setArrayValue(
          arreglosDeptos['arr' + sourceDeptoId],
          elActivoX,
          newValue
        )
        ui.draggable.text(newValue)
        if (isActivoGde) {
          $(
            '#' + sourceDeptoId + ' #' + elActivoX.replace('activo', 'activoCh')
          ).text(newValue)
        }
        checkProjectCompletion()
        console.log(arreglosDeptos['arr' + sourceDeptoId])
      }
    }
  },
})

function obtenerProyectosPendientesXX(cuantos) {
  // Filtrar proyectos pendientes
  const proyectosPendientes = proyectos.filter(
    (proyecto) => proyecto.estatus === 'Pendiente'
  )
  // const proyectosPendientes = proyectos.filter(proyecto =>
  //     proyecto.estatus === "Pendiente" && proyecto.dificultad !== "Incidencia"
  // );
  // Si hay menos de 10 proyectos pendientes, retornar todos los disponibles
  if (proyectosPendientes.length <= cuantos) {
    return proyectosPendientes
  }
  // Seleccionar 10 proyectos aleatorios
  const resultado = []
  const proyectosDisponibles = [...proyectosPendientes]
  for (let i = 0; i < cuantos && proyectosDisponibles.length > 0; i++) {
    const randomIndex = Math.floor(Math.random() * proyectosDisponibles.length)
    resultado.push(proyectosDisponibles[randomIndex])
    proyectosDisponibles.splice(randomIndex, 1)
  }
  return resultado
}

/**
 * Pone en el arreglo proyectosPendientes, 7 proyectos al azar de los que están pendientes en el arreglo general.
 */
function obtenerProyectosPendientes() {
  // Filtrar proyectos pendientes y que no tengan dificultad "Incidencia"
  const proyectosPendientes = proyectos.filter(
    (proyecto) => proyecto.estatus === 'Pendiente' // && proyecto.dificultad !== "Incidencia"
  )

  // Seleccionar proyectos aleatorios y completar el arreglo hasta que tenga 7 elementos
  const proyectosDisponibles = [...proyectosPendientes]
  while (siguientesProyectos.length < 7 && proyectosDisponibles.length > 0) {
    const randomIndex = Math.floor(Math.random() * proyectosDisponibles.length)
    const esteEnProyectos = proyectos.filter(
      (proyecto) => proyecto.id == proyectosDisponibles[randomIndex].id
    ) // Traemos el proyecto del arreglo "proyectos" que corresponde al proyecto que vamos a agregar a siguientesProyectos.
    esteEnProyectos[0].estatus = 'En siguientes' // Cambiamos el estatus del proyecto en "proyectos" para ya no volverlo a poner despues.
    siguientesProyectos.push(proyectosDisponibles[randomIndex])
    proyectosDisponibles.splice(randomIndex, 1)
  }
}

function llenaActivos(activo) {
  let x = 'arr' + activo
  let elArreglo = arreglosActivos[x]
  $('#activos' + activo).text(
    findArrayValue(elArreglo, 'produccionTiempo') +
      'T + ' +
      findArrayValue(elArreglo, 'produccionPersonal') +
      'P + ' +
      findArrayValue(elArreglo, 'produccionCapital') +
      'C'
  )
  if (findArrayValue(elArreglo, 'recuperacionTiempo') == 0) {
    $('#recuperacion' + activo).text(
      findArrayValue(elArreglo, 'recuperacionPersonal') +
        'P + ' +
        findArrayValue(elArreglo, 'recuperacionCapital') +
        'C'
    )
  } else if (findArrayValue(elArreglo, 'recuperacionPersonal') == 0) {
    $('#recuperacion' + activo).text(
      findArrayValue(elArreglo, 'recuperacionTiempo') +
        'T + ' +
        findArrayValue(elArreglo, 'recuperacionCapital') +
        'C'
    )
  } else if (findArrayValue(elArreglo, 'recuperacionCapital') == 0) {
    $('#recuperacion' + activo).text(
      findArrayValue(elArreglo, 'recuperacionTiempo') +
        'T + ' +
        findArrayValue(elArreglo, 'recuperacionPersonal') +
        'P'
    )
  }
}

/**
 * Genera activos para el "proyecto actual", utilizando recursos del "departamento actual",
 * esto siempre y cuando el departamento actual tenga los recursos disponibles y pueda generar el tipo de
 * activos requeridos.
 */
$('[id^="activoReqProyectoNom"]').click(function () {
  // Obtener el número del ID del elemento clickeado
  let idNumber = this.id.replace('activoReqProyectoNom', '')
  // Obtener los valores de los elementos "td"
  let cantRequerida = $('#activoReqProyectoCantX' + idNumber).text()
  let cantidadActual = $('#activoReqProyectoCant' + idNumber).text()

  // Obtener la clase del elemento en el que se hizo clic
  let activoAUsar = $(this).attr('class')
  activoAUsar = activoAUsar.substring(3)
  let x = 'arr' + activoAUsar
  let elArreglo = arreglosActivos[x]
  // Obtener los valores del arreglo "arreglosActivos"
  let produccionTiempo = findArrayValue(elArreglo, 'produccionTiempo')
  produccionTiempo = parseInt(produccionTiempo) + beneficioTiempo
  let produccionPersonal = findArrayValue(elArreglo, 'produccionPersonal')
  produccionPersonal = parseInt(produccionPersonal) + beneficioPersonal
  let produccionCapital = findArrayValue(elArreglo, 'produccionCapital')
  produccionCapital = parseInt(produccionCapital) + beneficioCapital

  let y = 'arr' + deptoActual
  let elArregloDepto = arreglosDeptos[y]
  let recursoTiempo = findArrayValue(elArregloDepto, 'recursoTiempo')
  let recursoPersonal = findArrayValue(elArregloDepto, 'recursoPersonal')
  let recursoCapital = findArrayValue(elArregloDepto, 'recursoCapital')

  console.log(
    'beneficioT',
    beneficioTiempo,
    'beneficioP',
    beneficioPersonal,
    'beneficioC',
    beneficioCapital
  )
  console.log(produccionTiempo, produccionPersonal, produccionCapital)

  // Si el activo seleccionado forma parte de los activos permitidos para el departamento actual,
  // y si las cantidades requeridas son mayores a las cantidades actuales,
  // y si el departamento actual tiene los recursos necesarios.
  if (
    activosDeptoActualPermitidos.includes(activoAUsar) &&
    cantRequerida > cantidadActual &&
    recursoTiempo - produccionTiempo >= 0 &&
    recursoPersonal - produccionPersonal >= 0 &&
    recursoCapital - produccionCapital >= 0
  ) {
    setArrayValue(
      arreglosDeptos['arr' + deptoActual],
      'recursoTiempo',
      recursoTiempo - produccionTiempo
    )
    setArrayValue(
      arreglosDeptos['arr' + deptoActual],
      'recursoPersonal',
      recursoPersonal - produccionPersonal
    )
    setArrayValue(
      arreglosDeptos['arr' + deptoActual],
      'recursoCapital',
      recursoCapital - produccionCapital
    )
    // Ponemos el nuevo valor del recurso en el departamento grande.
    $('#recursoDispTiempoGde').text(recursoTiempo - produccionTiempo)
    $('#recursoDispPersonalGde').text(recursoPersonal - produccionPersonal)
    $('#recursoDispCapitalGde').text(recursoCapital - produccionCapital)
    $('.recursoDispTiempoGde').text(recursoTiempo - produccionTiempo)
    $('.recursoDispPersonalGde').text(recursoPersonal - produccionPersonal)
    $('.recursoDispCapitalGde').text(recursoCapital - produccionCapital)
    // Ponemos el nuevo valor del recurso en el departamento chico.
    $('#' + deptoActual + ' #tiempoCh').text(
      findArrayValue(elArregloDepto, 'recursoTiempo')
    )
    $('#' + deptoActual + ' #personalCh').text(
      findArrayValue(elArregloDepto, 'recursoPersonal')
    )
    $('#' + deptoActual + ' #capitalCh').text(
      findArrayValue(elArregloDepto, 'recursoCapital')
    )
    let z = 'activoAsignado' + idNumber
    proyectos[proyectoGdeActual][z] =
      parseInt(proyectos[proyectoGdeActual][z]) + 1
    // Ponemos el nuevo valor del activo en el proyecto grande
    $('#activoReqProyectoCant1').text(
      proyectos[proyectoGdeActual].activoAsignado1
    )
    $('#activoReqProyectoCant2').text(
      proyectos[proyectoGdeActual].activoAsignado2
    )
    $('#activoReqProyectoCant3').text(
      proyectos[proyectoGdeActual].activoAsignado3
    )
    // Ponemos el nuevo valor del activo en el proyecto chico
    $("[elid='" + proyectoGdeActual + "'] #activoAsignado1").text(
      proyectos[proyectoGdeActual].activoAsignado1
    )
    $("[elid='" + proyectoGdeActual + "'] #activoAsignado2").text(
      proyectos[proyectoGdeActual].activoAsignado2
    )
    $("[elid='" + proyectoGdeActual + "'] #activoAsignado3").text(
      proyectos[proyectoGdeActual].activoAsignado3
    )
    checkProjectCompletion()
    var audio = new Audio('./Microwave_bell.wav')
    audio.play()
    console.log('DeptoActual:', deptoActual)
  }
  // console.log("deptoActual:", deptoActual)
  // console.log('ID:', idNumber);
  // console.log('Cantidad Requerida:', cantRequerida);
  // console.log('Cantidad Actual:', cantidadActual);
  // console.log('Activo a Usar:', activoAUsar);
  // console.log('Producción Tiempo:', produccionTiempo);
  // console.log('Producción Personal:', produccionPersonal);
  // console.log('Producción Capital:', produccionCapital);
  // console.log('Recurso Tiempo:', recursoTiempo);
  // console.log('Recurso Personal:', recursoPersonal);
  // console.log('Recurso Capital:', recursoCapital);
  // console.log("Nuevo recurso tiempo:", findArrayValue(elArregloDepto, 'recursoTiempo'));
  // console.log("Nuevo recurso personal:", findArrayValue(elArregloDepto, 'recursoPersonal'));
  // console.log("Nuevo recurso capital:", findArrayValue(elArregloDepto, 'recursoCapital'));
  // console.log("Activos Asignados del Proyecto:", proyectos[proyectoGdeActual].activoAsignado1, proyectos[proyectoGdeActual].activoAsignado2, proyectos[proyectoGdeActual].activoAsignado3)
})

// $(function() {
//     $("input").checkboxradio();
// });

$(function () {
  $("input[type='checkbox'], input[type='radio']").checkboxradio()
})

/*        Evento para hacer clic en los spans de los departamentos y convertirlos en inputs
 */
$(document).on('click', '.personasDepto', function () {
  // $('.personasDepto').on('click', function() {
  const deptoOriginal = $(this).attr('depto') // Obtener el id original del departamento
  // Crear un input y copiar el texto del span
  const input = $('<input>').attr('type', 'text').val($(this).text())

  // Reemplazar el span con el input
  $(this).replaceWith(input)

  // Enfocar el input
  input.focus()

  // Guardar el nuevo texto cuando se hace clic fuera del input
  input.on('blur', function () {
    const newText = input.val()
    const span = $('<span>')
      .addClass('personasDepto')
      .attr('depto', deptoOriginal)
      .text(newText)
    input.replaceWith(span)
    guardarNuevoTexto(newText, deptoOriginal)
  })
})

/**
 * Guarda el nuevo texto ingresado en el input y actualiza el arreglo correspondiente.
 * @param {string} nuevoTexto - El nuevo texto ingresado por el usuario.
 * @param {string} deptoOriginal - El id original del departamento al que pertenece el texto.
 */
function guardarNuevoTexto(nuevoTexto, deptoOriginal) {
  console.log('Nuevo texto guardado:', nuevoTexto)
  // Aquí puedes agregar la lógica para guardar el nuevo texto, como una llamada a una API
  setArrayValue(
    arreglosDeptos['arr' + deptoOriginal],
    'integrantes',
    nuevoTexto
  )
  console.log('ARREGLO:', arreglosDeptos['arr' + deptoOriginal])
}

/**
 * Asigna las habilidades acreditadas al departamento especificado.
 */
function asignarHabilidades2(depto) {
  console.log('>>>>>>    Asignando habilidades al departamento:', depto)

  // Obtiene el arreglo del departamento especificado
  const elArregloDepto = arreglosDeptos['arr' + depto]

  // Lista de habilidades a asignar en orden de prioridad
  const habilidades = [
    'habilidadTiempo',
    'habilidadPersonal',
    'habilidadCapital',
  ]

  // Arreglo para almacenar las habilidades asignadas
  const habilidadesAsignadas = [0, 0, 0]

  // Asigna las habilidades en orden de prioridad
  habilidades.forEach((habilidad, index) => {
    // Encuentra el valor de la habilidad en el arreglo del departamento
    const value = elArregloDepto.find((item) => item.name === habilidad).value
    // Si el valor no es cero y no está ya asignado, se asigna a habilidadesAsignadas
    if (value !== 0 && !habilidadesAsignadas.includes(value)) {
      habilidadesAsignadas[index] = value
    }
  })

  // Actualiza el DOM con las habilidades asignadas
  habilidadesAsignadas.forEach((habilidad, index) => {
    if (habilidad !== 0) {
      // Obtiene la capacitación correspondiente a la habilidad
      const capacitacion = arreglosCapacitaciones[habilidad]

      // Obtiene y mapea el tipo de habilidad a un nombre más descriptivo
      const tipo = mapTipo(obtenerValorCapacitacion(capacitacion, 'tipo'))

      // Obtiene el nombre, beneficio y tipo de recurso de la capacitación
      const nombre = obtenerValorCapacitacion(capacitacion, 'nombre')
      const beneficio = obtenerValorCapacitacion(capacitacion, 'beneficio')
      const tipoRecurso = obtenerValorCapacitacion(capacitacion, 'tipoRecurso')
        .charAt(0)
        .toUpperCase()

      // Construye el contenido HTML a insertar
      const contenido = `${tipo}<br>${nombre}, ${beneficio} ${tipoRecurso}<br><br>`

      // Actualiza el contenido HTML del elemento correspondiente en el DOM
      $(`#${depto} #habilidadesAcreditadasCh${index + 1}`).html(contenido)
    }
  })
  tieneTresHabilidades(depto)
  // Asegura que la vista grande se actualice con la acción especial si es el depto actual
  if (depto === deptoActual) {
    const elArreglo = arreglosDeptos['arr' + depto]
    const accion = findArrayValue(elArreglo, 'accionEspecialQuincenal')
    $('#' + depto + ' #accionEspecialGde').text(accion)
  }
}

/**
 * Asigna las habilidades acreditadas al departamento especificado.
 */
function asignarHabilidades(depto) {
  console.log('>>>>>>    Asignando habilidades al departamento:', depto)

  const elArregloDepto = arreglosDeptos['arr' + depto]
  const habilidades = [
    'habilidadTiempo',
    'habilidadPersonal',
    'habilidadCapital',
  ]
  const habilidadesAsignadas = [0, 0, 0]

  habilidades.forEach((habilidad, index) => {
    const value = elArregloDepto.find((item) => item.name === habilidad).value
    if (value !== 0 && !habilidadesAsignadas.includes(value)) {
      habilidadesAsignadas[index] = value
    }
  })

  habilidadesAsignadas.forEach((habilidad, index) => {
    console.log('habilidadAsignada:', habilidad)
    if (habilidad !== 0) {
      const capacitacion = arreglosCapacitaciones[habilidad]
      const tipo = mapTipo(
        capacitacion.find((item) => item.name === 'tipo').value
      )
      console.log('Tipo:', tipo)
      const nombre = capacitacion.find((item) => item.name === 'nombre').value
      console.log('Nombre:', nombre)
      const beneficio = capacitacion.find(
        (item) => item.name === 'beneficio'
      ).value
      console.log('Beneficio:', beneficio)
      let tipoRecurso = capacitacion.find(
        (item) => item.name === 'tipoRecurso'
      ).value
      console.log('Tipo Recurso:', tipoRecurso)

      tipoRecurso = tipoRecurso.charAt(0).toUpperCase()
      console.log('Tipo Recurso:', tipoRecurso)

      console.log('Nombre:', nombre)
      console.log('Beneficio:', beneficio)
      console.log('Capacitación:', capacitacion)
      console.log('Tipo:', tipo)

      const contenido = `${tipo}<br>${nombre}, ${beneficio} ${tipoRecurso
        .charAt(0)
        .toUpperCase()}<br><br>`
      $(`#${depto} #habilidadesAcreditadasCh${index + 1}`).html(contenido)
    }
  })

  console.log('depto:', depto, 'deptoActual:', deptoActual)
  deptoActual = depto
  //
  tieneTresHabilidades(depto)
  // Asegura que la vista grande se actualice con la acción especial si es el depto actual
  // if (depto === deptoActual) {
  //   const elArreglo = arreglosDeptos['arr' + depto]
  //   const accion = findArrayValue(elArreglo, 'accionEspecialQuincenal')
  //   $('#' + depto + ' #accionEspecialGde').text(accion)
  // }
}

// Función auxiliar para mapear el tipo de habilidad a un nombre más descriptivo
function mapTipo(tipo) {
  const tipos = {
    HC: 'Habilidad Conceptual',
    HT: 'Habilidad Técnica',
    HH: 'Habilidad Humana',
  }
  return tipos[tipo] || tipo
}

// Función auxiliar para obtener el valor de una capacitación
function obtenerValorCapacitacion(capacitacion, nombre) {
  return capacitacion.find((item) => item.name === nombre).value
}

/**
 * Verifica si un departamento ya tiene las 3 habilidades compradas.
 * Revisa directamente en la estructura de datos si los slots de Tiempo, Personal y Capital están ocupados.
 * @param {string} depto - El nombre del departamento (ej. 'RecursosHumanos')
 * @returns {boolean} - true si tiene las 3 habilidades, false si tiene espacio.
 */
function tieneTresHabilidades(depto) {
  const elArreglo = arreglosDeptos['arr' + depto]
  const hTiempo = findArrayValue(elArreglo, 'habilidadTiempo')
  const hPersonal = findArrayValue(elArreglo, 'habilidadPersonal')
  const hCapital = findArrayValue(elArreglo, 'habilidadCapital')
  const completo = hTiempo !== 0 && hPersonal !== 0 && hCapital !== 0
  if (completo) {
    let textoAccion = ''
    switch (depto) {
      case 'RecursosHumanos':
        textoAccion = 'Generar un activo sin costo'
        break
      case 'MarketingYVentas':
        textoAccion = 'Tener 1 acción extra (3)'
        break
      case 'Finanzas':
        textoAccion = 'Tener 1 recurso extra (4 recursos)'
        break
      case 'InvestigacionYDesarrollo':
        textoAccion = 'Ordenar los próximos 5 proyectos'
        break
      case 'LogisticaYSistemas':
        textoAccion = 'Omitir un mantenimiento'
        break
      case 'Operaciones':
        textoAccion =
          'Descartar un proyecto (se va al limbo con todo y activos)'
        break
    }
    setArrayValue(elArreglo, 'accionEspecialQuincenal', textoAccion)
    if (depto === deptoActual) {
      // $('#accionEspecialGde').text(textoAccion)
      $('#' + deptoActual + ' #accionEspecialGde').text(textoAccion)
    }
  }
  return completo
}

/**
 * Asigna las habilidades acreditadas al departamento especificado.
 **/
function asignarHabilidades0(depto) {
  console.log('>>>>>>    Asignando habilidades al departamento:', depto)
  let habilidad1 = 0
  let habilidad2 = 0
  let habilidad3 = 0
  const elArregloDepto = arreglosDeptos['arr' + depto]
  //   console.log(elArregloDepto)

  const habilidadTiempo = elArregloDepto.find(
    (item) => item.name === 'habilidadTiempo'
  ).value
  const habilidadPersonal = elArregloDepto.find(
    (item) => item.name === 'habilidadPersonal'
  ).value
  const habilidadCapital = elArregloDepto.find(
    (item) => item.name === 'habilidadCapital'
  ).value
  //   console.log('habilidadTiempo:', habilidadTiempo)
  //   console.log('habilidadPersonal:', habilidadPersonal)
  //   console.log('habilidadCapital:', habilidadCapital)

  if (habilidadTiempo != 0) {
    habilidad1 = habilidadTiempo
  } else if (habilidadPersonal != 0) {
    habilidad1 = habilidadPersonal
  } else if (habilidadCapital != 0) {
    habilidad1 = habilidadCapital
  }

  if (habilidadTiempo != 0 && habilidadTiempo != habilidad1) {
    habilidad2 = habilidadTiempo
  } else if (habilidadPersonal != 0 && habilidadPersonal != habilidad1) {
    habilidad2 = habilidadPersonal
  } else if (habilidadCapital != 0 && habilidadCapital != habilidad1) {
    habilidad2 = habilidadCapital
  }
  if (
    habilidadTiempo != 0 &&
    habilidadTiempo != habilidad1 &&
    habilidadTiempo != habilidad2
  ) {
    habilidad3 = habilidadTiempo
  } else if (
    habilidadPersonal != 0 &&
    habilidadPersonal != habilidad1 &&
    habilidadPersonal != habilidad2
  ) {
    habilidad3 = habilidadPersonal
  } else if (
    habilidadCapital != 0 &&
    habilidadCapital != habilidad1 &&
    habilidadCapital != habilidad2
  ) {
    habilidad3 = habilidadCapital
  }

  console.log('laHabilidad1: ', habilidad1)
  console.log('laHabilidad2: ', habilidad2)
  console.log('laHabilidad3: ', habilidad3)

  if (habilidad1 != 0) {
    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad1])
    let tipo = findArrayValue(arreglosCapacitaciones[habilidad1], 'tipo')
    if (tipo == 'HC') {
      tipo = 'Habilidad Conceptual'
    } else if (tipo == 'HT') {
      tipo = 'Habilidad Técnica'
    } else if (tipo == 'HH') {
      tipo = 'Habilidad Humana'
    }
    $('#' + depto + ' #habilidadesAcreditadasCh1').html(
      tipo +
        '<br>' +
        findArrayValue(arreglosCapacitaciones[habilidad1], 'nombre') +
        ', ' +
        findArrayValue(arreglosCapacitaciones[habilidad1], 'beneficio') +
        findArrayValue(arreglosCapacitaciones[habilidad1], 'tipoRecurso')
          .charAt(0)
          .toUpperCase() +
        '<br><br>'
    )
  }
  if (habilidad2 != 0) {
    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad2])
    let tipo = findArrayValue(arreglosCapacitaciones[habilidad2], 'tipo')
    if (tipo == 'HC') {
      tipo = 'Habilidad Conceptual'
    } else if (tipo == 'HT') {
      tipo = 'Habilidad Técnica'
    } else if (tipo == 'HH') {
      tipo = 'Habilidad Humana'
    }
    $('#' + depto + ' #habilidadesAcreditadasCh2').html(
      tipo +
        '<br>' +
        findArrayValue(arreglosCapacitaciones[habilidad2], 'nombre') +
        ', ' +
        findArrayValue(arreglosCapacitaciones[habilidad2], 'beneficio') +
        findArrayValue(arreglosCapacitaciones[habilidad2], 'tipoRecurso')
          .charAt(0)
          .toUpperCase() +
        '<br><br>'
    )
  }
  if (habilidad3 != 0) {
    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad3])
    let tipo = findArrayValue(arreglosCapacitaciones[habilidad3], 'tipo')
    if (tipo == 'HC') {
      tipo = 'Habilidad Conceptual'
    } else if (tipo == 'HT') {
      tipo = 'Habilidad Técnica'
    } else if (tipo == 'HH') {
      tipo = 'Habilidad Humana'
    }
    $('#' + depto + ' #habilidadesAcreditadasCh3').html(
      tipo +
        '<br>' +
        findArrayValue(arreglosCapacitaciones[habilidad3], 'nombre') +
        ', ' +
        findArrayValue(arreglosCapacitaciones[habilidad3], 'beneficio') +
        findArrayValue(arreglosCapacitaciones[habilidad3], 'tipoRecurso')
          .charAt(0)
          .toUpperCase() +
        '<br><br>'
    )
  }
}

/**
 * Función que se ejecuta al iniciar el juego, DESPUES de cargar los arreglos de activos y departamentos.
 * Llama a las funciones necesarias para llenar los activos, asignar recursos iniciales,
 * llenar los departamentos chicos y grandes, y obtener los proyectos pendientes.
 */
function continuamos() {
  console.log('###################################')
  console.log('           CONTINUAMOS             ')
  console.log('###################################')

  // Obtiene y muestra el nombre de la sesión, guardándolo para que persista.
  const nombreSesion = getUrlParameter('n') || getUrlParameter('nombre')
  if (nombreSesion) {
    // Si el nombre viene en la URL, lo guardamos en el estado del juego.
    arregloGeneral.nombreSesion = nombreSesion
    $('#nombreSesion').text('Sesión: ' + nombreSesion)
  } else if (arregloGeneral.nombreSesion) {
    // Si no viene en la URL (p.ej. en una recarga), lo tomamos del estado guardado.
    $('#nombreSesion').text('Sesión: ' + arregloGeneral.nombreSesion)
  }

  asignarHabilidades('RecursosHumanos')
  asignarHabilidades('MarketingYVentas')
  asignarHabilidades('Finanzas')
  asignarHabilidades('InvestigacionYDesarrollo')
  asignarHabilidades('LogisticaYSistemas')
  asignarHabilidades('Operaciones')

  llenaActivos('PersonalCalificado')
  llenaActivos('FlujoDeEfectivo')
  llenaActivos('Analistas')
  llenaActivos('CreditoEInversion')
  llenaActivos('Tecnologia')
  llenaActivos('TransporteYMaquinaria')

  // Llenado de los departamentos chicos
  console.log('DATOS: ', datosCarga)
  console.log('NS: ', getUrlParameter('NS'))
  if (datosCarga.status == 'error' || getUrlParameter('NS') == '1') {
    console.log('Asignando recursos iniciales random')
    asignarRecursosInicial()
  }
  llenaDepartamentoChico('RecursosHumanos')
  llenaDepartamentoChico('MarketingYVentas')
  llenaDepartamentoChico('Finanzas')
  llenaDepartamentoChico('InvestigacionYDesarrollo')
  llenaDepartamentoChico('LogisticaYSistemas')
  llenaDepartamentoChico('Operaciones')

  // Llenado del departamento grande
  llenaDepartamentoGde('RecursosHumanos')

  if (datosCarga.status !== 'success' || getUrlParameter('NS') == '1') {
    // JUEGO NUEVO
    console.log('Iniciando nuevo juego, seleccionando proyectos pendientes.')
    //Llenado de proyectos chicos
    obtenerProyectosPendientes()
    // Loop sobre los proyectos pendientes para llenar los 3 proyectos chicos.
    for (let ix = 0; ix < 3; ix++) {
      // Se agregan 3 proyectos a la seccion.
      if (siguientesProyectos.length > 0) {
        console.log('Llenando proyecto chico', ix)
        llenaSiguienteProyectoChico()
      }
    }
    // Volvemos a llenar el arreglo "siguientesProyectos" para que tenga más en la cola.
    obtenerProyectosPendientes()
    if (siguientesProyectos.length > 0) {
      llenaProyectoGde(siguientesProyectos[0].id)
      siguientesProyectos.splice(0, 1)
      sincronizarColaSiguientes()
    }
  } else {
    // JUEGO CARGADO
    console.log('Cargando proyectos de sesión guardada...')

    // --- INICIO DEL PARCHE ---
    // Este bloque de código repara sesiones guardadas anteriormente que no
    // tenían el campo 'quincenaCompletado'.
    proyectos.forEach((proyecto) => {
      if (
        proyecto.estatus === 'Completado' &&
        typeof proyecto.quincenaCompletado === 'undefined'
      ) {
        console.log(
          `Aplicando parche al proyecto completado: "${proyecto.nombreProyecto}".`
        )
        // Se asigna la quincena actual de la sesión como un valor por defecto.
        proyecto.quincenaCompletado = arregloGeneral.quincena
      }
    })
    // --- FIN DEL PARCHE ---

    const quincenaCargada = parseInt(arregloGeneral.quincena) || 1;
    const trimestreActual = Math.floor((quincenaCargada - 1) / 6) + 1;

    // 1. Usar el ID del proyecto grande que se guardó en la sesión, si no está completado.
    let proyectoGde = null
    console.log('ID de proyecto grande guardado:', proyectoGdeActual)
    if (
      proyectoGdeActual !== undefined &&
      proyectoGdeActual !== null &&
      proyectoGdeActual !== '' &&
      proyectos[proyectoGdeActual].estatus !== 'Completado'
    ) {
      proyectoGde = proyectos[proyectoGdeActual]
    } else {
      // Fallback por si no se encuentra un ID guardado o si estaba completado.
      proyectoGde = proyectos.find(
        (p) => p.estatus === 'En proceso' || p.estatus === 'En siguientes'
      )
    }

    // 2. Limpiar los slots de proyectos chicos primero.
    for (let i = 1; i <= 7; i++) {
      limpiaProyectoChico('proyecto_' + i)
    }
    ultimoProyectoLlenado = 0 // Resetear el contador para llenar desde el primer slot.

    // 3. Llenar los proyectos chicos con los que están 'En proceso' (excluyendo el grande).
    const proyectosEnTablero = proyectos.filter(
      (p) =>
        p.estatus === 'En proceso' &&
        (!proyectoGde || p.id !== proyectoGde.id) &&
        (p.mantenimiento === 'N/A' || p.mantenimientoPagadoEnTrimestre !== trimestreActual)
    )

    console.log('Proyectos para mostrar en tablero chico:', proyectosEnTablero)
    proyectosEnTablero.forEach((proyecto) => {
      llenaProyectoChico(proyecto.id - 1)
    })

    // 4. Reconstruir la cola de 'siguientesProyectos'.
    // Primero, tomar los que ya estaban 'En siguientes' del estado guardado.
    let tempSiguientes = proyectos.filter((p) => p.estatus === 'En siguientes')
    if (arregloGeneral.siguientesProyectosIds) {
      tempSiguientes.sort((a, b) => {
        let idxA = arregloGeneral.siguientesProyectosIds.indexOf(a.id)
        let idxB = arregloGeneral.siguientesProyectosIds.indexOf(b.id)
        if (idxA === -1) idxA = 999
        if (idxB === -1) idxB = 999
        return idxA - idxB
      })
    }
    siguientesProyectos = tempSiguientes

    // Luego, completar la cola con proyectos 'Pendiente' si es necesario.
    const proyectosPendientes = proyectos.filter(
      (p) => p.estatus === 'Pendiente'
    )
    const proyectosDisponibles = [...proyectosPendientes]
    while (siguientesProyectos.length < 7 && proyectosDisponibles.length > 0) {
      const randomIndex = Math.floor(
        Math.random() * proyectosDisponibles.length
      )
      const proyectoElegido = proyectosDisponibles[randomIndex]

      // Marcar como 'En siguientes' en el array principal para que el estado sea consistente.
      const proyectoOriginal = proyectos.find(
        (p) => p.id === proyectoElegido.id
      )
      if (proyectoOriginal) {
        proyectoOriginal.estatus = 'En siguientes'
      }

      siguientesProyectos.push(proyectoElegido)
      proyectosDisponibles.splice(randomIndex, 1)
    }
    sincronizarColaSiguientes()

    // 5. Llenar el proyecto grande.
    if (proyectoGde) {
      if (proyectoGde.mantenimiento !== 'N/A' && proyectoGde.mantenimientoPagadoEnTrimestre === trimestreActual) {
        limpiaProyectoGrande()
      } else {
        llenaProyectoGde(proyectoGde.id)
      }
    } else if (siguientesProyectos.length > 0) {
      // Si no había ningún proyecto en el tablero, tomar el primero de la cola.
      llenaProyectoGde(siguientesProyectos[0].id)
      siguientesProyectos.splice(0, 1)
      sincronizarColaSiguientes()
    }
  }

  console.log('departamentoActual', deptoActual)
  console.log('proyectoActual', proyectoActual)

  // limpiaProyectoChico(3);

  // function contarProyectosCompletados() {
  //     return proyectos.filter(proyecto => proyecto.estatus === 'Completado').length;
  // }

  const bMenos = document.getElementById('bMenos')
  const bMas = document.getElementById('bMas')
  const etQuincena = document.getElementById('etQuincena')
  etQuincena.value = arregloGeneral.quincena // Inicializamos el valor de la quincena

  const tds = [
    document.getElementById('T1'),
    document.getElementById('T2'),
    document.getElementById('T3'),
    document.getElementById('T4'),
  ]

  console.log('PONEMOS EL VALOR DE LA QUINCENA:', arregloGeneral.quincena)

  function updateColors() {
    const value = parseInt(etQuincena.value)
    if (parseInt(etQuincena.value) > 0) {
      divisorDeProyectosTerminados = 3
    } else if (parseInt(etQuincena.value) > 6) {
      divisorDeProyectosTerminados = 4
    } else if (parseInt(etQuincena.value) > 6) {
      divisorDeProyectosTerminados = 5
    }
    tds.forEach((td, index) => {
      if (value >= index * 6 + 1) {
        td.style.backgroundColor = '#068bc3'
        td.style.color = 'white'
      } else {
        td.style.backgroundColor = 'white'
        td.style.color = 'black'
      }
    })
  }

  bMenos.addEventListener('click', function () {
    let value = parseInt(etQuincena.value)
    if (value > 1) {
      etQuincena.value = value - 1
      arregloGeneral.quincena = etQuincena.value // Actualizamos el valor en el arreglo general
      updateColors()
    }
  })

  bMas.addEventListener('click', function () {
    let value = parseInt(etQuincena.value)
    if (value < 24) {
      etQuincena.value = value + 1
      arregloGeneral.quincena = etQuincena.value // Actualizamos el valor en el arreglo general
      updateColors()
    }
  })

  logo.addEventListener('click', function () {
    console.log('Logo clicked')
    guardarDatosEnServidor()
    alert('Datos guardados correctamente.')
  })

  // Initial color update
  updateColors()

  $('#incidenciasTerminadas').text(contarIncidenciasCompletadas())
  $('#proyectosTerminados').text(contarProyectosCompletados())
}

let timer
let timeLeft = 120 // 2 minutos en segundos
let isPaused = false
let isRunning = false

function relojToggleTimer() {
  const button = document.getElementById('relojStartPauseButton')
  if (isRunning) {
    relojPauseTimer()
    button.textContent = 'Iniciar'
  } else {
    relojStartTimer()
    button.textContent = 'Pausar'
  }
  isRunning = !isRunning
}

function relojStartTimer() {
  clearInterval(timer)
  const sliderValue = document.getElementById('timeRange').value
  if (sliderValue == 1) {
    timeLeft = 120 // 2 minutes
  } else if (sliderValue == 2) {
    timeLeft = 300 // 5 minutes
  } else if (sliderValue == 3) {
    timeLeft = 600 // 10 minutes
  }
  relojUpdateDisplay()
  timer = setInterval(relojUpdateTimer, 1000)
  isPaused = false
}

function relojUpdateTimer() {
  if (timeLeft <= 0) {
    clearInterval(timer)
    relojPlaySound()
    document.getElementById('relojStartPauseButton').textContent = 'Iniciar'
    isRunning = false
  } else {
    timeLeft--
    relojUpdateDisplay()
  }
}

function relojUpdateDisplay() {
  const minutes = Math.floor(timeLeft / 60)
  const seconds = timeLeft % 60
  document.getElementById('time').textContent = `${minutes}:${
    seconds < 10 ? '0' : ''
  }${seconds}`
}

function relojUpdateTime() {
  clearInterval(timer)
  const sliderValue = document.getElementById('timeRange').value
  const rangeValueDisplay = document.getElementById('rangeValue')

  if (sliderValue == 1) {
    timeLeft = 120 // 2 minutes
    if (rangeValueDisplay) rangeValueDisplay.textContent = '2 min'
  } else if (sliderValue == 2) {
    timeLeft = 300 // 5 minutes
    if (rangeValueDisplay) rangeValueDisplay.textContent = '5 min'
  } else if (sliderValue == 3) {
    timeLeft = 600 // 10 minutes
    if (rangeValueDisplay) rangeValueDisplay.textContent = '10 min'
  }
  relojUpdateDisplay()

  // Si el tiempo se cambia mientras el reloj corre, se detiene y el botón se resetea.
  isRunning = false
  document.getElementById('relojStartPauseButton').textContent = 'Iniciar'
}

function relojPlaySound() {
  const audio = new Audio('Microwave_bell.wav')
  if ($('#bAccion2').css('background-color') === 'rgb(6, 139, 195)') {
    $('#bAccion1').css('background-color', '')
    $('#bAccion1').css('color', 'black')
    $('#bAccion2').css('background-color', '')
    $('#bAccion2').css('color', 'black')
  }
  audio.play()
}

function relojPauseTimer() {
  if (!isPaused) {
    clearInterval(timer)
    isPaused = true
  }
}

function relojResumeTimer() {
  if (isPaused) {
    timer = setInterval(relojUpdateTimer, 1000)
    isPaused = false
    document.getElementById('relojStartPauseButton').textContent = 'Pausar'
    isRunning = true
  }
}

function toggleColor(button) {
  console.log(button.style.backgroundColor)
  if (button.style.backgroundColor === 'rgb(6, 139, 195)') {
    button.style.backgroundColor = '' // Restablecer al color original
    button.style.color = 'black' // Cambiar el texto a negro
  } else {
    button.style.backgroundColor = '#068bc3' // Cambiar a azul
    button.style.color = 'white' // Cambiar el texto a blanco
  }
}

$(function () {
  // Sobrescribir la función alert
  window.alert = function (message, customWidth) {
    $('<div></div>')
      .html(message)
      .dialog({
        modal: true,
        title: 'Atención',
        width: customWidth || 450,
        buttons: {
          Ok: function () {
            $(this).dialog('close')
          },
        },
      })
  }

  // Ejemplo de uso
  // $("#showAlert").click(function() {
  //     alert("This is a custom alert using jQuery UI!");
  // });
})

// Sobrescribir la función confirm
window.confirm = function (message, callback, customWidth) {
  $('<div></div>')
    .html(message)
    .dialog({
      modal: true,
      title: 'Confirmar',
      width: customWidth || 300,
      buttons: {
        Ok: function () {
          $(this).dialog('close')
          console.log('Confirmed')
          if (callback) callback(true)
        },
        Cancel: function () {
          $(this).dialog('close')
          console.log('Cancelled')
          if (callback) callback(false)
        },
      },
    })
}

function sincronizarColaSiguientes() {
  if (typeof arregloGeneral !== 'undefined' && siguientesProyectos) {
    arregloGeneral.siguientesProyectosIds = siguientesProyectos.map((p) => p.id)
  }
}

function abrirDialogoOrdenarProyectos(elArreglo, quincenaActual) {
  let proyectosAOrdenar = siguientesProyectos.slice(0, 5)
  let proyectosRestantes = siguientesProyectos.slice(5)

  let container = $('<div></div>')
  container.append(
    '<p style="margin-bottom: 15px; font-size: 14px;">Arrastra los proyectos para ordenar la prioridad en la que aparecerán:</p>'
  )

  let list = $(
    '<ul id="sortable-proyectos" style="list-style-type: none; padding: 0; margin: 0;"></ul>'
  )
  const claseMapa = {
    amarillo: 'actPersonalCalificado',
    naranjas: 'actAnalistas',
    verdes: 'actFlujoDeEfectivo',
    azules: 'actTransporteYMaquinaria',
    rojos: 'actTecnologia',
    morados: 'actCreditoEInversion',
  }
  const colores = [
    'amarillo',
    'naranjas',
    'verdes',
    'azules',
    'rojos',
    'morados',
  ]

  proyectosAOrdenar.forEach((p, idx) => {
    let activosReqHtml = ''
    colores.forEach((color) => {
      const valor = p[color]
      if (valor !== null && valor > 0) {
        const claseActivo = claseMapa[color]
        const textColor =
          color === 'amarillo' || color === 'naranjas' || color === 'verdes'
            ? 'black'
            : 'white'
        activosReqHtml += `<span class="${claseActivo}" style="padding: 2px 6px; border-radius: 3px; color: ${textColor}; font-weight: bold; font-size: 11px; margin-right: 4px;">${valor}</span>`
      }
    })

    const penVal = parseInt(p.penalizacion) || 0
    const penalizacionFormateada =
      penVal > 0 ? '$' + new Intl.NumberFormat('es-MX').format(penVal) : 'N/A'

    let item = $(`
      <li class="ui-state-default" data-id="${p.id}" style="margin: 8px 0; padding: 10px; border: 2px solid gray; border-radius: 4px; background-color: #f9f9f9; cursor: grab; display: flex; flex-direction: column; gap: 6px; font-size: 14px;">
        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
          <span style="font-weight: bold;">${idx + 1}. ${p.nombreProyecto}</span>
          <span style="font-size: 11px; background-color: #eee; padding: 2px 6px; border-radius: 3px; color: #555;">${p.departamento}</span>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 12px; color: #666;">
          <div style="display: flex; gap: 4px;">
            ${activosReqHtml}
          </div>
          <div style="text-align: left; line-height: 1.4;">
            Potencial: <b>${p.potencial || 'N/A'}</b><br>
            Penalización: <b>${penalizacionFormateada}</b>
          </div>
        </div>
      </li>
    `)
    list.append(item)
  })
  container.append(list)

  container.dialog({
    modal: true,
    title: 'Ordenar Próximos 5 Proyectos',
    width: 500,
    open: function () {
      list.sortable({
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true,
        update: function (event, ui) {
          list.find('li').each(function (index) {
            let nombre = $(this).find('span').first().text()
            nombre = nombre.replace(/^\d+\.\s*/, '')
            $(this)
              .find('span')
              .first()
              .text(index + 1 + '. ' + nombre)
          })
        },
      })
      list.disableSelection()
      $(
        '<style id="sortable-style">.ui-state-highlight { height: 40px; background-color: #ffffcc; border: 2px dashed #999; margin: 8px 0; border-radius: 4px; }</style>'
      ).appendTo('head')
    },
    close: function () {
      $('#sortable-style').remove()
      $(this).dialog('destroy').remove()
    },
    buttons: {
      'Guardar Orden': function () {
        let nuevoOrdenIds = []
        list.find('li').each(function () {
          nuevoOrdenIds.push(parseInt($(this).data('id')))
        })

        let nuevosSiguientes = []
        nuevoOrdenIds.forEach((id) => {
          let proj = proyectos.find((p) => p.id === id)
          if (proj) nuevosSiguientes.push(proj)
        })

        nuevosSiguientes = nuevosSiguientes.concat(proyectosRestantes)
        siguientesProyectos = nuevosSiguientes
        sincronizarColaSiguientes()

        proyectos.forEach((p) => {
          if (p.estatus === 'En siguientes') p.estatus = 'Pendiente'
        })
        siguientesProyectos.forEach((p) => {
          let proj = proyectos.find((pr) => pr.id === p.id)
          if (proj) proj.estatus = 'En siguientes'
        })

        setArrayValue(elArreglo, 'accionEspecialLastUsed', quincenaActual)
        var audio = new Audio('./Microwave_bell.wav')
        audio.play()
        window.alert('¡Orden de proyectos actualizado con éxito!')

        if (typeof guardaSesion === 'function') guardaSesion()
        $(this).dialog('close')
      },
      Cancelar: function () {
        $(this).dialog('close')
      },
    },
  })
}
// </script>
