
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Acta de Reunión</title>
    <link rel="stylesheet" href="styles.css">
    <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=C-FyQYFqZ0Sw0tmmRq6PhoCV1nEa2lHMlLPYnMiwz8dcoHKmfMlfUrBZZHOcIRZq34IpoucgoPMCjhKTLE4N7g" charset="UTF-8"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?render=6Leb9rAZAAAAAIqhweTtDUTDweD1362ZMRGlecZm"></script>
    <script defer src="scripts.js"></script>
</head>
<body>
    <form id="actaForm">
        <h1>Acta de Reunión - Creado por SAFE MODE SAS</h1>
        <button type="button" onclick="window.open('https://smsafemode.com/apps/actas/info', '_blank');"
            style="background-color: #2baafc; color: white; width: 100%; border: none; padding: 10px; border-radius: 5px; font-size: 16px; cursor: pointer;">
            Instrucciones
        </button>


        <!-- Datos de la reunión -->
        <div class="form-section">
            <h2>Datos de la Reunión</h2>
            <table>
                <tr>
                    <th>Fecha de Acta</th>
                    <td><input type="date" id="fechaActa"></td>
                </tr>
                <tr>
                    <th>Razon social</th>
                    <td><input type="text" id="razonSocial"></td>
                </tr>
                <tr>
                    <th>Número de Acta</th>
                    <td><input type="text" id="numeroActa"></td>
                </tr>
                <tr>
                    <th>Tipo de Reunión</th>
                    <td>
                        <select id="tipoReunion">
                            <option value="ordinaria">Ordinaria</option>
                            <option value="extraordinaria">Extraordinaria</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>Reunión de</th>
                    <td>
                        <select id="reunionDe" onchange="actualizarVerificacionRecurrente()">
                            <option value="Otro">Otro</option>
                            <option value="COPASST">COPASST</option>
                            <option value="Comité de convivencia">Comité de convivencia</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>

        <!-- Verificación Recurrente -->
        <div class="form-section" id="verificacionRecurrenteSection" style="display: none;">
            <h2>Verificación Recurrente</h2>
            <table>
                <tr id="verificacionAccidentes" style="display: none;">
                    <th>Accidentes</th>
                    <td>
                        <select id="accidentes" onchange="toggleDetalles('accidentes', this.value)">
                            <option value="no">No</option>
                            <option value="si">Sí</option>
                        </select>
                    </td>
                </tr>
                <tr id="detallesAccidentes" style="display: none;">
                    <th>Detalles sobre Accidentes</th>
                    <td><textarea id="detallesAccidentesTexto" rows="3" placeholder="Escribe los detalles..."></textarea></td>
                </tr>
                <tr id="verificacionEnfermedades" style="display: none;">
                    <th>Enfermedades Laborales</th>
                    <td>
                        <select id="enfermedades" onchange="toggleDetalles('enfermedades', this.value)">
                            <option value="no">No</option>
                            <option value="si">Sí</option>
                        </select>
                    </td>
                </tr>
                <tr id="detallesEnfermedades" style="display: none;">
                    <th>Detalles sobre Enfermedades</th>
                    <td><textarea id="detallesEnfermedadesTexto" rows="3" placeholder="Escribe los detalles..."></textarea></td>
                </tr>
                <tr id="verificacionReportes" style="display: none;">
                    <th>Reportes de los Trabajadores</th>
                    <td>
                        <select id="reportes" onchange="toggleDetalles('reportes', this.value)">
                            <option value="no">No</option>
                            <option value="si">Sí</option>
                        </select>
                    </td>
                </tr>
                <tr id="detallesReportes" style="display: none;">
                    <th>Detalles sobre Reportes</th>
                    <td><textarea id="detallesReportesTexto" rows="3" placeholder="Escribe los detalles..."></textarea></td>
                </tr>
                <tr id="verificacionAcoso" style="display: none;">
                    <th>Casos de Acoso</th>
                    <td>
                        <select id="acoso" onchange="toggleDetalles('acoso', this.value)">
                            <option value="no">No</option>
                            <option value="si">Sí</option>
                        </select>
                    </td>
                </tr>
                <tr id="detallesAcoso" style="display: none;">
                    <th>Detalles sobre Casos de Acoso</th>
                    <td><textarea id="detallesAcosoTexto" rows="3" placeholder="Escribe los detalles..."></textarea></td>
                </tr>
            </table>
        </div>

        <!-- Participantes -->
        <div class="form-section">
            <h2>Participantes</h2>
            <table id="participantesTable">
                <thead>
                    <tr>
                        <th>Nombre y Apellidos</th>
                        <th>Documento de Identidad</th>
                        <th>Correo</th>
                        <th>Cargo</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="participanteRow">
                        <td><input type="text" class="nombre"></td>
                        <td><input type="text" class="documento"></td>
                        <td><input type="email" class="correo"></td>
                        <td><input type="text" class="cargo"></td>
                    </tr>
                </tbody>
            </table>
            <button type="button" onclick="agregarParticipante()">Agregar Participante</button>
        </div>

        <!-- Puntos clave del acta anterior -->
        <div class="form-section">
            <h2>Puntos Clave del Acta Anterior</h2>
            <table>
                <tr>
                    <td><textarea id="puntosClave" rows="4" placeholder="Escribe los puntos clave aquí..."></textarea></td>
                </tr>
            </table>
        </div>

         <!-- Compromisos cerrados -->
         <div class="form-section">
            <h2>Compromisos Cerrados de la Anterior Reunión</h2>
            <table id="compromisosCerradosTable">
                <thead>
                    <tr>
                        <th>Compromiso</th>
                        <th>Acción Realizada</th>
                        <th>Nombre de Quien Realizó el Cierre</th>
                        <th>Fecha de Cierre</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="compromisoRow">
                        <td><input type="text" class="compromiso"></td>
                        <td>
                            <select class="accionRealizada">
                                <option value="si">Sí</option>
                                <option value="no">No</option>
                            </select>
                        </td>
                        <td><input type="text" class="nombreCierre"></td>
                        <td><input type="date" class="fechaCierre"></td>
                    </tr>
                </tbody>
            </table>
            <button type="button" onclick="agregarCompromisoCerrado()">Agregar Compromiso Cerrado</button>
        </div>

        <!-- Desarrollo de la reunión -->
        <div class="form-section">
            <h2>Desarrollo de la Reunión</h2>
            <table>
                <tr>
                    <td><textarea id="desarrolloReunion" rows="4" placeholder="Describe el desarrollo de la reunión..."></textarea></td>
                </tr>
            </table>
        </div>

       

        <!-- Nuevos compromisos -->
        <div class="form-section">
            <h2>Nuevos Compromisos</h2>
            <table id="nuevosCompromisosTable">
                <thead>
                    <tr>
                        <th>Compromiso</th>
                        <th>Responsable</th>
                        <th>Fecha de Cierre</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="nuevoCompromisoRow">
                        <td><input type="text" class="nuevoCompromiso"></td>
                        <td><input type="text" class="responsable"></td>
                        <td><input type="date" class="fechaNuevoCierre"></td>
                    </tr>
                </tbody>
            </table>
            <button type="button" onclick="agregarNuevoCompromiso()">Agregar Nuevo Compromiso</button>
        </div>

<!-- Firmas -->
<div class="form-section">
    <h2>Espacios de Firma de los Participantes</h2>
    <button type="button" class="btn-firmar-acta" onclick="generarEspaciosDeFirma()" style="margin-bottom: 20px;">
        Firmar Acta / Borrar Firmas
    </button>
    <div id="firmasContainer" style="display: none;"></div>
    
    <!-- Generar PDF -->
    <button type="button" onclick="generarPDFYEnviar()">
        Generar y Enviar Acta
    </button>
</body>

<footer class="centered-footer">
    <p>
        <img src="https://firebasestorage.googleapis.com/v0/b/safe-mode.appspot.com/o/svg%20para%20paginas%2FSafe%20Mode%20----%20color%20formas.svg?alt=media&amp;token=08d31062-616b-436d-91e4-07e34745d6ae" width="30%" />
    </p>
    <p id="copyYear" style="text-align: center;">&copy; SAFE MODE SAS </p>
</footer>
</html>
