{% extends 'base.html' %}
{% block title %}Comprovante {{ condicional.numero }}{% endblock %}
{% block extra_css %}
<style>
.comprovante { background:#fff; max-width: 920px; margin: 0 auto; padding: 28px; color:#20252b; }
.cabecalho-comprovante { border-bottom:2px solid #315f8f; padding-bottom:16px; margin-bottom:20px; }
.comprovante table { width:100%; border-collapse:collapse; }
.comprovante th,.comprovante td { border:1px solid #d4dbe2; padding:8px; }
.comprovante thead { display:table-header-group; }
.comprovante tr { break-inside:avoid; page-break-inside:avoid; }
.assinaturas { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:42px 36px; }
.linha-assinatura { border-top:1px solid #343a40; padding-top:7px; text-align:center; }
@page { size:A4 portrait; margin:20mm; }
@media print {
  html,body { background:#fff!important; margin:0!important; padding:0!important; font-size:10pt; }
  .container-fluid,.container-fluid>.row,.main-content { display:block!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; }
  .sidebar,.no-print { display:none!important; }
  .comprovante { max-width:none; margin:0; padding:0; box-shadow:none; }
  .quebra-pagina { break-before:page; page-break-before:always; }
  .assinaturas { break-inside:avoid; page-break-inside:avoid; }
}
</style>
{% endblock %}
{% block content %}
<div class="no-print d-flex justify-content-between align-items-center mb-3"><a href="{% url 'condicional:detalhe' condicional.pk %}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> Voltar</a><button class="btn btn-primary" onclick="window.print()"><i class="bi bi-printer"></i> Imprimir Condicional</button></div>
<article class="comprovante">
<header class="cabecalho-comprovante"><div class="d-flex justify-content-between align-items-start gap-3">{% if loja.logo %}<img src="{{ loja.logo.url }}" alt="{{ loja.nome }}" style="max-width:140px;max-height:75px;object-fit:contain">{% endif %}<div class="text-end"><h1 class="h3 mb-2">COMPROVANTE DE CONDICIONAL</h1><strong>{{ loja.nome }}</strong><br>{% if loja.cnpj %}CNPJ: {{ loja.cnpj }}<br>{% endif %}{% if loja.endereco %}{{ loja.endereco }}{% if loja.cidade %}, {{ loja.cidade }}{% endif %}{% if loja.estado %} - {{ loja.estado }}{% endif %}<br>{% endif %}{% if loja.telefone %}Telefone: {{ loja.telefone }}{% endif %}</div></div></header>
<div class="row mb-3"><div class="col-6"><p><strong>Condicional:</strong> {{ condicional.numero }}</p><p><strong>Cliente:</strong> {{ condicional.cliente.nome }}</p><p><strong>Telefone:</strong> {{ condicional.cliente.telefone|default:'-' }}</p></div><div class="col-6"><p><strong>Enviado em:</strong> {{ condicional.enviado_em|date:'d/m/Y H:i' }}</p><p><strong>Previsão de devolução:</strong> {{ condicional.previsao_devolucao|date:'d/m/Y'|default:'-' }}</p><p><strong>Responsável:</strong> {{ condicional.enviado_por.get_full_name|default:condicional.enviado_por.username|default:'-' }}</p></div></div>
<table class="table table-sm"><thead><tr><th>Código</th><th>Descrição</th><th>Tamanho / cor</th><th class="text-end">Qtd.</th><th class="text-end">Valor unitário</th><th class="text-end">Total</th></tr></thead><tbody>{% for item in itens %}<tr><td>{{ item.codigo_produto }}</td><td>{{ item.descricao }}</td><td>{{ item.tamanho }}{% if item.tamanho and item.cor %} / {% endif %}{{ item.cor|default:'-' }}</td><td class="text-end">{{ item.quantidade_enviada }}</td><td class="text-end">R$ {{ item.preco_unitario|floatformat:2 }}</td><td class="text-end">R$ {{ item.valor_enviado|floatformat:2 }}</td></tr>{% endfor %}</tbody></table>
<div class="d-flex justify-content-between mt-3"><strong>Total de peças enviadas: {{ condicional.quantidade_enviada }}</strong><strong>Valor total do condicional: R$ {{ condicional.valor_enviado|floatformat:2 }}</strong></div>
{% if condicional.observacoes %}<p class="mt-3"><strong>Observações:</strong> {{ condicional.observacoes|linebreaksbr }}</p>{% endif %}
<p class="mt-4">Declaro que recebi os produtos relacionados neste comprovante em regime de condicional, comprometendo-me a realizar a devolução ou compra das mercadorias até a data combinada, conforme as condições informadas pela loja.</p>
<section class="assinaturas"><div class="linha-assinatura">Assinatura do cliente</div><div class="linha-assinatura">Data: ____/____/________</div><div class="linha-assinatura">Responsável pela entrega</div></section>
</article>
{% endblock %}