{% extends 'base.html' %}

{% block title %}Cupom - {{ venda.numero_venda }}{% endblock %}

{% block content %}
<div class="cupom-page">
    {% for comprovante in comprovantes_cupom %}
    <article class="cupom-sheet" aria-label="Comprovante de venda">
        <header class="cupom-header">
            {% if loja_atual.logo %}
            <img src="{{ loja_atual.logo.url }}" alt="{{ loja_atual.nome }}" class="cupom-logo">
            {% endif %}
            <h1 class="cupom-loja">{{ loja_atual.nome }}</h1>
            <p class="cupom-meta">{{ loja_atual.endereco }}</p>
            <p class="cupom-meta">{{ loja_atual.cidade }} - {{ loja_atual.estado }}</p>
            <p class="cupom-meta">Tel: {{ loja_atual.telefone }}</p>
            {% if loja_atual.cnpj %}<p class="cupom-meta">CNPJ: {{ loja_atual.cnpj }}</p>{% endif %}
        </header>

        <section class="cupom-info">
            <div>
                {% if comprovante.parcela %}
                <strong>Comprovante de Parcela</strong><br>
                Parcela {{ comprovante.parcela.numero_parcela }}/{{ comprovante.parcela.pagamento.parcelas }}<br>
                {% else %}
                <strong>Cupom Não Fiscal</strong><br>
                {% endif %}
                Nº {{ venda.numero_venda }}
            </div>
            <div class="text-end">
                <strong>Data/Hora</strong><br>
                {{ venda.data_venda|date:"d/m/Y H:i" }}
            </div>
        </section>

        {% if venda.cliente %}
        <section class="cupom-cliente">
            <p><strong>Cliente:</strong> {{ venda.cliente.nome }}</p>
            {% if venda.cliente.cpf %}<p><strong>CPF:</strong> {{ venda.cliente.cpf }}</p>{% endif %}
            {% if venda.cliente.telefone %}<p><strong>Tel:</strong> {{ venda.cliente.telefone }}</p>{% endif %}
        </section>
        {% endif %}

        <section>
            <table class="table cupom-itens">
                <thead>
                    <tr>
                        <th>Produto</th>
                        <th class="text-center">Qtd</th>
                        <th class="text-end">Valor Unit.</th>
                        <th class="text-end">Total</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in venda.itens.all %}
                    <tr>
                        <td>{{ item.produto.nome }}</td>
                        <td class="text-center">{{ item.quantidade }}</td>
                        <td class="text-end">R$ {{ item.preco_unitario }}</td>
                        <td class="text-end">R$ {{ item.subtotal }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>

        <section class="cupom-totais">
            <table class="table table-borderless mb-0">
                <tr>
                    <td><strong>Subtotal:</strong></td>
                    <td class="text-end">R$ {{ venda.subtotal }}</td>
                </tr>
                {% if venda.desconto > 0 %}
                <tr>
                    <td><strong>Desconto:</strong></td>
                    <td class="text-end">- R$ {{ venda.desconto }}</td>
                </tr>
                {% endif %}
                <tr class="cupom-total-final">
                    <td><strong>TOTAL:</strong></td>
                    <td class="text-end"><strong>R$ {{ venda.total }}</strong></td>
                </tr>
            </table>
        </section>

        <section class="cupom-pagamento">
            {% for pagamento in pagamentos_detalhados %}
            <div class="mb-2">
                <p class="mb-1"><strong>Forma:</strong> {{ pagamento.forma_nome }}</p>
                <p class="mb-1"><strong>Valor pago:</strong> R$ {{ pagamento.valor_total|floatformat:2 }}</p>
                {% if pagamento.forma_tipo == 'credito' or pagamento.forma_tipo == 'debito' %}
                <p class="mb-1"><strong>Bandeira:</strong> {{ pagamento.bandeira_nome|default:"-" }}</p>
                {% endif %}
                {% if pagamento.parcelas > 1 %}
                <p class="mb-1"><strong>Parcelamento:</strong> {{ pagamento.parcelas }}x de R$ {{ pagamento.valor_parcela|floatformat:2 }}</p>
                <p class="mb-1"><small>Total nesta forma: R$ {{ pagamento.valor_total|floatformat:2 }}</small></p>
                {% endif %}
            </div>
            {% endfor %}
        </section>

        {% if comprovante.parcela %}
        <section class="cupom-parcela">
            <div class="cupom-parcela-titulo">DADOS DA PARCELA</div>
            <table class="table table-borderless mb-0">
                <tr>
                    <td><strong>Parcela:</strong></td>
                    <td class="text-end">{{ comprovante.parcela.numero_parcela }}/{{ comprovante.parcela.pagamento.parcelas }}</td>
                </tr>
                <tr>
                    <td><strong>Valor da parcela:</strong></td>
                    <td class="text-end"><strong>R$ {{ comprovante.parcela.valor|floatformat:2 }}</strong></td>
                </tr>
                <tr>
                    <td><strong>Vencimento:</strong></td>
                    <td class="text-end">{{ comprovante.parcela.data_vencimento|date:"d/m/Y" }}</td>
                </tr>
                <tr>
                    <td><strong>Status:</strong></td>
                    <td class="text-end">{{ comprovante.parcela.get_status_display }}</td>
                </tr>
            </table>
        </section>
        {% endif %}

        <section class="cupom-assinatura">
            <div class="espaco-assinatura"></div>
            <div class="linha-assinatura"></div>
            <p class="assinatura-rotulo text-center mb-0"><strong>ASSINATURA DO CLIENTE</strong></p>
        </section>

        <footer class="cupom-rodape text-center">
            <p class="cupom-agradecimento mb-0"><strong>Obrigado pela sua compra! Volte sempre!</strong></p>
        </footer>
    </article>
    {% endfor %}

    <div class="text-center mt-3 no-print">
        <button onclick="window.print()" class="btn btn-primary me-2">
            <i class="bi bi-printer"></i> Imprimir
        </button>
        <a href="{% url 'pdv' %}" class="btn btn-success me-2">
            <i class="bi bi-cart-plus"></i> Nova Venda
        </a>
        <a href="{% url 'dashboard' %}" class="btn btn-secondary">
            <i class="bi bi-house"></i> Dashboard
        </a>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.cupom-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.cupom-sheet {
    width: min(100%, 800px);
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    color: #111;
}

.cupom-header {
    text-align: center;
    border-bottom: 1px solid #111;
    padding-bottom: 0.75rem;
    margin-bottom: 0.9rem;
}

.cupom-logo {
    max-width: 170px;
    max-height: 85px;
    object-fit: contain;
}

.cupom-loja {
    font-size: 1.5rem;
    margin: 0.5rem 0 0.25rem;
}

.cupom-meta {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.45;
}

.cupom-info {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed #444;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 1.02rem;
}

.cupom-cliente {
    border-bottom: 1px dashed #444;
    padding-bottom: 0.6rem;
    margin-bottom: 0.7rem;
    font-size: 1.02rem;
}

.cupom-cliente p {
    margin: 0;
}

.cupom-itens {
    font-size: 0.98rem;
    margin-bottom: 0.75rem;
}

.cupom-itens th,
.cupom-itens td {
    padding: 0.5rem 0.4rem;
}

.cupom-totais {
    width: min(100%, 380px);
    margin-left: auto;
    margin-bottom: 0.6rem;
    font-size: 1rem;
}

.cupom-total-final td {
    font-size: 1.25rem;
    border-top: 1px solid #111;
}

.cupom-pagamento,
.cupom-parcela {
    border-top: 1px dashed #444;
    border-bottom: 1px dashed #444;
    padding: 0.6rem 0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.cupom-parcela {
    border-top: 0;
}

.cupom-parcela-titulo {
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.4rem;
}

.cupom-assinatura {
    padding-top: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Espaço livre acima da linha para o cliente assinar */
.espaco-assinatura {
    height: 72px;
}

.linha-assinatura {
    width: min(78%, 340px);
    margin: 0 auto;
    border-top: 1px solid #111;
}

.assinatura-rotulo {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.cupom-rodape {
    border-top: 1px solid #111;
    padding-top: 0.6rem;
}

@media (max-width: 768px) {
    .cupom-sheet {
        padding: 1rem;
        border-radius: 6px;
    }

    .cupom-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .cupom-totais {
        width: 100%;
    }
}

/* ===================== IMPRESSÃO (A4, até meia folha) ===================== */
@media print {
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    body {
        background: #fff !important;
        /* Arial imprime mais nítido em impressoras a toner/laser */
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .container-fluid,
    .row,
    .col-md-10 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cupom-page {
        display: block;
    }

    .cupom-sheet {
        width: 100% !important;
        min-height: auto !important;
        border: 1px solid #111;
        box-shadow: none !important;
        border-radius: 0;
        margin: 0 auto !important;
        padding: 4mm 6mm !important;
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .cupom-sheet:not(:last-of-type) {
        break-after: page;
        page-break-after: always;
    }

    .cupom-header {
        padding-bottom: 2.5mm !important;
        margin-bottom: 2.5mm !important;
    }

    .cupom-logo {
        max-width: 42mm !important;
        max-height: 18mm !important;
    }

    .cupom-loja {
        font-size: 13px !important;
        margin: 1.5mm 0 0.5mm !important;
    }

    .cupom-meta {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }

    .cupom-info,
    .cupom-cliente {
        padding-bottom: 1.8mm !important;
        margin-bottom: 1.8mm !important;
        font-size: 10px !important;
    }

    .cupom-sheet p {
        margin-bottom: 0 !important;
    }

    .cupom-sheet .table {
        margin-bottom: 0 !important;
    }

    .cupom-itens {
        font-size: 10px !important;
        line-height: 1.25 !important;
        margin-bottom: 2mm !important;
    }

    .cupom-itens th,
    .cupom-itens td {
        padding: 1.2mm 2mm !important;
        line-height: 1.25 !important;
    }

    .cupom-totais {
        width: 72mm !important;
        margin-bottom: 2mm !important;
        font-size: 10px !important;
    }

    .cupom-totais td {
        padding: 0.8mm 2mm !important;
    }

    .cupom-total-final td {
        font-size: 12px !important;
        padding-top: 1mm !important;
        padding-bottom: 1mm !important;
    }

    .cupom-pagamento,
    .cupom-parcela {
        padding: 2mm 0 !important;
        margin-bottom: 2mm !important;
        font-size: 9.5px !important;
    }

    .cupom-pagamento .mb-2 {
        margin-bottom: 1.2mm !important;
    }

    .cupom-pagamento p {
        line-height: 1.3 !important;
    }

    .cupom-pagamento small,
    .cupom-pagamento .small {
        font-size: 8.5px !important;
    }

    .cupom-parcela-titulo {
        margin-bottom: 1.2mm !important;
        font-size: 9.5px !important;
    }

    .cupom-parcela td {
        padding: 1mm 2mm !important;
    }

    /* Assinatura: espaço livre para assinar + linha + rótulo abaixo */
    .cupom-assinatura {
        padding-top: 2mm !important;
        margin-bottom: 2mm !important;
    }

    .espaco-assinatura {
        height: 15mm !important;
    }

    .linha-assinatura {
        width: 75mm !important;
    }

    .assinatura-rotulo {
        margin-top: 1mm !important;
        font-size: 9px !important;
        letter-spacing: 0 !important;
    }

    .cupom-rodape {
        padding-top: 1.8mm !important;
        font-size: 8.5px !important;
    }

    .cupom-agradecimento {
        font-size: 9.5px !important;
    }

    .no-print {
        display: none !important;
    }
}
</style>
{% endblock %}