{% extends "base.html" %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Detalle de Rendición #{{ rendicion[0] }}</h2>
    <a href="{{ url_for('admin_rendiciones') }}" class="btn btn-outline-light">Volver al Historial</a>
</div>

<div class="row">
    <div class="col-md-8 mb-4">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-secondary text-white">Productos Vendidos</div>
            <div class="card-body p-0">
                <table class="table table-striped mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th>Producto</th>
                            <th class="text-center">Cant.</th>
                            <th class="text-end">Precio Un.</th>
                            <th class="text-end">Total Línea</th>
                            <th class="text-end">Comisión</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in items %}
                        <tr>
                            <td>{{ item[0] }}</td>
                            <td class="text-center fw-bold">{{ item[1] }}</td>
                            <td class="text-end text-muted">${{ "{:,.0f}".format(item[2]).replace(',', '.') }}</td>
                            <td class="text-end fw-bold">${{ "{:,.0f}".format(item[4]).replace(',', '.') }}</td>
                            <td class="text-end text-success">${{ "{:,.0f}".format(item[5]).replace(',', '.') }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="5" class="text-center py-3">No se registraron productos en esta rendición.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="table-group-divider">
                        <tr>
                            <td colspan="3" class="text-end fw-bold">Total Calculado por Sistema:</td>
                            <td class="text-end fw-bold fs-5">${{ "{:,.0f}".format(total_calculado).replace(',', '.') }}</td>
                            <td class="text-end fw-bold text-success">${{ "{:,.0f}".format(comision_total).replace(',', '.') }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card shadow-sm mb-4 border-info">
            <div class="card-header bg-info text-dark fw-bold">Declaración del Trabajador</div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-5 text-muted">Fecha</dt>
                    <dd class="col-sm-7">{{ rendicion[1] }}</dd>
                    
                    <dt class="col-sm-5 text-muted">Trabajador</dt>
                    <dd class="col-sm-7">{{ rendicion[2] }}</dd>

                    <dt class="col-sm-5 text-muted">Módulo</dt>
                    <dd class="col-sm-7"><span class="badge bg-secondary">{{ rendicion[3] }}</span></dd>

                    <dt class="col-sm-5 text-muted">Turno</dt>
                    <dd class="col-sm-7">{{ rendicion[4] }}</dd>
                </dl>
                
                <hr>
                
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Tarjetas:</span>
                    <span>${{ "{:,.0f}".format(rendicion[5]).replace(',', '.') }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Mercado Pago:</span>
                    <span>${{ "{:,.0f}".format(rendicion[6]).replace(',', '.') }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Efectivo:</span>
                    <span>${{ "{:,.0f}".format(rendicion[7]).replace(',', '.') }}</span>
                </div>
                
                {% set total_declarado = rendicion[5] + rendicion[6] + rendicion[7] %}
                
                <div class="d-flex justify-content-between mt-3 pt-2 border-top">
                    <strong class="fs-5">Total Declarado:</strong>
                    <strong class="fs-5">${{ "{:,.0f}".format(total_declarado).replace(',', '.') }}</strong>
                </div>

                {% if total_declarado != total_calculado %}
                <div class="alert alert-warning mt-3 mb-0 py-2">
                    <small>⚠️ Discrepancia: El total declarado (${{ "{:,.0f}".format(total_declarado).replace(',', '.') }}) no coincide con la suma de los productos vendidos (${{ "{:,.0f}".format(total_calculado).replace(',', '.') }}).</small>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="card shadow-sm border-danger">
            <div class="card-header bg-danger text-white">Gastos y Observaciones</div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                    <strong class="text-danger">Monto Gastos:</strong>
                    <strong class="text-danger">-${{ "{:,.0f}".format(rendicion[8]).replace(',', '.') }}</strong>
                </div>
                <div>
                    <span class="text-muted d-block mb-1">Observaciones:</span>
                    <p class="mb-0 bg-dark p-2 rounded border border-secondary" style="font-size: 0.9em;">
                        {{ rendicion[9] if rendicion[9] else "Sin observaciones." }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}