<?php
include "db.php";
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Sistema de Gestão</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="icon" type="image/svg+xml" href="img/Logo.png">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<?php
if (!isset($_GET['id']) || !is_numeric($_GET['id'])) die("Pesquisa inválida!");
$pesquisa_id = (int) $_GET['id'];

// Buscar pesquisa
$stmt = $pdo->prepare("SELECT * FROM pesquisas WHERE id = :id");
$stmt->execute(['id' => $pesquisa_id]);
$pesquisa = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$pesquisa) die("Pesquisa não encontrada!");

// Buscar campos da pesquisa
$stmt = $pdo->prepare("SELECT * FROM pesquisa_campos WHERE pesquisa_id = :id ORDER BY id ASC");
$stmt->execute(['id' => $pesquisa_id]);
$campos = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Processar envio de respostas
if (isset($_POST['responder'])) {
    $stmt = $pdo->prepare("INSERT INTO pesquisa_respostas (pesquisa_id, created_at) VALUES (:pid, NOW())");
    $stmt->execute(['pid' => $pesquisa_id]);
    $respostaId = $pdo->lastInsertId();

    foreach ($campos as $c) {
        $valor = $_POST['campo_'.$c['id']] ?? '';
        if (is_array($valor)) $valor = implode(", ", $valor);

        $stmt = $pdo->prepare("INSERT INTO pesquisa_respostas_campos (resposta_id, campo_id, valor) VALUES (:rid, :cid, :valor)");
        $stmt->execute(['rid'=>$respostaId, 'cid'=>$c['id'], 'valor'=>$valor]);
    }

    echo "<script>alert('Resposta enviada com sucesso!'); window.location='pesquisa_resultados.php?id=$pesquisa_id';</script>";
    exit;
}
?>

<!-- Fundo animado -->
<div class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gray-50">
    <div class="absolute w-80 h-80 bg-pink-400 rounded-full blur-3xl opacity-30 animate-blob top-10 left-20"></div>
    <div class="absolute w-96 h-96 bg-blue-400 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000 top-40 right-20"></div>
    <div class="absolute w-72 h-72 bg-green-400 rounded-full blur-3xl opacity-30 animate-blob animation-delay-4000 bottom-10 left-40"></div>

    <!-- Card da pesquisa -->
    <div class="relative bg-white p-8 rounded-3xl shadow-2xl w-full max-w-2xl z-10">
        <h1 class="text-3xl font-bold mb-6 text-gray-800"><?= htmlspecialchars($pesquisa['nome']) ?></h1>

        <form method="post" class="space-y-5">
            <?php foreach ($campos as $c): ?>
                <div class="flex flex-col">
                    <label class="mb-2 font-semibold text-gray-700"><?= htmlspecialchars($c['label']) ?></label>

                    <?php if($c['tipo'] == 'text'): ?>
                        <input type="text" name="campo_<?= $c['id'] ?>" required
                            class="p-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-300 transform hover:scale-15 hover:shadow-lg">
                    <?php elseif($c['tipo'] == 'number'): ?>
                        <input type="number" name="campo_<?= $c['id'] ?>" required
                            class="p-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-300 transform hover:scale-15 hover:shadow-lg">
                    <?php elseif($c['tipo'] == 'textarea'): ?>
                        <textarea name="campo_<?= $c['id'] ?>" rows="4" required
                                class="p-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-300 transform hover:scale-15 hover:shadow-lg"></textarea>
                    <?php elseif($c['tipo'] == 'select'): ?>
                        <select name="campo_<?= $c['id'] ?>" required
                                class="p-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-300 transform hover:scale-15 hover:shadow-lg">
                            <?php foreach(explode(",", $c['opcoes']) as $op): ?>
                                <option value="<?= htmlspecialchars(trim($op)) ?>"><?= htmlspecialchars(trim($op)) ?></option>
                            <?php endforeach; ?>
                        </select>
                    <?php elseif($c['tipo'] == 'radio' || $c['tipo'] == 'checkbox'): ?>
                        <div class="flex gap-4 flex-wrap">
                            <?php foreach(explode(",", $c['opcoes']) as $op): ?>
                                <label class="flex items-center gap-2 cursor-pointer transition hover:scale-15">
                                    <input type="<?= $c['tipo'] ?>" name="campo_<?= $c['id'] ?><?= $c['tipo']=='checkbox'?'[]':'' ?>" value="<?= htmlspecialchars(trim($op)) ?>" class="accent-blue-500 w-5 h-5">
                                    <span class="select-none"><?= htmlspecialchars(trim($op)) ?></span>
                                </label>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>

            <div class="flex justify-end mt-6">
                <button type="submit" name="responder"
                        class="px-6 py-3 bg-blue-600 text-white rounded-2xl hover:bg-blue-700 hover:shadow-xl hover:scale-105 transition-all duration-300 relative overflow-hidden">
                    <span class="absolute inset-0 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 opacity-30 blur-xl animate-gradient-slow"></span>
                    <span class="relative">Enviar Resposta</span>
                </button>
            </div>
        </form>
    </div>
</div>

<style>
@keyframes blob {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-50px) scale(1.1); }
  66% { transform: translate(-20px,20px) scale(0.9); }
}
.animate-blob { animation: blob 8s infinite ease-in-out; }

@keyframes gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.animate-gradient-slow {
  background-size: 200% 200%;
  animation: gradient 8s ease infinite;
}

.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
</style>
