{% extends 'base.html' %}
{% block title %}Factura {{ factura.numero }}{% endblock %}
{% block page_title %}Factura {{ factura.numero }}{% endblock %}
{% block page_subtitle %}Detalle del comprobante{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="panel-card" id="facturaImprimir">
            <!-- Encabezado -->
            <div class="d-flex justify-content-between align-items-start mb-4 pb-3 border-bottom">
                <div>
                    <h4 class="fw-bold mb-0" style="color:#0bb8c8;">VETSYSTEM</h4>
                    <small class="text-muted">Sistema Veterinario</small>
                </div>
                <div class="text-end">
                    <div class="fw-bold fs-5">{{ factura.numero }}</div>
                    <div class="text-muted small">{{ factura.fecha|date:"d/m/Y H:i" }}</div>
                    <span
                        class="badge rounded-pill {% if factura.estado == 'PAGADA' %}bg-success{% else %}bg-danger{% endif %}">
                        {{ factura.get_estado_display }}
                    </span>
                </div>
            </div>

            <!-- Cliente -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <p class="text-muted small mb-1">CLIENTE</p>
                    <div class="fw-semibold">{{ factura.cliente.nombre_completo|default:"Anónimo" }}</div>
                    {% if factura.cliente %}<div class="text-muted small">DNI: {{ factura.cliente.dni }}</div>
                    <div class="text-muted small">Tel: {{ factura.cliente.telefono }}</div>{% endif %}
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="text-muted small mb-1">MÉTODO DE PAGO</p>
                    <div class="fw-semibold">{{ factura.get_metodo_pago_display }}</div>
                    <div class="text-muted small">Cajero: {{ factura.cajero|default:"—" }}</div>
                </div>
            </div>

            <!-- Detalle -->
            <table class="table table-bordered mb-4">
                <thead style="background:#f8fafc;font-size:12px;text-transform:uppercase;color:#94a3b8;">
                    <tr>
                        <th>Descripción</th>
                        <th class="text-center">Cant.</th>
                        <th class="text-end">Precio Unit.</th>
                        <th class="text-end">Subtotal</th>
                    </tr>
                </thead>
                <tbody>
                    {% for d in factura.detalles.all %}
                    <tr>
                        <td>{{ d.descripcion }}</td>
                        <td class="text-center">{{ d.cantidad }}</td>
                        <td class="text-end">S/ {{ d.precio_unitario|floatformat:2 }}</td>
                        <td class="text-end fw-semibold">S/ {{ d.subtotal|floatformat:2 }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="text-end text-muted">Subtotal</td>
                        <td class="text-end">S/ {{ factura.subtotal|floatformat:2 }}</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="text-end text-muted">IGV (18%)</td>
                        <td class="text-end">S/ {{ factura.igv|floatformat:2 }}</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="text-end fw-bold fs-5">TOTAL</td>
                        <td class="text-end fw-bold fs-5 text-success">S/ {{ factura.total|floatformat:2 }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="d-flex gap-2 mt-3">
            <button onclick="window.print()" class="btn btn-primary rounded-pill"><i
                    class="fa-solid fa-print me-2"></i>Imprimir</button>
            <a href="{% url 'factura_lista' %}" class="btn btn-outline-secondary rounded-pill"><i
                    class="fa-solid fa-arrow-left me-2"></i>Volver</a>
            {% if factura.estado != 'ANULADA' %}
            <a href="{% url 'factura_anular' factura.pk %}" class="btn btn-outline-danger rounded-pill ms-auto"><i
                    class="fa-solid fa-ban me-2"></i>Anular</a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}