{% 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>Turno</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">{{ r[4] }}</td>
                    <td class="align-middle">${{ "{:,.0f}".format((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[14], r[15], r[16]) }}
                        {{ 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="7" 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 tarjeta = getVal(`edit_tarjeta_${id}`);
        const mp = getVal(`edit_mp_${id}`);
        const efectivo = getVal(`edit_efectivo_${id}`);
        
        const total = tarjeta + mp + efectivo;
        
        document.getElementById(`display_nuevo_total_${id}`).innerText = '$' + total.toLocaleString('es-CL');
    }
</script>
{% endblock %}