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

{% block title %}Mis Rendiciones{% endblock %}

{% block content %}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 gap-3">
    <h2 class="mb-0">Mis Rendiciones</h2>
    <a href="{{ url_for('new_rendicion') }}" class="btn btn-success shadow-sm align-self-start align-self-md-auto">
        <i class="bi bi-plus-circle me-2"></i>Nueva Rendición
    </a>
</div>

{% 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 border-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-striped table-hover table-sm mb-0 text-nowrap" style="font-size: 0.9rem;">
                <thead class="table-dark">
                    <tr>
                        <th class="py-2">Fecha</th>
                        <th class="py-2">Módulo</th>
                        <th class="py-2 d-none d-sm-table-cell">Mi Rol</th>
                        <th class="py-2 d-none d-md-table-cell">Gastos</th>
                        <th class="py-2 d-none d-lg-table-cell">Observaciones</th>
                        <th class="py-2">Total</th>
                        <th class="text-end py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in rendiciones %}
                    <tr>
                        <td class="align-middle">{{ r[1] }}</td>
                        <td class="align-middle"><span class="badge bg-info text-dark">{{ r[3] }}</span></td>
                        
                        <td class="align-middle d-none d-sm-table-cell">
                            {% if r[17] == 'Titular' %}
                                <span class="badge bg-primary">Titular</span>
                            {% else %}
                                <span class="badge bg-secondary">Acompañante</span>
                            {% endif %}
                        </td>
                        
                        <td class="align-middle d-none d-md-table-cell text-danger">
                            ${{ "{:,.0f}".format(r[8] or 0).replace(',', '.') }}
                        </td>
                        
                        <td class="align-middle d-none d-lg-table-cell text-muted text-truncate" style="max-width: 150px;">
                            {{ r[9] if r[9] else '-' }}
                        </td>

                        <td class="align-middle fw-bold text-success">
                            ${{ "{:,.0f}".format((r[4] or 0) + (r[5] or 0) + (r[6] or 0) + (r[7] or 0)).replace(',', '.') }}
                        </td>
                        
                        <td class="text-end align-middle">
                            <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>
                            {{ rendicion_detail_modal(r, r[20], r[21], r[22]) }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted text-wrap">
                            <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                            Aún no tienes rendiciones registradas.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}