@extends('layouts.admin')

@section('title', 'Quiz Play')
@section('page-title', 'Quiz Play')

@section('content')
  <div class="row justify-content-center">
    <div class="col-lg-8 col-md-10 col-sm-12">
      <div class="modern-card fade-in">
        <div class="text-center mb-4">
          <h1 class="quiz-title">
            <i class="fas fa-brain me-3"></i>
            {{ $quiz->name }}
          </h1>
          <p class="text-muted fs-5">Test your knowledge with these questions</p>
        </div>

        <!-- Progress Bar -->
        <div class="progress mb-4" style="height: 8px;">
          <div class="progress-bar bg-primary" id="progressBar" role="progressbar" style="width: 0%"></div>
        </div>

        <!-- Question Counter -->
        <div class="text-center mb-3">
          <span class="badge bg-primary fs-6">Question <span id="questionCounter">1</span> of
            {{ count($quiz->questions) }}</span>
        </div>

        <!-- Timer Display -->
        <div id="countdown-timer" class="mb-4">
          <div class="d-flex align-items-center justify-content-center">
            <i class="fas fa-clock me-3"></i>
            <span id="timer" class="me-2">0</span>
            <span>seconds remaining</span>
          </div>
        </div>

        <!-- Question Display -->
        <div id="questionBox" class="mb-4">
          <div class="question-text" id="questionText">
            <!-- Question text will be inserted here -->
          </div>
        </div>

        <!-- Answer Form -->
        <form id="answerForm" method="POST"
          action="{{ route('admin.quiz.submit', ['quizId' => $quiz->id, 'employeeQuiz' => $employeeQuiz]) }}"
          class="slide-in">
          @csrf
          <input type="hidden" name="answers[]" id="answers">

          <div id="optionsBox" class="mb-4">
            <!-- Options will be inserted here -->
          </div>

          <div class="d-flex gap-3">
            <button type="button" id="nextBtn" class="btn btn-primary-modern btn-modern flex-fill"
              onclick="moveToNextQuestion()" style="display: none;">
              <i class="fas fa-arrow-right me-2"></i>Next Question
            </button>
            <button type="submit" id="submitBtn" class="btn btn-success-modern btn-modern flex-fill"
              onclick="submitAllAnswers()" style="display: none;">
              <i class="fas fa-check me-2"></i>Finish Quiz
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <style>
    .quiz-title {
      font-size: 2.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-align: center;
      margin-bottom: 1rem;
    }

    #countdown-timer {
      font-size: 2rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--danger-color), #dc2626);
      color: white;
      padding: 1.5rem;
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      text-align: center;
      margin-bottom: 2rem;
    }

    #questionBox {
      background: white;
      border-radius: 16px;
      box-shadow: var(--shadow-md);
      padding: 2rem;
      margin-bottom: 2rem;
    }

    .question-text {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }

    .option-item {
      background: var(--secondary-color);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      padding: 1rem 1.5rem;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
      position: relative;
    }

    .option-item:hover {
      border-color: var(--primary-color);
      background: rgba(99, 102, 241, 0.05);
      transform: translateX(5px);
    }

    .option-item.selected {
      border-color: var(--primary-color);
      background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
      color: white;
    }

    .option-item.selected .text-primary {
      color: white !important;
    }

    .progress {
      border-radius: 10px;
      background-color: #e9ecef;
    }

    .progress-bar {
      border-radius: 10px;
      transition: width 0.3s ease;
    }

    .btn-lg {
      padding: 1rem 2rem;
      font-size: 1.1rem;
    }

    /* Loading animation */
    .loading {
      opacity: 0.6;
      pointer-events: none;
    }

    /* Question transition */
    .fade-in {
      animation: fadeIn 0.5s ease-in;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>

  <script>
    // All questions data fetched from the server
    const questions = @json($quiz->questions); // JSON data from the server
    let currentQuestionIndex = 0;
    let timeLimit = questions[currentQuestionIndex].time_limit;
    let timerInterval;
    let timeLeft = timeLimit;
    let answers = []; // This will hold all the answers
    let hasAnsweredCurrent = false;

    document.addEventListener('contextmenu', function(event) {
      event.preventDefault(); // Prevent right-click
    });

    document.addEventListener('keydown', function(event) {
      if ((event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'x' || event.key === 'v')) {
        event.preventDefault();
      }
    });

    // Render the question and its options
    function renderQuestion() {
      const question = questions[currentQuestionIndex];
      hasAnsweredCurrent = false;

      // Update progress bar
      const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
      document.getElementById('progressBar').style.width = progress + '%';

      // Update question counter
      document.getElementById('questionCounter').textContent = currentQuestionIndex + 1;

      // Update question text
      document.getElementById('questionText').textContent = question.question_text;

      // Clear previous options
      const optionsBox = document.getElementById('optionsBox');
      optionsBox.innerHTML = '';

      // Insert options with modern styling
      question.options.forEach((option, index) => {
        const id = 'opt-' + option.id;
        const letter = String.fromCharCode(65 + index); // A, B, C, D...

        optionsBox.innerHTML += `
          <div class="option-item" onclick="selectOption('${id}')">
            <div class="d-flex align-items-center">
              <div class="me-3 fw-bold text-primary">${letter}.</div>
              <div class="flex-grow-1">${option.option_text}</div>
              <input type="radio" name="chosen" id="${id}" value="${option.id}" class="d-none">
            </div>
          </div>`;
      });

      // Show/hide buttons based on question position
      const nextBtn = document.getElementById('nextBtn');
      const submitBtn = document.getElementById('submitBtn');

      if (currentQuestionIndex < questions.length - 1) {
        nextBtn.style.display = 'block';
        submitBtn.style.display = 'none';
      } else {
        nextBtn.style.display = 'none';
        submitBtn.style.display = 'block';
      }

      // Start the timer for this question
      startTimer();
    }

    // Function to handle option selection
    function selectOption(optionId) {
      if (hasAnsweredCurrent) return; // Prevent multiple selections

      // Remove selected class from all options
      document.querySelectorAll('.option-item').forEach(item => {
        item.classList.remove('selected');
      });

      // Add selected class to clicked option
      const optionElement = document.getElementById(optionId).closest('.option-item');
      optionElement.classList.add('selected');

      // Check the radio button
      document.getElementById(optionId).checked = true;

      hasAnsweredCurrent = true;

      // Auto-advance after a short delay
      setTimeout(() => {
        moveToNextQuestion();
      }, 1000);
    }

    // Timer function to countdown the time for the question
    function startTimer() {
      timeLeft = timeLimit;
      document.getElementById('timer').textContent = timeLeft;

      // Reset timer for current question
      clearInterval(timerInterval);
      timerInterval = setInterval(() => {
        if (timeLeft <= 0) {
          clearInterval(timerInterval);
          if (!hasAnsweredCurrent) {
            moveToNextQuestion();
          }
        } else {
          document.getElementById('timer').textContent = timeLeft;
          timeLeft--;
        }
      }, 1000);
    }

    // Move to the next question or finish the quiz
    function moveToNextQuestion() {
      if (hasAnsweredCurrent) return; // Prevent multiple submissions

      const selectedOption = document.querySelector('input[name="chosen"]:checked');

      // Save current answer
      answers.push({
        question_id: questions[currentQuestionIndex].id,
        selected_option_id: selectedOption ? selectedOption.value : null,
        answered_in_time: selectedOption !== null
      });

      hasAnsweredCurrent = true;

      // Move to the next question
      currentQuestionIndex++;
      if (currentQuestionIndex < questions.length) {
        timeLimit = questions[currentQuestionIndex].time_limit;
        renderQuestion();
      } else {
        // Show finish button
        document.getElementById('nextBtn').style.display = 'none';
        document.getElementById('submitBtn').style.display = 'block';
      }
    }

    // Function to submit all answers
    function submitAllAnswers() {
      // Save final answer if not already saved
      if (!hasAnsweredCurrent) {
        const selectedOption = document.querySelector('input[name="chosen"]:checked');
        answers.push({
          question_id: questions[currentQuestionIndex].id,
          selected_option_id: selectedOption ? selectedOption.value : null,
          answered_in_time: selectedOption !== null
        });
      }

      // Show loading state
      document.getElementById('submitBtn').innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Submitting...';
      document.getElementById('submitBtn').disabled = true;

      // Submit the form
      document.getElementById('answers').value = JSON.stringify(answers);
      document.getElementById('answerForm').submit();
    }

    // Start rendering the first question
    renderQuestion();

    // Check for browser compatibility
    var visibilityChange = "visibilitychange";
    var hidden = "hidden";

    // For older browser versions that may use prefixes
    if (typeof document.hidden !== "undefined") {
      visibilityChange = "visibilitychange";
      hidden = "hidden";
    } else if (typeof document.msHidden !== "undefined") {
      visibilityChange = "msvisibilitychange";
      hidden = "msHidden";
    } else if (typeof document.webkitHidden !== "undefined") {
      visibilityChange = "webkitvisibilitychange";
      hidden = "webkitHidden";
    }

    // Add an event listener for visibility changes
    document.addEventListener(visibilityChange, function() {
      if (document.hidden) {
        // The page has become hidden (user switched tabs)
        console.log("Tab is now hidden.");
        if (!hasAnsweredCurrent) {
          moveToNextQuestion();
        }
      } else {
        // The page has become visible again (user returned to the tab)
        console.log("Tab is now visible.");
      }
    });
  </script>
@endsection