@extends('layouts.app')

@section('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>
@endsection

@section('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="{{ $template->video_url }}" type="video/mp4">
                </video>
                <button id="toggleMute" class="btn btn-secondary">
                    <i id="muteIcon" class="bi bi-volume-mute-fill"></i> เปิดเสียง
                </button>
                <h1 id="questionText" class="question">{{ $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'];
        @endphp
        @foreach($answers as $answer)
        @php
        $randomClass = $buttonClasses[array_rand($buttonClasses)];
        @endphp
        <div class="col-6 col-md-3">
            <button class="btn {{ $randomClass }} btn-lg answer" onclick="checkAnswer('{{ $answer->next_question_id }}', '{{ $answer->is_correct }}', '{{ $answer->id }}')">
                {{ $answer->answer_text }}
            </button>
        </div>
        @endforeach
    </div>
</div>
@endsection

@section('script')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const video = document.getElementById('questionVideo');
        const toggleMuteButton = document.getElementById('toggleMute');
        const muteIcon = document.getElementById('muteIcon');
        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 = `{{ $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: '{{ route("check_hint") }}',
                    type: 'POST',
                    data: {
                        question_id: '{{ $template->id }}',
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        if (data.hint) {
                            showWarningAlert('คำใบ้: ' + data.hint.hint_text);
                        } else {
                            showWarningAlert('ไม่มีคำใบ้สำหรับคำถามนี้');
                        }
                        requestHintClicked = true;
                        requestHintButton.disabled = true;
                    },
                    error: function() {
                        showErrorAlert('เกิดข้อผิดพลาดในการตรวจสอบคำแนะนำ กรุณาลองอีกครั้ง');
                    }
                });
            }
        });

        toggleMuteButton.addEventListener('click', () => {
            if (video.muted) {
                video.muted = false;
                toggleMuteButton.innerHTML = '<i id="muteIcon" class="bi bi-volume-up-fill"></i> ปิดเสียง';
            } else {
                video.muted = true;
                toggleMuteButton.innerHTML = '<i id="muteIcon" class="bi bi-volume-mute-fill"></i> เปิดเสียง';
            }
        });

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

        goHomeButton.addEventListener('click', () => {
            window.location.href = `{{ route('welcome') }}`;
        });
    });

    function checkAnswer(nextQuestionId, isCorrect, answerId) {
        const sessionId = '{{ $gameSession->id }}';

        $.ajax({
            url: '{{ route("check_answer") }}',
            type: 'POST',
            data: {
                session_id: sessionId,
                question_id: '{{ $template->id }}',
                answer_id: answerId,
                is_correct: isCorrect,
                next_question_id: nextQuestionId,
                _token: '{{ csrf_token() }}'
            },
            success: function(data) {
                if (data.isCorrect) {
                    $('#endGameControls').show();
                    $('#videoControls').hide();
                    $('#answersSection').hide();
                } else {
                    if (data.nextQuestionId) {
                        window.location.href = `{{ url('questions_start') }}_{{ $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>
@endsection