{% extends 'base.html' %}
{% block title %}{{ condicional.numero }} - Condicionais{% endblock %}
{% block extra_css %}
<style>
    .conditional-detail .hero { background: linear-gradient(120deg, #173b63, #2866a0); color: #fff; border-radius: 14px; padding: 1.4rem; margin-bottom: 1.25rem; }
    .conditional-detail .hero-status { display: inline-block; border-radius: 999px; padding: .35rem .7rem; background: rgba(255,255,255,.2); font-weight: 600; }
    .conditional-detail .metric { height: 100%; margin-bottom: 0; border: 1px solid var(--border); border-left: 5px solid var(--accent); background: var(--surface); box-shadow: 0 2px 10px rgba(20,44,70,.05); }
    .conditional-detail .metric .card-body { padding: .7rem .85rem; display: flex; align-items: center; gap: .75rem; }
    .conditional-detail .metric-icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: var(--border); color: var(--ink); font-size: 1rem; flex-shrink: 0; }
    .conditional-detail .metric-value { color: var(--ink); font-size: 1.35rem; line-height: 1.1; font-weight: 700; }
    .conditional-detail .metric-label { color: #34475a; font-weight: 600; font-size: .82rem; }
    .conditional-detail .metric-note { color: #46596b; font-size: .76rem; line-height: 1.3; }
    .conditional-detail .tone-green  { --surface: #ffffff; --border: #c9efcd; --accent: #1e7e34; --ink: #145c29; }
    .conditional-detail .tone-yellow { --surface: #ffffff; --border: #f2e2ac; --accent: #e0a800; --ink: #8a6503; }
    .conditional-detail .tone-blue   { --surface: #ffffff; --border: #c8d9f5; --accent: #1861c5; --ink: #0f4a9e; }
    .conditional-detail .tone-red    { --surface: #ffffff; --border: #f2c1c4; --accent: #b02a37; --ink: #841c27; }
    .conditional-detail .section-heading { display: flex; align-items: center; gap: .55rem; }
    .conditional-detail .section-heading i { color: #2866a0; }
    .conditional-detail .field { margin-bottom: .85rem; }
    .conditional-detail .field-label { display: block; color: #59697a; font-size: .83rem; margin-bottom: .15rem; }
    .conditional-detail .field-value { font-weight: 600; overflow-wrap: anywhere; }
    .conditional-detail .detail-table th { white-space: nowrap; color: #526174; font-size: .84rem; }
    .conditional-detail .detail-table td { vertical-align: middle; }
    .conditional-detail .number-pill { display: inline-block; min-width: 2rem; text-align: center; padding: .2rem .45rem; border-radius: .5rem; font-weight: 700; }
    .conditional-detail .pill-init   { background: #d4f0d8; color: #145c29; }
    .conditional-detail .pill-devol  { background: #ffe9a8; color: #6d4e00; }
    .conditional-detail .pill-vend   { background: #cde2fb; color: #0f4a9e; }
    .conditional-detail .pill-pend   { background: #f8ccd0; color: #7d1a25; }
    .conditional-detail .product-table tbody tr { --bs-table-bg: #ffffff; --bs-table-hover-bg: #f5f8fc; }
    .conditional-detail .product-table tbody tr:nth-child(even) { --bs-table-bg: #f8fafc; }
    .conditional-detail .product-table tbody tr { box-shadow: inset 4px 0 0 0 #d5dde6; }
    .conditional-detail .history-list { position: relative; padding-left: 1.35rem; }
    .conditional-detail .history-list::before { content: ""; position: absolute; top: .8rem; bottom: .8rem; left: .35rem; width: 2px; background: #d9e4f0; }
    .conditional-detail .history-entry { position: relative; margin-bottom: .85rem; padding: 1rem 1.1rem; border: 1px solid #e1e8f0; border-left: 4px solid var(--event-color); border-radius: .7rem; background: #fff; }
    .conditional-detail .history-entry:last-child { margin-bottom: 0; }
    .conditional-detail .history-entry::before { content: ""; position: absolute; top: 1.25rem; left: -1.45rem; width: .75rem; height: .75rem; border: 2px solid #fff; border-radius: 50%; background: var(--event-color); box-shadow: 0 0 0 2px var(--event-color); }
    .conditional-detail .history-entry .event-name { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 999px; background: var(--event-bg); color: var(--event-ink); font-weight: 700; font-size: .86rem; }
    .conditional-detail .history-entry .event-date { color: #506174; font-size: .87rem; white-space: nowrap; }
    .conditional-detail .history-entry .event-detail { margin: .7rem 0; color: #27384a; overflow-wrap: anywhere; }
    .conditional-detail .history-entry .event-meta { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; color: #526174; font-size: .85rem; }
    .conditional-detail .history-entry .event-meta i { color: var(--event-color); }
    .conditional-detail .event-default { --event-color: #527ba5; --event-bg: #eaf2fb; --event-ink: #28547e; }
    .conditional-detail .event-success { --event-color: #258250; --event-bg: #e4f5eb; --event-ink: #17623c; }
    .conditional-detail .event-sale { --event-color: #7655b2; --event-bg: #eee7fc; --event-ink: #583896; }
    .conditional-detail .event-warning { --event-color: #b97013; --event-bg: #fff0d9; --event-ink: #89500d; }
    .conditional-detail .event-danger { --event-color: #c53b43; --event-bg: #ffe6e6; --event-ink: #a42630; }
    @media (max-width: 575.98px) {
        .conditional-detail .hero { padding: 1rem; }
        .conditional-detail .actions, .conditional-detail .actions form, .conditional-detail .actions .btn { width: 100%; }
    }
</style>
{% endblock %}
{% block content %}
<div class="conditional-detail">
    <div class="hero">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
                <a class="btn btn-outline-light btn-sm mb-3" href="{% url 'condicional:lista' %}"><i class="bi bi-arrow-left"></i> Condicionais</a>
                <div class="small text-white-50 text-uppercase fw-semibold">Acompanhamento do condicional</div>
                <h2 class="mb-2">{{ condicional.numero }}</h2>
                <span class="hero-status">{{ condicional.get_status_display }}</span>
                {% if condicional.vencido %}<span class="badge bg-danger ms-1">Vencido</span>{% endif %}
            </div>
            <div class="actions d-flex flex-wrap gap-2 align-items-start">
                {% if condicional.status == 'rascunho' %}
                <a href="{% url 'condicional:editar' condicional.pk %}" class="btn btn-warning"><i class="bi bi-pencil"></i> Editar rascunho</a>
                <form method="post" action="{% url 'condicional:enviar' condicional.pk %}">{% csrf_token %}<button class="btn btn-success"><i class="bi bi-send"></i> Confirmar envio</button></form>
                {% endif %}
                {% if condicional.enviado_em %}<a href="{% url 'condicional:imprimir' condicional.pk %}" class="btn btn-light"><i class="bi bi-printer"></i> Imprimir condicional</a>{% endif %}
                {% if condicional.status == 'aberto' or condicional.status == 'parcialmente_conferido' %}<a href="{% url 'condicional:conferir' condicional.pk %}" class="btn btn-warning"><i class="bi bi-clipboard-check"></i> Conferir produtos</a>{% endif %}
                {% if condicional.status != 'cancelado' %}<a href="{% url 'condicional:cancelar' condicional.pk %}" class="btn btn-outline-light"><i class="bi bi-x-circle"></i> Cancelar</a>{% endif %}
            </div>
        </div>
    </div>

    {% if condicional.vencido %}<div class="alert alert-danger"><i class="bi bi-clock-history"></i> Este condicional está vencido. As peças continuam reservadas até a conferência.</div>{% endif %}

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-4 col-xl-3"><div class="card metric tone-green"><div class="card-body"><span class="metric-icon"><i class="bi bi-bag-check"></i></span><div><div class="metric-value">{{ condicional.quantidade_enviada }}</div><div class="metric-label">Envio inicial</div><div class="metric-note">R$ {{ condicional.valor_enviado|floatformat:2 }}</div></div></div></div></div>
        <div class="col-6 col-md-4 col-xl-3"><div class="card metric tone-yellow"><div class="card-body"><span class="metric-icon"><i class="bi bi-arrow-return-left"></i></span><div><div class="metric-value">{{ condicional.quantidade_devolvida }}</div><div class="metric-label">Devolvidas</div><div class="metric-note">R$ {{ condicional.valor_devolvido|floatformat:2 }}</div></div></div></div></div>
        <div class="col-6 col-md-4 col-xl-3"><div class="card metric tone-blue"><div class="card-body"><span class="metric-icon"><i class="bi bi-cart-check"></i></span><div><div class="metric-value">{{ condicional.quantidade_vendida }}</div><div class="metric-label">Vendidas</div><div class="metric-note">Original: R$ {{ condicional.valor_vendido_original|floatformat:2 }}<br>Efetivo: R$ {{ condicional.valor_vendido_efetivo|floatformat:2 }}</div></div></div></div></div>
        <div class="col-6 col-xl-3"><div class="card metric tone-red"><div class="card-body"><span class="metric-icon"><i class="bi bi-hourglass-split"></i></span><div><div class="metric-value">{{ condicional.quantidade_pendente }}</div><div class="metric-label">Pendentes</div><div class="metric-note">R$ {{ condicional.valor_pendente|floatformat:2 }}</div></div></div></div></div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-lg-7"><div class="card h-100 mb-0"><div class="card-header section-heading"><i class="bi bi-person-vcard"></i> Cliente e responsável</div><div class="card-body row">
            <div class="col-sm-6 field"><span class="field-label">Cliente</span><span class="field-value">{{ condicional.cliente.nome }}</span></div>
            <div class="col-sm-6 field"><span class="field-label">Telefone</span><span class="field-value">{{ condicional.cliente.telefone|default:'-' }}</span></div>
            <div class="col-sm-6 field"><span class="field-label">Responsável</span><span class="field-value">{{ condicional.responsavel.get_full_name|default:condicional.responsavel.username|default:'-' }}</span></div>
            <div class="col-sm-6 field"><span class="field-label">Situação</span><span class="field-value">{{ condicional.get_status_display }}{% if condicional.vencido %} <span class="badge bg-danger">Vencido</span>{% endif %}</span></div>
            {% if condicional.observacoes %}<div class="col-12 border-top pt-3"><span class="field-label">Observações</span><div>{{ condicional.observacoes|linebreaksbr }}</div></div>{% endif %}
        </div></div></div>
        <div class="col-lg-5"><div class="card h-100 mb-0"><div class="card-header section-heading"><i class="bi bi-calendar-event"></i> Datas do condicional</div><div class="card-body row">
            <div class="col-sm-6 field"><span class="field-label">Criado em</span><span class="field-value">{{ condicional.criado_em|date:'d/m/Y H:i' }}</span></div>
            <div class="col-sm-6 field"><span class="field-label">Enviado em</span><span class="field-value">{{ condicional.enviado_em|date:'d/m/Y H:i'|default:'Ainda não enviado' }}</span></div>
            <div class="col-12 field mb-0"><span class="field-label">Previsão de devolução</span><span class="field-value{% if condicional.vencido %} text-danger{% endif %}">{{ condicional.previsao_devolucao|date:'d/m/Y'|default:'-' }}</span></div>
        </div></div></div>
    </div>

    {% if condicional.status == 'aguardando_venda' %}<div class="alert alert-warning mt-3"><i class="bi bi-cart-check"></i> Há produtos deste condicional em uma operação aberta no PDV. Finalize a venda ou cancele o carrinho; as peças seguem reservadas até a confirmação. <a class="alert-link" href="{% url 'pdv' %}">Voltar ao PDV</a></div>{% endif %}

    <div class="card mt-3"><div class="card-header section-heading"><i class="bi bi-box-seam"></i> Produtos</div><div class="card-body">
        <p class="small text-muted mb-3">Envio inicial é o total que saiu da loja. O saldo pendente diminui conforme as peças são devolvidas, vendidas ou registradas com ocorrência.</p>
        <div class="table-responsive"><table class="table table-hover align-middle detail-table product-table mb-0">
        <thead><tr><th>Código</th><th>Produto / variação</th><th>Envio inicial</th><th>Devolvidas</th><th>Vendidas</th><th>Saldo pendente</th><th>Unitário</th><th>Valor pendente</th></tr></thead>
        <tbody>{% for item in itens %}<tr>
            <td>{{ item.codigo_produto }}</td><td><strong>{{ item.descricao }}</strong>{% if item.tamanho or item.cor %}<br><small class="text-muted">{{ item.tamanho }} {{ item.cor }}</small>{% endif %}
                {% if item.quantidade_pendente == 0 %}<br><span class="badge bg-success-subtle text-success-emphasis mt-1">{% if item.quantidade_devolvida == item.quantidade_enviada %}Devolvido por completo{% else %}Concluído{% endif %}</span>{% endif %}
            </td>
            <td><span class="number-pill pill-init">{{ item.quantidade_enviada }}</span></td><td><span class="number-pill pill-devol">{{ item.quantidade_devolvida }}</span></td><td><span class="number-pill pill-vend">{{ item.quantidade_vendida }}</span></td><td><span class="number-pill pill-pend">{{ item.quantidade_pendente }}</span></td>
            <td>R$ {{ item.preco_unitario|floatformat:2 }}</td><td class="fw-semibold">R$ {{ item.valor_pendente|floatformat:2 }}</td>
        </tr>{% empty %}<tr><td colspan="8" class="text-muted text-center py-4">Nenhum produto cadastrado no rascunho.</td></tr>{% endfor %}</tbody>
    </table></div></div></div>

    {% if resumo_limite.ativo %}
    <div class="card border-start border-4 border-info"><div class="card-header section-heading"><i class="bi bi-credit-card"></i> Limite de crediário</div><div class="card-body">
        <div class="row g-3"><div class="col-sm-4"><span class="field-label">Limite total</span><strong>R$ {{ resumo_limite.limite_total|floatformat:2 }}</strong></div><div class="col-sm-4"><span class="field-label">Saldo devedor</span><strong>R$ {{ resumo_limite.valor_em_aberto|floatformat:2 }}</strong></div><div class="col-sm-4"><span class="field-label">Disponível</span><strong>R$ {{ resumo_limite.limite_disponivel|floatformat:2 }}</strong></div></div>
        <p class="small text-muted mt-3 mb-0">O valor em condicional não reduz esse limite. {% if user.is_superuser or perms.core.change_cliente %}<a href="{% url 'editar_cliente' condicional.cliente_id %}" target="_blank" rel="noopener">Editar limite do cliente</a>{% endif %}</p>
    </div></div>
    {% else %}<div class="small text-muted mb-3">Este cliente não possui limite de crediário ativo. O comportamento atual do crediário será mantido.</div>{% endif %}

    <div class="card"><div class="card-header section-heading"><i class="bi bi-clock-history"></i> Histórico de movimentações</div><div class="card-body">
        {% if eventos %}
        <div class="history-list">
            {% for evento in eventos %}
            <article class="history-entry {% if evento.tipo == 'devolucao' or evento.tipo == 'conferencia' %}event-success{% elif evento.tipo == 'venda' %}event-sale{% elif evento.tipo == 'ocorrencia' or evento.tipo == 'estorno_venda' %}event-warning{% elif evento.tipo == 'cancelamento' %}event-danger{% else %}event-default{% endif %}">
                <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                    <span class="event-name"><i class="bi {% if evento.tipo == 'envio' %}bi-send{% elif evento.tipo == 'devolucao' %}bi-arrow-return-left{% elif evento.tipo == 'venda' %}bi-cart-check{% elif evento.tipo == 'ocorrencia' %}bi-exclamation-triangle{% elif evento.tipo == 'cancelamento' %}bi-x-circle{% elif evento.tipo == 'conferencia' %}bi-clipboard-check{% else %}bi-clock-history{% endif %}"></i> {{ evento.get_tipo_display }}</span>
                    <time class="event-date" datetime="{{ evento.ocorrido_em|date:'c' }}"><i class="bi bi-calendar3 me-1"></i>{{ evento.ocorrido_em|date:'d/m/Y' }} <span class="ms-1">{{ evento.ocorrido_em|date:'H:i:s' }}</span></time>
                </div>
                {% if evento.descricao %}<p class="event-detail">{{ evento.descricao|linebreaksbr }}</p>{% endif %}
                <div class="event-meta{% if not evento.descricao %} mt-3{% endif %}">
                    {% if evento.item %}<span><i class="bi bi-box-seam me-1"></i><strong>Produto:</strong> {{ evento.item.descricao }}</span>{% endif %}
                    {% if evento.quantidade %}<span><i class="bi bi-123 me-1"></i><strong>Quantidade:</strong> {{ evento.quantidade }}</span>{% endif %}
                    <span><i class="bi bi-person me-1"></i><strong>Funcionário:</strong> {{ evento.funcionario.get_full_name|default:evento.funcionario.username|default:'-' }}</span>
                    {% if evento.venda %}<a href="{% url 'detalhe_venda' evento.venda_id %}"><i class="bi bi-receipt me-1"></i>Ver venda {{ evento.venda.numero_venda }}</a>{% endif %}
                </div>
            </article>
            {% endfor %}
        </div>
        {% else %}<div class="text-muted text-center py-4"><i class="bi bi-clock-history d-block fs-3 mb-2"></i>Sem movimentações.</div>{% endif %}
    </div></div>
</div>
{% endblock %}