<!-- MODULE 1B: INSTALLER JOBS -->
<section id="section-installer-jobs" class="section-view">
    <div class="card">
        <div style="margin-bottom: 1.5rem;">
            <h2 id="jobsSectionTitle" style="margin: 0; display: flex; align-items: center; gap: 10px;">
                📋 Reenviar Notificaciones de Asignación de Servicios en Curso
            </h2>
            <p style="color: var(--text-muted); margin: 5px 0 0 0;">Selecciona un técnico instalador para consultar sus servicios "En curso" y reenviar notificaciones de asignación de servicio por WhatsApp</p>
        </div>

        <div style="margin-bottom: 1.5rem; max-width: 420px;">
            <label for="installerJobsSelect" style="display: block; font-weight: 600; margin-bottom: 6px;">👷 Seleccionar Instalador:</label>
            <select id="installerJobsSelect" onchange="onInstallerSelectChange(this.value)" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-body); color: var(--text-main); font-size: 0.95rem;">
                <option value="">-- Selecciona un instalador --</option>
            </select>
        </div>

        <div id="jobsEmptyState" class="placeholder-state">
            <span class="placeholder-icon">👷</span>
            <p>Selecciona un instalador arriba para ver sus tareas activas</p>
        </div>

        <div id="jobsLoading" style="display: none; text-align: center; padding: 2rem; color: var(--text-muted);">
            <div class="loader" style="margin: 0 auto 1rem;"></div>
            <p>Cargando tareas del instalador...</p>
        </div>

        <div id="jobsTableWrapper" style="display: none; overflow-x: auto;">
            <table id="installerJobsTable">
                <thead>
                    <tr>
                        <th>ID Servicio</th>
                        <th>Cliente</th>
                        <th>Fecha</th>
                        <th>Descripción</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div id="jobsNoResults" class="placeholder-state" style="display: none;">
            <span class="placeholder-icon">✅</span>
            <p>Este instalador no tiene tareas "En curso"</p>
        </div>
    </div>
</section>
