<?php
require_once __DIR__.'/db.php';
require_once __DIR__.'/header-student.php';
require_student();

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Expires: 0");

$quiz_id = (int)($_GET['quiz_id'] ?? 0);
$student_id = (int)$_SESSION['student_id'];
$school_id = (int)$_SESSION['school_id'];

$check = $mysqli->query("
    SELECT 1
    FROM quiz_payments
    WHERE quiz_id = $quiz_id
      AND student_id = $student_id
      AND status = 'paid'
")->num_rows;

$is_free = $mysqli->query("
    SELECT qs.amount
    FROM quiz_school qs
    WHERE qs.quiz_id = $quiz_id
      AND qs.school_id = {$_SESSION['school_id']}
")->fetch_row()[0] == 0;

if (!$is_free && !$check) {
    die('Payment required');
}

$access = $mysqli->query("
    SELECT q.title, q.description, q.duration
    FROM quizzes q
    JOIN quiz_school qs ON qs.quiz_id = q.id
    WHERE q.id = $quiz_id
      AND q.is_active = 1
      AND qs.school_id = $school_id
")->fetch_assoc();

if (!$quiz_id || !$access) die('Quiz not available.');

$done = $mysqli->query("
    SELECT COUNT(*) FROM attempts
    WHERE student_id=$student_id AND quiz_id=$quiz_id AND status='completed'
")->fetch_row()[0];
if ($done) { header('Location: /index.php'); exit; }

$mysqli->query("
    INSERT INTO attempts (student_id, quiz_id, status)
    VALUES ($student_id,$quiz_id,'in_progress')
    ON DUPLICATE KEY UPDATE started_at=CURRENT_TIMESTAMP
");
$attempt_id = $mysqli->insert_id ?: $mysqli->query("SELECT id FROM attempts WHERE student_id=$student_id AND quiz_id=$quiz_id AND status='in_progress'")->fetch_row()[0];

$questions=[];
$qRes=$mysqli->query("SELECT id, question, marks FROM questions WHERE quiz_id=$quiz_id ORDER BY id");
while($q=$qRes->fetch_assoc()){
    $opts=[];
    $oRes=$mysqli->query("SELECT id, option_text FROM options WHERE question_id={$q['id']} ORDER BY id");
    while($o=$oRes->fetch_assoc()) $opts[]=$o;
    $q['options']=$opts;
    $questions[]=$q;
}
$total=count($questions);
?>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title><?= e($access['title']) ?> • Quiz</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <link href="assets/take_quiz.css" rel="stylesheet">
  <style>
    body, html { height:100%; margin:0; background:#f9fafb; }
    .quiz-container { display:flex; height:100vh; flex-wrap:wrap; }
    .left-panel { flex:70%; padding:2rem; overflow-y:auto; border-right:1px solid #ddd; }
    .right-panel { flex:30%; padding:1.5rem; background:#fff; border-left:1px solid #ddd; overflow-y:auto; }
    .question-block { min-height:calc(100vh - 180px); } /* leave space for nav */
    .option-card { cursor:pointer; transition:all 0.2s; }
    .option-card:hover { background:#f1f5ff; }
    .form-check-input { display:none; }
    .form-check-label { width:100%; padding:1rem; display:block; }
    .form-check-input:checked + .form-check-label { background:#dbeafe; border:2px solid #0d6efd; border-radius:.5rem; }
    .bottom-nav { margin-top:0rem; }
    .question-number { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:.25rem; cursor:pointer; font-weight:500; }
    .question-number.not-attempted { background:#e5e7eb; color:#111; }
    .question-number.attempted { background:#22c55e; color:#fff; }
    @media(max-width:768px){
      .quiz-container { flex-direction:column; }
      .left-panel, .right-panel { flex:100%; border:none; }
      .right-panel { border-top:1px solid #ddd; }
      .question-block { min-height:auto; }
    }
  </style>
</head>
<body>
<div class="quiz-container">
  <div class="row gx-0" style="width: 100%">
        <!-- Left Panel (Questions) -->
  <div class="col-md-9 mt-1 card">
    <div class="card-header">
      <span><b><?= e($access['title']) ?></b></span>
      <!--<div class="timer-display">-->
      <!--  <div class="timer-label">Time Remaining</div>-->
      <!--  <span id="timer">--:--</span>-->
      <!--</div>-->
    </div>

    <!-- <h3 class="mb-3 text-center"><?= e($access['title']) ?></h3> -->
    <div class="card-body">
      <form id="quizForm" method="post" action="submit_quiz.php" class="w-100">
        <input type="hidden" name="attempt_id" value="<?= $attempt_id ?>">
        <input type="hidden" name="quiz_id" value="<?= $quiz_id ?>">

        <?php foreach($questions as $i=>$q):?>
        <div class="question-block <?= $i===0?'':'d-none' ?>" data-index="<?= $i ?>">
          <h5 class="mt-2 mb-5"><?php echo $i+1; echo '. '; ?> <?=e($q['question']) ?></h5>
          <?php foreach($q['options'] as $opt): ?>
            <!-- <div class="form-check mb-3 option-card border rounded">
              <input class="form-check-input" type="radio" name="q<?= $q['id'] ?>" id="opt<?= $opt['id'] ?>" value="<?= $opt['id'] ?>">
              <label class="form-check-label" for="opt<?= $opt['id'] ?>">
                <?= e($opt['option_text']) ?>
              </label>
            </div> -->
              <input class="form-check-input" type="radio" name="q<?= $q['id'] ?>" id="opt<?= $opt['id'] ?>" value="<?= $opt['id'] ?>">
              <label class="form-check-label mb-3 option-card border rounded" for="opt<?= $opt['id'] ?>">
                <?= e($opt['option_text']) ?>
              </label>
          <?php endforeach; ?>
        </div>
        <?php endforeach; ?>

        <!-- Buttons inside left panel -->
        <div class="bottom-nav d-flex justify-content-between">
          <button type="button" class="btn btn-outline-secondary" id="prevBtn" disabled>Previous</button>
          <div>
            <button type="button" class="btn btn-primary" id="nextBtn">Next</button>
            <button type="submit" class="btn btn-success d-none" id="submitBtn">Submit Quiz</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- Right Panel (Progress + Timer) -->
  <div class="col-md-3 card mt-1">
    <div class="card-header">
      <span class="mb-0">Progress</span>
    </div>

    <div class="card-body">
      <!--<p class="text-danger fw-bold mb-3" style="font-style: italic;">Quiz will be automatically submitted if time exceeds.</p>-->
      <div class="d-flex flex-wrap" id="progressNumbers">
        <?php foreach($questions as $i=>$q): ?>
          <div class="question-number not-attempted" data-index="<?= $i ?>"><?= $i+1 ?></div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
  </div>

</div>

<script>
  window.addEventListener("pageshow", function (event) {
    if (event.persisted) {
      window.location.href = "/quiz-index.php";
    }
  });
  
  document.getElementById("quizForm").addEventListener("submit", function (e) {
    const confirmed = confirm("Are you sure you want to submit the quiz? You won't be able to change your answers.");

    if (!confirmed) {
        e.preventDefault();
    }
});
  
  let current=0,total=<?= $total ?>;
  function updateView(){
    $('.question-block').addClass('d-none');
    $('.question-block[data-index='+current+']').removeClass('d-none');
    $('#prevBtn').prop('disabled', current===0);
    if(current===total-1){ $('#nextBtn').addClass('d-none'); $('#submitBtn').removeClass('d-none'); }
    else { $('#nextBtn').removeClass('d-none'); $('#submitBtn').addClass('d-none'); }
  }

  // Navigation
  $('#nextBtn').click(()=>{ if(current<total-1){ current++; updateView(); }});
  $('#prevBtn').click(()=>{ if(current>0){ current--; updateView(); }});
  $(document).on('click','.question-number',function(){ current=$(this).data('index'); updateView(); });
  updateView();

  // Track attempted
  $('input[type=radio]').change(function(){
    let parentQ=$(this).closest('.question-block').data('index');
    $('.question-number[data-index='+parentQ+']').removeClass('not-attempted').addClass('attempted');
  });

  // Timer (duration in minutes → seconds)
  let duration=<?= (int)$access['duration'] ?>*60;
  function startTimer(){
    const el=document.getElementById('timer');
    let interval=setInterval(()=>{
      let m=Math.floor(duration/60), s=duration%60;
      el.textContent=m+":"+(s<10?"0":"")+s;
      duration--;
      if(duration<0){
        clearInterval(interval);
        document.getElementById('quizForm').submit();
      }
    },1000);
  }
//   startTimer();
</script>
</body>
</html>
