<?php
session_start();
include_once(__DIR__ . '/../../backend/db/conexion.php');
require_once __DIR__ . '/../includes/valida_posiciones.php';
// Forzar charset para evitar problemas de acentos y ñ
mysqli_set_charset($conn, "utf8mb4");
header('Content-Type: text/html; charset=utf-8');

if (!isset($_SESSION['rol'])) {
    header('Location: ../index.php');
    exit;
}

// Validar CURP
$curp = $_GET['curp'] ?? '';
$curp = trim($curp);

if (empty($curp)) {
    echo "<h4 class='text-danger'>CURP no especificado.</h4>";
    exit;
}

// Consultar datos del empleado
$sql = "SELECT * FROM Plantilla WHERE CURP = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $curp);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 0) {
    echo "Empleado no encontrado.";
    exit;
}

$empleado = $result->fetch_assoc();

// Consultar capacitaciones
$capacitaciones = [];
if (!empty($empleado['ATTUID'])) {
    $sqlCap = "SELECT nombreDeLaSesion, tipoDeCapacitacion, `Fecha inicio`, `Fecha fin`, Trainer, region 
               FROM asistenciaDespliegs 
               WHERE ATTUID = ? 
               ORDER BY `Fecha inicio` DESC";
    $stmtCap = $conn->prepare($sqlCap);
    $stmtCap->bind_param("s", $empleado['ATTUID']);
    $stmtCap->execute();
    $resultCap = $stmtCap->get_result();
    while ($row = $resultCap->fetch_assoc()) {
        $capacitaciones[] = $row;
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Expediente del Empleado</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Bootstrap 5 + FontAwesome + MDB -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css" rel="stylesheet" />
  <link href="../assets/css/style.css" rel="stylesheet" />
  <link href="../assets/css/recruiter.css" rel="stylesheet" />
</head>
<body class="bg-light">
<div class="d-flex">
  <?php include '../includes/sidebar.php'; ?>

  <div class="main-content" id="mainContent">
    <?php include '../includes/topbar.php'; ?>

  <div class="p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2 class="text-att fw-bold mb-0">
        <i class="fas fa-user-circle me-2"></i>
        Expediente de <?= $empleado['NOMBRES'] . ' ' . $empleado['APELLIDO PATERNO'] . ' ' . $empleado['APELLIDO MATERNO'] ?>
      </h2>
      <a href="buscador-empleado.php" class="btn btn-outline-primary">
        <i class="fas fa-arrow-left me-1"></i> Regresar
      </a>
    </div>
    <div id="root"></div>
  </div>


  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
  <!-- SweetAlert2 -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script type="text/babel">
    function Expediente() {
      const [datos, setDatos] = React.useState({
        empleado: <?= json_encode($empleado, JSON_UNESCAPED_UNICODE) ?>,
        personales: {},
        financieros: {},
        otros: {},
        capacitaciones: <?= json_encode($capacitaciones, JSON_UNESCAPED_UNICODE) ?>,
        vacaciones: [] // Aquí se agregará la data de vacaciones
      });

      const [tabActiva, setTabActiva] = React.useState('generales');
      const [modoEdicion, setModoEdicion] = React.useState(false);
          function activarModoEdicion() {
                setModoEdicion(true);
              }
              function cancelarEdicion() {
                setModoEdicion(false);
              }
      const [filtros, setFiltros] = React.useState({
        sesion: '',
        tipo: '',
        trainer: '',
        fecha: ''
      });

      React.useEffect(() => {
        fetch(`../../backend/plantilla/get_datos_empleado.php?curp=<?= urlencode($curp) ?>`)
          .then(res => res.json())
          .then(data => {
            if (data.success) {
              setDatos(prev => ({
                ...prev,
                empleado: data.empleado,
                personales: data.personales,
                financieros: data.financieros,
                otros: data.otros,
                user: data.user || {},
                vacaciones: data.vacaciones || [] // Suponiendo que el backend regresa esto
              }));
            }
          });
      }, []);

      const empleado = datos.empleado;
      const capacitaciones = datos.capacitaciones;

      const capacitacionesFiltradas = capacitaciones.filter(cap => {
        return (
          cap.nombreDeLaSesion.toLowerCase().includes(filtros.sesion.toLowerCase()) &&
          cap.tipoDeCapacitacion.toLowerCase().includes(filtros.tipo.toLowerCase()) &&
          cap.Trainer.toLowerCase().includes(filtros.trainer.toLowerCase()) &&
          cap["Fecha inicio"].includes(filtros.fecha)
        );
      });

      const tabs = [
        { id: 'generales', label: 'Datos Generales', icon: 'fa-user' },
        { id: 'ubicacion', label: 'Ubicación', icon: 'fa-map-marker-alt' },
        { id: 'financiero', label: 'Datos Financieros', icon: 'fa-dollar-sign' },
        { id: 'claves', label: 'Claves de acceso', icon: 'fa-key' },
        { id: 'capacitaciones', label: 'Capacitaciones', icon: 'fa-chalkboard-teacher' },
        { id: 'vacaciones', label: 'Vacaciones', icon: 'fa-umbrella-beach' }, // Nueva pestaña
        { id: 'otros', label: 'Otros datos', icon: 'fa-calendar-check' }
      ];


    // Render contenido según la pestaña activa 
    const renderContenido = () => {
      switch (tabActiva) {
        case 'generales':
        const calcularEdad = (fechaNacimiento) => {
          if (!fechaNacimiento) return '';
          const hoy = new Date();
          const nacimiento = new Date(fechaNacimiento);
          let edad = hoy.getFullYear() - nacimiento.getFullYear();
          const m = hoy.getMonth() - nacimiento.getMonth();
          if (m < 0 || (m === 0 && hoy.getDate() < nacimiento.getDate())) {
            edad--;
          }
          return edad + ' años';
        };

        const handleInputChange = (seccion, campo, valor) => {
          setDatos(prev => ({
            ...prev,
            [seccion]: {
              ...prev[seccion],
              [campo]: valor
            }
          }));
        };
        
        const guardarCambios = async () => {
  let curp = '';

  if (datos && datos.empleado && datos.empleado.CURP) {
    curp = datos.empleado.CURP;
  } else if (datos && datos.empleado && datos.empleado.curp) {
    curp = datos.empleado.curp;
  } else if (datos && datos.personales && datos.personales.CURP) {
    curp = datos.personales.CURP;
  }

  if (!curp) {
    Swal.fire('Error', 'CURP no disponible.', 'error');
    return;
  }

  try {
    const responses = await Promise.all([
      fetch('../../backend/plantilla/actualizar_personales.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ CURP: curp, ...datos.personales })
      }),
      fetch('../../backend/plantilla/actualizar_financieros.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ CURP: curp, ...datos.financieros })
      }),
      fetch('../../backend/plantilla/actualizar_otros.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ CURP: curp, ...datos.otros })
      }),
      fetch('../../backend/plantilla/actualizar_plantilla.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ CURP: curp, empleado: datos.empleado })
      })
    ]);

    const results = await Promise.all(responses.map(res => res.json()));

    const exitosos = results.filter(r => r.success);
    const errores = results.filter(r => !r.success);

    if (exitosos.length > 0) {
      Swal.fire('Éxito', 'Datos guardados correctamente.', 'success').then(() => {
        location.reload();
      });
    } else {
      Swal.fire('Advertencia', 'No se guardaron cambios. Revisa los datos enviados.', 'warning');
    }

    if (errores.length > 0) {
      console.warn('Errores detectados:', errores);
    }


  } catch (error) {
    console.error('Error en guardarCambios:', error);
    Swal.fire('Error inesperado', 'Ocurrió un error al guardar los datos.', 'error');
  }
};

      

      /* <--- Aquí puedes agregar lógica adicional si es necesario ---> */

        return (
          <React.Fragment>
            <div className="text-end mb-2">
              {modoEdicion ? (
                <React.Fragment>
                  <button className="btn btn-sm btn-danger me-2" onClick={cancelarEdicion}>Cancelar edición</button>
                  <button className="btn btn-sm btn-success" onClick={guardarCambios}>Guardar cambios</button>
                </React.Fragment>
              ) : (
                <button className="btn btn-sm btn-primary" onClick={activarModoEdicion}>
                  <i className="fas fa-edit me-1"></i> Editar
                </button>
              )}
            </div>

            <div className="row g-4">
              {/* INFORMACIÓN BÁSICA */}
              <div className="col-md-6">
                <div className="card shadow-sm h-100">
                  <div className="card-header bg-primary text-white">
                    <i className="fas fa-user me-2"></i>Información básica
                  </div>
                  <div className="card-body">
                    <p><strong>Nombre:</strong> {datos.empleado.NOMBRES}</p>
                    <p><strong>Apellido Paterno:</strong> {datos.empleado["APELLIDO PATERNO"]}</p>
                    <p><strong>Apellido Materno:</strong> {datos.empleado["APELLIDO MATERNO"]}</p>
                    <p><strong>Género:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.empleado.GENERO || ''} onChange={(e) => handleInputChange('empleado', 'GENERO', e.target.value)} />
                    ) : datos.empleado.GENERO}</p>
                    <p><strong>Edad:</strong> {calcularEdad(datos.empleado["FECHA NACIMIENTO"])}</p>
                    <p><strong>Fecha de nacimiento:</strong> {datos.empleado["FECHA NACIMIENTO"]}</p>
                  </div>
                </div>
              </div>

              {/* INFORMACIÓN LABORAL */}
              <div className="col-md-6">
                <div className="card shadow-sm h-100">
                  <div className="card-header bg-info text-white">
                    <i className="fas fa-briefcase me-2"></i>Información laboral
                  </div>
                  <div className="card-body">
                    <p><strong>Estatus:</strong> {datos.empleado && datos.empleado.Estatus ? datos.empleado.Estatus : 'N/A'}</p>
                    <p><strong>Modalidad:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.empleado.MODALIDAD || ''} onChange={(e) => handleInputChange('empleado', 'MODALIDAD', e.target.value)} />
                    ) : datos.empleado.MODALIDAD}</p>
                    <p><strong>Departamento:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.empleado["DEPARTAMENTO INTERNO"] || ''} onChange={(e) => handleInputChange('empleado', 'DEPARTAMENTO INTERNO', e.target.value)} />
                    ) : datos.empleado["DEPARTAMENTO INTERNO"]}</p>
                    <p><strong>Área:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.personales.Area || ''} onChange={(e) => handleInputChange('personales', 'Area', e.target.value)} />
                    ) : datos.personales.Area}</p>
                    <p><strong>Puesto:</strong> {datos.empleado.PUESTO || 'N/A'}</p>
                    <p><strong>Fecha ingreso:</strong> {modoEdicion ? (
                      <input type="date" className="form-control" value={datos.empleado["FECHA DE INGRESO"] || ''} onChange={(e) => handleInputChange('empleado', 'FECHA DE INGRESO', e.target.value)} />
                    ) : datos.empleado["FECHA DE INGRESO"]}</p>
                  </div>
                </div>
              </div>

              {/* INFORMACIÓN MÉDICA */}
              <div className="col-md-6">
                <div className="card shadow-sm h-100">
                  <div className="card-header bg-danger text-white">
                    <i className="fas fa-heartbeat me-2"></i>Información médica
                  </div>
                  <div className="card-body">
                    <p><strong>Estado civil:</strong> {modoEdicion ? (
                      <select
                        className="form-select"
                        value={datos.personales.estado_civil || ''}
                        onChange={(e) => handleInputChange('personales', 'estado_civil', e.target.value)}
                      >
                        <option value="">Selecciona una opción</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>
                    ) : (datos.personales.estado_civil || 'No especificado')}
                    </p>

                    <p><strong>Hijos:</strong> {modoEdicion ? (
                      <input type="number" className="form-control" value={datos.personales.Numero_Hijos || ''} onChange={(e) => handleInputChange('personales', 'Numero_Hijos', e.target.value)} />
                    ) : datos.personales.Numero_Hijos}</p>
                    <p><strong>Talla:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.personales.Talla || ''} onChange={(e) => handleInputChange('personales', 'Talla', e.target.value)} />
                    ) : datos.personales.Talla}</p>
                    <p><strong>Grupo sanguíneo:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.personales.Grupo_sanguineo || ''} onChange={(e) => handleInputChange('personales', 'Grupo_sanguineo', e.target.value)} />
                    ) : datos.personales.Grupo_sanguineo}</p>
                    <p><strong>Alérgenos:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.personales.Alergenos || ''} onChange={(e) => handleInputChange('personales', 'Alergenos', e.target.value)} />
                    ) : datos.personales.Alergenos}</p>
                    <p><strong>Enfermedades crónicas:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.personales.Enfermedades_cronicas || ''} onChange={(e) => handleInputChange('personales', 'Enfermedades_cronicas', e.target.value)} />
                    ) : datos.personales.Enfermedades_cronicas}</p>
                  </div>
                </div>
              </div>

              {/* CONTACTO EMERGENCIA */}
              <div className="col-md-6">
                <div className="card shadow-sm h-100">
                  <div class="card-header bg-warning text-dark">
                    <i class="fas fa-phone-square me-2"></i>Contacto de emergencia
                  </div>
                  <div className="card-body">
                    <p><strong>Nombre contacto:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.personales.Nombre_contacto_emergen || ''} onChange={(e) => handleInputChange('personales', 'Nombre_contacto_emergen', e.target.value)} />
                    ) : datos.personales.Nombre_contacto_emergen}</p>
                    <p><strong>Teléfono contacto:</strong> {modoEdicion ? (
                      <input type="text" className="form-control" value={datos.personales.Tel_contacto_emergen || ''} onChange={(e) => handleInputChange('personales', 'Tel_contacto_emergen', e.target.value)} />
                    ) : datos.personales.Tel_contacto_emergen}</p>
                  </div>
                </div>
              </div>
            </div>
          </React.Fragment>
        );

        // ubicacion
        case 'ubicacion':
  return (
    <div className="tab-pane fade show active" id="ubicacion" role="tabpanel" aria-labelledby="ubicacion-tab">
      <div className="card mt-3 shadow-sm border">
        <div className="card-header bg-info text-white d-flex justify-content-between align-items-center">
          <span><i className="fas fa-map-marker-alt me-2"></i>Datos de Ubicación</span>
          {modoEdicion ? (
            <div>
              <button className="btn btn-sm btn-danger me-2" onClick={cancelarEdicion}>Cancelar</button>
            </div>
          ) : (
            <button className="btn btn-sm btn-outline-light text-white border-white" onClick={activarModoEdicion}>
              <i className="fas fa-edit me-1"></i>Editar
            </button>
          )}
        </div>

        <div className="card-body">
          <p><strong>Dirección:</strong> {
            modoEdicion ? (
              <input
                type="text"
                className="form-control"
                value={datos.empleado && datos.empleado.direccion ? datos.empleado.direccion : ''}
                onChange={(e) => setDatos(prev => ({
                  ...prev,
                  empleado: { ...prev.empleado, direccion: e.target.value }
                }))}
              />
            ) : (
              datos.empleado && datos.empleado.direccion ? datos.empleado.direccion : 'N/A'
            )
          }</p>

          <p><strong>Teléfono personal:</strong> {
            modoEdicion ? (
              <input
                type="text"
                className="form-control"
                value={datos.personales && datos.personales.Tel_personal ? datos.personales.Tel_personal : ''}
                onChange={(e) => setDatos(prev => ({
                  ...prev,
                  personales: { ...prev.personales, Tel_personal: e.target.value }
                }))}
              />
            ) : (
              datos.personales && datos.personales.Tel_personal ? datos.personales.Tel_personal : 'N/A'
            )
          }</p>

          <p><strong>Teléfono herramienta:</strong> {
            modoEdicion ? (
              <input
                type="text"
                className="form-control"
                value={datos.empleado && datos.empleado.telefonoHerramienta ? datos.empleado.telefonoHerramienta : ''}
                onChange={(e) => setDatos(prev => ({
                  ...prev,
                  empleado: { ...prev.empleado, telefonoHerramienta: e.target.value }
                }))}
              />
            ) : (
              datos.empleado && datos.empleado.telefonoHerramienta ? datos.empleado.telefonoHerramienta : 'N/A'
            )
          }</p>

          <p><strong>Email personal:</strong> {
            modoEdicion ? (
              <input
                type="email"
                className="form-control"
                value={datos.empleado && datos.empleado.CORREO_PERSONAL ? datos.empleado.CORREO_PERSONAL : ''}
                onChange={(e) => setDatos(prev => ({
                  ...prev,
                  empleado: { ...prev.empleado, CORREO_PERSONAL: e.target.value }
                }))}
              />
            ) : (
              datos.empleado && datos.empleado.CORREO_PERSONAL ? datos.empleado.CORREO_PERSONAL : 'N/A'
            )
          }</p>

          {(() => {
              const correoCorporativo = datos.empleado && datos.empleado['CORREO CORPORATIVO'];

              return (
                <p><strong>Email empresa:</strong> {
                  modoEdicion ? (
                    <input
                      type="email"
                      className="form-control"
                      value={correoCorporativo || ''}
                      onChange={(e) =>
                        setDatos(prev => ({
                          ...prev,
                          empleado: {
                            ...prev.empleado,
                            ['CORREO CORPORATIVO']: e.target.value
                          }
                        }))
                      }
                    />
                  ) : (
                    correoCorporativo || 'N/A'
                  )
                }</p>
              );
            })()}


          <p><strong>Tienda/Oficina asignación:</strong> {
            modoEdicion ? (
              <input
                type="text"
                className="form-control"
                value={datos.empleado && datos.empleado['DEPARTAMENTO INTERNO'] ? datos.empleado['DEPARTAMENTO INTERNO'] : ''}
                onChange={(e) => setDatos(prev => ({
                  ...prev,
                  empleado: { ...prev.empleado, ['DEPARTAMENTO INTERNO']: e.target.value }
                }))}
              />
            ) : (
              datos.empleado && datos.empleado['DEPARTAMENTO INTERNO']
                ? datos.empleado['DEPARTAMENTO INTERNO']
                : 'N/A'
            )
          }</p>
        </div>
      </div>
    </div>
  );

  
                // finanzas   
                case 'financiero':
                  return (
                    <div className="tab-pane fade show active" id="financiero" role="tabpanel" aria-labelledby="financiero-tab">
                      <div className="card mt-3 shadow-sm border">
                        <div className="card-header bg-success text-white d-flex justify-content-between align-items-center">
                          <span><i className="fas fa-wallet me-2"></i>Datos Financieros</span>
                          {modoEdicion ? (
                            <div>
                              <button className="btn btn-sm btn-danger me-2" onClick={cancelarEdicion}>Cancelar</button>
                            </div>
                          ) : (
                            <button className="btn btn-sm btn-outline-light text-white border-white" onClick={activarModoEdicion}>
                              <i className="fas fa-edit me-1"></i>Editar
                            </button>
                          )}
                        </div>
                        <div className="card-body row">
                          <div className="col-md-6">
                            <p><strong>Número de empleado (ID):</strong> {datos.empleado && datos.empleado.ID ? datos.empleado.ID : 'N/A'}</p>
                            <p><strong>RFC:</strong> {
                                modoEdicion ? (
                                  <input
                                    type="text"
                                    className="form-control"
                                    value={datos.empleado && datos.empleado.RFC ? datos.empleado.RFC : ''}
                                    onChange={(e) => setDatos(prev => ({
                                      ...prev,
                                      empleado: { ...prev.empleado, RFC: e.target.value }
                                    }))}
                                  />
                                ) : (
                                  datos.empleado && datos.empleado.RFC ? datos.empleado.RFC : 'N/A'
                                )
                              }</p>
                            <p><strong>CURP:</strong> {datos.empleado && datos.empleado.CURP ? datos.empleado.CURP : 'N/A'}</p>
                            <p><strong>NSS:</strong> {
                                modoEdicion ? (
                                  <input
                                    type="text"
                                    className="form-control"
                                    value={datos.empleado && datos.empleado.NSS ? datos.empleado.NSS : ''}
                                    onChange={(e) => setDatos(prev => ({
                                      ...prev,
                                      empleado: { ...prev.empleado, NSS: e.target.value }
                                    }))}
                                  />
                                ) : (
                                  datos.empleado && datos.empleado.NSS ? datos.empleado.NSS : 'N/A'
                                )
                              }</p>
                            <p><strong>Sueldo Mensual:</strong> {
                                  modoEdicion ? (
                                    <input
                                      type="number"
                                      className="form-control form-control-sm"
                                      value={datos.empleado["SUELDO MENSUAL"] || ''}
                                      onChange={(e) =>
                                        setDatos((prev) => ({
                                          ...prev,
                                          empleado: {
                                            ...prev.empleado,
                                            ["SUELDO MENSUAL"]: e.target.value
                                          }
                                        }))
                                      }
                                    />
                                  ) : (
                                    datos.empleado && datos.empleado["SUELDO MENSUAL"]
                                      ? Number(datos.empleado["SUELDO MENSUAL"]).toLocaleString('es-MX', {
                                          style: 'currency',
                                          currency: 'MXN'
                                        })
                                      : 'N/A'
                                  )
                                }</p>
                            <p><strong>Vales:</strong> {
                              modoEdicion ? (
                                <input
                                  type="number"
                                  className="form-control form-control-sm"
                                  value={datos.financieros.Vales || ''}
                                  onChange={(e) => setDatos(prev => ({
                                    ...prev,
                                    financieros: { ...prev.financieros, Vales: e.target.value }
                                  }))}
                                />
                              ) : (
                                datos.financieros && datos.financieros.Vales
                                  ? Number(datos.financieros.Vales).toLocaleString('es-MX', {
                                      style: 'currency',
                                      currency: 'MXN'
                                    })
                                  : 'N/A'
                              )
                            }</p>
                          </div>

                          <div className="col-md-6">
                            <p><strong>Banco:</strong> {
                              modoEdicion ? (
                                <input
                                  type="text"
                                  className="form-control form-control-sm"
                                  value={datos.financieros.Banco || ''}
                                  onChange={(e) => setDatos(prev => ({
                                    ...prev,
                                    financieros: { ...prev.financieros, Banco: e.target.value }
                                  }))}
                                />
                              ) : (
                                datos.financieros && datos.financieros.Banco ? datos.financieros.Banco : 'N/A'
                              )
                            }</p>

                            <p><strong>Tarjeta de Nómina:</strong> {
                              modoEdicion ? (
                                <input
                                  type="text"
                                  className="form-control form-control-sm"
                                  value={datos.financieros.Tarjeta || ''}
                                  onChange={(e) => setDatos(prev => ({
                                    ...prev,
                                    financieros: { ...prev.financieros, Tarjeta: e.target.value }
                                  }))}
                                />
                              ) : (
                                datos.financieros && datos.financieros.Tarjeta ? datos.financieros.Tarjeta : 'N/A'
                              )
                            }</p>

                            <p><strong>Cuenta Clabe:</strong> {
                              modoEdicion ? (
                                <input
                                  type="text"
                                  className="form-control form-control-sm"
                                  value={datos.financieros.Cuenta_clave || ''}
                                  onChange={(e) => setDatos(prev => ({
                                    ...prev,
                                    financieros: { ...prev.financieros, Cuenta_clave: e.target.value }
                                  }))}
                                />
                              ) : (
                                datos.financieros && datos.financieros.Cuenta_clave ? datos.financieros.Cuenta_clave : 'N/A'
                              )
                            }</p>
                            
                            <p><strong>Número de cuenta:</strong> {
                              modoEdicion ? (
                                <input
                                  type="text"
                                  className="form-control form-control-sm"
                                  value={datos.financieros.Numero_cuenta || ''}
                                  onChange={(e) =>
                                    setDatos(prev => ({
                                      ...prev,
                                      financieros: { ...prev.financieros, Numero_cuenta: e.target.value }
                                    }))
                                  }
                                  maxLength={30}
                                  pattern="[0-9]*"
                                  inputMode="numeric"
                                />
                              ) : (
                                datos.financieros && datos.financieros.Numero_cuenta
                                  ? datos.financieros.Numero_cuenta
                                  : 'N/A'
                              )
                            }</p>

                            <p><strong>C.P Fiscal:</strong> {
                              modoEdicion ? (
                                <input
                                  type="text"
                                  className="form-control"
                                  value={datos.empleado && datos.empleado.CPdeRFC ? datos.empleado.CPdeRFC : ''}
                                  onChange={(e) => setDatos(prev => ({
                                    ...prev,
                                    empleado: { ...prev.empleado, CPdeRFC: e.target.value }
                                  }))}
                                />
                              ) : (
                                datos.empleado && datos.empleado.CPdeRFC ? datos.empleado.CPdeRFC : 'N/A'
                              )
                            }</p>

                            <p><strong>Tarjeta de Vales:</strong> {
                              modoEdicion ? (
                                <input
                                  type="text"
                                  className="form-control form-control-sm"
                                  value={datos.empleado.ValesDespensa || ''}
                                  onChange={(e) =>
                                    setDatos(prev => ({
                                      ...prev,
                                      empleado: { ...prev.empleado, ValesDespensa: e.target.value }
                                    }))
                                  }
                                />
                              ) : (
                                datos.empleado && datos.empleado.ValesDespensa
                                  ? datos.empleado.ValesDespensa
                                  : 'N/A'
                              )
                            }</p>


                            <p><strong>No. Empleado Vales:</strong> {
                              modoEdicion ? (
                                <input
                                  type="text"
                                  className="form-control form-control-sm"
                                  value={datos.financieros.Numero_empleado_vales || ''}
                                  onChange={(e) => setDatos(prev => ({
                                    ...prev,
                                    financieros: { ...prev.financieros, Numero_empleado_vales: e.target.value }
                                  }))}
                                />
                              ) : (
                                datos.financieros && datos.financieros.Numero_empleado_vales ? datos.financieros.Numero_empleado_vales : 'N/A'
                              )
                            }</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  );



              // claves de acceso
        case 'claves':
  return (
    <div className="row g-4">
      <div className="col-12">
        <div className="card shadow-sm">
          <div className="card-header bg-danger text-white d-flex justify-content-between align-items-center">
            <span><i className="fas fa-key me-2"></i>Claves de acceso</span>
            {modoEdicion ? (
              <div>
                <button className="btn btn-sm btn-danger me-2" onClick={cancelarEdicion}>
                  Cancelar
                </button>
              </div>
            ) : (
              <button className="btn btn-sm btn-outline-light" onClick={activarModoEdicion}>
                Editar
              </button>
            )}
          </div>
          <div className="card-body">
            <div className="mb-3">
              <label className="form-label"><strong>Número de empleado (ID):</strong></label>
              {modoEdicion ? (
                <input type="text" className="form-control" value={datos.empleado.ID || ''} onChange={e => setDatos(prev => ({
                  ...prev,
                  empleado: { ...prev.empleado, ID: e.target.value }
                }))} />
              ) : (
                <p>{(datos.empleado && datos.empleado.ID) ? datos.empleado.ID : 'N/A'}</p>
              )}
            </div>

            <div className="mb-3">
              <label className="form-label"><strong>ATTUID:</strong></label>
              {modoEdicion ? (
                <input type="text" className="form-control" value={datos.empleado.ATTUID || ''} onChange={e => setDatos(prev => ({
                  ...prev,
                  empleado: { ...prev.empleado, ATTUID: e.target.value }
                }))} />
              ) : (
                <p>{(datos.empleado && datos.empleado.ATTUID) ? datos.empleado.ATTUID : 'N/A'}</p>
              )}
            </div>

            <div className="mb-3">
              <label className="form-label"><strong>Contraseña Global Logon:</strong></label>
              <p>{(datos.user && datos.user.Contrasena) ? datos.user.Contrasena : 'N/A'}</p>
            </div>

            <div className="mb-3">
              <label className="form-label"><strong>Usuario PRM:</strong></label>
              <p>{(datos.empleado && datos.empleado.UsuarioPRM) ? datos.empleado.UsuarioPRM : 'N/A'}</p>
            </div>

            <div className="mb-3">
              <label className="form-label"><strong>Registro sistema de asistencia:</strong></label>
              <p>{(datos.empleado && datos.empleado.AltaTacloud) ? datos.empleado.AltaTacloud : 'N/A'}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

        // capacitaciones 
        case 'capacitaciones':
          return (
            <div className="table-responsive">
              <div className="mb-4 row g-3">
                <div className="col-md-3">
                  <input type="text" className="form-control" placeholder="Nombre de la sesión"
                    value={filtros.sesion} onChange={e => setFiltros({ ...filtros, sesion: e.target.value })} />
                </div>
                <div className="col-md-2">
                  <input type="text" className="form-control" placeholder="Tipo"
                    value={filtros.tipo} onChange={e => setFiltros({ ...filtros, tipo: e.target.value })} />
                </div>
                <div className="col-md-3">
                  <input type="text" className="form-control" placeholder="Trainer"
                    value={filtros.trainer} onChange={e => setFiltros({ ...filtros, trainer: e.target.value })} />
                </div>
                <div className="col-md-2">
                  <input type="date" className="form-control"
                    value={filtros.fecha} onChange={e => setFiltros({ ...filtros, fecha: e.target.value })} />
                </div>
                <div className="col-md-2">
                  <button type="button" className="btn btn-outline-secondary w-100"
                    onClick={() => setFiltros({ sesion: '', tipo: '', trainer: '', fecha: '' })}>
                    Limpiar
                  </button>
                </div>
              </div>
              {capacitacionesFiltradas.length > 0 ? (
                <table className="table table-bordered table-sm tabla-capacitaciones">
                  <thead className="table-light">
                    <tr>
                      <th>Nombre de la sesión</th>
                      <th>Tipo</th>
                      <th>Fecha inicio</th>
                      <th>Fecha fin</th>
                      <th>Trainer</th>
                      <th>Región</th>
                    </tr>
                  </thead>
                  <tbody>
                    {capacitacionesFiltradas.map((cap, index) => (
                      <tr key={index}>
                        <td>{cap.nombreDeLaSesion}</td>
                        <td>{cap.tipoDeCapacitacion}</td>
                        <td>{cap["Fecha inicio"]}</td>
                        <td>{cap["Fecha fin"]}</td>
                        <td>{cap.Trainer}</td>
                        <td>{cap.region}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              ) : (
                <div className="alert alert-info">No se encontraron capacitaciones con los filtros actuales.</div>
              )}
            </div>
          );

        // vacaciones
        case 'vacaciones':
          const vacaciones = datos.vacaciones || [];
          const mensajeVacaciones = datos.mensajeVacaciones || '';
          // Mostrar solo los periodos con días pendientes > 0
          const vacacionesFiltradas = vacaciones.filter(v => v.diasPendientes > 0);
          // Obtener total si viene en la respuesta
          const totalPendientes = datos.totalPendientes || vacaciones.reduce((acc, v) => acc + (v.diasPendientes || 0), 0);

          // Calcular días para el próximo aniversario si no hay días pendientes
          let diasParaProximoAniversario = null;
          if (totalPendientes === 0 && datos.empleado && datos.empleado["FECHA DE INGRESO"]) {
            const fechaIngreso = new Date(datos.empleado["FECHA DE INGRESO"]);
            const hoy = new Date();
            let proximoAniversario = new Date(fechaIngreso);
            proximoAniversario.setFullYear(hoy.getFullYear());
            if (
              hoy.getMonth() > fechaIngreso.getMonth() ||
              (hoy.getMonth() === fechaIngreso.getMonth() && hoy.getDate() >= fechaIngreso.getDate())
            ) {
              proximoAniversario.setFullYear(hoy.getFullYear() + 1);
            }
            diasParaProximoAniversario = Math.ceil((proximoAniversario - hoy) / (1000 * 60 * 60 * 24));
          }
          return (
            <div className="card mt-3 shadow-sm border">
              <div className="card-header bg-warning text-dark d-flex align-items-center">
                <i className="fas fa-umbrella-beach me-2"></i>
                Vacaciones por periodo
              </div>
              <div className="card-body">
                {mensajeVacaciones ? (
                  <div className="alert alert-success text-center fw-bold">{mensajeVacaciones}</div>
                ) : null}
                {totalPendientes === 0 && diasParaProximoAniversario !== null ? (
                  <div className="alert alert-warning text-center fw-bold">
                    El colaborador aún no cuenta con días disponibles.<br />
                    Volver a consultar en {diasParaProximoAniversario} día{diasParaProximoAniversario !== 1 ? 's' : ''} (hasta su próximo aniversario).
                  </div>
                ) : null}
                {totalPendientes > 0 && vacacionesFiltradas.length > 0 ? (
                  <React.Fragment>
                    <div className="table-responsive">
                      <table className="table table-bordered table-sm">
                        <thead className="table-light">
                          <tr>
                            <th>Periodo</th>
                            <th>Días pendientes</th>
                          </tr>
                        </thead>
                        <tbody>
                          {vacacionesFiltradas.map((v, idx) => (
                            <tr key={idx}>
                              <td>{v.periodo}</td>
                              <td>{v.diasPendientes}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                    <div className="mt-3 fw-bold text-end">
                      Total de días pendientes: {totalPendientes}
                    </div>
                  </React.Fragment>
                ) : (
                  totalPendientes === 0 && vacacionesFiltradas.length === 0 ? (
                    <div className="alert alert-info">No hay vacaciones registradas para este empleado.</div>
                  ) : null
                )}
              </div>
            </div>
          );

        // otros datos  
        case 'otros':
  return (
    <div className="tab-pane fade show active" id="otros" role="tabpanel" aria-labelledby="otros-tab">
      <div className="card mt-3 shadow-sm border">
        <div className="card-header bg-warning text-white d-flex justify-content-between align-items-center">
          <span><i className="fas fa-file-alt me-2"></i>Otros datos</span>
          {modoEdicion ? (
            <div>
              <button className="btn btn-sm btn-danger me-2" onClick={cancelarEdicion}>Cancelar</button>
            </div>
          ) : (
            <button className="btn btn-sm btn-outline-warning text-white border-white" onClick={activarModoEdicion}>
              <i className="fas fa-edit me-1"></i>Editar
            </button>
          )}
        </div>
        <div className="card-body">
          {/* Fecha de baja */}
          <div className="mb-3">
            <strong>Fecha de baja:</strong>
            {modoEdicion ? (
              <input
                type="date"
                className="form-control form-control-sm mt-1"
                value={(datos.empleado && datos.empleado['Fecha Baja']) || ''}
                onChange={(e) =>
                  setDatos(prev => ({
                    ...prev,
                    empleado: {
                      ...prev.empleado,
                      'Fecha Baja': e.target.value
                    }
                  }))
                }
              />
            ) : (
              <p>{(datos.empleado && datos.empleado['Fecha Baja']) || 'No aplica'}</p>
            )}
          </div>

          {/* Último día laborado */}
          <div className="mb-3">
            <strong>Último día laborado:</strong>
            {modoEdicion ? (
              <input
                type="date"
                className="form-control form-control-sm mt-1"
                value={(datos.otros && datos.otros.Ultimo_dia_laborado) || ''}
                onChange={(e) =>
                  setDatos(prev => ({
                    ...prev,
                    otros: {
                      ...prev.otros,
                      Ultimo_dia_laborado: e.target.value
                    }
                  }))
                }
              />
            ) : (
              <p>{(datos.otros && datos.otros.Ultimo_dia_laborado) || 'No aplica'}</p>
            )}
          </div>

          {/* Cita conciliación */}
          <div className="mb-3">
            <strong>Cita en conciliación:</strong>
            {modoEdicion ? (
              <input
                type="date"
                className="form-control form-control-sm mt-1"
                value={(datos.otros && datos.otros.Fecha_cita_conciliacion) || ''}
                onChange={(e) =>
                  setDatos(prev => ({
                    ...prev,
                    otros: {
                      ...prev.otros,
                      Fecha_cita_conciliacion: e.target.value
                    }
                  }))
                }
              />
            ) : (
              <p>{(datos.otros && datos.otros.Fecha_cita_conciliacion) || 'No aplica'}</p>
            )}
          </div>

          {/* Fecha entrega finiquito */}
          <div className="mb-3">
            <strong>Fecha entrega finiquito:</strong>
            {modoEdicion ? (
              <input
                type="date"
                className="form-control form-control-sm mt-1"
                value={(datos.otros && datos.otros.Fecha_entrega_finiquito) || ''}
                onChange={(e) =>
                  setDatos(prev => ({
                    ...prev,
                    otros: {
                      ...prev.otros,
                      Fecha_entrega_finiquito: e.target.value
                    }
                  }))
                }
              />
            ) : (
              <p>{(datos.otros && datos.otros.Fecha_entrega_finiquito) || 'No aplica'}</p>
            )}
          </div>

          {/* Motivo de baja */}
          <div className="mb-3">
            <strong>Motivo de baja:</strong>
            <p>{(datos.movimiento && datos.movimiento.motivoDeBaja) || 'No aplica'}</p>
          </div>

          {/* Observaciones */}
          <div className="mb-3">
            <strong>Observaciones:</strong>
            {modoEdicion ? (
              <textarea
                className="form-control form-control-sm mt-1"
                rows="3"
                value={(datos.empleado && datos.empleado.ComentarioBaja) || ''}
                onChange={(e) =>
                  setDatos(prev => ({
                    ...prev,
                    empleado: {
                      ...prev.empleado,
                      ComentarioBaja: e.target.value
                    }
                  }))
                }
              />
            ) : (
              <p>{(datos.empleado && datos.empleado.ComentarioBaja) || 'No aplica'}</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );

          // Si no coincide con ninguna pestaña, retornar null
        default:
          return null;
      }
    };

     // Render la interfaz principal

    return (
      <div>
        <ul className="nav nav-tabs mb-3">
          {tabs.map(tab => (
            <li className="nav-item" key={tab.id}>
              <button className={`nav-link ${tabActiva === tab.id ? 'active' : ''}`}
                onClick={() => setTabActiva(tab.id)}>
                <i className={`fas ${tab.icon} me-2`}></i>{tab.label}
              </button>
            </li>
          ))}
        </ul>
        <div className="tab-content bg-white p-4 shadow rounded tab-transition">
          <div className="tab-content-fade">
            {renderContenido()}
          </div>
        </div>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<Expediente />);
</script>

</body>
</html>
