{% extends 'base.html' %}
{% block title %}Conferir {{ condicional.numero }} - Condicionais{% endblock %}
{% block extra_css %}
<style>
    .conference-page .conference-hero { background: linear-gradient(120deg, #173b63, #2866a0); color: #fff; border-radius: 14px; padding: 1.35rem 1.5rem; margin-bottom: 1.25rem; }
    .conference-page .conference-hero-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem; background: rgba(255,255,255,.18); font-size: 1.65rem; }
    .conference-page .overview-card { height: 100%; margin-bottom: 0; border: 1px solid var(--card-border); border-left: 5px solid var(--card-accent); background: var(--card-bg); }
    .conference-page .overview-card .card-body { padding: .9rem 1rem; }
    .conference-page .overview-icon { color: var(--card-accent); font-size: 1.45rem; }
    .conference-page .overview-value { color: var(--card-ink); font-size: 1.7rem; line-height: 1.1; font-weight: 700; }
    .conference-page .overview-label { color: #3e5062; font-weight: 600; font-size: .88rem; }
    .conference-page .tone-blue { --card-bg: #edf5ff; --card-border: #cfe1fb; --card-accent: #2866a0; --card-ink: #164a7b; }
    .conference-page .tone-green { --card-bg: #eaf8ef; --card-border: #c8ecd6; --card-accent: #228451; --card-ink: #17623c; }
    .conference-page .tone-purple { --card-bg: #f4efff; --card-border: #ddd1fb; --card-accent: #7655b2; --card-ink: #583896; }
    .conference-page .tone-orange { --card-bg: #fff4e5; --card-border: #f5dfbc; --card-accent: #b97013; --card-ink: #89500d; }
    .conference-page .product-card { height: 100%; margin-bottom: 0; border: 1px solid #dce5ef; border-top: 5px solid #2866a0; }
    .conference-page .product-card .card-body { padding: 1.15rem; }
    .conference-page .product-name { font-size: 1.12rem; font-weight: 700; color: #21364b; }
    .conference-page .product-code { color: #5a6b7c; font-size: .87rem; }
    .conference-page .product-summary { display: flex; flex-wrap: wrap; gap: .4rem; }
    .conference-page .product-summary span { display: inline-flex; gap: .3rem; padding: .3rem .55rem; border-radius: .45rem; background: #f0f4f8; color: #43576b; font-size: .83rem; }
    .conference-page .product-summary strong { color: #203950; }
    .conference-page .action-box { height: 100%; padding: .85rem; border: 1px solid var(--card-border); border-radius: .7rem; background: var(--card-bg); }
    .conference-page .action-box label { display: flex; align-items: center; gap: .4rem; color: var(--card-ink); font-weight: 700; margin-bottom: .4rem; }
    .conference-page .action-box label i { font-size: 1.2rem; }
    .conference-page .action-box .form-control { border-color: var(--card-border); font-size: 1.1rem; font-weight: 700; text-align: center; }
    .conference-page .action-box .form-control:focus { border-color: var(--card-accent); box-shadow: 0 0 0 .2rem var(--card-border); }
    .conference-page .action-help { color: #4d5b69; font-size: .79rem; line-height: 1.3; min-height: 2.1em; }
    .conference-page .remaining-box { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; border-radius: .7rem; background: #eaf2ff; color: #164a7b; }
    .conference-page .remaining-box strong { font-size: 1.35rem; }
    .conference-page .product-card.is-invalid .remaining-box { background: #ffe8e8; color: #a42630; }
    .conference-page .conference-submit { position: sticky; bottom: 0; z-index: 5; padding: .9rem; margin-top: 1.25rem; border: 1px solid #dce5ef; border-radius: .75rem; background: #fff; box-shadow: 0 -5px 18px rgba(26,55,85,.09); }
    @media (max-width: 575.98px) {
        .conference-page .conference-hero { padding: 1rem; }
        .conference-page .conference-submit .btn { width: 100%; }
    }
</style>
{% endblock %}
{% block content %}
<div class="conference-page">
    <div class="conference-hero">
        <a href="{% url 'condicional:detalhe' condicional.pk %}" class="btn btn-outline-light btn-sm mb-3"><i class="bi bi-arrow-left"></i> Voltar ao condicional</a>
        <div class="d-flex align-items-center gap-3">
            <span class="conference-hero-icon"><i class="bi bi-clipboard2-check"></i></span>
            <div><div class="small text-white-50 text-uppercase fw-semibold">Destino das peças</div><h2 class="mb-0">Conferir {{ condicional.numero }}</h2></div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-6 col-lg-3"><div class="card overview-card tone-blue"><div class="card-body"><i class="bi bi-bag-check overview-icon"></i><div class="overview-value">{{ condicional.quantidade_enviada }}</div><div class="overview-label">Envio inicial</div></div></div></div>
        <div class="col-6 col-lg-3"><div class="card overview-card tone-green"><div class="card-body"><i class="bi bi-arrow-return-left overview-icon"></i><div class="overview-value">{{ condicional.quantidade_devolvida }}</div><div class="overview-label">Já devolvidas</div></div></div></div>
        <div class="col-6 col-lg-3"><div class="card overview-card tone-purple"><div class="card-body"><i class="bi bi-cart-check overview-icon"></i><div class="overview-value">{{ condicional.quantidade_vendida }}</div><div class="overview-label">Já vendidas</div></div></div></div>
        <div class="col-6 col-lg-3"><div class="card overview-card tone-orange"><div class="card-body"><i class="bi bi-hourglass-split overview-icon"></i><div class="overview-value">{{ condicional.quantidade_pendente }}</div><div class="overview-label">Saldo a conferir</div></div></div></div>
    </div>

    <div class="alert alert-info d-flex gap-2 align-items-start">
        <i class="bi bi-info-circle-fill fs-5"></i>
        <div><strong>Informe o destino de cada peça.</strong> A soma das escolhas não pode ultrapassar o saldo a conferir. Peças devolvidas voltam ao estoque vendável; peças com avaria ficam em ocorrência. Itens escolhidos para compra só serão vendidos após finalizar a venda no PDV. O restante continua com o cliente.</div>
    </div>

    <form method="post" id="form-conferencia">
        {% csrf_token %}
        <input type="hidden" name="operacao" value="{{ operacao }}">
        <div class="row g-3">
            {% for item in itens %}
            <div class="col-xl-6">
                <section class="card product-card" data-pendente="{{ item.quantidade_pendente }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start gap-2 mb-3">
                            <div><div class="product-name">{{ item.descricao }}</div><div class="product-code">{{ item.codigo_produto }}{% if item.tamanho %} · Tamanho {{ item.tamanho }}{% endif %}{% if item.cor %} · {{ item.cor }}{% endif %}</div></div>
                            {% if item.quantidade_pendente %}<span class="badge bg-primary fs-6">{{ item.quantidade_pendente }} a conferir</span>{% else %}<span class="badge bg-success fs-6">Concluído</span>{% endif %}
                        </div>
                        <div class="product-summary mb-3">
                            <span>Envio inicial <strong>{{ item.quantidade_enviada }}</strong></span>
                            <span>Devolvidas <strong>{{ item.quantidade_devolvida }}</strong></span>
                            <span>Vendidas <strong>{{ item.quantidade_vendida }}</strong></span>
                            <span>Ocorrências <strong>{{ item.quantidade_ocorrencia }}</strong></span>
                        </div>
                        {% if item.quantidade_pendente %}
                        <div class="row g-2 mb-3">
                            <div class="col-md-4"><div class="action-box tone-green">
                                <label for="devolvida_{{ item.pk }}"><i class="bi bi-arrow-return-left"></i> Devolver</label>
                                <div class="action-help">Volta ao estoque vendável.</div>
                                <input class="form-control quantidade-conferencia mt-2" id="devolvida_{{ item.pk }}" type="number" inputmode="numeric" min="0" max="{{ item.quantidade_pendente }}" value="0" name="devolvida_{{ item.pk }}" aria-label="Quantidade de {{ item.descricao }} devolvida ao estoque">
                            </div></div>
                            <div class="col-md-4"><div class="action-box tone-purple">
                                <label for="para_venda_{{ item.pk }}"><i class="bi bi-cart-check"></i> Comprar</label>
                                <div class="action-help">Segue para finalizar no PDV.</div>
                                <input class="form-control quantidade-conferencia mt-2" id="para_venda_{{ item.pk }}" type="number" inputmode="numeric" min="0" max="{{ item.quantidade_pendente }}" value="0" name="para_venda_{{ item.pk }}" aria-label="Quantidade de {{ item.descricao }} escolhida para compra">
                            </div></div>
                            <div class="col-md-4"><div class="action-box tone-orange">
                                <label for="ocorrencia_{{ item.pk }}"><i class="bi bi-exclamation-triangle"></i> Ocorrência</label>
                                <div class="action-help">Peça com avaria, fora do estoque.</div>
                                <input class="form-control quantidade-conferencia mt-2" id="ocorrencia_{{ item.pk }}" type="number" inputmode="numeric" min="0" max="{{ item.quantidade_pendente }}" value="0" name="ocorrencia_{{ item.pk }}" aria-label="Quantidade de {{ item.descricao }} com ocorrência">
                            </div></div>
                        </div>
                        <div class="remaining-box"><span><i class="bi bi-person-check me-1"></i> Continua com o cliente</span><strong class="quantidade-continua" aria-live="polite">{{ item.quantidade_pendente }}</strong></div>
                        <div class="text-danger small mt-2 conference-error" hidden>A soma informada ultrapassa o saldo a conferir deste produto.</div>
                        {% else %}
                        <div class="remaining-box"><span><i class="bi bi-check-circle me-1"></i> Este produto já foi concluído</span><strong>0 pendente</strong></div>
                        {% endif %}
                    </div>
                </section>
            </div>
            {% empty %}
            <div class="col-12"><div class="card"><div class="card-body text-center text-muted py-4"><i class="bi bi-inbox fs-2 d-block mb-2"></i>Não há produtos para conferir.</div></div></div>
            {% endfor %}
        </div>
        <div class="conference-submit d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span class="text-muted small"><i class="bi bi-shield-check me-1"></i>Confira as quantidades antes de registrar.</span>
            <button class="btn btn-primary btn-lg" type="submit"><i class="bi bi-check-circle-fill me-1"></i> Registrar conferência</button>
        </div>
    </form>
</div>
<script>
const formConferencia = document.getElementById('form-conferencia');
const botaoConferencia = formConferencia.querySelector('button[type="submit"]');
const cardsConferencia = [...formConferencia.querySelectorAll('.product-card[data-pendente]')];

function atualizarConferencia() {
    let formularioInvalido = false;
    cardsConferencia.forEach(card => {
        const pendente = Number(card.dataset.pendente) || 0;
        const campos = [...card.querySelectorAll('.quantidade-conferencia')];
        const usados = campos.reduce((total, campo) => total + (Number(campo.value) || 0), 0);
        const invalido = usados > pendente || campos.some(campo => !campo.checkValidity());
        card.classList.toggle('is-invalid', invalido);
        const aviso = card.querySelector('.conference-error');
        if (aviso) aviso.hidden = !invalido;
        const restante = card.querySelector('.quantidade-continua');
        if (restante) restante.textContent = Math.max(pendente - usados, 0);
        formularioInvalido ||= invalido;
    });
    botaoConferencia.disabled = formularioInvalido;
}

formConferencia.querySelectorAll('.quantidade-conferencia').forEach(campo => campo.addEventListener('input', atualizarConferencia));
atualizarConferencia();
</script>
{% endblock %}