"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Search,
  //FilePdf,
  //Refresh,
  //Upload,
  ChevronLeft,
  //ErrorCircle,
  CheckCircle,
} from "@boxicons/react";

// Interfaces para los datos de las listas
interface EmpresaItem {
  rut: string;
  razonSocial: string;
  giro: string;
  correo: string;
  ultimoContacto: string;
}

interface CotizacionItem {
  cotizacion: string;
  contratosAsociados: string;
  tipoCotizacion: string;
  creacion: string;
  estadoCotizacion: string;
  valor: string;
  idTipoCurso: string;
  condicionCotizacion: string;
  montoDescto: string;
}

interface ContratoItem {
  contrato: string;
  firmaEstado: number;
  url: string;
  cursoInfo: string;
  valor: string;
  autorizacionSSEE?: string;
}

interface DocumentoItem {
  detalle: string;
  numeroInterno?: string;
  fechaSubida: string;
  tipoDocumento?: string;
  codInscripcion?: string;
  responsable: string;
}

interface AlumnoItem {
  rut: string;
  nombre: string;
  email: string;
}

export default function InfoEmpresasPage() {
  // --- ESTADOS DE VISTAS (visibilidad de secciones) ---
  const [headEmpVisible, setHeadEmpVisible] = useState(true);
  const [divMisEmpresasVisible, setDivMisEmpresasVisible] = useState(true);
  const [volver1Visible, setVolver1Visible] = useState(false);
  const [divValorVisible, setDivValorVisible] = useState(false);
  const [divCardInfoVisible, setDivCardInfoVisible] = useState(false);
  const [divListaCotizacionesVisible, setDivListaCotizacionesVisible] = useState(false);
  const [divDetalleVisible, setDivDetalleVisible] = useState(false);
  const [btnSubirContratosVisible, setBtnSubirContratosVisible] = useState(false);
  const [divDetalleContratosVisible, setDivDetalleContratosVisible] = useState(false);
  const [divDetalleOcVisible, setDivDetalleOcVisible] = useState(false);
  const [divDetalleSncVisible, setDivDetalleSncVisible] = useState(false);
  const [divDetalleUpDocVisible, setDivDetalleUpDocVisible] = useState(false);
  const [divDetalleUpDocDetalleVisible, setDivDetalleUpDocDetalleVisible] = useState(false);

  // --- ESTADOS DE VALORES Y CAMPOS ---
  const [valorNeto, setValorNeto] = useState("");
  const [valorDescuento, setValorDescuento] = useState("");
  const [valorTotal, setValorTotal] = useState("");
  const [idCotizacionV2, setIdCotizacionV2] = useState("0");
  const [empresaInfo, setEmpresaInfo] = useState({
    rut: "76.456.789-0",
    razonSocial: "Empresa de Servicios SpA",
    giro: "Capacitaciones y Servicios",
    direccion: "Av. Providencia 1234",
    comuna: "Providencia",
    fono: "+56 2 2345 6789",
    correo: "contacto@empresa.cl",
    contacto: "Juan Pérez",
  });
  const [contIDV2, setContIDV2] = useState("");
  const [numInterDoc, setNumInterDoc] = useState("");

  // --- ESTADOS DE MODALES ---
  const [isLoading, setIsLoading] = useState(false);
  const [modalRespuesta, setModalRespuesta] = useState<{
    show: boolean;
    errorMsg: string;
    okMsg: string;
  }>({ show: false, errorMsg: "", okMsg: "" });
  const [modalAlerta, setModalAlerta] = useState({ show: false, message: "" });
  const [modalAlumnos, setModalAlumnos] = useState({ show: false, data: [] as AlumnoItem[] });

  // --- DATOS SIMULADOS DE LISTAS ---
  const [misEmpresas] = useState<EmpresaItem[]>([
    {
      rut: "76.456.789-0",
      razonSocial: "Empresa de Servicios SpA",
      giro: "Capacitaciones y Servicios",
      correo: "contacto@empresa.cl",
      ultimoContacto: "2026-02-15",
    },
  ]);

  const [cotizaciones] = useState<CotizacionItem[]>([
    {
      cotizacion: "COT-2026-001",
      contratosAsociados: "2",
      tipoCotizacion: "Corporativa",
      creacion: "2026-01-10",
      estadoCotizacion: "Aprobada",
      valor: "$ 1.500.000",
      idTipoCurso: "1",
      condicionCotizacion: "Credito",
      montoDescto: "100000",
    },
  ]);

  const [contratos] = useState<ContratoItem[]>([
    {
      contrato: "CNT-101",
      firmaEstado: 1,
      url: "#",
      cursoInfo: "101 INGLES INTENSIVO DIURNO SEDE CENTRAL 2026-02-20",
      valor: "$ 750.000",
      autorizacionSSEE: "SSEE-99",
    },
    {
      contrato: "CNT-102",
      firmaEstado: 0,
      url: "#",
      cursoInfo: "102 INGLES AVANZADO VESPERTINO SEDE CENTRAL 2026-02-22",
      valor: "$ 750.000",
      autorizacionSSEE: "SSEE-100",
    },
  ]);

  const [comprobantesOC] = useState<DocumentoItem[]>([
    {
      detalle: "comprobante_pago_1.pdf",
      numeroInterno: "INT-882",
      fechaSubida: "2026-02-18",
      tipoDocumento: "Transferencia",
      responsable: "AdminUser",
    },
  ]);

  const [inscripcionesSNC] = useState<DocumentoItem[]>([
    {
      detalle: "sence_doc_1.pdf",
      codInscripcion: "SENCE-123456",
      fechaSubida: "2026-02-19",
      responsable: "SenceUser",
    },
  ]);

  // --- MANEJADORES DE EVENTOS ---
  const handleVerEmpresa = (rut: string) => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setHeadEmpVisible(false);
      setDivMisEmpresasVisible(false);
      setVolver1Visible(true);
      setDivValorVisible(false);
      setDivCardInfoVisible(true);
      setDivListaCotizacionesVisible(true);
      setValorNeto("$ 1.600.000");
      setValorDescuento("$ 100.000");
      setValorTotal("$ 1.500.000");
    }, 600);
  };

  const handleVolverEmp = () => {
    setHeadEmpVisible(true);
    setDivMisEmpresasVisible(true);
    setVolver1Visible(false);
    setDivValorVisible(false);
    setDivCardInfoVisible(false);
    setDivListaCotizacionesVisible(false);
    setDivDetalleVisible(false);
  };

  const handleDetalleCotizacion = (cotz: CotizacionItem) => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setIdCotizacionV2(cotz.cotizacion);
      setDivListaCotizacionesVisible(false);
      setDivDetalleVisible(true);
      setDivValorVisible(true);
      setBtnSubirContratosVisible(true);
      setDivDetalleContratosVisible(true);
      setDivDetalleOcVisible(true);
      setDivDetalleSncVisible(true);
    }, 600);
  };

  const handleVolverCotz = () => {
    setDivDetalleVisible(false);
    setDivValorVisible(false);
    setDivListaCotizacionesVisible(true);
  };

  const handleSubirContratos = () => {
    setDivDetalleContratosVisible(false);
    setDivDetalleOcVisible(false);
    setDivDetalleSncVisible(false);
    setDivDetalleUpDocVisible(true);
  };

  const handleVerParticipantes = (contratoId: string) => {
    setModalAlumnos({
      show: true,
      data: [
        { rut: "18.123.456-7", nombre: "Juan Pérez", email: "jperez@correo.cl" },
        { rut: "19.876.543-2", nombre: "María González", email: "mgonzalez@correo.cl" },
      ],
    });
  };

  const handleSubirArchivoFinal = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setModalRespuesta({
        show: true,
        errorMsg: "",
        okMsg: "Documento subido con éxito a la plataforma.",
      });
    }, 1000);
  };

  return (
    <>
      {/* ESTILOS EMBEDIDOS ADAPTADOS */}
      <style jsx global>{`
        @supports (-webkit-appearance: none) or (-moz-appearance: none) {
          .checkbox-wrapper-13 input[type="checkbox"] {
            --active: #275efe;
            --active-inner: #fff;
            --focus: 2px rgba(39, 94, 254, 0.3);
            --border: #bbc1e1;
            --border-hover: #275efe;
            --background: #fff;
            --disabled: #f6f8ff;
            --disabled-inner: #e1e6f9;
            -webkit-appearance: none;
            -moz-appearance: none;
            height: 21px;
            outline: none;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            margin: 0;
            cursor: pointer;
            border: 1px solid var(--bc, var(--border));
            background: var(--b, var(--background));
            transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
          }

          .checkbox-wrapper-13 input[type="checkbox"]:after {
            content: "";
            display: block;
            left: 0;
            top: 0;
            position: absolute;
            transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
              opacity var(--d-o, 0.2s);
          }

          .checkbox-wrapper-13 input[type="checkbox"]:checked {
            --b: var(--active);
            --bc: var(--active);
            --d-o: 0.3s;
            --d-t: 0.6s;
            --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
          }

          .checkbox-wrapper-13 input[type="checkbox"]:disabled {
            --b: var(--disabled);
            cursor: not-allowed;
            opacity: 0.9;
          }

          .checkbox-wrapper-13 input[type="checkbox"]:disabled:checked {
            --b: var(--disabled-inner);
            --bc: var(--border);
          }

          .checkbox-wrapper-13 input[type="checkbox"]:disabled + label {
            cursor: not-allowed;
          }

          .checkbox-wrapper-13
            input[type="checkbox"]:hover:not(:checked):not(:disabled) {
            --bc: var(--border-hover);
          }

          .checkbox-wrapper-13 input[type="checkbox"]:focus {
            box-shadow: 0 0 0 var(--focus);
          }

          .checkbox-wrapper-13 input[type="checkbox"]:not(.switch) {
            width: 21px;
          }

          .checkbox-wrapper-13 input[type="checkbox"]:not(.switch):after {
            opacity: var(--o, 0);
          }

          .checkbox-wrapper-13 input[type="checkbox"]:not(.switch):checked {
            --o: 1;
          }

          .checkbox-wrapper-13 input[type="checkbox"] + label {
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
            margin-left: 4px;
          }

          .checkbox-wrapper-13 input[type="checkbox"]:not(.switch) {
            border-radius: 7px;
          }

          .checkbox-wrapper-13 input[type="checkbox"]:not(.switch):after {
            width: 5px;
            height: 9px;
            border: 2px solid var(--active-inner);
            border-top: 0;
            border-left: 0;
            left: 7px;
            top: 4px;
            transform: rotate(var(--r, 20deg));
          }

          .checkbox-wrapper-13 input[type="checkbox"]:not(.switch):checked {
            --r: 43deg;
          }
        }

        .checkbox-wrapper-13 * {
          box-sizing: inherit;
        }

        .checkbox-wrapper-13 *:before,
        .checkbox-wrapper-13 *:after {
          box-sizing: inherit;
        }

        .auto-style5 {
          left: 0px;
          top: -1px;
        }
      `}</style>

      <div className="container-fluid mt-5">
        <div className="row">
          {/* CABECERA PRINCIPAL */}
          {headEmpVisible && (
            <div className="col-md-12" id="head_emp">
              <div className="row">
                <div className="alert alert-light rounded d-flex justify-content-between align-items-center">
                  <div className="col-md-9">
                    <h3>
                      <small>Informacion de empresas</small>
                    </h3>
                  </div>
                  <div className="col-md-3 text-end">
                    <button
                      type="button"
                      className="btn btn-success"
                      onClick={() =>
                        setModalAlerta({
                          show: true,
                          message: "Descargando vista en Excel...",
                        })
                      }
                    >
                      Descargar vista
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* LISTADO DE MIS EMPRESAS */}
          {divMisEmpresasVisible && (
            <div className="col-md-12" id="div_mis_empresas">
              <div className="alert alert-light rounded">
                <div className="row">
                  <div className="col-md-12">
                    <div className="alert alert-light text-dark shadow table-responsive">
                      <table className="table table-sm">
                        <thead>
                          <tr>
                            <th className="text-start" style={{ width: "5%" }}></th>
                            <th className="text-start" style={{ width: "10%" }}>
                              Rut
                            </th>
                            <td className="text-start" style={{ width: "25%" }}>
                              Razón social
                            </td>
                            <td className="text-start" style={{ width: "20%" }}>
                              Giro
                            </td>
                            <td className="text-center" style={{ width: "25%" }}>
                              Email
                            </td>
                            <td className="text-end" style={{ width: "15%" }}>
                              Fecha del último contacto
                            </td>
                          </tr>
                        </thead>
                      </table>

                      <div style={{ lineHeight: "15px" }}>
                        {misEmpresas.map((emp, index) => (
                          <table key={index} className="table table-hover">
                            <tbody>
                              <tr>
                                <td className="text-start" style={{ width: "5%" }}>
                                  <button
                                    type="button"
                                    className="btn btn-primary btn-sm"
                                    onClick={() => handleVerEmpresa(emp.rut)}
                                  >
                                    Ver
                                  </button>
                                </td>
                                <th className="text-start" style={{ width: "10%" }}>
                                  {emp.rut}
                                </th>
                                <td className="text-start" style={{ width: "25%" }}>
                                  {emp.razonSocial}
                                </td>
                                <td className="text-start" style={{ width: "20%" }}>
                                  {emp.giro}
                                </td>
                                <td className="text-center" style={{ width: "25%" }}>
                                  {emp.correo}
                                </td>
                                <td className="text-center" style={{ width: "15%" }}>
                                  {emp.ultimoContacto}
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* BOTÓN DE VOLVER A OTRA EMPRESA */}
          {volver1Visible && (
            <div className="col-md-12 alert alert-light mb-2" id="volver_1">
              <div className="row align-items-center">
                <div className="col-md-9 text-start">
                  <h3>
                    <strong>
                      <small>Cotizaciones de la empresa</small>
                    </strong>
                  </h3>
                </div>
                <div className="col-md-3 text-end">
                  <button
                    type="button"
                    className="btn btn-warning rounded"
                    onClick={handleVolverEmp}
                  >
                    Ver otra empresa
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* CUADRO RESUMEN VALORES */}
          {divValorVisible && (
            <div className="col-md-12 alert alert-light mb-2" id="div_valor">
              <div className="row">
                <div className="col-md-12">
                  <div className="row">
                    <table className="table table-sm mb-0">
                      <tbody>
                        <tr>
                          <td>
                            <h3 className="text-end mb-0">
                              <strong>
                                <small>Total Neto</small>
                              </strong>
                            </h3>
                          </td>
                          <td>
                            <input
                              type="text"
                              className="form-control"
                              readOnly
                              value={valorNeto}
                            />
                          </td>
                          <td>
                            <h3 className="text-end mb-0">
                              <strong>
                                <small>Descuento</small>
                              </strong>
                            </h3>
                          </td>
                          <td>
                            <input
                              type="text"
                              className="form-control"
                              readOnly
                              value={valorDescuento}
                            />
                          </td>
                          <td>
                            <h3 className="text-end mb-0">
                              <strong>
                                <small>Total</small>
                              </strong>
                            </h3>
                          </td>
                          <td>
                            <input
                              type="text"
                              className="form-control"
                              readOnly
                              value={valorTotal}
                            />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TARJETA DE INFORMACIÓN DE EMPRESA (LATERAL IZQUIERDA) */}
          {divCardInfoVisible && (
            <div className="col-md-3 text-start text-wrap" id="div_card_info">
              <div className="sticky-top sticky-md-top">
                <div className="auto-style5" id="card_empresa">
                  <div className="card-body alert alert-light">
                    <h5 className="card-title">
                      <strong>Empresa</strong>
                    </h5>
                    <div className="card-body px-0">
                      <div className="table-responsive">
                        <table className="table table-borderless">
                          <tbody className="table-group-divider">
                            <tr>
                              <td>
                                <h5 className="fs-6 fw-bold">R.U.T.</h5>
                              </td>
                              <td>
                                <span className="fs-6">{empresaInfo.rut}</span>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h5 className="fs-6 fw-bold">Razon Social</h5>
                              </td>
                              <td>
                                <span className="fs-6 text-wrap">
                                  {empresaInfo.razonSocial}
                                </span>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h5 className="fs-6 fw-bold">Giro</h5>
                              </td>
                              <td>
                                <span className="fs-6 text-wrap">
                                  {empresaInfo.giro}
                                </span>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h5 className="fs-6 fw-bold">Direccion</h5>
                              </td>
                              <td>
                                <span className="fs-6 text-wrap">
                                  {empresaInfo.direccion}, {empresaInfo.comuna}
                                </span>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h5 className="fs-6 fw-bold">Fono</h5>
                              </td>
                              <td>
                                <span className="fs-6">{empresaInfo.fono}</span>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h5 className="fs-6 fw-bold">Email</h5>
                              </td>
                              <td>
                                <span className="fs-6 text-wrap">
                                  {empresaInfo.correo}
                                </span>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <h5 className="fs-6 fw-bold">Contacto</h5>
                              </td>
                              <td>
                                <span className="fs-6 text-wrap">
                                  {empresaInfo.contacto}
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* LISTA DE COTIZACIONES DE LA EMPRESA */}
          {divListaCotizacionesVisible && (
            <div className="col-md-9" id="div_lista_cotizaciones">
              <div className="alert alert-light text-dark shadow table-responsive rounded">
                <table className="table table-sm caption-top">
                  <thead>
                    <tr>
                      <th className="text-start" style={{ width: "5%" }}></th>
                      <th className="text-start" style={{ width: "10%" }}>
                        Cotizacion
                      </th>
                      <td className="text-start" style={{ width: "10%" }}>
                        Contratos
                      </td>
                      <td className="text-center" style={{ width: "15%" }}>
                        Tipo
                      </td>
                      <td className="text-start" style={{ width: "10%" }}>
                        Creacion
                      </td>
                      <td className="text-center" style={{ width: "25%" }}>
                        Observacion
                      </td>
                      <td className="text-center" style={{ width: "15%" }}>
                        Valor total
                      </td>
                    </tr>
                  </thead>
                </table>

                <div style={{ lineHeight: "15px" }}>
                  {cotizaciones.map((cot, index) => (
                    <table key={index} className="table table-hover mb-0">
                      <tbody>
                        <tr>
                          <td className="text-start" style={{ width: "5%" }}>
                            <button
                              type="button"
                              className="btn btn-primary btn-sm d-flex align-items-center gap-1"
                              onClick={() => handleDetalleCotizacion(cot)}
                            >
                              <Search style={{ fontSize: "16px" }} /> ver
                            </button>
                          </td>
                          <th className="text-start mx-auto" style={{ width: "10%" }}>
                            {cot.cotizacion}
                          </th>
                          <td className="text-start" style={{ width: "10%" }}>
                            {cot.contratosAsociados}
                          </td>
                          <td className="text-start" style={{ width: "15%" }}>
                            {cot.tipoCotizacion}
                          </td>
                          <td className="text-start" style={{ width: "10%" }}>
                            {cot.creacion}
                          </td>
                          <td className="text-center" style={{ width: "25%" }}>
                            {cot.estadoCotizacion}
                          </td>
                          <td className="text-center" style={{ width: "15%" }}>
                            {cot.valor}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* VISTA CONTENEDORA DE DETALLES Y ACCIONES DE COTIZACIÓN */}
          {divDetalleVisible && (
            <div className="col-md-9" id="div_detalle">
              <div className="row">
                {/* BARRA ACCIONES COTIZACIÓN */}
                {btnSubirContratosVisible && (
                  <div className="col-md-12" id="btn_subir_contratos">
                    <div className="alert alert-light">
                      <div className="row align-items-center">
                        <div className="col-md-4 text-start">
                          <button
                            type="button"
                            className="btn btn-warning"
                            onClick={handleVolverCotz}
                          >
                            Ver otra cotización
                          </button>
                        </div>
                        <div className="col-md-4 text-center">
                          <h3 className="mb-0">
                            <strong>
                              <small>Cotización: {idCotizacionV2}</small>
                            </strong>
                          </h3>
                        </div>
                        <div className="col-md-4 text-end">
                          <button
                            type="button"
                            className="btn btn-primary btn-sm"
                            onClick={handleSubirContratos}
                          >
                            {/* <Upload className="me-1" /> */}
                            Subir contrato firmado por cliente
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* TABLA DE CONTRATOS */}
                {divDetalleContratosVisible && (
                  <div className="col-md-12 mb-3" id="div_detalle_contratos">
                    <div className="alert alert-light">
                      <table className="table table-sm">
                        <thead>
                          <tr>
                            <th className="text-center" style={{ width: "5%" }}>
                              Ver contrato
                            </th>
                            <th className="text-center" style={{ width: "5%" }}>
                              Recargar contrato
                            </th>
                            <th className="text-center" style={{ width: "10%" }}>
                              Contrato
                            </th>
                            <td className="text-center" style={{ width: "10%" }}>
                              Estado
                            </td>
                            <td className="text-center" style={{ width: "20%" }}>
                              Curso
                            </td>
                            <td className="text-center" style={{ width: "5%" }}>
                              Participantes
                            </td>
                            <td className="text-center" style={{ width: "15%" }}>
                              Valor
                            </td>
                          </tr>
                        </thead>
                      </table>

                      <div style={{ lineHeight: "15px" }}>
                        {contratos.map((c, index) => (
                          <table key={index} className="table table-hover mb-0">
                            <tbody>
                              <tr>
                                <td className="text-start" style={{ width: "5%" }}>
                                  <a
                                    target="_blank"
                                    rel="noreferrer"
                                    href={c.url}
                                    className="btn btn-primary btn-sm"
                                  >
                                    {/* <FilePdf /> */}
                                  </a>
                                </td>
                                <td className="text-center" style={{ width: "5%" }}>
                                  <button
                                    type="button"
                                    className="btn btn-primary btn-sm"
                                    disabled={c.firmaEstado === 1}
                                  >
                                    {/* <Refresh /> */}
                                  </button>
                                </td>
                                <th className="text-center" style={{ width: "10%" }}>
                                  {c.contrato}
                                </th>
                                <th
                                  className="text-center mx-auto"
                                  style={{ width: "10%" }}
                                >
                                  {c.firmaEstado === 1
                                    ? "CONTRATO FIRMADO"
                                    : "CONTRATO SIN FIRMAR"}
                                </th>
                                <td className="text-center" style={{ width: "20%" }}>
                                  {c.cursoInfo}
                                </td>
                                <td className="text-center" style={{ width: "5%" }}>
                                  <button
                                    type="button"
                                    className="btn btn-link btn-sm p-0 text-decoration-none"
                                    onClick={() => handleVerParticipantes(c.contrato)}
                                  >
                                    <Search className="me-1" />
                                    Ver Participantes
                                  </button>
                                </td>
                                <td className="text-center" style={{ width: "15%" }}>
                                  {c.valor}
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        ))}
                      </div>
                    </div>
                  </div>
                )}

                {/* SECCIÓN COMPROBANTE DE PAGO (OC) */}
                {divDetalleOcVisible && (
                  <div className="col-md-6" id="div_detalle_oc">
                    <div className="alert alert-light">
                      <div className="mb-2">
                        <button
                          type="button"
                          className="btn btn-warning btn-sm"
                          onClick={() => handleSubirContratos()}
                        >
                          {/* <Upload className="me-1" /> */}
                          Subir Comprobante de pago
                        </button>
                      </div>
                      <table className="table table-sm caption-top">
                        <thead>
                          <tr>
                            <th className="text-start" style={{ width: "5%" }}></th>
                            <th className="text-start small" style={{ width: "10%" }}>
                              Número Interno
                            </th>
                            <th className="text-center small" style={{ width: "10%" }}>
                              Fecha de Subida
                            </th>
                            <th className="text-center small" style={{ width: "10%" }}>
                              Tipo Documento
                            </th>
                            <th className="text-center small" style={{ width: "10%" }}>
                              Responsable
                            </th>
                          </tr>
                        </thead>
                      </table>

                      <div style={{ lineHeight: "15px" }}>
                        {comprobantesOC.map((oc, index) => (
                          <table key={index} className="table table-hover mb-0">
                            <tbody>
                              <tr>
                                <td className="text-start" style={{ width: "5%" }}>
                                  <a
                                    target="_blank"
                                    rel="noreferrer"
                                    href={`https://sam.norteamericano.cl/documentos/Comprobante/${oc.detalle}`}
                                    className="btn btn-primary btn-sm"
                                  >
                                    Ver
                                  </a>
                                </td>
                                <td
                                  className="text-start small text-wrap"
                                  style={{ width: "10%" }}
                                >
                                  {oc.numeroInterno}
                                </td>
                                <td className="text-center small" style={{ width: "10%" }}>
                                  {oc.fechaSubida}
                                </td>
                                <td className="text-center small" style={{ width: "10%" }}>
                                  {oc.tipoDocumento}
                                </td>
                                <td className="text-center small" style={{ width: "10%" }}>
                                  {oc.responsable}
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        ))}
                      </div>
                    </div>
                  </div>
                )}

                {/* SECCIÓN INSCRIPCIÓN SENCE */}
                {divDetalleSncVisible && (
                  <div className="col-md-6" id="div_detalle_snc">
                    <div className="alert alert-light">
                      <div className="mb-2">
                        <button
                          type="button"
                          className="btn btn-warning btn-sm"
                          onClick={() => handleSubirContratos()}
                        >
                          {/* <Upload className="me-1" /> */}
                          Subir Inscripcion SENCE
                        </button>
                      </div>
                      <table className="table table-sm caption-top">
                        <thead>
                          <tr>
                            <th className="text-center" style={{ width: "10%" }}></th>
                            <th className="text-center" style={{ width: "40%" }}>
                              Inscripción sence
                            </th>
                            <th className="text-center" style={{ width: "20%" }}>
                              Fecha de subida
                            </th>
                            <th className="text-center" style={{ width: "30%" }}>
                              Responsable
                            </th>
                          </tr>
                        </thead>
                      </table>

                      <div style={{ lineHeight: "15px" }}>
                        {inscripcionesSNC.map((snc, index) => (
                          <table key={index} className="table table-sm mb-0">
                            <tbody>
                              <tr>
                                <th className="text-center" style={{ width: "10%" }}>
                                  <a
                                    target="_blank"
                                    rel="noreferrer"
                                    href={`https://sam.norteamericano.cl/documentos/Sence/${snc.detalle}`}
                                    className="btn btn-primary btn-sm"
                                  >
                                    Ver
                                  </a>
                                </th>
                                <td className="text-center small" style={{ width: "40%" }}>
                                  {snc.codInscripcion}
                                </td>
                                <td className="text-center small" style={{ width: "20%" }}>
                                  {snc.fechaSubida}
                                </td>
                                <td className="text-center small" style={{ width: "30%" }}>
                                  {snc.responsable}
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        ))}
                      </div>
                    </div>
                  </div>
                )}

                {/* PANEL DE CARGA DE DOCUMENTOS */}
                {divDetalleUpDocVisible && (
                  <div className="col-md-12" id="div_detalle_upDoc">
                    <div className="alert alert-light">
                      <div className="col-md-12 mb-3">
                        <button
                          type="button"
                          className="btn btn-warning"
                          onClick={() => {
                            setDivDetalleUpDocVisible(false);
                            setDivDetalleContratosVisible(true);
                            setDivDetalleOcVisible(true);
                            setDivDetalleSncVisible(true);
                          }}
                        >
                          <ChevronLeft className="me-1" /> Volver
                        </button>
                      </div>
                      <div className="row">
                        <div className="col-md-12" id="div_detalle_upDoc_select">
                          <table className="table table-sm caption-top">
                            <caption>Contratos</caption>
                            <thead>
                              <tr>
                                <th className="text-center" style={{ width: "10%" }}></th>
                                <th className="text-center" style={{ width: "10%" }}>
                                  Contrato
                                </th>
                                <th className="text-center" style={{ width: "30%" }}>
                                  Estado
                                </th>
                              </tr>
                            </thead>
                          </table>

                          <div style={{ lineHeight: "15px" }}>
                            {contratos.map((c, index) => (
                              <table key={index} className="table table-sm mb-0">
                                <tbody>
                                  <tr>
                                    <th className="text-center" style={{ width: "10%" }}>
                                      <button
                                        type="button"
                                        className="btn btn-primary btn-sm"
                                        onClick={() => {
                                          setContIDV2(c.contrato);
                                          setDivDetalleUpDocDetalleVisible(true);
                                        }}
                                      >
                                        Seleccionar
                                      </button>
                                    </th>
                                    <th
                                      className="text-center small"
                                      style={{ width: "10%" }}
                                    >
                                      {c.contrato}
                                    </th>
                                    <td
                                      className="text-center small"
                                      style={{ width: "30%" }}
                                    >
                                      {c.firmaEstado === 1
                                        ? "CONTRATO FIRMADO"
                                        : "CONTRATO SIN FIRMAR"}
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            ))}
                          </div>
                        </div>

                        {/* SUB-FORMULARIO DE CARGA */}
                        {divDetalleUpDocDetalleVisible && (
                          <div
                            className="col-md-12 mt-3"
                            id="div_detalle_upDoc_detalle"
                          >
                            <div className="row">
                              <div className="input-group">
                                <span className="input-group-text">
                                  Numero Contrato
                                </span>
                                <input
                                  type="text"
                                  className="form-control"
                                  value={contIDV2}
                                  onChange={(e) => setContIDV2(e.target.value)}
                                />
                                <span className="input-group-text ms-2">
                                  Numero Documento
                                </span>
                                <input
                                  type="text"
                                  className="form-control"
                                  value={numInterDoc}
                                  onChange={(e) => setNumInterDoc(e.target.value)}
                                />
                              </div>

                              <div className="input-group mt-2">
                                <input
                                  type="file"
                                  className="form-control"
                                  aria-label="Upload"
                                />
                                <button
                                  type="button"
                                  className="btn btn-outline-secondary"
                                  onClick={handleSubirArchivoFinal}
                                >
                                  Subir Archivo
                                </button>
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* --- MODAL POPUP DE RESPUESTA / ERROR / OK --- */}
      {modalRespuesta.show && (
        <div
          className="modal fade show d-block bg-dark bg-opacity-50"
          tabIndex={-1}
          role="dialog"
        >
          <div className="modal-dialog modal-dialog-centered" role="document">
            <div className="modal-content">
              <div
                className="modal-header text-white text-center"
                style={{ backgroundColor: "#373193" }}
              >
                <h5 className="modal-title">Empresas</h5>
              </div>
              <div className="modal-body">
                {modalRespuesta.errorMsg && (
                  <div>
                    <strong style={{ color: "#e22523" }}>
                      {/* <ErrorCircle className="me-1" /> */}
                      <span>{modalRespuesta.errorMsg}</span>
                    </strong>
                  </div>
                )}
                {modalRespuesta.okMsg && (
                  <div>
                    <strong style={{ color: "#00285d" }}>
                      <CheckCircle className="me-1" />
                      <span>{modalRespuesta.okMsg}</span>
                    </strong>
                  </div>
                )}
              </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-secondary"
                  onClick={() =>
                    setModalRespuesta({ show: false, errorMsg: "", okMsg: "" })
                  }
                >
                  Cerrar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* --- MODAL PARTICIPANTES (GRID ALUMNOS) --- */}
      {modalAlumnos.show && (
        <div
          className="modal fade show d-block bg-dark bg-opacity-50"
          tabIndex={-1}
          role="dialog"
        >
          <div className="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div className="modal-content">
              <div
                className="modal-header text-white text-center"
                style={{ backgroundColor: "#373193" }}
              >
                <h5 className="modal-title">Listado de Alumnos</h5>
              </div>
              <div className="modal-body">
                <table className="table table-bordered table-hover table-sm bg-white text-sm">
                  <thead>
                    <tr>
                      <th>RUT</th>
                      <th>Nombre</th>
                      <th>Correo</th>
                    </tr>
                  </thead>
                  <tbody>
                    {modalAlumnos.data.map((al, idx) => (
                      <tr key={idx}>
                        <td>{al.rut}</td>
                        <td>{al.nombre}</td>
                        <td>{al.email}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-secondary"
                  onClick={() => setModalAlumnos({ show: false, data: [] })}
                >
                  Cerrar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* --- MODAL MENSAJE ALERTA --- */}
      {modalAlerta.show && (
        <div
          className="modal fade show d-block bg-dark bg-opacity-50"
          tabIndex={-1}
          role="dialog"
        >
          <div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div className="modal-content text-dark">
              <div className="modal-header alert alert-secondary mb-0">
                <h5 className="float-start mt-2">
                  <strong>Módulo Venta - Empresa</strong>
                </h5>
                <button
                  type="button"
                  className="btn-close float-end mt-1"
                  onClick={() => setModalAlerta({ show: false, message: "" })}
                  aria-label="Close"
                ></button>
              </div>
              <div
                className="modal-body alert mb-0"
                style={{ textAlign: "justify" }}
              >
                <div className="row mb-2">
                  <div className="col-md-12 text-center">
                    <h5>
                      <strong>{modalAlerta.message}</strong>
                    </h5>
                  </div>
                </div>
              </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => setModalAlerta({ show: false, message: "" })}
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* --- MODAL MENSAJE CARGANDO --- */}
      {isLoading && (
        <div
          className="modal fade show d-block bg-dark bg-opacity-50"
          tabIndex={-1}
          role="dialog"
        >
          <div className="modal-dialog modal-dialog-centered">
            <div className="modal-content">
              <div className="modal-body">
                <div className="col-md-12 text-center py-3">
                  <div className="spinner-border text-info" role="status">
                    <span className="visually-hidden">Loading...</span>
                  </div>
                  <p className="mt-2 mb-0">Procesando la información...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}