<!-- MODAL: DATOS ROCASA -->
<div class="modal fade" id="modalDatosRocasa" tabindex="-1" aria-labelledby="modalDatosRocasaLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <form id="formDatosRocasa">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="modalDatosRocasaLabel">
            <i class="fas fa-id-card me-2"></i>Datos Rocasa del Candidato
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>

        <div class="modal-body">

          <input type="hidden" name="aspirante_id" id="aspirante_id">
          <input type="hidden" name="vacante_puesto" id="vacante_puesto">
          <input type="hidden" name="vacante_codigo" id="vacante_codigo">
          <input type="hidden" name="vacante_pdv" id="vacante_pdv">
          <input type="hidden" name="modalidad" id="modalidad">


          <!-- DATOS PERSONALES BÁSICOS -->
          <h6 class="mt-3">Información personal</h6>
          <div class="row g-3">
            <div class="col-md-4"><label class="form-label">CURP</label><input type="text" class="form-control" id="curp_rocasa" name="curp" readonly required> </div>
            <div class="col-md-4"><label class="form-label">RFC</label><input type="text" class="form-control" id="rfc_rocasa" name="rfc" readonly required></div>
            <div class="col-md-4"><label class="form-label">NSS</label><input type="text" class="form-control" id="nss_rocasa" name="nss" readonly required></div>

            <div class="col-md-4"><label class="form-label">Nombre(s)</label><input type="text" class="form-control" name="nombre" id="nombre" required></div>
            <div class="col-md-4"><label class="form-label">Apellido paterno</label><input type="text" class="form-control" name="apellido_paterno" id="apellido_paterno" required></div>
            <div class="col-md-4"><label class="form-label">Apellido materno</label><input type="text" class="form-control" name="apellido_materno" id="apellido_materno" required></div>

            <div class="col-md-4"><label class="form-label">Teléfono personal</label><input type="tel" class="form-control" name="telefono" id="telefono" required></div>
            <div class="col-md-4"><label class="form-label">Correo electrónico personal</label><input type="email" class="form-control" name="correo_personal" id="correo_personal" required></div>

     
            <div class="col-md-4"><label class="form-label">Talla</label>
              <select class="form-select" name="talla" id="talla" required>
                <option value="" disabled selected>Selecciona una talla</option>
                <option value="XS">XS</option>
                <option value="S">S</option>
                <option value="M">M</option>
                <option value="L">L</option>
                <option value="XL">XL</option>
                <option value="2XL">2XL</option>
                <option value="3XL">3XL</option>
                <option value="4XL">4XL</option>
                <option value="5XL">5XL</option>
              </select>
            </div>

            <div class="col-md-4"><label class="form-label">Dirección completa</label><input type="text" class="form-control" name="direccion" id="direccion"></div>
            <div class="col-md-4"><label class="form-label">Área</label>
              <select class="form-select" name="area" id="area">
                <option value="" disabled selected>Selecciona un área</option>
                <option value="ADMINISTRACION">Administración</option>
                <option value="TIENDA">Tienda</option>
              </select>
            </div>

            <div class="col-md-4"><label class="form-label">Estado civil</label>
              <select class="form-select" name="estado_civil" id="estado_civil">
                <option value="" disabled selected>Selecciona un estado civil</option>
                <option value="SOLTERO/A">Soltero/a.</option>
                <option value="CASADO/A">Casado/a.</option>
                <option value="DIVORCIADO/A">Divorciado/a.</option>
                <option value="SEPARADO/A EN PROCESO JUDICIAL">Separado/a en proceso judicial.</option>
                <option value="VIUDO/A">Viudo/a.</option>
                <option value="CONCUBINATO">Concubinato.</option>
                <option value="UNION LIBRE">Unión libre.</option>
             </select>
            </div>
            <div class="col-md-4"><label class="form-label">Número de hijos</label><input type="number" class="form-control" name="numero_hijos" id="numero_hijos" min="0"></div>
            <div class="col-md-4">
              <label class="form-label">Tipo sanguíneo</label>
              <select class="form-select" name="tipo_sanguineo" id="tipo_sanguineo" required>
                <option value="" disabled selected>Selecciona un tipo sanguíneo</option>
                <option value="A+">A+</option>
                <option value="A-">A-</option>
                <option value="B+">B+</option>
                <option value="B-">B-</option>
                <option value="AB+">AB+</option>
                <option value="AB-">AB-</option>
                <option value="O+">O+</option>
                <option value="O-">O-</option>
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label d-block">¿Este aspirante es un recomendado?</label>
              <div class="d-flex align-items-center mt-2">
                <div class="form-check me-3">
                  <input class="form-check-input" type="radio" name="es_recomendado" id="es_recomendado_si" value="Sí" required>
                  <label class="form-check-label" for="es_recomendado_si">Sí</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="es_recomendado" id="es_recomendado_no" value="No" required>
                  <label class="form-check-label" for="es_recomendado_no">No</label>
                </div>
              </div>
            </div>

            <div class="col-md-8" id="recomendadorRow" style="display:none;">
              <label class="form-label fw-bold">
              Recomendador
              </label>
              <div class="position-relative">
                <input type="text" 
                       class="form-control pe-5" 
                       id="recomendador_busqueda" 
                       placeholder="Buscar por nombre..." 
                       autocomplete="off">
                <div class="position-absolute top-50 end-0 translate-middle-y pe-3" id="recomendadorSpinner" style="display:none;">
                  <div class="spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">Buscando...</span>
                  </div>
                </div>
                <div class="position-absolute top-50 end-0 translate-middle-y pe-3" id="recomendadorCheck" style="display:none;">
                  <i class="fas fa-check-circle text-success"></i>
                </div>
              </div>
              <div id="recomendadorDropdown" class="list-group mt-1 position-absolute" style="display:none; z-index:1050; max-height:250px; overflow-y:auto; width:calc(66.66% - 24px); box-shadow: 0 4px 6px rgba(0,0,0,0.1);"></div>
              <div id="recomendadorSelected" class="mt-2" style="display:none;">
                <div class="alert alert-success py-2 px-3 mb-0 d-flex align-items-center justify-content-between">
                  <div>
                    <i class="fas fa-user-check me-2"></i>
                    <strong>Seleccionado:</strong> <span id="recomendadorNombre"></span>
                  </div>
                  <button type="button" class="btn btn-sm btn-outline-danger" id="btnLimpiarRecomendador">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <input type="hidden" name="curp_recomendador" id="curp_recomendador">
            </div>

            <!-- Campo Horas a laborar, oculto por defecto -->
            <div class="col-md-4" id="horasLaborarRow" style="display:none;">
              <label class="form-label">Horas a laborar</label>
              <select class="form-select" name="horas_laborar" id="horas_laborar">
                <option value="" disabled selected>Selecciona las horas</option>
                <option value="4">4 hrs</option>
                <option value="5">5 hrs</option>
                <option value="6">6 hrs</option>
              </select>
            </div>
          </div>

          <!-- CONTACTO DE EMERGENCIA -->
          <hr class="my-3">
          <h6>Contacto de emergencia</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">¿Presentas alguna alergia?</label>
              <div class="d-flex align-items-center mb-2">
                <div class="form-check me-3">
                  <input class="form-check-input" type="radio" name="alergia_radio" id="alergia_si" value="si" checked>
                  <label class="form-check-label" for="alergia_si">Sí</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="alergia_radio" id="alergia_no" value="no">
                  <label class="form-check-label" for="alergia_no">No</label>
                </div>
              </div>
              <input type="text" class="form-control" name="alergias" id="alergias" placeholder="Describe la alergia">
            </div>
            <div class="col-md-6">
              <label class="form-label">¿Padeces enfermedades crónicas?</label>
              <div class="d-flex align-items-center mb-2">
                <div class="form-check me-3">
                  <input class="form-check-input" type="radio" name="enfermedad_radio" id="enfermedad_si" value="si" checked>
                  <label class="form-check-label" for="enfermedad_si">Sí</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="enfermedad_radio" id="enfermedad_no" value="no">
                  <label class="form-check-label" for="enfermedad_no">No</label>
                </div>
              </div>
              <input type="text" class="form-control" name="enfermedades" id="enfermedades" placeholder="Describe la enfermedad crónica">
            </div>
            <div class="col-md-6"><label class="form-label">Contacto en caso de emergencia</label><input type="text" class="form-control" name="contacto_emergencia" id="contacto_emergencia"></div>
            <div class="col-md-6"><label class="form-label">Teléfono de emergencia</label><input type="tel" class="form-control telefono" name="tel_emergencia" id="tel_emergencia" required></div>
          </div>

          <!-- DATOS FISCALES -->
           <hr class="my-3">
          <h6>Datos fiscales</h6>
          <div class="row g-3">
              <div class="col-md-4">
                <label class="form-label">Código Postal Fiscal</label>
                <input type="text" class="form-control" name="cp_rfc" id="cp_rfc" maxlength="10" required>
              </div>
              <div class="col-md-4">
                <label class="form-label">Estado</label>
                <input type="text" class="form-control" name="estado_fiscal" id="estado_fiscal" readonly required>
                <input type="hidden" name="clave_estado_fiscal" id="clave_estado_fiscal">
              </div>
              <div class="col-md-4">
                <label class="form-label">Municipio</label>
                <input type="text" class="form-control" name="municipio_fiscal" id="municipio_fiscal" readonly required>
                <input type="hidden" name="clave_municipio_fiscal" id="clave_municipio_fiscal">
              </div>
          </div>
          <div class="row g-3">
              <div class="col-md-4">
                <label class="form-label">Colonia Fiscal</label>
                <select class="form-select" name="colonia_fiscal" id="colonia_fiscal_select" disabled required>
                  <option value="" disabled selected>Selecciona una colonia</option>
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label">Calle</label>
                <input type="text" class="form-control" name="calle_fiscal" id="calle_fiscal" maxlength="100" required>
              </div>
              <div class="col-md-4">
                <label class="form-label">Número de casa</label>
                <input type="text" class="form-control" name="numero_casa_fiscal" id="numero_casa_fiscal" maxlength="20" required>
              </div>
          </div>

          <!-- DATOS FINANCIEROS -->
          <hr class="my-3">
          <h6>Datos financieros</h6>
          <div class="row g-3">
            <div class="col-md-4"><label class="form-label">Sueldo mensual</label><input type="text" class="form-control" name="sueldo_mensual" id="sueldo_mensual" required></div>
            <div class="col-md-4"><label class="form-label">Cantidad de vales</label><input type="text" class="form-control" name="vales" id="vales" required></div>
            <div class="col-md-4"><label class="form-label">Banco</label><input type="text" class="form-control" name="banco" id="banco" value="Banorte" required></div>

            <div class="col-md-4 d-flex align-items-center">
              <div class="form-check mt-4">
                <input class="form-check-input" type="checkbox" name="banorte_asignada" id="banorte_asignada" checked>
                <label class="form-check-label fw-bold text-danger" for="banorte_asignada">Tarjeta Banorte Asignada</label>
              </div>
            </div>

            <div class="col-md-4"><label class="form-label">16 dígitos de tarjeta</label><input type="text" class="form-control" name="tarjeta" id="tarjeta" maxlength="16"></div>
            <div class="col-md-4"><label for="numeroCuenta" class="form-label">Número de cuenta</label><input type="text" class="form-control" id="numeroCuenta" name="numero_cuenta" maxlength="30" autocomplete="off" /></div>
            <div class="col-md-4"><label class="form-label">Cuenta CLABE</label><input type="text" class="form-control" name="cuenta_clabe" id="cuenta_clabe" maxlength="18"></div>
            <div class="col-md-4"><label class="form-label">Número de empleado (vales)</label><input type="text" class="form-control" name="numero_empleado_vales" id="numero_empleado_vales"></div>
            <div class="col-md-4"><label class="form-label">Fonacot</label><input type="text" class="form-control" name="fonacot" id="fonacot" maxlength="20"></div>

            <div class="col-md-4 d-flex align-items-center">
              <div class="form-check mt-4">
                <input class="form-check-input" type="checkbox" name="tiene_vales" id="tiene_vales" checked>
                <label class="form-check-label" for="tiene_vales">Entrega de vales de despensa</label>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer d-flex justify-content-between">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-success">Guardar datos Rocasa</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="../assets/js/aspirantes/cp-fiscales.js"></script>
<script>
function toggleHorasLaborar() {
  const modalidad = document.getElementById('modalidad').value;
  console.log('Valor de modalidad al abrir el modal:', modalidad);
  const row = document.getElementById('horasLaborarRow');
  if (modalidad && modalidad.trim().toUpperCase() === 'MEDIO TIEMPO') {
    row.style.display = '';
  } else {
    row.style.display = 'none';
    document.getElementById('horas_laborar').value = '';
  }
}

document.addEventListener('DOMContentLoaded', function() {
  function toggleAlergia() {
    const si = document.getElementById('alergia_si');
    const no = document.getElementById('alergia_no');
    const input = document.getElementById('alergias');
    if (si.checked) {
      input.disabled = false;
      if (input.value === 'N/a') input.value = '';
    } else {
      input.value = 'N/a';
      input.disabled = true;
    }
  }
  function toggleEnfermedad() {
    const si = document.getElementById('enfermedad_si');
    const no = document.getElementById('enfermedad_no');
    const input = document.getElementById('enfermedades');
    if (si.checked) {
      input.disabled = false;
      if (input.value === 'N/a') input.value = '';
    } else {
      input.value = 'N/a';
      input.disabled = true;
    }
  }

  function toggleRecomendador() {
    const si = document.getElementById('es_recomendado_si');
    const row = document.getElementById('recomendadorRow');
    const inputBusqueda = document.getElementById('recomendador_busqueda');
    const inputCurp = document.getElementById('curp_recomendador');

    if (si && si.checked) {
      row.style.display = '';
      inputBusqueda.required = true;
    } else {
      row.style.display = 'none';
      inputBusqueda.required = false;
      inputBusqueda.value = '';
      inputCurp.value = '';
    }
  }

  // Cuando se muestre el modal, validar modalidad
  const modal = document.getElementById('modalDatosRocasa');
  if (modal) {
    modal.addEventListener('show.bs.modal', function() {
      toggleHorasLaborar();
    });
  }

  document.getElementById('alergia_si').addEventListener('change', toggleAlergia);
  document.getElementById('alergia_no').addEventListener('change', toggleAlergia);
  document.getElementById('enfermedad_si').addEventListener('change', toggleEnfermedad);
  document.getElementById('enfermedad_no').addEventListener('change', toggleEnfermedad);
  document.getElementById('es_recomendado_si').addEventListener('change', toggleRecomendador);
  document.getElementById('es_recomendado_no').addEventListener('change', toggleRecomendador);
  toggleAlergia();
  toggleEnfermedad();
  toggleRecomendador();
});
</script>
