<?php

$pageTitle = "CATÁLOGO 44 - Sua Vitrine online";

include 'header.php';

?>







<!-- ══ SPINNER / LOADING ═══════════════════════════════════════════════════════ -->

<div id="spinner"

    class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">

    <div class="spinner-grow text-primary m-1" role="status">

        <span class="sr-only">Loading...</span>

    </div>

    <div class="spinner-grow text-dark m-1" role="status">

        <span class="sr-only">Loading...</span>

    </div>

    <div class="spinner-grow text-secondary m-1" role="status">

        <span class="sr-only">Loading...</span>

    </div>

</div>

<!-- ══ FIM SPINNER / LOADING ═══════════════════════════════════════════════════════ -->

<!-- Spinner Fallback: garante remoção mesmo se jQuery falhar -->

<script>

    (function () {

        function hideSpinner() {

            var el = document.getElementById('spinner');

            if (el) { el.classList.remove('show'); }

        }

        // Tenta esconder no load da janela (caminho principal)

        window.addEventListener('load', hideSpinner);

        // Fallback agressivo: remove após 3 segundos no máximo

        setTimeout(hideSpinner, 3000);

    })();

</script>







<!-- ========================================== -->

<!-- SEÇÕES DINÂMICAS DA HOME -->

<!-- ========================================== -->

<?php

// Buscar ordem e status das seções no banco ou usar fallback
$ordem_secoes_str = 'banners,contatos,destaques,typewriter,promocoes,atacado,produtos_por_categoria,depoimentos,grade_categorias,cta,quem_somos,oferta,newsletter';

$status_secoes = [];



$sql_config = "SELECT chave, valor FROM configuracoes WHERE chave = 'ordem_secoes' OR chave LIKE 'status_secao_%'";

$res_config = $conn->query($sql_config);

if ($res_config && $res_config->num_rows > 0) {

    while ($row = $res_config->fetch_assoc()) {

        if ($row['chave'] === 'ordem_secoes') {

            if (!empty($row['valor'])) $ordem_secoes_str = $row['valor'];

        } else {

            $status_secoes[$row['chave']] = $row['valor'];

        }

    }

}



// Auto-migração: Se ainda tiver 'oferta' na ordem vinda do banco, troca para 'cta'
if (strpos($ordem_secoes_str, 'oferta') !== false) {
    $ordem_secoes_str = str_replace('oferta', 'cta', $ordem_secoes_str);
}

// Auto-injetar 'atacado' se não estiver na lista
if (strpos($ordem_secoes_str, 'atacado') === false) {
    if (strpos($ordem_secoes_str, 'promocoes') !== false) {
        $ordem_secoes_str = str_replace('promocoes', 'promocoes,atacado', $ordem_secoes_str);
    } else {
        $ordem_secoes_str = 'atacado,' . $ordem_secoes_str;
    }
}

$secoes = explode(',', $ordem_secoes_str);
$secoes = array_unique(array_map('trim', $secoes));



// Carregar componentes comuns utilizados por várias seções

require_once __DIR__ . '/components/product_card.php';



foreach ($secoes as $secao) {

    $secao = trim($secao);

    

    // Verificar se a seção está ativa (padrão é ativo se não houver registro)

    $status = $status_secoes['status_secao_' . $secao] ?? 'ativo';

    if ($status === 'inativo') continue;



    $arquivo = __DIR__ . "/components/secoes/{$secao}.php";

    if (file_exists($arquivo)) {

        // Lógica para alternar entre "Por Departamento" ou "Todos os Produtos"
        if ($secao === 'produtos_por_categoria') {
            $tipoExibicao = $dbThemeConfig['tipo_exibicao_produtos'] ?? 'por_categoria';
            if ($tipoExibicao === 'todos') {
                $secao = 'todos_produtos';
                $arquivo = __DIR__ . "/components/secoes/{$secao}.php";
            }
        }
        if (file_exists($arquivo)) {
            include $arquivo;
        }

    }

}

?>

<!-- ========================================== -->



























<!-- Alertas de Depoimento -->

<div class="container mt-4">

    <?php if (isset($_GET['sucesso'])): ?>

        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 border-start border-success border-4" role="alert">

            <i class="bi bi-check-circle-fill me-2"></i>

            <strong>Sucesso!</strong> Seu depoimento foi enviado e está aguardando aprovação.

            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

        </div>

    <?php endif; ?>

    <?php if (isset($_GET['erro'])): ?>

        <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0 border-start border-danger border-4" role="alert">

            <i class="bi bi-exclamation-triangle-fill me-2"></i>

            <strong>Erro!</strong> <?= htmlspecialchars($_GET['erro']) ?>

            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

        </div>

    <?php endif; ?>

</div>













































<script>

    function carregarMais(btn) {

        const catId = btn.getAttribute('data-cat-id') || 0;

        const isPromo = btn.getAttribute('data-promo') || 0;

        const isAtacado = btn.getAttribute('data-atacado') || 0;

        const offset = parseInt(btn.getAttribute('data-offset'));

        const limit = 18; // Definindo um limite padrão de 18 para promoções ou 9 para categorias

        const actualLimit = (isPromo || isAtacado) ? 18 : 9;

        const containerId = btn.getAttribute('data-container') || ('cat-products-' + catId);

        const container = document.getElementById(containerId);



        // Feedback visual (opcional)

        btn.disabled = true;

        btn.innerHTML = 'Carregando... <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';



        let url = 'get_produtos_ajax.php?offset=' + offset + '&limit=' + actualLimit;

        if (isPromo) {

            url += '&promo=1';

        } else if (isAtacado) {

            url += '&atacado=1';

        } else {

            url += '&categoria_id=' + catId;

        }



        fetch(url)

            .then(response => response.text())

            .then(html => {

                if (html.trim() !== "") {

                    // Inserir os novos itens

                    container.insertAdjacentHTML('beforeend', html);



                    // Atualizar o offset para a próxima carga

                    const novoOffset = offset + actualLimit;

                    btn.setAttribute('data-offset', novoOffset);



                    // Sincronizar WOW.js para os novos elementos apenas

                    if (window.wow) {

                        window.wow.sync();

                    }



                    // Restaurar botão

                    btn.disabled = false;

                    let btnText = 'Ver Mais Modelos';
                    if (isPromo) btnText = 'Ver Mais Promoções';
                    if (isAtacado) btnText = 'Ver Mais Atacado';
                    btn.innerHTML = btnText + ' <i class="fas fa-plus ms-2"></i>';



                    // Verificação simples: se o número de cards carregados for menor que o limite, esconde o botão

                    const tempDiv = document.createElement('div');

                    tempDiv.innerHTML = html;

                    if (tempDiv.querySelectorAll('.col-lg-4').length < actualLimit) {

                        btn.parentElement.style.display = 'none';

                    }

                } else {

                    // Nenhum produto retornado, esconde o botão

                    btn.parentElement.style.display = 'none';

                }

            })

            .catch(err => {

                console.error('Erro ao carregar produtos:', err);

                btn.disabled = false;

                btn.innerHTML = 'Erro ao carregar. Tente novamente.';

            });

    }

</script>



<!-- MODAL DEPOIMENTO -->

<div class="modal fade" id="modalDepoimento" tabindex="-1" aria-labelledby="modalDepoimentoLabel" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content border-0 shadow bg-light rounded overflow-hidden">

            <div class="modal-body p-5">

                <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>

                

                <div class="section-title mb-4">

                    <h5 class="position-relative d-inline-block text-primary text-uppercase">Depoimento</h5>

                    <h1 class="display-6 mb-4">Sua Experiência</h1>

                </div>



                <form action="exe_depoimento.php" method="POST" enctype="multipart/form-data" id="formDepoimento">

                    <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">

                    <input type="hidden" name="redirect_to" value="index.php">

                    

                    <div class="row g-3">

                        <div class="col-12">

                            <label class="form-label fw-bold">Seu Nome</label>

                            <input type="text" name="nome" class="form-control border-0 bg-white px-4" value="<?= htmlspecialchars($userNome) ?>" readonly required style="height: 55px;">

                            <small class="text-muted">Aparecerá como identificação no seu depoimento.</small>

                        </div>



                        <div class="col-12">

                            <label class="form-label fw-bold d-block">Sua Avaliação</label>

                            <div class="star-rating fs-3 text-muted" id="starRating">

                                <i class="bi bi-star-fill star" data-val="1" style="cursor:pointer;"></i>

                                <i class="bi bi-star-fill star" data-val="2" style="cursor:pointer;"></i>

                                <i class="bi bi-star-fill star" data-val="3" style="cursor:pointer;"></i>

                                <i class="bi bi-star-fill star" data-val="4" style="cursor:pointer;"></i>

                                <i class="bi bi-star-fill star" data-val="5" style="cursor:pointer;"></i>

                            </div>

                            <input type="hidden" name="avaliacao" id="avaliacaoInput" value="5">

                            <small class="text-muted" id="starLabel">Excelente!</small>

                        </div>



                        <div class="col-12">

                            <label class="form-label fw-bold">Seu Comentário</label>

                            <textarea name="texto" class="form-control border-0 bg-white p-4" rows="4" placeholder="Conte um pouco sobre sua experiência..." required></textarea>

                        </div>



                        <div class="col-12">

                            <label class="form-label fw-bold">Sua Foto <small class="text-muted fw-normal">(Opcional)</small></label>

                            

                            <div class="upload-container position-relative" style="width: 140px; height: 140px;">

                                <input type="file" name="imagem" class="d-none" id="dep_imagem" accept="image/*">

                                <label for="dep_imagem" class="upload-zone d-flex flex-column align-items-center justify-content-center bg-white border-dashed rounded text-center cursor-pointer w-100 h-100" style="border: 2px dashed #dee2e6; transition: all 0.3s;">

                                    <div id="uploadPlaceholder">

                                        <i class="bi bi-camera fs-1 text-muted"></i>

                                        <p class="small text-muted mb-0">Adicionar<br>Foto</p>

                                    </div>

                                    <img id="imgPreview" src="" class="img-fluid rounded d-none w-100 h-100" style="object-fit: cover;">

                                </label>

                                <button type="button" id="btnRemovePhoto" class="btn btn-danger btn-sm rounded-circle position-absolute d-none" style="top: -10px; right: -10px; width: 28px; height: 28px; padding: 0; z-index: 5;">

                                    <i class="bi bi-x"></i>

                                </button>

                            </div>

                        </div>



                        <div class="col-12 mt-4">

                            <button type="submit" class="btn btn-primary w-100 py-3 shadow-sm" id="btnEnviarDepoimento">

                                <i class="bi bi-send-fill me-2"></i>ENVIAR DEPOIMENTO AGORA

                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>



<style>

    .star-rating .star.active { color: #ffc107 !important; }

    .star-rating .star.hover { color: #ffdb70 !important; }

    .upload-zone:hover { border-color: var(--primary) !important; background-color: #f8f9fa !important; }

    .cursor-pointer { cursor: pointer; }

    .border-dashed { border-style: dashed !important; }

</style>



<script>

document.addEventListener("DOMContentLoaded", function() {

    const modalEl = document.getElementById('modalDepoimento');

    const form = document.getElementById('formDepoimento');

    const stars = document.querySelectorAll('#starRating .star');

    const avaliacaoInput = document.getElementById('avaliacaoInput');

    const starLabel = document.getElementById('starLabel');

    const inputImg = document.getElementById('dep_imagem');

    const imgPreview = document.getElementById('imgPreview');

    const uploadPlaceholder = document.getElementById('uploadPlaceholder');

    const btnRemovePhoto = document.getElementById('btnRemovePhoto');

    const labels = ['', 'Péssimo', 'Ruim', 'Regular', 'Bom', 'Excelente!'];



    // Estrelas interativas

    function updateStars(val, isHover = false) {

        stars.forEach(s => {

            const sVal = parseInt(s.dataset.val);

            if (isHover) {

                s.classList.toggle('hover', sVal <= val);

            } else {

                s.classList.toggle('active', sVal <= val);

            }

        });

    }



    updateStars(5);



    stars.forEach(star => {

        star.addEventListener('mouseenter', () => updateStars(parseInt(star.dataset.val), true));

        star.addEventListener('mouseleave', () => stars.forEach(s => s.classList.remove('hover')));

        star.addEventListener('click', () => {

            const val = parseInt(star.dataset.val);

            avaliacaoInput.value = val;

            starLabel.textContent = labels[val];

            updateStars(val);

        });

    });



    // Preview e Remoção de imagem

    inputImg.addEventListener('change', function() {

        if (this.files && this.files[0]) {

            const reader = new FileReader();

            reader.onload = function(e) {

                imgPreview.src = e.target.result;

                imgPreview.classList.remove('d-none');

                uploadPlaceholder.classList.add('d-none');

                btnRemovePhoto.classList.remove('d-none');

            }

            reader.readAsDataURL(this.files[0]);

        }

    });



    btnRemovePhoto.addEventListener('click', function(e) {

        e.preventDefault();

        inputImg.value = '';

        imgPreview.src = '';

        imgPreview.classList.add('d-none');

        uploadPlaceholder.classList.remove('d-none');

        btnRemovePhoto.classList.add('d-none');

    });



    // Reset ao fechar modal

    modalEl.addEventListener('hidden.bs.modal', function() {

        form.reset();

        // Reset manual dos elementos visuais

        updateStars(5);

        starLabel.textContent = 'Excelente!';

        avaliacaoInput.value = '5';

        

        // Reset da foto

        imgPreview.src = '';

        imgPreview.classList.add('d-none');

        uploadPlaceholder.classList.remove('d-none');

        btnRemovePhoto.classList.add('d-none');

        

        // Ativar botão novamente se foi desativado

        const btnSubmit = document.getElementById('btnEnviarDepoimento');

        btnSubmit.disabled = false;

        btnSubmit.innerHTML = '<i class="bi bi-send-fill me-2"></i>ENVIAR DEPOIMENTO AGORA';

    });



    // Envio (Evitar múltiplo envio)

    form.addEventListener('submit', function() {

        const btn = document.getElementById('btnEnviarDepoimento');

        btn.disabled = true;

        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';

    });

});

</script>



<?php include 'footer.php'; ?>