<?php
require_once __DIR__ . '/components/product_card.php';
require_once __DIR__ . '/theme-init.php';
require_once __DIR__ . '/../adm/config/price_helper.php';

$nome = isset($_GET['nome']) ? $_GET['nome'] : '';
$sql_prod = "SELECT p.*, c.nome AS categoria_nome 
             FROM produtos p 
             LEFT JOIN categorias c ON p.categoria_id = c.id 
             WHERE p.nome = ? AND p.status = 'Ativo' LIMIT 1";

$stmt = $conn->prepare($sql_prod);
if($stmt) {
    $stmt->bind_param("s", $nome);
    $stmt->execute();
    $res_prod = $stmt->get_result();
} else {
    $res_prod = false;
}

$produto = null;
if($res_prod && $res_prod->num_rows > 0) {
    $produto = $res_prod->fetch_assoc();
    $pageTitle = $produto['nome'] . " - " . ($dadosLoja['nome'] ?? 'Catálogo 44');
    $pageDescription = mb_substr(strip_tags($produto['descricao']), 0, 155) . "...";
    $pageKeywords = $produto['nome'] . ", " . $produto['categoria_nome'] . ", comprar";
    $pageImage = !empty($produto['imagem_principal']) ? 'https://' . $_SERVER['HTTP_HOST'] . '/adm/uploads/produtos/' . $produto['imagem_principal'] : '';
    $ogType = "product";
} else {
    $pageTitle = "Produto não encontrado - " . ($dadosLoja['nome'] ?? 'Catálogo 44');
}

$extraHead = '<style>
        
        
        .gallery-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.8);
            color: #333;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            transition: 0.3s;
            border: 1px solid #eee;
        }
        .gallery-arrow:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }
        .gallery-arrow.prev { left: 10px; }
        .gallery-arrow.next { right: 10px; }
        .main-image-container a {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
        }
        .product-gallery .main-image-container {
            position: relative;
            width: 100%;
            height: 500px;
            background: #f8f9fa;
            border-radius: 0;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid #eee;
        }
        .product-gallery .main-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .product-gallery .thumbnails {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        .product-gallery .thumbnails::-webkit-scrollbar {
            height: 6px;
        }
        .product-gallery .thumbnails::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }
        .product-gallery .thumb {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 0;
            cursor: pointer;
            border: 2px solid transparent;
            transition: 0.3s;
            flex-shrink: 0;
            background: #fff;
        }
        .product-gallery .thumb:hover, .product-gallery .thumb.active {
            border-color: var(--primary);
        }
        .var-btn {
            border: 2px solid #ddd;
            background: #fff;
            padding: 10px 18px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 50px;
            color: #333;
        }
        .var-btn:hover:not(.disabled):not(.active) {
            border-color: var(--primary);
            background-color: rgba(var(--bs-primary-rgb), 0.05); /* Usando rgba de variável do bootstrap caso exista */
        }
        .var-btn.active {
            border-color: var(--primary);
            background-color: var(--primary);
            color: #fff;
        }
        .var-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            text-decoration: line-through;
            background-color: #f1f1f1;
        }
    </style>';
include 'header.php';
?>

    <?php
    if($produto) {
        // Coleta imagens
        $imagens = [];
        if(!empty($produto['imagem_principal'])) {
            $imagens[] = $produto['imagem_principal'];
        }
        for($i=1; $i<=10; $i++) {
            if(!empty($produto['imagem'.$i])) {
                $imagens[] = $produto['imagem'.$i];
            }
        }
        
        // Coleta imagens das variações
        $sql_img_var = "SELECT imagem_variacao FROM produto_variacoes WHERE produto_id = " . $produto['id'] . " AND imagem_variacao != '' AND imagem_variacao IS NOT NULL";
        $res_img_var = $conn->query($sql_img_var);
        if ($res_img_var && $res_img_var->num_rows > 0) {
            while ($row = $res_img_var->fetch_assoc()) {
                if (!in_array($row['imagem_variacao'], $imagens)) {
                    $imagens[] = $row['imagem_variacao'];
                }
            }
        }
    ?>
    
    <!-- Product Start -->
    <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container py-5">
            <div class="row g-5">
                
                <!-- Gallery -->
                <div class="col-lg-6">
                    <div class="product-gallery">
                        <div class="main-image-container">
                            <!-- Arrows -->
                            <div class="gallery-arrow prev" onclick="navigateGallery(-1)"><i class="fas fa-chevron-left"></i></div>
                            <div class="gallery-arrow next" onclick="navigateGallery(1)"><i class="fas fa-chevron-right"></i></div>
                            
                            <!-- Lightbox Link -->
                            <a id="lightbox-link" href="../adm/uploads/produtos/<?= htmlspecialchars($imagens[0]) ?>" class="glightbox" data-gallery="product-gallery">
                                <img id="main-product-image" class="main-image" src="../adm/uploads/produtos/<?= htmlspecialchars($imagens[0]) ?>" alt="<?= htmlspecialchars($produto['nome']) ?>">
                            </a>
                        </div>
                        
                        <!-- Hidden links for the rest of the gallery -->
                        <div style="display:none;">
                            <?php foreach($imagens as $index => $img): 
                                if($index === 0) continue; ?>
                                <a href="../adm/uploads/produtos/<?= htmlspecialchars($img) ?>" class="glightbox" data-gallery="product-gallery"></a>
                            <?php endforeach; ?>
                        </div>
                        
                        <div class="thumbnails">
                            <?php foreach($imagens as $index => $img): ?>
                                <img class="thumb <?= $index === 0 ? 'active' : '' ?>" src="../adm/uploads/produtos/<?= htmlspecialchars($img) ?>" onclick="changeImage(this, '../adm/uploads/produtos/<?= htmlspecialchars($img) ?>', <?= $index ?>)">
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                
                <!-- Product Details -->
                <div class="col-lg-6">
                    <div class="mb-4">
                        <span class="text-primary text-uppercase fw-bold"><?= htmlspecialchars($produto['categoria_nome']) ?></span>
                        <h1 class="display-5 mb-0 text-heading"><?= htmlspecialchars($produto['nome']) ?></h1>
                    </div>
                    
                    <div class="mb-4" id="product-price-block">
                        <?php 
                        $calcBase     = calcularPrecoProduto($produto);
                        $precoVarejo  = $calcBase['preco_varejo'];
                        $emPromo      = $calcBase['em_promocao'];
                        $precoPromo   = $calcBase['preco_promocional']; // float|null
                        $emAtacado    = $calcBase['em_atacado'];
                        $precoAtacado = $calcBase['preco_atacado'];     // float|null
                        $precoFinal   = $calcBase['preco_final'];       // para JS
                        ?>

                        <!-- PREÇO VAREJO: exibido sempre -->
                        <?php if ($emPromo && $precoPromo !== null): ?>
                            <!-- Varejo riscado + Promocional -->
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <?php
                                $descPct = $precoVarejo > 0
                                    ? round((($precoVarejo - $precoPromo) / $precoVarejo) * 100)
                                    : 0;
                                ?>
                                <?php if ($descPct > 0): ?>
                                    <span class="badge bg-danger text-white fw-bold px-2 py-1" style="font-size:0.75rem;"><?= $descPct ?>% OFF</span>
                                <?php endif; ?>
                                <span class="text-muted" style="font-size:0.95rem; text-decoration:line-through;">Varejo: R$ <?= number_format($precoVarejo, 2, ',', '.') ?></span>
                            </div>
                            <h2 class="text-success fw-bold mb-0" style="font-size:2.2rem;">R$ <?= number_format($precoPromo, 2, ',', '.') ?></h2>
                            <small class="text-muted d-block mb-2">Preço promocional</small>
                        <?php else: ?>
                            <!-- Somente Varejo -->
                            <h2 class="fw-bold mb-0" style="color:var(--primary);font-size:2.2rem;">R$ <?= number_format($precoVarejo, 2, ',', '.') ?></h2>
                            <small class="text-muted d-block mb-2">Preço varejo</small>
                        <?php endif; ?>

                        <!-- PREÇO ATACADO: independente, aparece sempre que configurado -->
                        <?php if ($emAtacado && $precoAtacado !== null): ?>
                            <div class="p-3 rounded mb-2 border border-warning mt-2" style="background: rgba(255,193,7,0.1); max-width: 350px;">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <span class="badge text-white fw-bold px-2 py-1 bg-dark" style="font-size:0.85rem;">🏭 ATACADO</span>
                                    <small class="text-muted">Preço especial no atacado</small>
                                </div>
                                <h2 class="fw-bold mb-0" style="color:var(--color-warning);font-size:2.2rem;">R$ <?= number_format($precoAtacado, 2, ',', '.') ?></h2>
                                
                                <?php 
                                $regra = $produto['regra_atacado'] ?? 'padrao';
                                $min_qtd = $produto['atacado_min_qtd'] ?? 6;
                                $min_valor = $produto['atacado_min_valor'] ?? 0.00;
                                ?>
                                <div class="mt-2 text-dark small fw-semibold">
                                    <i class="fas fa-info-circle text-warning"></i> 
                                    <?php if($regra == 'padrao'): ?>
                                        Ativado ao atingir <strong><?= $min_qtd ?> peças</strong> no carrinho (soma global).
                                    <?php elseif($regra == 'valor_global'): ?>
                                        Ativado em pedidos acima de <strong>R$ <?= number_format($min_valor, 2, ',', '.') ?></strong>.
                                    <?php elseif($regra == 'referencia'): ?>
                                        Leve no mínimo <strong><?= $min_qtd ?> peças</strong> deste modelo.
                                    <?php elseif($regra == 'grade'): ?>
                                        Vendido em <strong>Pacote Fechado</strong> (Grade obrigatória).
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>

                    
                    <div class="mb-5">
                        <h5 class="mb-3">Descrição do Produto</h5>
                        <div class="mb-0 text-dark"><?= $produto['descricao'] ?></div>
                    </div>

                    <!-- VARIAÇÕES -->
                    <?php 
                    $vender_sem_estoque = $produto['vender_sem_estoque'] ?? 'não';
                    // Garantir variáveis de atacado com defaults para evitar warnings no JS embedded
                    $regra     = $produto['regra_atacado'] ?? 'padrao';
                    $min_qtd   = $produto['atacado_min_qtd'] ?? 6;
                    $min_valor = $produto['atacado_min_valor'] ?? 0.00;
                    
                    // Busca as variações do banco
                    $sql_var = "SELECT * FROM produto_variacoes WHERE produto_id = " . $produto['id'];
                    $res_var = $conn->query($sql_var);
                    $variacoes = [];
                    if ($res_var && $res_var->num_rows > 0) {
                        while ($row = $res_var->fetch_assoc()) {
                            $variacoes[] = $row;
                        }
                    }
                    
                    // Adicionamos as variações a partir dos campos simples do produto
                    $arrTamanhos = array_filter(array_map('trim', explode(',', $produto['tamanhos'] ?? '')));
                    $arrCores = array_filter(array_map('trim', explode(',', $produto['cores'] ?? '')));
                    $arrNumeros = array_filter(array_map('trim', explode(',', $produto['numeros'] ?? '')));
                    
                    $t_list = !empty($arrTamanhos) ? $arrTamanhos : [null];
                    $c_list = !empty($arrCores) ? $arrCores : [null];
                    $n_list = !empty($arrNumeros) ? $arrNumeros : [null];
                    
                    foreach ($t_list as $t) {
                        foreach ($c_list as $c) {
                            foreach ($n_list as $n) {
                                if ($t === null && $c === null && $n === null) continue;
                                
                                // Verifica se essa combinação já existe nas variações avançadas
                                $ja_existe = false;
                                foreach ($variacoes as $v) {
                                    $v_t = trim((string)($v['tamanho'] ?? ''));
                                    $v_c = trim((string)($v['cor'] ?? ''));
                                    $v_n = trim((string)($v['numero'] ?? ''));
                                    
                                    $cur_t = trim((string)$t);
                                    $cur_c = trim((string)$c);
                                    $cur_n = trim((string)$n);
                                    
                                    if ($v_t === $cur_t && $v_c === $cur_c && $v_n === $cur_n) {
                                        $ja_existe = true;
                                        break;
                                    }
                                }
                                
                                if (!$ja_existe) {
                                    $variacoes[] = [
                                        'tamanho' => $t,
                                        'cor' => $c,
                                        'numero' => $n,
                                        'estoque' => $produto['estoque'],
                                        'imagem_variacao' => '',
                                        'tem_variacao_preco' => 'não',
                                        'preco' => null,
                                        'preco_promocional' => null,
                                        'em_promocao' => 'não'
                                    ];
                                }
                            }
                        }
                    }
                    
                    $hasVariacoes = count($variacoes) > 0;
                    
                    if ($hasVariacoes) {
                        // Calcula se o PRODUTO INTEIRO está esgotado 
                        $isEsgotado = true;
                        foreach ($variacoes as $v) {
                            if ((int)$v['estoque'] > 0 || $vender_sem_estoque === 'sim') {
                                $isEsgotado = false;
                                break;
                            }
                        }
                    } else {
                        $estoque = isset($produto['estoque']) ? (int)$produto['estoque'] : 0;
                        $isEsgotado = ($estoque <= 0 && $vender_sem_estoque === 'não');
                    }
                    ?>
                    
                    <?php 
                    // Unificando o card de variações e quantidade
                    ?>
                    <div class="card bg-white border border-light shadow-sm rounded-4 p-4 mb-4">
                        <?php if (isset($produto['regra_atacado']) && $produto['regra_atacado'] == 'grade'): ?>
                            <h6 class="mb-3 text-dark fw-bold"><i class="fas fa-box-open me-2 text-warning"></i> Composição do Pacote:</h6>
                            <div class="p-3 mb-4 rounded border border-warning" style="background-color: #fffaf0;">
                                <span class="d-block fw-bold text-dark mb-1">Este produto é vendido apenas em Grade Fechada.</span>
                                <span class="text-muted"><?= htmlspecialchars($produto['grade_composicao'] ?: 'Consulte o vendedor para os detalhes da grade.') ?></span>
                            </div>
                            <!-- Desabilita validação de variações -->
                            <input type="hidden" id="sel_tamanho" name="sel_tamanho" value="Grade Fechada">
                            <input type="hidden" id="sel_cor" name="sel_cor" value="">
                            <input type="hidden" id="sel_numero" name="sel_numero" value="">
                            <script>variacaoSelecionada = true;</script>
                            <hr class="my-4 text-light">
                        <?php elseif ($hasVariacoes): ?>
                            <h6 class="mb-3 text-dark fw-bold"><i class="fas fa-list-ul me-2 text-primary"></i> Escolha a Opção:</h6>
                            <div class="d-flex flex-wrap gap-2" id="variations-container">
                                <?php foreach ($variacoes as $idx => $v): 
                                    $varEstoque = (int)$v['estoque'];
                                    $isDisabled = ($varEstoque <= 0 && $vender_sem_estoque === 'não');
                                    
                                    // Prepara o texto do botão concatenando os campos
                                    $textParts = [];
                                    if(!empty($v['tamanho'])) $textParts[] = htmlspecialchars($v['tamanho']);
                                    if(!empty($v['cor'])) $textParts[] = htmlspecialchars($v['cor']);
                                    if(!empty($v['numero'])) $textParts[] = htmlspecialchars($v['numero']);
                                    $btnText = implode(' - ', $textParts);
                                    if(empty(trim($btnText))) { $btnText = "Opção " . ($idx+1); }
                                    
                                    $calcPreco = calcularPrecoVariacao($v, $produto);
                                    
                                    $badgePromo = '';
                                    if ($calcPreco['em_promocao']) {
                                        $descontoPerc = 0;
                                        if ($calcPreco['preco_original'] > 0) {
                                            $descontoPerc = round((($calcPreco['preco_original'] - $calcPreco['preco_final']) / $calcPreco['preco_original']) * 100);
                                        }
                                        if ($descontoPerc > 0) {
                                            $badgePromo = ' <span class="badge bg-danger ms-2" style="font-size:0.65rem; padding: 0.3em 0.5em; vertical-align: middle;">' . $descontoPerc . '% OFF</span>';
                                        } else {
                                            $badgePromo = ' <span class="badge bg-danger ms-2" style="font-size:0.65rem; padding: 0.3em 0.5em; vertical-align: middle;">Promo</span>';
                                        }
                                    }
                                    
                                    // Payload string (safe for html attribute via htmlspecialchars)
                                    $payloadData = [
                                        'tamanho'         => $v['tamanho'] ?? '',
                                        'cor'             => $v['cor'] ?? '',
                                        'numero'          => $v['numero'] ?? '',
                                        'imagem'          => $v['imagem_variacao'] ?? '',
                                        'preco_final'     => $calcPreco['preco_final'],
                                        'preco_original'  => $calcPreco['preco_original'],
                                        'preco_promocional' => $calcPreco['preco_promocional'] ?? 0,
                                        'em_promocao'     => $calcPreco['em_promocao'],
                                        'em_atacado'      => $calcPreco['em_atacado'] ?? false,
                                        'preco_atacado'   => $calcPreco['preco_atacado'] ?? 0,
                                        'is_variacao_preco' => ($calcPreco['fonte'] === 'variacao'),
                                        'estoque'         => (int)$v['estoque'],
                                        'vender_sem_estoque' => $vender_sem_estoque
                                    ];
                                    $varPayload = htmlspecialchars(json_encode($payloadData), ENT_QUOTES, 'UTF-8');
                                ?>
                                    <div class="var-btn <?= $isDisabled ? 'disabled' : '' ?> d-flex align-items-center" 
                                         onclick="selecionarVariacao(this, <?= $isDisabled ? 'true' : 'false' ?>, '<?= $varPayload ?>')">
                                        <?= $btnText ?><?= $badgePromo ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                            
                            <!-- Campos hidden para o JS e addCarrinho -->
                            <input type="hidden" id="sel_tamanho" name="sel_tamanho" value="">
                            <input type="hidden" id="sel_cor" name="sel_cor" value="">
                            <input type="hidden" id="sel_numero" name="sel_numero" value="">
                            <div id="variation-error" class="text-danger small mt-3 d-none fw-bold"><i class="fas fa-exclamation-circle"></i> Por favor, selecione uma opção acima (tamanho/cor/textura) antes de comprar.</div>
                            
                            <hr class="my-4 text-light">
                        <?php endif; ?>
                        
                        <?php if (!$isEsgotado): ?>
                        <!-- QUANTIDADE -->
                        <style>
                            .qty-btn { transition: all 0.2s ease-in-out; }
                            .qty-btn:hover { background-color: #f8f9fa !important; }
                            .qty-btn:hover i { color: #212529 !important; }
                            /* Remove setas do input number */
                            #item_quantidade::-webkit-outer-spin-button,
                            #item_quantidade::-webkit-inner-spin-button {
                                -webkit-appearance: none;
                                margin: 0;
                            }
                            #item_quantidade {
                                -moz-appearance: textfield;
                                text-align: center;
                            }
                        </style>
                        <div>
                            <?php if (isset($produto['regra_atacado']) && $produto['regra_atacado'] == 'grade'): ?>
                                <h6 class="mb-3 text-dark fw-bold"><i class="fas fa-sort-numeric-up-alt me-2 text-primary"></i> Quantidade de Pacotes:</h6>
                            <?php else: ?>
                                <h6 class="mb-3 text-dark fw-bold"><i class="fas fa-sort-numeric-up-alt me-2 text-primary"></i> Quantidade:</h6>
                            <?php endif; ?>
                            <div class="input-group bg-white rounded-pill shadow-sm border border-light" style="width: 140px; overflow: hidden;">
                                <button class="btn border-0 text-secondary px-3 qty-btn" type="button" onclick="changeQuantity(-1)" style="background: transparent; z-index: 0;">
                                    <i class="fas fa-minus fa-sm"></i>
                                </button>
                                <input type="number" class="form-control text-center fw-bolder border-0 bg-transparent px-0 text-dark" id="item_quantidade" value="1" min="1" max="<?= !$hasVariacoes && $vender_sem_estoque === 'não' ? ((int)$produto['estoque'] > 0 ? (int)$produto['estoque'] : 1) : 99 ?>" readonly style="box-shadow: none; font-size: 1.1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; text-align: center;">
                                <button class="btn border-0 text-secondary px-3 qty-btn" type="button" onclick="changeQuantity(1)" style="background: transparent; z-index: 0;">
                                    <i class="fas fa-plus fa-sm"></i>
                                </button>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>
                    
                    <div class="d-flex flex-column gap-3">
                        <?php if ($isEsgotado): ?>
                            <div class="alert alert-danger text-center fw-bold text-uppercase p-3 mb-0" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i> Produto Esgotado
                            </div>
                            <?php if (!empty($whatsappLoja)): ?>
                                <a href="https://wa.me/<?= $whatsappLoja ?>?text=Olá!%20Gostaria%20de%20ser%20avisado%20quando%20o%20produto%20<?= urlencode($produto['nome']) ?>%20estiver%20disponível%20novamente."
                                   target="_blank"
                                   class="btn btn-success btn-lg py-3 w-100 fw-bold rounded-0">
                            <?php else: ?>
                                <a href="#"
                                   onclick="event.preventDefault(); alert('WhatsApp da loja está indisponível');"
                                   class="btn btn-success btn-lg py-3 w-100 fw-bold rounded-0">
                            <?php endif; ?>
                             <i class="fab fa-whatsapp me-2"></i> Avise-me quando chegar
                            </a>
                        <?php else: ?>
                            <button class="btn btn-primary btn-lg py-3 w-100 fw-bold rounded-0"
                                    onclick="prepararAddCarrinho(<?= $produto['id'] ?>, '<?= addslashes($produto['nome']) ?>', <?= $precoFinal ?>)">
                                <i class="fas fa-shopping-cart me-2"></i> Adicionar ao Carrinho
                            </button>
                        <?php endif; ?>

                        <?php if (!empty($whatsappLoja)): ?>
                            <a href="https://wa.me/<?= $whatsappLoja ?>?text=Olá!%20Tenho%20interesse%20no%20produto%20<?= urlencode($produto['nome']) ?><?= $isEsgotado ? '%20(Produto%20Esgotado)' : '' ?>"
                               target="_blank"
                               class="btn btn-success btn-lg py-3 w-100 fw-bold rounded-0">
                        <?php else: ?>
                            <a href="#"
                               onclick="event.preventDefault(); alert('WhatsApp da loja está indisponível');"
                               class="btn btn-success btn-lg py-3 w-100 fw-bold rounded-0">
                        <?php endif; ?>
                            <i class="fab fa-whatsapp me-2"></i> Perguntar no WhatsApp
                        </a>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <!-- Product End -->
    
    <script>
    let currentImageIndex = 0;
    const galleryImages = <?= json_encode(array_map(function($img) { return "../adm/uploads/produtos/" . $img; }, $imagens)) ?>;

    function changeImage(element, src, index) {
        currentImageIndex = index;
        document.getElementById('main-product-image').src = src;
        document.getElementById('lightbox-link').href = src;
        document.querySelectorAll('.product-gallery .thumb').forEach(el => el.classList.remove('active'));
        if(element) element.classList.add('active');
        else {
            document.querySelectorAll('.product-gallery .thumb')[index].classList.add('active');
            document.querySelectorAll('.product-gallery .thumb')[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
        }
    }

    function navigateGallery(direction) {
        currentImageIndex += direction;
        if (currentImageIndex < 0) currentImageIndex = galleryImages.length - 1;
        if (currentImageIndex >= galleryImages.length) currentImageIndex = 0;
        
        const newSrc = galleryImages[currentImageIndex];
        changeImage(null, newSrc, currentImageIndex);
    }

    // Initialize GLightbox when library is ready
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof GLightbox !== 'undefined') {
            const lightbox = GLightbox({
                selector: '.glightbox',
                touchNavigation: true,
                loop: true
            });
        }
    });
    </script>

    <script>
        let hasVariacoes = <?= isset($hasVariacoes) && $hasVariacoes ? 'true' : 'false' ?>;
        let variacaoSelecionada = false;

        function changeQuantity(amount) {
            if (hasVariacoes && !variacaoSelecionada) {
                const errorMsg = document.getElementById('variation-error');
                if (errorMsg) errorMsg.classList.remove('d-none');
                return;
            }

            const qtyInput = document.getElementById('item_quantidade');
            if (qtyInput) {
                let currentVal = parseInt(qtyInput.value) || 1;
                let newVal = currentVal + amount;
                if (newVal >= parseInt(qtyInput.min) && newVal <= parseInt(qtyInput.max)) {
                    qtyInput.value = newVal;
                }
            }
        }

        function selecionarVariacao(btn, isDisabled, payloadStr) {
            if (isDisabled) return;
            
            // Remove state "active" de todos
            document.querySelectorAll('.var-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            
            // Decodifica JSON string 
            // Exemplo payloadStr: {"tamanho":"P","cor":"Azul",...}
            const dataDecoded = payloadStr.replace(/&quot;/g, '"');
            let dataObjects = {};
            try {
               dataObjects = JSON.parse(dataDecoded);
            } catch(e) {
               console.error("Failed parsing variants payload", e);
            }
            
            document.getElementById('sel_tamanho').value = dataObjects.tamanho || '';
            document.getElementById('sel_cor').value = dataObjects.cor || '';
            document.getElementById('sel_numero').value = dataObjects.numero || '';
            
            // Atualizar estoque maximo no seletor de quantidade
            if (dataObjects.vender_sem_estoque === 'não') {
                const maxVal = dataObjects.estoque > 0 ? dataObjects.estoque : 1;
                document.getElementById('item_quantidade').max = maxVal;
                if (parseInt(document.getElementById('item_quantidade').value) > maxVal) {
                    document.getElementById('item_quantidade').value = maxVal;
                }
            } else {
                document.getElementById('item_quantidade').max = 99;
            }
            
            // Trocar imagem do front-end principal se houver foto especial pra variante
            if(dataObjects.imagem && dataObjects.imagem.trim() !== '') {
                const imgUrl = '../adm/uploads/produtos/' + dataObjects.imagem;
                document.getElementById('main-product-image').src = imgUrl;
                document.querySelectorAll('.product-gallery .thumb').forEach(el => el.classList.remove('active'));
                
                // Opcional: animar o scroll para a imagem em mobile
                if(window.innerWidth < 992) {
                    document.getElementById('main-product-image').scrollIntoView({behavior: 'smooth', block: 'center'});
                }
            } else {
                // Se a variação não tem foto, restaura a foto principal original do produto
                if (typeof galleryImages !== 'undefined' && galleryImages.length > 0) {
                    document.getElementById('main-product-image').src = galleryImages[0];
                    document.querySelectorAll('.product-gallery .thumb').forEach(el => el.classList.remove('active'));
                    const firstThumb = document.querySelector('.product-gallery .thumb');
                    if (firstThumb) firstThumb.classList.add('active');
                }
            }
            
            // Atualizar Bloco de Preço
            if (dataObjects.preco_final) {
                const priceBlock = document.getElementById('product-price-block');
                const fmt = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });
                const fFinal    = fmt.format(dataObjects.preco_final);
                const fOriginal = fmt.format(dataObjects.preco_original);
                const fAtacado  = dataObjects.preco_atacado > 0 ? fmt.format(dataObjects.preco_atacado) : null;
                let htmlPreco = '';

                if (dataObjects.em_promocao && dataObjects.em_atacado && fAtacado) {
                    const fPromo = fmt.format(dataObjects.preco_promocional || dataObjects.preco_final);
                    const desc = dataObjects.preco_original > 0 
                        ? Math.round(((dataObjects.preco_original - (dataObjects.preco_promocional || dataObjects.preco_final)) / dataObjects.preco_original) * 100)
                        : 0;
                    const badgeDesc = desc > 0 ? `<span class="badge bg-danger text-white fw-bold px-2 py-1" style="font-size:0.75rem;">${desc}% OFF</span>` : '';
                    
                    htmlPreco += `<div class="d-flex flex-column gap-1 mb-2">
                        <span class="text-muted" style="font-size:0.95rem;text-decoration:line-through;">De: ${fOriginal}</span>
                        <div class="d-flex align-items-center gap-2">
                            ${badgeDesc}
                            <span class="text-success fw-bold" style="font-size:1.3rem;">Por: ${fPromo}</span>
                        </div>
                    </div>
                    <div class="p-3 rounded mb-2 border border-warning" style="background: rgba(255,193,7,0.1); max-width: 350px;">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="badge text-white fw-bold px-2 py-1 bg-dark" style="font-size:0.85rem;">🏭 ATACADO</span>
                            <small class="text-muted">Preço especial no atacado</small>
                        </div>
                        <h2 class="fw-bold mb-0" style="color:var(--color-warning);font-size:2.2rem;">${fAtacado}</h2>
                        <div class="mt-2 text-dark small fw-semibold">
                            <i class="fas fa-info-circle text-warning"></i> 
                            <?php if($regra == 'padrao'): ?>
                                Ativado ao atingir <strong><?= $min_qtd ?> peças</strong> no carrinho (soma global).
                            <?php elseif($regra == 'valor_global'): ?>
                                Ativado em pedidos acima de <strong>R$ <?= number_format($min_valor, 2, ',', '.') ?></strong>.
                            <?php elseif($regra == 'referencia'): ?>
                                Leve no mínimo <strong><?= $min_qtd ?> peças</strong> deste modelo.
                            <?php elseif($regra == 'grade'): ?>
                                Vendido em <strong>Pacote Fechado</strong> (Grade obrigatória).
                            <?php endif; ?>
                        </div>
                    </div>`;
                } else if (dataObjects.em_atacado && fAtacado) {
                    // ATACADO
                    htmlPreco += `<div class="d-flex align-items-center gap-2 mb-1">
                        <span class="badge text-white fw-bold px-2 py-1" style="background:var(--color-warning);font-size:0.75rem;">🏭 ATACADO</span>
                        <small class="text-muted" style="text-decoration:line-through;">${fOriginal}</small>
                    </div>`;
                    htmlPreco += `<h2 class="fw-bold mb-0" style="color:var(--color-warning);font-size:2.2rem;">${fAtacado}</h2>`;
                    htmlPreco += `<div class="p-3 rounded mb-2 border border-warning mt-2" style="background: rgba(255,193,7,0.1); max-width: 350px;">
                        <div class="mt-2 text-dark small fw-semibold">
                            <i class="fas fa-info-circle text-warning"></i> 
                            <?php if($regra == 'padrao'): ?>
                                Ativado ao atingir <strong><?= $min_qtd ?> peças</strong> no carrinho (soma global).
                            <?php elseif($regra == 'valor_global'): ?>
                                Ativado em pedidos acima de <strong>R$ <?= number_format($min_valor, 2, ',', '.') ?></strong>.
                            <?php elseif($regra == 'referencia'): ?>
                                Leve no mínimo <strong><?= $min_qtd ?> peças</strong> deste modelo.
                            <?php elseif($regra == 'grade'): ?>
                                Vendido em <strong>Pacote Fechado</strong> (Grade obrigatória).
                            <?php endif; ?>
                        </div>
                    </div>`;
                } else if (dataObjects.em_promocao) {
                    // PROMOÇÃO
                    const desc = dataObjects.preco_original > 0 
                        ? Math.round(((dataObjects.preco_original - dataObjects.preco_final) / dataObjects.preco_original) * 100)
                        : 0;
                    const badgeDesc = desc > 0 ? `<span class="badge bg-danger text-white fw-bold px-2 py-1" style="font-size:0.75rem;">${desc}% OFF</span>` : '';
                    htmlPreco += `<div class="d-flex align-items-center gap-2 mb-1">${badgeDesc}<h4 class="text-muted mb-0"><del>${fOriginal}</del></h4></div>`;
                    htmlPreco += `<h2 class="text-success fw-bold mb-0" style="font-size:2.2rem;">${fFinal}</h2>`;
                } else {
                    // VAREJO NORMAL
                    htmlPreco += `<h2 class="fw-bold mb-0" style="color:var(--primary);font-size:2.2rem;">${fFinal}</h2>`;
                }

                priceBlock.innerHTML = htmlPreco;
            }
            
            variacaoSelecionada = true;
            document.getElementById('variation-error').classList.add('d-none');
        }

        function prepararAddCarrinho(id, nome, preco) {
            if (hasVariacoes && !variacaoSelecionada) {
                document.getElementById('variation-error').classList.remove('d-none');
                return;
            }
            
            const tam = document.getElementById('sel_tamanho')?.value || null;
            const cor = document.getElementById('sel_cor')?.value || null;
            const num = document.getElementById('sel_numero')?.value || null;
            const qtd = document.getElementById('item_quantidade') ? parseInt(document.getElementById('item_quantidade').value) : 1;
            
            // Chama a função global addCarrinho com os novos parâmetros
            if (typeof addCarrinho === 'function') {
                addCarrinho(id, nome, preco, tam, cor, num, qtd);
            } else {
                console.error('Função addCarrinho não encontrada.');
            }
        }
    </script>
</body>
    <?php
    } else {
        echo '
        <div class="container-fluid py-5">
            <div class="container py-5 text-center">
                <i class="fas fa-box-open fa-4x text-muted mb-4"></i>
                <h2 class="display-6 text-dark mb-4">Produto não encontrado</h2>
                <p class="text-muted mb-4">Desculpe, o produto que você tentou acessar não está disponível ou foi removido.</p>
                <a href="index.php" class="btn btn-primary py-3 px-5">Voltar para a Loja</a>
            </div>
        </div>';
    }
    ?>

    <!-- Related Products Start -->
    <div class="container-fluid py-5">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-4 wow slideInUp" data-wow-delay="0.1s">
                    <div class="section-title bg-light rounded h-100 p-5">
                        <h5 class="position-relative d-inline-block text-primary text-uppercase">Veja Também</h5>
                        <h1 class="display-6 mb-4">Produtos da mesma categoria</h1>
                        <a href="departamento.php?categoria_id=<?= isset($produto['categoria_id']) ? $produto['categoria_id'] : '' ?>" class="btn btn-primary py-3 px-5">Ver Todos</a>
                    </div>
                </div>
                
                <?php
                if(isset($produto['categoria_id'])) {
                    $cat_id = intval($produto['categoria_id']);
                    $prod_id = intval($produto['id']);
                    
                    $sql_related = "SELECT p.id, p.nome, p.preco, p.preco_promocional, p.preco_atacado, p.imagem_principal, p.estoque, p.vender_sem_estoque,
                                   c.nome AS categoria_nome, p.status, p.status_promocao 
                            FROM produtos p
                            LEFT JOIN categorias c ON p.categoria_id = c.id
                            WHERE p.categoria_id = $cat_id AND p.id != $prod_id AND p.status = 'Ativo'
                            ORDER BY p.id DESC LIMIT 8";
                    
                    $result_related = $conn->query($sql_related);

                    if ($result_related && $result_related->num_rows > 0) {
                        $index = 0;
                        while ($row = $result_related->fetch_assoc()) {
                            echo renderProductCard($row, false, $index);
                            $index++;
                        }
                    }
                }
                ?>
            </div>
        </div>
    </div>
    <!-- Related Products End -->
    
<?php include 'footer.php'; ?>
