<?php $__env->startSection('style'); ?>
<style>
    .question-area {
        padding: 20px;
        background-color: #ffffff;
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .question {
        font-size: 2rem;
        margin-bottom: 20px;
        display: none;
    }

    .answers {
        display: none;
    }

    .answers .btn {
        width: 100%;
        padding: 30px;
        font-size: 1.5rem;
        margin-bottom: 10px;
        border-radius: 10px;
        transition: all 0.3s;
    }

    .answers .btn:hover {
        transform: scale(1.05);
    }

    .video-controls,
    .end-game-controls {
        display: none;
        text-align: center;
        margin-top: 20px;
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-12">
            <div class="question-area text-center">
                <video id="questionVideo" width="90%" height="90%" autoplay muted>
                    <source src="<?php echo e($template->video_url); ?>" type="video/mp4">
                </video>
                <h1 id="questionText" class="question"><?php echo e($template->question_text); ?></h1>
                <div id="videoControls" class="video-controls">
                    <button id="playVideoAgain" class="btn btn-primary">เล่นวิดีโออีกครั้ง</button>
                    <button id="requestHint" class="btn btn-secondary">ขอคำใบ้</button>
                </div>
                <div id="endGameControls" class="end-game-controls">
                    <button id="restartQuiz" class="btn btn-success">เริ่มใหม่</button>
                    <button id="goHome" class="btn btn-info">กลับไปหน้าแรก</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row answers text-center" id="answersSection">
        <?php
        $buttonClasses = ['btn-danger', 'btn-primary', 'btn-warning', 'btn-success'];
        ?>
        <?php $__currentLoopData = $answers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $answer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php
        $randomClass = $buttonClasses[array_rand($buttonClasses)];
        ?>
        <div class="col-6 col-md-3">
            <button class="btn <?php echo e($randomClass); ?> btn-lg answer" onclick="checkAnswer('<?php echo e($answer->next_question_id); ?>', '<?php echo e($answer->is_correct); ?>', '<?php echo e($answer->id); ?>')">
                <?php echo e($answer->answer_text); ?>

            </button>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const video = document.getElementById('questionVideo');
        const questionText = document.getElementById('questionText');
        const videoControls = document.getElementById('videoControls');
        const endGameControls = document.getElementById('endGameControls');
        const answersSection = document.getElementById('answersSection');
        const playVideoAgainButton = document.getElementById('playVideoAgain');
        const requestHintButton = document.getElementById('requestHint');
        const restartQuizButton = document.getElementById('restartQuiz');
        const goHomeButton = document.getElementById('goHome');
        const timeLimit = `<?php echo e($template->time_limit); ?>` * 1000;

        let playVideoAgainClicked = false;
        let requestHintClicked = false;

        video.addEventListener('ended', () => {
            questionText.style.display = 'block';
            answersSection.style.display = 'flex';

            setTimeout(() => {
                videoControls.style.display = 'block';
            }, timeLimit);
        });

        playVideoAgainButton.addEventListener('click', () => {
            if (!playVideoAgainClicked) {
                video.currentTime = 0;
                video.play();
                videoControls.style.display = 'none';
                playVideoAgainClicked = true;
                playVideoAgainButton.disabled = true;
            }
        });

        requestHintButton.addEventListener('click', () => {
            if (!requestHintClicked) {
                $.ajax({
                    url: '<?php echo e(route("check_hint")); ?>',
                    type: 'POST',
                    data: {
                        question_id: '<?php echo e($template->id); ?>',
                        _token: '<?php echo e(csrf_token()); ?>'
                    },
                    success: function(data) {
                        if (data.hint) {
                            showWarningAlert('คำใบ้: ' + data.hint.hint_text);
                        } else {
                            showWarningAlert('ไม่มีคำใบ้สำหรับคำถามนี้');
                        }
                        requestHintClicked = true;
                        requestHintButton.disabled = true;
                    },
                    error: function() {
                        showErrorAlert('เกิดข้อผิดพลาดในการตรวจสอบคำแนะนำ กรุณาลองอีกครั้ง');
                    }
                });
            }
        });

        restartQuizButton.addEventListener('click', () => {
            window.location.href = `<?php echo e(url('questions_start')); ?>_<?php echo e($quiz_id); ?>`;
        });

        goHomeButton.addEventListener('click', () => {
            window.location.href = `<?php echo e(route('welcome')); ?>`;
        });
    });

    function checkAnswer(nextQuestionId, isCorrect, answerId) {
        const sessionId = '<?php echo e($gameSession->id); ?>';

        $.ajax({
            url: '<?php echo e(route("check_answer")); ?>',
            type: 'POST',
            data: {
                session_id: sessionId,
                question_id: '<?php echo e($template->id); ?>',
                answer_id: answerId,
                is_correct: isCorrect,
                next_question_id: nextQuestionId,
                _token: '<?php echo e(csrf_token()); ?>'
            },
            success: function(data) {
                if (data.isCorrect) {
                    $('#endGameControls').show();
                    $('#videoControls').hide();
                    $('#answersSection').hide();
                } else {
                    if (data.nextQuestionId) {
                        window.location.href = `<?php echo e(url('questions_start')); ?>_<?php echo e($quiz_id); ?>/next_${data.nextQuestionId}`;
                    } else {
                        showErrorAlert('ข้อผิดพลาด: ไม่ได้ระบุรหัสคำถามถัดไป');
                    }
                }
            },
            error: function() {
                showErrorAlert('เกิดข้อผิดพลาดในการประมวลผลคำตอบของคุณ โปรดลองอีกครั้ง');
            }
        });
    }

    function showWarningAlert(message) {
        Swal.fire(message, '', 'warning');
    }

    function showErrorAlert(message) {
        Swal.fire(message, '', 'error');
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\quiz-game\resources\views/play_game.blade.php ENDPATH**/ ?>