Rendiciones-App/templates/admin_workers.html

{% extends "macros/base.html" %}
{% from 'macros/modals.html' import confirm_modal, edit_worker_modal %}

{% block title %}Gestión de Trabajadores{% endblock %}

{% block head %}
<!-- HEAD -->
{% endblock %}

{% block content %}
<h2 class="mb-4">Gestión de Trabajadores</h2>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }}">{{ message|safe }}</div>
    {% endfor %}
  {% endif %}
{% endwith %}

{{ edit_worker_modal(modulos) }}

<div class="card mb-4">
    <div class="card-header bg-primary text-white">Agregar Nuevo Trabajador</div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('manage_workers') }}">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">RUT</label>
                    <input type="text" class="form-control" name="rut" id="rutInput" placeholder="12.345.678-9" value="{{ form.get('rut', '') }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Nombre Completo</label>
                    <input type="text" class="form-control" name="name" value="{{ form.get('name', '') }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Teléfono</label>
                    <input type="text" class="form-control" name="phone" id="phoneInput" placeholder="9 1234 5678" value="{{ form.get('phone', '') }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Módulo Asignado</label>
                    <select class="form-select" name="modulo_id" required>
                        <option value="" selected disabled>Seleccionar Módulo...</option>
                        {% for mod in modulos %}
                            <option value="{{ mod[0] }}">{{ mod[2] }} - {{ mod[1] }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <button type="submit" class="btn btn-primary mt-3">Guardar Trabajador</button>
        </form>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body p-0">
        <table class="table table-striped table-hover mb-0">
            <thead class="table-dark">
                <tr>
                    <th>RUT</th>
                    <th>Nombre</th>
                    <th>Teléfono</th>
                    <th>Módulo</th>
                    <th class="text-end">Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for worker in workers %}
                <tr>
                    <td class="align-middle">{{ worker[1] }}</td>
                    <td class="align-middle">{{ worker[2] }}</td>
                    <td class="align-middle">{{ worker[3] }}</td>
                    <td class="align-middle"><span class="badge bg-info text-dark">{{ worker[4] }}</span></td>
                    <td class="text-end">
                        <button type="button" 
                                class="btn btn-primary btn-sm btn-edit-sm" 
                                data-bs-toggle="modal" 
                                data-bs-target="#editWorkerModal"
                                data-id="{{ worker[0] }}"
                                data-rut="{{ worker[1] }}"
                                data-name="{{ worker[2] }}"
                                data-phone="{{ worker[3] }}"
                                data-modulo="{{ worker[5] }}">
                            <i class="bi bi-pencil"></i>
                        </button>
                        
                        <button type="button" class="btn btn-danger btn-sm btn-del-sm" data-bs-toggle="modal" data-bs-target="#delWorker{{ worker[0] }}">
                            <i class="bi bi-trash"></i>
                        </button>

                        {{ confirm_modal(
                            id='delWorker' ~ worker[0],
                            title='Eliminar Trabajador',
                            message='¿Eliminar a ' ~ worker[2] ~ '?',
                            action_url=url_for('delete_worker', id=worker[0]),
                            btn_class='btn-danger'
                        ) }}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="text-center py-3 text-muted">No hay trabajadores registrados.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
{% block scripts %}

<script>
    const editWorkerModal = document.getElementById('editWorkerModal');
    if (editWorkerModal) {
        editWorkerModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');
            
            // IMPORTANTE: Definir las rutas correctamente
            const editForm = editWorkerModal.querySelector('#editWorkerForm');
            const resetForm = editWorkerModal.querySelector('#resetPasswordForm');
            
            editForm.action = "/admin/workers/edit/" + id;
            resetForm.action = "/admin/workers/reset_password/" + id;

            // Rellenar campos
            editWorkerModal.querySelector('#edit_worker_rut').value = button.getAttribute('data-rut');
            editWorkerModal.querySelector('#edit_worker_name').value = button.getAttribute('data-name');
            editWorkerModal.querySelector('#edit_worker_phone').value = button.getAttribute('data-phone');
            editWorkerModal.querySelector('#edit_worker_modulo').value = button.getAttribute('data-modulo');
        });
    }

    document.getElementById('rutInput').addEventListener('input', function(e) {
        let value = this.value.replace(/[^0-9kK]/g, '').toUpperCase();
        if (value.length > 1) {
            let body = value.slice(0, -1);
            let dv = value.slice(-1);
            body = body.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            this.value = `${body}-${dv}`;
        } else {
            this.value = value;
        }
    });

    function formatPhone(input) {
        let value = input.value.replace(/\D/g, '');
        if (value.startsWith('56')) value = value.substring(2);
        value = value.substring(0, 9);
        if (value.length > 5) input.value = value.replace(/(\d{1})(\d{4})(\d+)/, '$1 $2 $3');
        else if (value.length > 1) input.value = value.replace(/(\d{1})(\d+)/, '$1 $2');
        else input.value = value;
    }

    document.querySelectorAll('.phone-input, #phoneInput').forEach(inp => {
        inp.addEventListener('input', () => formatPhone(inp));
    });
</script>
{% endblock %}