@extends('layouts.app')

@section('content')
<section class="py-8 bg-no-repeat bg-cover" style="background-image: url({{ asset('assets/images/bg_images-01.svg') }})">
<div class="container mx-auto px-3 py-6 max-w-3xl">

    {{-- Audio for correct and wrong answers --}}
    <audio id="errorSound" src="{{ asset('assets/error_CDOxCYm.mp3') }}"></audio>
    <audio id="successSound" src="{{ asset('assets/success-340660.mp3') }}"></audio>

    @if(!empty($quiz['questions']) && count($quiz['questions']) > 0)
    <!-- Quiz Container -->
    <div id="quiz-container" class="bg-white rounded-2xl shadow-lg border border-slate-100 overflow-hidden">
        <!-- Quiz Header with Progress Bar -->
        <div class="bg-primary-light p-6 text-dark">
            <h2 class="text-3xl font-bold mb-2 text-center">{{ $quiz['title'] }}</h2>
            <div class="flex justify-between items-center mb-1">
                <span class="text-blue-500">{{ __('menu.your_progress') }}</span>
                <span id="progress-text" class="text-blue-500 font-medium">Question 1 of {{ count($quiz['questions']) }}</span>
            </div>
            <div class="w-full bg-white rounded-full h-2.5 shadow">
                <div id="progress-bar" class="bg-primary h-2.5 rounded-full transition-all duration-500" style="width: 2%"></div>
            </div>
        </div>

        <!-- Question Area -->
        <div class="p-8">
            <div id="question-box">
                <div id="question-text" class="md:text-2xl text-xl font-semibold text-gray-800 mb-6"></div>
                <div id="options" class="space-y-4"></div>
            </div>

            <!-- Navigation -->
            <div class="flex justify-end items-center mt-10">
                <button id="next-btn"
                    class="btn-primary opacity-50  ">
                    {{ __('menu.next_question') }} →
                </button>
            </div>
        </div>
    </div>

    <!-- Result Box -->
    <div id="result-box"
        class="hidden mt-8 bg-primary-light p-8 rounded-2xl text-center shadow-md" style="background-image: url({{ asset('assets/images/bg_image.png') }})">
        <div class="text-5xl mb-4">🎉</div>
      <h3 class="text-2xl font-bold mb-2">{{ __('menu.quiz_completed') }}</h3>
<p class="text-lg mb-4">{{ __('menu.your_score') }}</p>
     <div class="text-4xl font-bold mb-6 flex items-center justify-center gap-4">
  <!-- Score Box -->
  <span id="score" class="text-primary bg-primary-light px-6 py-3 rounded-xl shadow-md">
    8
  </span>

  <span class="text-gray-600">/</span>

  <!-- Total Box -->
  <span id="total" class="text-primary-dark bg-primary-light px-6 py-3 rounded-xl shadow-md">
    10
  </span>
</div>

     <button onclick="location.reload()"
    class="btn-primary cursor-pointer ">
    {{ __('menu.try_again') }}
</button>
    </div>

    @else
    <!-- No Questions Message -->
    <div class="bg-yellow-50 border border-yellow-300 text-yellow-800 p-8 rounded-2xl text-center shadow-md">
        <div class="text-5xl mb-4">⚠️</div>
        <h3 class="text-2xl font-bold mb-2">{{ __('menu.no_questions_found') }}</h3>
<p class="text-lg">{{ __('menu.no_questions_message') }}</p>

    </div>
    @endif

</div>
</section>

{{-- Pass quiz data to JS --}}
<script>
    const quizData = @json($quiz);
</script>

<script>
$(function() {
    if (!quizData.questions || quizData.questions.length === 0) return; // stop if no questions

    const questions = quizData.questions;
    let current = 0;
    let score = 0;

    const errorSound = document.getElementById("errorSound");
    const successSound = document.getElementById("successSound");

    function loadQuestion() {
        const q = questions[current];
        $('#question-text').text(`Q${current + 1}. ${q.question}`);

        const progressPercent = ((current) / questions.length) * 100;
        $('#progress-bar').css('width', `${progressPercent}%`);
        $('#progress-text').text(`Question ${current + 1} of ${questions.length}`);

        const optionsHTML = `
            <button class="option-btn flex items-center w-full text-left px-5 py-3 bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-300 rounded-xl cursor-pointer transition-all duration-300 group" data-option="option_1">
                <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-gray-200 group-hover:bg-blue-200 rounded-lg mr-4 font-medium transition-colors">A</span>
                <span>${q.option_1}</span>
            </button>
            <button class="option-btn flex items-center w-full text-left px-5 py-3 bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-300 rounded-xl cursor-pointer transition-all duration-300 group" data-option="option_2">
                <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-gray-200 group-hover:bg-blue-200 rounded-lg mr-4 font-medium transition-colors">B</span>
                <span>${q.option_2}</span>
            </button>
            <button class="option-btn flex items-center w-full text-left px-5 py-3 bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-300 rounded-xl cursor-pointer transition-all duration-300 group" data-option="option_3">
                <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-gray-200 group-hover:bg-blue-200 rounded-lg mr-4 font-medium transition-colors">C</span>
                <span>${q.option_3}</span>
            </button>
            <button class="option-btn flex items-center w-full text-left px-5 py-3 bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-300 rounded-xl cursor-pointer transition-all duration-300 group" data-option="option_4">
                <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-gray-200 group-hover:bg-blue-200 rounded-lg mr-4 font-medium transition-colors">D</span>
                <span>${q.option_4}</span>
            </button>
        `;

        $('#options').html(optionsHTML);

        $('#next-btn')
            .prop('disabled', true)
            .removeClass('opacity-100 cursor-pointer hover:shadow-lg hover:-translate-y-0.5')
            .addClass('opacity-50 cursor-not-allowed');
    }

    $(document).on('click', '.option-btn', function() {
        const selected = $(this);
        const correct = questions[current].correct_answer;

        $('.option-btn').prop('disabled', true);

        if (selected.data('option') === correct) {
            successSound.currentTime = 0; successSound.play();
            selected.removeClass('hover:bg-blue-50 hover:border-blue-300').addClass('bg-green-50 border-green-300');
            selected.find('span:first-child').removeClass('bg-gray-200 group-hover:bg-blue-200').addClass('bg-green-500 text-white');
            score++;
        } else {
            errorSound.currentTime = 0; errorSound.play();
            selected.removeClass('hover:bg-blue-50 hover:border-blue-300').addClass('bg-red-50 border-red-300');
            selected.find('span:first-child').removeClass('bg-gray-200 group-hover:bg-blue-200').addClass('bg-red-500 text-white');

            $(`[data-option="${correct}"]`).removeClass('hover:bg-blue-50 hover:border-blue-300').addClass('bg-green-50 border-green-300').find('span:first-child').removeClass('bg-gray-200 group-hover:bg-blue-200').addClass('bg-green-500 text-white');
        }

        $('#next-btn')
            .prop('disabled', false)
            .removeClass('opacity-50 cursor-not-allowed')
            .addClass('opacity-100 cursor-pointer hover:shadow-lg hover:-translate-y-0.5');
    });

    $('#next-btn').click(function() {
        if ($(this).prop('disabled')) return;

        current++;
        if (current < questions.length) {
            loadQuestion();
        } else {
            $('#progress-bar').css('width', '100%');
            $('#quiz-container').hide();
            $('#result-box').removeClass('hidden');
            $('#score').text(score);
            $('#total').text(questions.length);
        }
    });

    loadQuestion();
});
</script>
@endsection