<?php
require_once __DIR__ . '/theme-init.php';

// Proteção CSRF - gera token
session_start();
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrf_token = $_SESSION['csrf_token'];

// Buscar dados da loja
include_once '../adm/config/db.php';
$resLoja = $conn->query("SELECT nome, logo FROM dados_loja LIMIT 1");
$dadosLoja = $resLoja ? $resLoja->fetch_assoc() : [];
$nome_loja = $dadosLoja['nome'] ?? 'Nossa Loja';

$pageTitle = "Deixe seu Depoimento - " . $nome_loja;
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title><?= htmlspecialchars($pageTitle) ?></title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="description" content="Compartilhe sua experiência conosco. Deixe seu depoimento sobre nossos produtos.">
    <meta name="robots" content="noindex, nofollow">

    <link href="img/favicon.ico" rel="icon">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="theme.php" rel="stylesheet">
    <style>
        .dep-form-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.10);
            padding: 2.5rem 2rem;
        }
        .dep-hero {
            background: linear-gradient(135deg, var(--bs-primary, #06A3DA) 0%, #091e3e 100%);
            padding: 70px 0 50px;
            color: #fff;
            margin-bottom: 0;
        }
        .dep-hero h1 {
            font-size: 2.5rem;
            font-weight: 700;
        }
        .dep-hero p {
            font-size: 1.1rem;
            opacity: 0.85;
        }
        .star-rating {
            display: flex;
            gap: 6px;
            font-size: 2rem;
            cursor: pointer;
            user-select: none;
        }
        .star-rating .star {
            color: #ddd;
            transition: color 0.15s;
        }
        .star-rating .star.active,
        .star-rating .star.hover {
            color: #f5c518;
        }
        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
        }
        .upload-area:hover {
            border-color: var(--bs-primary, #06A3DA);
            background: #f0faff;
        }
        .upload-area i {
            font-size: 2.5rem;
            color: #aaa;
        }
        .char-count {
            font-size: 0.78rem;
            color: #888;
            text-align: right;
        }
        .form-control:focus {
            box-shadow: 0 0 0 0.2rem rgba(6, 163, 218, 0.2);
            border-color: var(--bs-primary, #06A3DA);
        }
        .btn-enviar {
            font-size: 1rem;
            padding: 0.75rem 2.5rem;
            border-radius: 8px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .alert-success-custom {
            background: linear-gradient(135deg, #d4edda, #a8e6b8);
            border: none;
            border-left: 5px solid #28a745;
            border-radius: 10px;
            padding: 1.5rem;
        }
        .img-preview-box {
            position: relative;
            display: inline-block;
        }
        .img-preview-box .btn-remove {
            position: absolute;
            top: -8px;
            right: -8px;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            padding: 0;
            font-size: 0.75rem;
            line-height: 28px;
        }
        .section-wave {
            display: block;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }
    </style>
</head>
<body>
<?php include 'carrinho_ui.php'; ?>
<?php include 'header.php'; ?>

<!-- Hero -->
<div class="dep-hero text-center">
    <div class="container">
        <h1 class="animated fadeInDown"><i class="bi bi-chat-quote-fill me-2"></i>Deixe seu Depoimento</h1>
        <p class="animated fadeInUp mt-2">Sua opinião é muito importante para nós!<br>Compartilhe sua experiência com nossos produtos.</p>
        <nav aria-label="breadcrumb" class="mt-3 d-flex justify-content-center">
            <ol class="breadcrumb" style="background:transparent;">
                <li class="breadcrumb-item"><a href="index.php" class="text-white opacity-75">Home</a></li>
                <li class="breadcrumb-item text-white active" aria-current="page">Depoimento</li>
            </ol>
        </nav>
    </div>
</div>

<!-- Form Section -->
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-7 col-md-10">

            <?php if (isset($_GET['sucesso'])): ?>
                <div class="alert alert-success-custom d-flex align-items-start mb-4">
                    <i class="bi bi-check-circle-fill text-success fs-3 me-3 mt-1"></i>
                    <div>
                        <h5 class="mb-1">Depoimento enviado com sucesso! 🎉</h5>
                        <p class="mb-0 text-muted">Obrigado por compartilhar sua experiência. Seu depoimento será revisado e publicado em breve.</p>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (isset($_GET['erro'])): ?>
                <div class="alert alert-danger d-flex align-items-start mb-4 rounded-3 border-0 border-start border-danger border-4">
                    <i class="bi bi-exclamation-triangle-fill fs-4 me-3 mt-1 text-danger"></i>
                    <div>
                        <h6 class="mb-1">Ocorreu um problema:</h6>
                        <p class="mb-0"><?= htmlspecialchars(urldecode($_GET['erro'])) ?></p>
                    </div>
                </div>
            <?php endif; ?>

            <div class="dep-form-card wow fadeInUp" data-wow-delay="0.1s">
                <div class="text-center mb-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 rounded-circle mb-3" style="width:64px;height:64px;">
                        <i class="bi bi-stars text-primary fs-2"></i>
                    </div>
                    <h3 class="fw-bold mb-1">Conte sua experiência</h3>
                    <p class="text-muted mb-0">Preencha os campos abaixo para enviar seu depoimento.</p>
                </div>

                <form action="exe_depoimento.php" method="POST" enctype="multipart/form-data" id="formDepoimento" novalidate>
                    <!-- Token CSRF -->
                    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrf_token) ?>">

                    <!-- Nome -->
                    <div class="mb-3">
                        <label for="dep_nome" class="form-label fw-semibold">Seu Nome <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0"><i class="bi bi-person text-primary"></i></span>
                            <input type="text" class="form-control border-start-0 ps-2" id="dep_nome" name="nome" placeholder="Digite seu nome completo" maxlength="100" required>
                        </div>
                        <div class="invalid-feedback">Por favor, informe seu nome.</div>
                    </div>

                    <!-- Avaliação em Estrelas -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Avaliação <span class="text-danger">*</span></label>
                        <div class="star-rating" id="starRating">
                            <span class="star" data-val="1">&#9733;</span>
                            <span class="star" data-val="2">&#9733;</span>
                            <span class="star" data-val="3">&#9733;</span>
                            <span class="star" data-val="4">&#9733;</span>
                            <span class="star" data-val="5">&#9733;</span>
                        </div>
                        <input type="hidden" name="avaliacao" id="avaliacaoInput" value="">
                        <div class="text-muted small mt-1" id="starLabel">Clique para avaliar</div>
                        <div class="invalid-feedback d-block" id="starError" style="display:none!important;"></div>
                    </div>

                    <!-- Depoimento -->
                    <div class="mb-3">
                        <label for="dep_texto" class="form-label fw-semibold">Seu Depoimento <span class="text-danger">*</span></label>
                        <div class="input-group align-items-start">
                            <span class="input-group-text bg-light border-end-0 pt-3"><i class="bi bi-chat-text text-primary"></i></span>
                            <textarea class="form-control border-start-0 ps-2" id="dep_texto" name="texto" rows="5" placeholder="Compartilhe sua experiência com nossos produtos..." maxlength="1000" required></textarea>
                        </div>
                        <div class="char-count mt-1"><span id="charCount">0</span>/1000 caracteres</div>
                        <div class="invalid-feedback">Por favor, escreva seu depoimento.</div>
                    </div>

                    <!-- Foto do Produto (Opcional) -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Foto do Produto <span class="text-muted fw-normal">(Opcional)</span></label>
                        <div class="upload-area" id="uploadArea" onclick="document.getElementById('dep_imagem').click()">
                            <i class="bi bi-image-fill d-block mb-2 text-primary"></i>
                            <p class="mb-1 fw-semibold">Clique para adicionar uma foto</p>
                            <p class="text-muted small mb-0">JPG, PNG ou WEBP — máx. 2MB</p>
                        </div>
                        <input type="file" id="dep_imagem" name="imagem" accept="image/jpeg,image/png,image/webp,image/gif" class="d-none">
                        <div id="previewArea" class="mt-3 text-center d-none">
                            <div class="img-preview-box">
                                <img id="imgPreview" src="" class="img-thumbnail rounded-3" style="max-height:200px; object-fit:cover;" alt="Preview">
                                <button type="button" class="btn btn-danger btn-remove" onclick="removerImagem()" title="Remover foto">
                                    <i class="bi bi-x"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Aviso de privacidade -->
                    <div class="alert alert-light border rounded-3 small py-2 mb-4">
                        <i class="bi bi-shield-check text-primary me-1"></i>
                        Seus dados serão usados apenas para publicação do depoimento. Não compartilhamos suas informações com terceiros.
                    </div>

                    <!-- Botão -->
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-enviar" id="btnEnviar">
                            <i class="bi bi-send-fill me-2"></i>Enviar Depoimento
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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

<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="js/main.js"></script>

<script>


    // ===== AVALIAÇÃO POR ESTRELAS =====
    const stars = document.querySelectorAll('.star');
    const avaliacaoInput = document.getElementById('avaliacaoInput');
    const starLabel = document.getElementById('starLabel');
    const labels = ['','Péssimo','Ruim','Regular','Bom','Excelente!'];
    let selectedVal = 0;

    stars.forEach(star => {
        star.addEventListener('mouseenter', () => {
            const val = parseInt(star.dataset.val);
            stars.forEach(s => {
                s.classList.toggle('hover', parseInt(s.dataset.val) <= val);
                s.classList.remove('active');
            });
        });
        star.addEventListener('mouseleave', () => {
            stars.forEach(s => {
                s.classList.remove('hover');
                s.classList.toggle('active', parseInt(s.dataset.val) <= selectedVal);
            });
        });
        star.addEventListener('click', () => {
            selectedVal = parseInt(star.dataset.val);
            avaliacaoInput.value = selectedVal;
            stars.forEach(s => s.classList.toggle('active', parseInt(s.dataset.val) <= selectedVal));
            starLabel.textContent = labels[selectedVal];
            starLabel.className = 'text-primary fw-semibold small mt-1';
        });
    });

    // ===== CONTAGEM DE CARACTERES =====
    const textarea = document.getElementById('dep_texto');
    const charCount = document.getElementById('charCount');
    textarea.addEventListener('input', () => {
        charCount.textContent = textarea.value.length;
    });

    // ===== PREVIEW DE IMAGEM =====
    document.getElementById('dep_imagem').addEventListener('change', function() {
        const file = this.files[0];
        if (!file) return;

        if (file.size > 2 * 1024 * 1024) {
            alert('⚠️ A imagem deve ter no máximo 2MB.');
            this.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('imgPreview').src = e.target.result;
            document.getElementById('uploadArea').classList.add('d-none');
            document.getElementById('previewArea').classList.remove('d-none');
        };
        reader.readAsDataURL(file);
    });

    function removerImagem() {
        document.getElementById('dep_imagem').value = '';
        document.getElementById('imgPreview').src = '';
        document.getElementById('uploadArea').classList.remove('d-none');
        document.getElementById('previewArea').classList.add('d-none');
    }

    // ===== VALIDAÇÃO NO ENVIO =====
    document.getElementById('formDepoimento').addEventListener('submit', function(e) {
        let valid = true;

        if (!avaliacaoInput.value) {
            document.getElementById('starError').textContent = 'Por favor, selecione uma avaliação.';
            document.getElementById('starError').style.display = 'block';
            valid = false;
        } else {
            document.getElementById('starError').style.display = 'none';
        }

        if (!this.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
            valid = false;
        }

        this.classList.add('was-validated');

        if (!valid) {
            e.preventDefault();
            return;
        }

        // Desabilita o botão para evitar duplo envio
        document.getElementById('btnEnviar').disabled = true;
        document.getElementById('btnEnviar').innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';
    });
</script>
</body>
</html>
