<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wiki Fantasy : Quiz</title>
    <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
    <link rel="stylesheet" href="../styles/styleQuiz.css">
    <script defer src="../script/theme-toggle.js"></script>
    <script>
        // Timer pour 5 minutes 
        var timeLeft = 300;
        function countdown() {
            var timerDisplay = document.getElementById("timer");
            if (timeLeft <= 0) {
                document.getElementById("quizForm").submit(); 
            } else {
                timerDisplay.innerHTML = timeLeft + " seconds left";
                timeLeft -= 1;
                setTimeout(countdown, 1000);
            }
        }
        window.onload = countdown;
    </script>
</head>
<body>
    <div class="header">
        <div class="nav">
            <a href="favorite.html"><img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
            <img id="theme-icon" src="../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
            <img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
        </div>
        <div class="logo">
            <img src="../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false">
        </div>
        <div class="user">
            <img src="../images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
        </div>
    </div>

    <?php
    require_once($_SERVER['DOCUMENT_ROOT'] . '/src/Gateway/QuestionGateway.php');
    require_once($_SERVER['DOCUMENT_ROOT'] . '/src/Model/QuestionModel.php');
    use Model\QuestionModel;

        $dsn = 'pgsql:host=localhost;dbname=dbwikifantasy;';
        $user = 'kiem';

        $co = new Connection($dsn, $user, '');
        $gw = new QuestionGateway($co);
        $mdl = new QuestionModel($gw);

        $q = $mdl -> getRdmQuestion();
    ?>

    <h1>▶ Quiz ◀</h1>
    <div class="quiz">
        <h2> <?= $q -> getQuestion() ?></h2>
        <a id="timer"> 300 seconds left .. </a>

        <form id="quizForm" method="POST" action="submit_quiz.php">
            <div class="answers">
            <button class="answer" type="submit" name="answer" value="A"> 
                <?=$q -> getAnswerA()?>
            </button>
            <button class="answer" type="submit" name="answer" value="B">
                <?=$q -> getAnswerB()?>
            </button>
            <button class="answer" type="submit" name="answer" value="C">
                <?=$q -> getAnswerC()?>
            </button>
            <button class="answer" type="submit" name="answer" value="D">
                <?=$q -> getAnswerD()?>
            </button>
            </div>
            <div class="submit-button">
                <button class="buttonSudmite" type="submit">Confirmer</button>
            </div>
        </form>
    </div>
</body>
</html>
