Rendiciones-App/templates/admin_rendiciones.html

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

{% block title %}Historial de Rendiciones{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
<h2 class="mb-4">Historial de Rendiciones</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 %}

<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>Fecha</th>
                    <th>Trabajador</th>
                    <th>Módulo</th>
                    <th>Total Declarado</th>
                    <th>Gastos</th>
                    <th class="text-end">Acciones</th>
                </tr>
            </thead>
           <tbody>
                {% for r in rendiciones %}
                <tr>
                    <td class="align-middle">{{ r[1] }}</td>
                    <td class="align-middle">{{ r[2] }}</td>
                    <td class="align-middle"><span class="badge bg-info text-dark">{{ r[3] }}</span></td>
                    
                    <td class="align-middle">
                        ${{ "{:,.0f}".format((r[4] or 0) + (r[5] or 0) + (r[6] or 0) + (r[7] or 0)).replace(',', '.') }}
                    </td>
                    <td class="align-middle text-danger">${{ "{:,.0f}".format(r[8] or 0).replace(',', '.') }}</td>
                    <td class="text-end">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-info text-white" data-bs-toggle="modal" data-bs-target="#viewRendicion{{ r[0] }}" title="Ver Detalle"><i class="bi bi-eye"></i></button>
                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editRendicion{{ r[0] }}" title="Editar Valores Declarados"><i class="bi bi-pencil"></i></button>
                            <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteRendicion{{ r[0] }}" title="Eliminar Rendición"><i class="bi bi-trash"></i></button>
                        </div>

                        {{ rendicion_detail_modal(r, r[16], r[17], r[18]) }}
                        {{ edit_rendicion_modal(r, workers, modulos) }}
                        
                        {{ confirm_modal(
                            id='deleteRendicion' ~ r[0],
                            title='Eliminar Rendición',
                            message='¿Estás seguro de que deseas eliminar la rendición #' ~ r[0] ~ '? Esta acción no se puede deshacer.',
                            action_url=url_for('delete_rendicion', id=r[0]),
                            btn_class='btn-danger',
                            btn_text='Eliminar'
                        ) }}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted">Aún no hay rendiciones enviadas.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function calcTotalEdit(id) {
        const getVal = (inputId) => parseInt(document.getElementById(inputId).value.replace(/\D/g, '')) || 0;
        
        const debito = getVal(`edit_debito_${id}`);
        const credito = getVal(`edit_credito_${id}`);
        const mp = getVal(`edit_mp_${id}`);
        const efectivo = getVal(`edit_efectivo_${id}`);
        
        const total = debito + credito + mp + efectivo;
        
        document.getElementById(`display_nuevo_total_${id}`).innerText = '$' + total.toLocaleString('es-CL');
    }

    function updateComisionToggle(selectElement, toggleId) {
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        const tipoJornada = selectedOption.getAttribute('data-tipo');
        const toggleSwitch = document.getElementById(toggleId);
        
        if (toggleSwitch && tipoJornada) {
            // Si es Full Time, lo enciende (true). Si es Part Time, lo apaga (false).
            toggleSwitch.checked = (tipoJornada === 'Full Time');
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
    // Escuchar el evento de cierre de cualquier modal que empiece con 'editRendicion'
    const editModals = document.querySelectorAll('[id^="editRendicion"]');
    
    editModals.forEach(modal => {
        modal.addEventListener('hidden.bs.modal', function () {
            const form = this.querySelector('form');
            if (form) {
                // 1. Resetear campos estándar (inputs, selects, textareas)
                form.reset();
                
                // 2. Forzar la actualización del total visual (el que calculas por JS)
                const rendicionId = this.id.replace('editRendicion', '');
                calcTotalEdit(rendicionId);

                // 3. Manejo especial para el div del acompañante (si aplica)
                const companionSelect = form.querySelector('select[name="companion_id"]');
                const compDiv = document.getElementById(`comp_com_div_${rendicionId}`);
                if (companionSelect && compDiv) {
                    compDiv.style.display = companionSelect.value ? 'block' : 'none';
                }
            }
        });
    });
});
</script>
{% endblock %}