{% extends "base.html" %}

{% block title %}Ayuda Denuncias Ley Karin - Generador + Guía{% endblock %}

{% block styles %}
<style>
    :root {
        --bg: #f7f9fc;
        --fg: #0f172a;
        --muted: #64748b;
        --card: #ffffff;
        --brand: #4a6baf;
        --ok: #16a34a;
        --warn: #d97706;
        --danger: #dc2626;
        --ring: #93c5fd;
    }

    .ley-karin-container {
        background: linear-gradient(180deg, var(--bg), #fff);
        min-height: 100vh;
        padding: 2rem 0;
    }

    .ley-karin-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .ley-karin-header h1 {
        color: var(--brand);
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .ley-karin-header .subtitle {
        color: var(--muted);
        font-size: 1.1rem;
    }

    .tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 2rem 0;
        justify-content: center;
    }

    .tab-btn {
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 14px;
        padding: 12px 18px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .tab-btn.active {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
    }

    .tab-btn:hover:not(.active) {
        background: #f8fafc;
        border-color: var(--brand);
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .ley-card {
        background: var(--card);
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        box-shadow: 0 4px 16px rgba(2, 6, 23, 0.06);
        margin-bottom: 1.5rem;
    }

    .ley-card .card-body {
        padding: 2rem;
    }

    .ley-card h2 {
        font-size: 1.4rem;
        margin: 0 0 0.5rem 0;
        color: var(--brand);
    }

    .ley-card .sub {
        color: var(--muted);
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .form-grid {
        display: grid;
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .form-grid-2 {
            grid-template-columns: 1fr 1fr;
        }
    }

    .form-label {
        font-weight: 500;
        color: var(--fg);
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select {
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        padding: 12px 16px;
        transition: border-color 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 0.2rem rgba(74, 107, 175, 0.25);
    }

    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }

    .btn-ley {
        border-radius: 12px;
        padding: 12px 20px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-ley.btn-primary {
        background: var(--brand);
        border-color: var(--brand);
    }

    .btn-ley.btn-secondary {
        background: #e2e8f0;
        color: #0f172a;
        border-color: #e2e8f0;
    }

    .btn-ley.btn-outline-secondary {
        background: transparent;
        border: 1px solid #e5e7eb;
        color: var(--fg);
    }

    .preview-card {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 1.5rem;
        min-height: 300px;
    }

    .preview-content {
        white-space: pre-wrap;
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .badge-info {
        background: #e0f2fe;
        color: #075985;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .alert-info {
        background: #fff7ed;
        border: 1px solid #ffedd5;
        color: #9a3412;
        border-radius: 12px;
        padding: 1rem;
    }

    .list-clean {
        padding-left: 1.2rem;
    }

    .list-clean li {
        margin-bottom: 0.5rem;
    }

    .text-success { color: var(--ok) !important; }
    .text-warning { color: var(--warn) !important; }
    .text-danger { color: var(--danger) !important; }
    .text-muted { color: var(--muted) !important; }

    .pill {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid #e5e7eb;
        background: #fff;
        font-size: 0.9rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="ley-karin-container">
    <div class="container">
        <div class="ley-karin-header">
            <h1><i class="fas fa-shield-alt me-2"></i>Ayuda Denuncias Ley Karin</h1>
            <p class="subtitle">Generador de cartas de denuncia y guía completa para casos de acoso laboral</p>
            <span class="badge-info">Herramienta gratuita y confidencial</span>
        </div>

        <nav class="tabs" id="tabs">
            <button class="tab-btn active" data-tab="generador">Generar carta</button>
            <button class="tab-btn" data-tab="sin-testigos">Sin testigos</button>
            <button class="tab-btn" data-tab="cronologia">Cronología</button>
            <button class="tab-btn" data-tab="checklist">Checklist</button>
            <button class="tab-btn" data-tab="recursos">Recursos</button>
        </nav>

        <!-- Generador -->
        <div class="tab-content active" id="tab-generador">
            <div class="ley-card">
                <div class="card-body">
                    <h2>Generador de carta de denuncia</h2>
                    <p class="sub">Para presentar en la Dirección del Trabajo o ante tu empleador/servicio. Incluye opción sin contrato.</p>
                    
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-grid form-grid-2">
                                <div>
                                    <label class="form-label">Sector</label>
                                    <select class="form-select" id="sector">
                                        <option value="privado" selected>Privado</option>
                                        <option value="publico">Público</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label">¿Sin contrato escrito?</label>
                                    <select class="form-select" id="sinContrato">
                                        <option value="si" selected>Sí</option>
                                        <option value="no">No</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-grid form-grid-2 mt-3">
                                <div>
                                    <label class="form-label">Tipo de situación</label>
                                    <select class="form-select" id="tipoAcoso">
                                        <option value="laboral" selected>Acoso laboral</option>
                                        <option value="sexual">Acoso sexual</option>
                                        <option value="violencia">Violencia en el trabajo</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label">Inicio de labores</label>
                                    <input class="form-control" id="inicio" placeholder="dd/mm/aaaa"/>
                                </div>
                            </div>
                            
                            <div class="form-grid form-grid-2 mt-3">
                                <div>
                                    <label class="form-label">Tu nombre</label>
                                    <input class="form-control" id="nombre"/>
                                </div>
                                <div>
                                    <label class="form-label">RUT</label>
                                    <input class="form-control" id="rut"/>
                                </div>
                            </div>
                            
                            <div class="form-grid form-grid-2 mt-3">
                                <div>
                                    <label class="form-label">Dirección particular</label>
                                    <input class="form-control" id="direccion"/>
                                </div>
                                <div>
                                    <label class="form-label">Teléfono</label>
                                    <input class="form-control" id="telefono"/>
                                </div>
                            </div>
                            
                            <div class="form-grid form-grid-2 mt-3">
                                <div>
                                    <label class="form-label">Email</label>
                                    <input class="form-control" id="email" type="email"/>
                                </div>
                                <div>
                                    <label class="form-label">Empleador/Empresa</label>
                                    <input class="form-control" id="empleador"/>
                                </div>
                            </div>
                            
                            <div class="form-grid form-grid-2 mt-3">
                                <div>
                                    <label class="form-label">RUT del empleador (opcional)</label>
                                    <input class="form-control" id="rutEmpleador"/>
                                </div>
                                <div>
                                    <label class="form-label">Dirección del trabajo</label>
                                    <input class="form-control" id="dirTrabajo"/>
                                </div>
                            </div>
                            
                            <div class="form-grid form-grid-2 mt-3">
                                <div>
                                    <label class="form-label">Funciones</label>
                                    <input class="form-control" id="funciones"/>
                                </div>
                                <div>
                                    <label class="form-label">Jornada/horario</label>
                                    <input class="form-control" id="jornada"/>
                                </div>
                            </div>
                            
                            <div class="form-grid form-grid-2 mt-3">
                                <div>
                                    <label class="form-label">Pagos (monto y periodicidad)</label>
                                    <input class="form-control" id="pagos"/>
                                </div>
                                <div>
                                    <label class="form-label">Respaldos (lista)</label>
                                    <input class="form-control" id="respaldos" placeholder="WhatsApp, depósitos, fotos, testigos"/>
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <label class="form-label">Relata los hechos (uno por línea)</label>
                                <textarea class="form-control" id="hechos" placeholder="Ejemplos:
- 05/06/2025: mi supervisor me gritó frente a clientes.
- 12/06/2025: me asignaron tareas humillantes sin motivo.
- 20/06/2025: pedí parar el hostigamiento y no respondieron."></textarea>
                            </div>
                            
                            <div class="form-grid form-grid-2 mt-3">
                                <div>
                                    <label class="form-label">Medidas de resguardo solicitadas</label>
                                    <input class="form-control" id="medidas" placeholder="Separación, cambio de turno, prohibición de contacto"/>
                                </div>
                                <div>
                                    <label class="form-label">Perjuicios/daños (opcional)</label>
                                    <input class="form-control" id="danos" placeholder="Licencias, ansiedad, baja de ingresos, etc."/>
                                </div>
                            </div>
                            
                            <div class="d-flex gap-2 mt-4">
                                <button class="btn btn-primary btn-ley" id="btnCopiar">
                                    <i class="fas fa-copy me-1"></i>Copiar carta
                                </button>
                                <button class="btn btn-secondary btn-ley" id="btnDescargar">
                                    <i class="fas fa-download me-1"></i>Descargar .txt
                                </button>
                                <button class="btn btn-outline-secondary btn-ley" id="btnLimpiar">
                                    <i class="fas fa-eraser me-1"></i>Limpiar
                                </button>
                            </div>
                            
                            <div class="alert alert-info mt-3">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Consejo:</strong> Guarda también tu denuncia en PDF (Imprimir → Guardar como PDF).
                            </div>
                        </div>
                        
                        <div class="col-lg-6">
                            <div class="ley-card">
                                <div class="card-body">
                                    <h3 class="mb-3">Vista previa</h3>
                                    <div class="preview-card">
                                        <div class="preview-content" id="preview">Completa los campos para generar tu carta de denuncia...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Sin testigos -->
        <div class="tab-content" id="tab-sin-testigos">
            <div class="ley-card">
                <div class="card-body">
                    <h2>¿No tienes testigos? Igual puedes denunciar</h2>
                    <p class="sub">Refuerza tu caso con otros medios de prueba válidos en Chile.</p>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="ley-card">
                                <div class="card-body">
                                    <h3>Evidencias alternativas</h3>
                                    <ul class="list-clean">
                                        <li>Mensajes y correos (WhatsApp, email, chat interno).</li>
                                        <li>Grabaciones: si <strong>tú participas</strong> en la conversación, puedes grabarla.</li>
                                        <li>Documentos: emails, memorandos, evaluaciones injustas.</li>
                                        <li>Registros médicos: licencias, tratamientos por estrés.</li>
                                        <li>Fotografías de ambiente laboral hostil.</li>
                                        <li>Bitácora personal detallada de incidentes.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="ley-card">
                                <div class="card-body">
                                    <h3>Estrategias legales</h3>
                                    <ul class="list-clean">
                                        <li><strong>Presunción legal:</strong> Si presentas indicios, el empleador debe probar que no hubo acoso.</li>
                                        <li><strong>Patrón de conducta:</strong> Documenta múltiples incidentes similares.</li>
                                        <li><strong>Testigos indirectos:</strong> Personas que vieron las consecuencias.</li>
                                        <li><strong>Pericia psicológica:</strong> Evaluación del daño causado.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="fas fa-lightbulb me-2"></i>
                        <strong>Recuerda:</strong> La Ley Karin establece que la carga de la prueba se invierte. Si presentas indicios razonables, el empleador debe demostrar que no hubo acoso.
                    </div>
                </div>
            </div>
        </div>

        <!-- Cronología -->
        <div class="tab-content" id="tab-cronologia">
            <div class="ley-card">
                <div class="card-body">
                    <h2>Cronología de hechos</h2>
                    <p class="sub">Organiza los eventos de manera clara y cronológica para fortalecer tu denuncia.</p>
                    
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label class="form-label">Fecha del incidente</label>
                                <input type="date" class="form-control" id="fechaIncidente">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Descripción del hecho</label>
                                <textarea class="form-control" id="descripcionHecho" placeholder="Describe detalladamente lo ocurrido..."></textarea>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Lugar</label>
                                    <input class="form-control" id="lugarHecho" placeholder="Oficina, sala de reuniones, etc.">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Testigos presentes</label>
                                    <input class="form-control" id="testigosHecho" placeholder="Nombres de testigos (opcional)">
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <label class="form-label">Evidencias relacionadas</label>
                                <input class="form-control" id="evidenciasHecho" placeholder="Mensajes, emails, fotos, etc.">
                            </div>
                            
                            <button class="btn btn-primary btn-ley mt-3" id="btnAgregarHecho">
                                <i class="fas fa-plus me-1"></i>Agregar a cronología
                            </button>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="ley-card">
                                <div class="card-body">
                                    <h4>Cronología actual</h4>
                                    <div id="cronologiaLista" class="mt-3">
                                        <p class="text-muted">No hay eventos agregados aún.</p>
                                    </div>
                                    
                                    <div class="mt-3">
                                        <button class="btn btn-secondary btn-ley btn-sm" id="btnExportarCronologia">
                                            <i class="fas fa-download me-1"></i>Exportar
                                        </button>
                                        <button class="btn btn-outline-secondary btn-ley btn-sm" id="btnLimpiarCronologia">
                                            <i class="fas fa-trash me-1"></i>Limpiar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Checklist -->
        <div class="tab-content" id="tab-checklist">
            <div class="ley-card">
                <div class="card-body">
                    <h2>Checklist antes de denunciar</h2>
                    <p class="sub">Verifica que tienes todo lo necesario para una denuncia sólida.</p>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="text-primary">Documentación personal</h4>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check1">
                                <label class="form-check-label" for="check1">
                                    Copia de contrato de trabajo (o evidencia de relación laboral)
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check2">
                                <label class="form-check-label" for="check2">
                                    Liquidaciones de sueldo
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check3">
                                <label class="form-check-label" for="check3">
                                    Descripción de funciones o cargo
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check4">
                                <label class="form-check-label" for="check4">
                                    Organigrama o estructura jerárquica
                                </label>
                            </div>
                            
                            <h4 class="text-primary mt-4">Evidencias del acoso</h4>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check5">
                                <label class="form-check-label" for="check5">
                                    Mensajes, emails o comunicaciones
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check6">
                                <label class="form-check-label" for="check6">
                                    Cronología detallada de hechos
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check7">
                                <label class="form-check-label" for="check7">
                                    Fotografías o videos (si aplica)
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check8">
                                <label class="form-check-label" for="check8">
                                    Grabaciones de audio (si participaste en la conversación)
                                </label>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <h4 class="text-primary">Documentación médica</h4>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check9">
                                <label class="form-check-label" for="check9">
                                    Licencias médicas relacionadas
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check10">
                                <label class="form-check-label" for="check10">
                                    Informes psicológicos o psiquiátricos
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check11">
                                <label class="form-check-label" for="check11">
                                    Recetas o tratamientos médicos
                                </label>
                            </div>
                            
                            <h4 class="text-primary mt-4">Testigos y apoyo</h4>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check12">
                                <label class="form-check-label" for="check12">
                                    Lista de testigos directos
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check13">
                                <label class="form-check-label" for="check13">
                                    Testigos de las consecuencias
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check14">
                                <label class="form-check-label" for="check14">
                                    Apoyo sindical (si aplica)
                                </label>
                            </div>
                            
                            <h4 class="text-primary mt-4">Procedimientos internos</h4>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check15">
                                <label class="form-check-label" for="check15">
                                    Intenté resolver internamente
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="check16">
                                <label class="form-check-label" for="check16">
                                    Tengo respuesta (o falta de respuesta) documentada
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4 p-3 bg-light rounded">
                        <h5>Progreso del checklist</h5>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" id="progressBar" style="width: 0%"></div>
                        </div>
                        <p class="mt-2 mb-0" id="progressText">0 de 16 elementos completados</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recursos -->
        <div class="tab-content" id="tab-recursos">
            <div class="ley-card">
                <div class="card-body">
                    <h2>Recursos y contactos útiles</h2>
                    <p class="sub">Información importante sobre la Ley Karin y dónde buscar ayuda.</p>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="ley-card">
                                <div class="card-body">
                                    <h4><i class="fas fa-gavel text-primary me-2"></i>Dirección del Trabajo</h4>
                                    <p><strong>Teléfono:</strong> 600 450 4000</p>
                                    <p><strong>Web:</strong> <a href="https://www.dt.gob.cl" target="_blank">www.dt.gob.cl</a></p>
                                    <p><strong>Horario:</strong> Lunes a viernes, 8:30 a 17:30</p>
                                    <p class="text-muted">Organismo fiscalizador principal para denuncias laborales.</p>
                                </div>
                            </div>
                            
                            <div class="ley-card">
                                <div class="card-body">
                                    <h4><i class="fas fa-phone text-success me-2"></i>Fono Trabajo</h4>
                                    <p><strong>Teléfono:</strong> 600 450 4000</p>
                                    <p><strong>Horario:</strong> 24 horas, todos los días</p>
                                    <p class="text-muted">Orientación telefónica gratuita sobre derechos laborales.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="ley-card">
                                <div class="card-body">
                                    <h4><i class="fas fa-heart text-danger me-2"></i>Apoyo psicológico</h4>
                                    <p><strong>Salud Responde:</strong> 600 360 7777</p>
                                    <p><strong>Fono Salud Mental:</strong> 600 360 7777 opción 1</p>
                                    <p class="text-muted">Apoyo psicológico gratuito las 24 horas.</p>
                                </div>
                            </div>
                            
                            <div class="ley-card">
                                <div class="card-body">
                                    <h4><i class="fas fa-users text-info me-2"></i>Organizaciones sindicales</h4>
                                    <p><strong>CUT:</strong> Central Unitaria de Trabajadores</p>
                                    <p><strong>Web:</strong> <a href="https://cut.cl" target="_blank">cut.cl</a></p>
                                    <p class="text-muted">Apoyo y asesoría sindical para trabajadores.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <h5><i class="fas fa-info-circle me-2"></i>Información importante sobre la Ley Karin</h5>
                        <ul class="mb-0">
                            <li><strong>Vigencia:</strong> Desde agosto 2022</li>
                            <li><strong>Cobertura:</strong> Sector público y privado</li>
                            <li><strong>Plazo para denunciar:</strong> 60 días desde el último hecho</li>
                            <li><strong>Multas:</strong> Hasta 150 UTM para empleadores</li>
                            <li><strong>Protección:</strong> Prohibición de represalias contra denunciantes</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Funcionalidad de tabs
document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Remover clase active de todos los botones y contenidos
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.remove('active'));
            
            // Agregar clase active al botón clickeado y su contenido
            this.classList.add('active');
            document.getElementById('tab-' + targetTab).classList.add('active');
        });
    });
    
    // Funcionalidad del generador de cartas
    const campos = ['sector', 'sinContrato', 'tipoAcoso', 'inicio', 'nombre', 'rut', 'direccion', 'telefono', 'email', 'empleador', 'rutEmpleador', 'dirTrabajo', 'funciones', 'jornada', 'pagos', 'respaldos', 'hechos', 'medidas', 'danos'];
    
    campos.forEach(campo => {
        const elemento = document.getElementById(campo);
        if (elemento) {
            elemento.addEventListener('input', generarCarta);
            elemento.addEventListener('change', generarCarta);
        }
    });
    
    // Botones del generador
    document.getElementById('btnCopiar').addEventListener('click', copiarCarta);
    document.getElementById('btnDescargar').addEventListener('click', descargarCarta);
    document.getElementById('btnLimpiar').addEventListener('click', limpiarFormulario);
    
    // Funcionalidad de cronología
    document.getElementById('btnAgregarHecho').addEventListener('click', agregarHecho);
    document.getElementById('btnExportarCronologia').addEventListener('click', exportarCronologia);
    document.getElementById('btnLimpiarCronologia').addEventListener('click', limpiarCronologia);
    
    // Funcionalidad del checklist
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', actualizarProgreso);
    });
    
    // Inicializar
    generarCarta();
    actualizarProgreso();
});

let cronologiaEventos = [];

function generarCarta() {
    const datos = {};
    const campos = ['sector', 'sinContrato', 'tipoAcoso', 'inicio', 'nombre', 'rut', 'direccion', 'telefono', 'email', 'empleador', 'rutEmpleador', 'dirTrabajo', 'funciones', 'jornada', 'pagos', 'respaldos', 'hechos', 'medidas', 'danos'];
    
    campos.forEach(campo => {
        const elemento = document.getElementById(campo);
        if (elemento) {
            datos[campo] = elemento.value;
        }
    });
    
    const fecha = new Date().toLocaleDateString('es-CL');
    const destinatario = datos.sector === 'publico' ? 'Contraloría General de la República' : 'Dirección del Trabajo';
    
    let carta = `${destinatario}
Presente

Fecha: ${fecha}

DENUNCIA POR ACOSO LABORAL - LEY KARIN

Yo, ${datos.nombre || '[NOMBRE]'}, RUT ${datos.rut || '[RUT]'}, domiciliado en ${datos.direccion || '[DIRECCIÓN]'}, teléfono ${datos.telefono || '[TELÉFONO]'}, email ${datos.email || '[EMAIL]'}, vengo en presentar formal denuncia por acoso laboral en contra de ${datos.empleador || '[EMPLEADOR]'}${datos.rutEmpleador ? ', RUT ' + datos.rutEmpleador : ''}.

ANTECEDENTES LABORALES:
- Empleador: ${datos.empleador || '[EMPLEADOR]'}
- Dirección del trabajo: ${datos.dirTrabajo || '[DIRECCIÓN TRABAJO]'}
- Inicio de labores: ${datos.inicio || '[FECHA INICIO]'}
- Funciones: ${datos.funciones || '[FUNCIONES]'}
- Jornada: ${datos.jornada || '[JORNADA]'}
- Remuneración: ${datos.pagos || '[PAGOS]'}
${datos.sinContrato === 'si' ? '- NOTA: Trabajo sin contrato escrito' : ''}

HECHOS DENUNCIADOS:
${datos.hechos || '[DESCRIBIR HECHOS CRONOLÓGICAMENTE]'}

Los hechos descritos constituyen ${datos.tipoAcoso === 'sexual' ? 'acoso sexual' : datos.tipoAcoso === 'violencia' ? 'violencia en el trabajo' : 'acoso laboral'} según lo establecido en la Ley N° 21.643 (Ley Karin).

RESPALDOS:
${datos.respaldos || '[LISTAR EVIDENCIAS]'}

MEDIDAS SOLICITADAS:
${datos.medidas || '[MEDIDAS DE RESGUARDO]'}

${datos.danos ? 'PERJUICIOS: ' + datos.danos : ''}

Por lo expuesto, solicito se investigue la presente denuncia y se adopten las medidas correspondientes según la normativa vigente.

Saluda atentamente,

${datos.nombre || '[NOMBRE]'}
RUT: ${datos.rut || '[RUT]'}`;

    document.getElementById('preview').textContent = carta;
}

function copiarCarta() {
    const texto = document.getElementById('preview').textContent;
    navigator.clipboard.writeText(texto).then(() => {
        alert('Carta copiada al portapapeles');
    });
}

function descargarCarta() {
    const texto = document.getElementById('preview').textContent;
    const blob = new Blob([texto], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'denuncia_ley_karin.txt';
    a.click();
    URL.revokeObjectURL(url);
}

function limpiarFormulario() {
    const campos = ['sector', 'sinContrato', 'tipoAcoso', 'inicio', 'nombre', 'rut', 'direccion', 'telefono', 'email', 'empleador', 'rutEmpleador', 'dirTrabajo', 'funciones', 'jornada', 'pagos', 'respaldos', 'hechos', 'medidas', 'danos'];
    
    campos.forEach(campo => {
        const elemento = document.getElementById(campo);
        if (elemento) {
            if (elemento.tagName === 'SELECT') {
                elemento.selectedIndex = 0;
            } else {
                elemento.value = '';
            }
        }
    });
    
    generarCarta();
}

function agregarHecho() {
    const fecha = document.getElementById('fechaIncidente').value;
    const descripcion = document.getElementById('descripcionHecho').value;
    const lugar = document.getElementById('lugarHecho').value;
    const testigos = document.getElementById('testigosHecho').value;
    const evidencias = document.getElementById('evidenciasHecho').value;
    
    if (!fecha || !descripcion) {
        alert('Por favor completa al menos la fecha y descripción del hecho.');
        return;
    }
    
    const evento = {
        fecha: fecha,
        descripcion: descripcion,
        lugar: lugar,
        testigos: testigos,
        evidencias: evidencias
    };
    
    cronologiaEventos.push(evento);
    cronologiaEventos.sort((a, b) => new Date(a.fecha) - new Date(b.fecha));
    
    actualizarCronologia();
    limpiarFormularioHecho();
}

function actualizarCronologia() {
    const lista = document.getElementById('cronologiaLista');
    
    if (cronologiaEventos.length === 0) {
        lista.innerHTML = '<p class="text-muted">No hay eventos agregados aún.</p>';
        return;
    }
    
    let html = '';
    cronologiaEventos.forEach((evento, index) => {
        html += `
            <div class="border-start border-primary ps-3 mb-3">
                <div class="d-flex justify-content-between align-items-start">
                    <strong>${new Date(evento.fecha).toLocaleDateString('es-CL')}</strong>
                    <button class="btn btn-sm btn-outline-danger" onclick="eliminarEvento(${index})">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                <p class="mb-1">${evento.descripcion}</p>
                ${evento.lugar ? `<small class="text-muted">Lugar: ${evento.lugar}</small><br>` : ''}
                ${evento.testigos ? `<small class="text-muted">Testigos: ${evento.testigos}</small><br>` : ''}
                ${evento.evidencias ? `<small class="text-muted">Evidencias: ${evento.evidencias}</small>` : ''}
            </div>
        `;
    });
    
    lista.innerHTML = html;
}

function eliminarEvento(index) {
    cronologiaEventos.splice(index, 1);
    actualizarCronologia();
}

function limpiarFormularioHecho() {
    document.getElementById('fechaIncidente').value = '';
    document.getElementById('descripcionHecho').value = '';
    document.getElementById('lugarHecho').value = '';
    document.getElementById('testigosHecho').value = '';
    document.getElementById('evidenciasHecho').value = '';
}

function exportarCronologia() {
    if (cronologiaEventos.length === 0) {
        alert('No hay eventos en la cronología para exportar.');
        return;
    }
    
    let texto = 'CRONOLOGÍA DE HECHOS - LEY KARIN\n\n';
    cronologiaEventos.forEach(evento => {
        texto += `Fecha: ${new Date(evento.fecha).toLocaleDateString('es-CL')}\n`;
        texto += `Descripción: ${evento.descripcion}\n`;
        if (evento.lugar) texto += `Lugar: ${evento.lugar}\n`;
        if (evento.testigos) texto += `Testigos: ${evento.testigos}\n`;
        if (evento.evidencias) texto += `Evidencias: ${evento.evidencias}\n`;
        texto += '\n---\n\n';
    });
    
    const blob = new Blob([texto], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'cronologia_ley_karin.txt';
    a.click();
    URL.revokeObjectURL(url);
}

function limpiarCronologia() {
    if (confirm('¿Estás seguro de que quieres limpiar toda la cronología?')) {
        cronologiaEventos = [];
        actualizarCronologia();
    }
}

function actualizarProgreso() {
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    const total = checkboxes.length;
    const completados = Array.from(checkboxes).filter(cb => cb.checked).length;
    const porcentaje = (completados / total) * 100;
    
    document.getElementById('progressBar').style.width = porcentaje + '%';
    document.getElementById('progressText').textContent = `${completados} de ${total} elementos completados`;
    
    if (porcentaje === 100) {
        document.getElementById('progressBar').classList.add('bg-success');
    } else {
        document.getElementById('progressBar').classList.remove('bg-success');
    }
}
</script>
{% endblock %}