<div id="btn-carrinho" onclick="abrirCarrinho()">
    <i class="fas fa-shopping-cart"></i> <strong id="cart-count">0</strong>
</div>

<!-- CARRINHO LATERAL -->
<div id="carrinho-lateral">
    <div class="header-carrinho">
        <h4>Seu Carrinho</h4>
        <button onclick="fecharCarrinho()">✖</button>
    </div>

    <!-- BARRA DE PROGRESSO ATACADO -->
    <div id="progresso-atacado"></div>

    <div id="itens-carrinho"></div>

    <div class="footer-carrinho">
        <h5>Total: R$ <span id="cart-total">0,00</span></h5>
        <button onclick="finalizarCompra()" class="btn-finalizar btn-whatsapp">
            🟢 Finalizar no WhatsApp
        </button>
        <button onclick="pagarPix()" class="btn-finalizar btn-pix">
            🔴 Pagar com PIX
        </button>
        <button onclick="pagarCartao()" class="btn-finalizar btn-cartao">
            🔵 Pagar com Cartão
        </button>
    </div>
</div>

<!-- TOAST -->
<div id="toast">Produto adicionado <i class="fas fa-shopping-cart ms-2"></i></div>

<style>
/* Barra de progresso de atacado */
#progresso-atacado { padding: 0 10px; }
.prog-atacado-box {
    background: rgba(249,115,22,0.08);
    border: 1px solid rgba(249,115,22,0.35);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    animation: fadeInDown 0.3s ease;
}
.prog-atacado-box.ativo {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.4);
}
.prog-bar-track {
    background: rgba(0,0,0,0.08);
    border-radius: 4px;
    height: 7px;
    overflow: hidden;
    margin: 6px 0;
}
.prog-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    background: linear-gradient(90deg, #f97316, #ea580c);
}
.prog-bar-fill.ativo { background: linear-gradient(90deg, #22c55e, #16a34a); }
.badge-atacado-ativo {
    display: inline-block;
    background: #22c55e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-bottom: 4px;
}
.badge-atacado-pendente {
    display: inline-block;
    background: #f97316;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-bottom: 4px;
}
.item-carrinho { padding: 10px; border-radius: 6px; margin-bottom: 8px; background: var(--color-bg-surface, #fff); }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
</style>

<script>
// ─── ABRIR / FECHAR ────────────────────────────────────────────
function abrirCarrinho() {
    document.getElementById("carrinho-lateral").style.right = "0";
}
function fecharCarrinho() {
    document.getElementById("carrinho-lateral").style.right = "-400px";
}

// ─── TOAST ────────────────────────────────────────────────────
function mostrarToast() {
    const t = document.getElementById("toast");
    t.classList.add("toast-show");
    setTimeout(() => t.classList.remove("toast-show"), 2000);
}

// ─── ADICIONAR PRODUTO ────────────────────────────────────────
function addCarrinho(id, nome, preco, tamanho = null, cor = null, numero = null, quantidade = 1) {
    let body = `add=1&id=${id}&nome=${encodeURIComponent(nome)}&preco=${preco}&quantidade=${quantidade}`;
    if (tamanho) body += `&tamanho=${encodeURIComponent(tamanho)}`;
    if (cor)     body += `&cor=${encodeURIComponent(cor)}`;
    if (numero)  body += `&numero=${encodeURIComponent(numero)}`;

    fetch("carrinho.php", {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: body
    })
    .then(r => r.json())
    .then(data => {
        renderizarCarrinho(data);
        if (!data.avisos || data.avisos.length === 0) {
            mostrarToast();
        }
    });
}

// ─── BUSCAR DADOS DO CARRINHO (ONLOAD) ────────────────────────
function atualizarCarrinho() {
    fetch("carrinho.php")
    .then(r => r.json())
    .then(data => renderizarCarrinho(data));
}

// ─── RENDERIZAR INTERFACE ─────────────────────────────────────
function renderizarCarrinho(data) {
    if (data.avisos && data.avisos.length > 0) {
        let uniqueAvisos = [...new Set(data.avisos)];
        alert("⚠️ Atenção:\n\n" + uniqueAvisos.join("\n\n"));
    }

    renderizarProgresso(data.progresso, data.total_pecas);

    let html = "";
    let qtdTotal = 0;

    data.carrinho.forEach(item => {
        qtdTotal += item.quantidade;
        const subtotal = item.preco * item.quantidade;

        // Badges de variação
        let variacoes = "";
        if (item.tamanho) variacoes += `<span class="badge bg-light text-dark border me-1">Tam: ${item.tamanho}</span>`;
        if (item.cor)     variacoes += `<span class="badge bg-light text-dark border me-1">Cor: ${item.cor}</span>`;
        if (item.numero)  variacoes += `<span class="badge bg-light text-dark border me-1">Nº: ${item.numero}</span>`;

        // Bloco de preço com status de atacado
        let precoHtml = "";
        if (item.tem_atacado && item.atacado_ativo) {
            const varejoBruto = item.preco_promo ?? item.preco_varejo;
            precoHtml = `
                <span class="badge-atacado-ativo">🏭 ATACADO ATIVO</span>
                <div>
                    <span class="text-muted" style="text-decoration:line-through;font-size:0.8rem;">
                        R$ ${fmtBRL(varejoBruto)}
                    </span>
                    <span class="text-success fw-bold ms-1" style="font-size:0.95rem;">
                        R$ ${fmtBRL(item.preco)} un
                    </span>
                </div>`;
        } else if (item.tem_atacado && !item.atacado_ativo) {
            let infoRef = "";
            if (item.regra_atacado === 'referencia') {
                const faltam = Math.max(0, item.min_qtd - (item.qtd_produto || item.quantidade));
                if (faltam > 0) {
                    infoRef = `<span class="badge-atacado-pendente">+${faltam} p/ atacado</span><br>`;
                }
            }
            precoHtml = `
                ${infoRef}
                <span class="text-muted" style="font-size:0.85rem;">R$ ${fmtBRL(item.preco)} un</span>`;
        } else {
            precoHtml = `<span class="text-muted" style="font-size:0.85rem;">R$ ${fmtBRL(item.preco)} un</span>`;
        }

        html += `
        <div class="item-carrinho border-bottom">
            <strong>${item.nome}</strong>
            <div class="mt-1 mb-2">${variacoes}</div>
            <div class="d-flex align-items-center gap-2 my-2">
                <button onclick="alterarQtd('${item.unique_key}', ${item.quantidade - 1})"
                        class="btn btn-sm btn-light border">➖</button>
                <span class="fw-bold">${item.quantidade}</span>
                <button onclick="alterarQtd('${item.unique_key}', ${item.quantidade + 1})"
                        class="btn btn-sm btn-light border">➕</button>
            </div>
            <div class="d-flex justify-content-between align-items-end mt-1">
                <div>${precoHtml}</div>
                <strong>R$ ${fmtBRL(subtotal)}</strong>
            </div>
            <button onclick="removerItem('${item.unique_key}')"
                    class="btn btn-sm btn-outline-danger mt-2 w-100">Remover</button>
        </div>`;
    });

    document.getElementById("itens-carrinho").innerHTML = html || '<p class="text-muted small text-center p-3">Carrinho vazio</p>';
    document.getElementById("cart-total").innerText = fmtBRL(data.total);
    document.getElementById("cart-count").innerText = qtdTotal;
}

// ─── BARRA DE PROGRESSO DE ATACADO ───────────────────────────
function renderizarProgresso(prog, totalPecas) {
    const el = document.getElementById("progresso-atacado");
    if (!el) return;

    if (!prog) { el.innerHTML = ""; return; }

    if (prog.ativo) {
        el.innerHTML = `
            <div class="prog-atacado-box ativo">
                <div class="d-flex align-items-center gap-2 mb-1">
                    <span style="font-size:1rem;">🏭</span>
                    <span class="fw-bold text-success" style="font-size:0.8rem;">PREÇO DE ATACADO ATIVO!</span>
                </div>
                <div class="prog-bar-track"><div class="prog-bar-fill ativo" style="width:100%"></div></div>
                <div class="text-center text-success" style="font-size:0.7rem;font-weight:600;">
                    Todos os itens elegíveis estão no preço de atacado ✓
                </div>
            </div>`;
        return;
    }

    let pct = 0, textoFaltam = "";

    if (prog.regra === "padrao") {
        pct = Math.min(100, Math.round((prog.atual / prog.minimo) * 100));
        textoFaltam = `Adicione mais <strong>${prog.faltam} peça${prog.faltam !== 1 ? "s" : ""}</strong> para ativar o preço de atacado`;
    } else if (prog.regra === "valor_global") {
        pct = Math.min(100, Math.round((prog.atual / prog.minimo) * 100));
        textoFaltam = `Adicione mais <strong>R$ ${fmtBRL(prog.faltam)}</strong> para ativar o preço de atacado`;
    }

    el.innerHTML = `
        <div class="prog-atacado-box">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <span class="fw-bold text-dark" style="font-size:0.75rem;">🏭 PREÇO ATACADO</span>
                <span class="text-muted" style="font-size:0.7rem;">${pct}%</span>
            </div>
            <div class="prog-bar-track">
                <div class="prog-bar-fill" style="width:${pct}%"></div>
            </div>
            <div class="text-center" style="font-size:0.72rem;color:#555;margin-top:4px;">${textoFaltam}</div>
        </div>`;
}

// ─── ALTERAR QUANTIDADE ───────────────────────────────────────
function alterarQtd(uniqueKey, quantidade) {
    if (quantidade < 1) return removerItem(uniqueKey);
    fetch("carrinho.php", {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: `update=1&unique_key=${uniqueKey}&quantidade=${quantidade}`
    }).then(r => r.json()).then(data => renderizarCarrinho(data));
}

// ─── REMOVER ITEM ─────────────────────────────────────────────
function removerItem(uniqueKey) {
    fetch("carrinho.php", {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: `remove=1&unique_key=${uniqueKey}`
    }).then(r => r.json()).then(data => renderizarCarrinho(data));
}

// ─── FORMATAÇÃO BRL ───────────────────────────────────────────
function fmtBRL(v) {
    return parseFloat(v).toLocaleString("pt-BR", {minimumFractionDigits: 2, maximumFractionDigits: 2});
}

// ─── FINALIZAR COMPRA (WHATSAPP) ─────────────────────────────
function finalizarCompra() {
    fetch("carrinho.php")
    .then(r => r.json())
    .then(data => {
        if (!data.carrinho.length) { alert("Carrinho vazio!"); return; }

        const iconFoguete  = String.fromCodePoint(0x1F680);
        const iconCaixa    = String.fromCodePoint(0x1F4E6);
        const iconItem     = String.fromCodePoint(0x1F539);
        const iconDinheiro = String.fromCodePoint(0x1F4B0);
        const iconCheck    = String.fromCodePoint(0x2705);
        const iconUser     = String.fromCodePoint(0x1F464);
        const iconCasa     = String.fromCodePoint(0x1F3E0);

        <?php if (isset($_SESSION['usuario_id'])):
            if (!isset($conn)) include '../adm/config/db.php';
            $stmt = $conn->prepare("SELECT nome_completo, endereco, numero, bairro, cidade, estado, ponto_referencia FROM usuarios WHERE id = ?");
            $uId  = $_SESSION['usuario_id'];
            $stmt->bind_param("i", $uId);
            $stmt->execute();
            $u = $stmt->get_result()->fetch_assoc();
        ?>
        const clientName = "<?= htmlspecialchars($u['nome_completo'] ?? '') ?>";
        const clientAddr = "<?= htmlspecialchars($u['endereco'] ? $u['endereco'].', '.$u['numero'].' - '.$u['bairro'].' ('.$u['cidade'].'/'.$u['estado'].')' : '') ?>";
        const clientRef  = "<?= htmlspecialchars($u['ponto_referencia'] ?? '') ?>";
        <?php else: ?>
        const clientName = "";
        const clientAddr = "";
        const clientRef  = "";
        <?php endif; ?>

        let msg = `${iconFoguete} *NOVO PEDIDO - CATÁLOGO 44*\n`;
        msg += "--------------------------\n";

        if (clientName) {
            msg += `${iconUser} *CLIENTE:* ${clientName}\n`;
            if (clientAddr) msg += `${iconCasa} *ENTREGA:* ${clientAddr}\n`;
            if (clientRef)  msg += `   *OBS/REF:* ${clientRef}\n`;
            msg += "--------------------------\n";
        }

        msg += `${iconCaixa} *ITENS DO CARRINHO:*\n\n`;

        data.carrinho.forEach(item => {
            let info = "";
            if (item.tamanho) info += ` [Tam: ${item.tamanho}]`;
            if (item.cor)     info += ` [Cor: ${item.cor}]`;
            if (item.numero)  info += ` [Nº: ${item.numero}]`;
            const tipoPreco = (item.tem_atacado && item.atacado_ativo) ? " 🏭" : "";
            msg += `${iconItem} *${item.nome}*${info} (${item.quantidade}x) - R$ ${fmtBRL(item.preco)}${tipoPreco}\n`;
        });

        msg += `\n${iconDinheiro} *TOTAL: R$ ${fmtBRL(data.total)}*\n\n`;
        msg += `${iconCheck} *Acabei de escolher esses produtos, gostaria de ver os detalhes e entrega!*`;

        const waPhone = "<?= $whatsappLoja ?? '' ?>";
        if (!waPhone) { alert("WhatsApp da loja está indisponível"); return; }
        window.open("https://api.whatsapp.com/send?phone=" + waPhone + "&text=" + encodeURIComponent(msg), "_blank");
    });
}

// ─── PAGAMENTOS ───────────────────────────────────────────────
function pagarPix()    { window.location.href = "checkout.php"; }
function pagarCartao() { window.location.href = "checkout.php"; }

// ─── INICIALIZAÇÃO ────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", atualizarCarrinho);
</script>
