<!DOCTYPE html>
<?php
    include('menus.php');
    session_start();
    include('conexion.php'); // Conectar a la base de datos
?>
<html class="no-js" lang="zxx">
    <?php
       head_1();
    ?>
    <body>
       <?php
            menu_registro();
            vericar_sesion();
        ?>
        <div class="breadcrumbs overlay">
            <div class="container">
                <div class="bread-inner">
                    <div class="row">
                        <div class="col-12">
                            <h2>Preguntas Frecuentes</h2>
                            <ul class="bread-list">
                                <li><a href="index.php">Inicio</a></li>
                                <li><i class="icofont-simple-right"></i></li>
                                <li class="active">Preguntas</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section class="contact-us section">
            <div class="container">
                <div class="inner">
                    <div class="row"> 
                        <div class="col-lg-6">
                            <div class="contact-us-left">
                                <img src="img/lupus-info.jpg" alt="Información sobre Lupus" class="img-fluid" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="contact-us-form">
                                <h2>Envíanos tu Pregunta</h2>
                                <p>Si tienes dudas sobre el lupus, su tratamiento o cómo manejarlo, envíanos tu pregunta y nuestros expertos te responderán.</p>
                                <!-- Formulario para enviar preguntas -->
                                <form class="form" action="enviar_pregunta.php" method="POST">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="nombre" placeholder="Nombre Completo" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="email" name="email" placeholder="Correo Electrónico" required>
                                            </div>
                                        </div>
                                        <!-- Select dinámico para categorías -->
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <select name="categoria" id="categoria">
                                                    <option value="">Seleccione una categoría</option>
                                                    <?php
                                                    $sql = "SELECT DISTINCT categoria FROM preguntas WHERE categoria IS NOT NULL ORDER BY categoria ASC";
                                                    $result = $conn->query($sql);
                                                    if ($result->num_rows > 0) {
                                                        while ($row = $result->fetch_assoc()) {
                                                            echo '<option value="' . htmlspecialchars($row['categoria']) . '">' . htmlspecialchars($row['categoria']) . '</option>';
                                                        }
                                                    } else {
                                                        echo '<option value="" disabled>No hay categorías disponibles</option>';
                                                    }
                                                    ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <textarea name="pregunta" placeholder="Escribe tu pregunta" rows="4" required></textarea>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group login-btn text-center">
                                                <button class="btn" type="submit">Enviar Pregunta</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!-- Fin del formulario -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <?php
            footer_1();
        ?>
        <!-- JavaScript para validar el formulario -->
        <script>
            document.querySelector("form").addEventListener("submit", function(event) {
                let categoria = document.getElementById("categoria").value;
                if (categoria === "") {
                    event.preventDefault(); // Evita el envío del formulario
                    alert("⚠ Por favor, seleccione una categoría antes de enviar la pregunta.");
                }
            });
        </script>
    </body>
</html>