{% extends "macros/base.html" %}
{% from 'macros/modals.html' import view_rendicion_modal %}

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

{% block head %}
{% endblock %}

{% block content %}
<h2 class="mb-4">Historial de Rendiciones</h2>

{{ view_rendicion_modal() }}

<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]).replace(',', '.') }}</td>
                    <td class="align-middle text-danger">${{ "{:,.0f}".format(r[6]).replace(',', '.') }}</td>
                    <td class="text-end">
                        <button type="button" 
                                class="btn btn-sm btn-primary" 
                                data-bs-toggle="modal" 
                                data-bs-target="#viewRendicionModal"
                                data-url="{{ url_for('view_rendicion', id=r[0]) }}"
                                data-id="{{ r[0] }}">
                            Ver Detalle
                        </button>
                    </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>
    const viewModal = document.getElementById('viewRendicionModal');
    if (viewModal) {
        viewModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const url = button.getAttribute('data-url');
            const id = button.getAttribute('data-id');
            
            const title = viewModal.querySelector('#rendicionModalTitle');
            const body = viewModal.querySelector('#rendicionModalBody');
            
            title.textContent = `Detalle de Rendición #${id}`;
            body.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div></div>';
            
            fetch(url)
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const content = doc.querySelector('.row').outerHTML;
                    body.innerHTML = content;
                })
                .catch(err => {
                    body.innerHTML = '<div class="alert alert-danger">Error al cargar los detalles.</div>';
                });
        });
    }
</script>
{% endblock %}