{% extends "base.html" %}
{% load custom_tags %}
{% block content %}

<div class="container-fluid mt-3">

<div class="row">

<!-- LEFT SIDE QUESTIONS -->

<div class="col-md-9">

<div class="d-flex justify-content-between mb-3">

<h4>📘 Daily Quiz</h4>

{% if not show_result %}
<div>

<div class="progress mb-2" style="height:8px;">
<div id="timeProgress" class="progress-bar bg-danger" style="width:100%"></div>
</div>

<h5 class="text-danger">
⏳ Time Left: <span id="timer">15:00</span>
</h5>

</div>
{% endif %}

</div>


{% if show_result %}
<div class="alert alert-info">

<h5>📊 Result Summary</h5>

<p><strong>Score:</strong> {{ score }} / {{ total_marks }}</p>
<p><strong>Correct:</strong> {{ correct_count }}</p>
<p><strong>Wrong:</strong> {{ wrong_count }}</p>
<p><strong>Accuracy:</strong> {{ accuracy }}%</p>

<a href="{% url 'daily_leaderboard' %}" class="btn btn-outline-primary btn-sm mt-2">
🏆 View Leaderboard
</a>

</div>
{% endif %}


<form method="POST" action="{% url 'submit_daily_quiz' %}" id="quizForm">

{% csrf_token %}
<input type="hidden" name="quiz_id" value="{{ quiz.id }}">


{% for pair in grouped_questions %}
{% with q=pair.english h=pair.hindi %}

{% if q %}
{% with selected=selected_answers|get_item:q.base_question_id %}

<div class="card mb-4 shadow-sm question-box" id="question{{ forloop.counter }}">

<div class="card-body">

<h6 class="fw-bold">
Q{{ forloop.counter }}. {{ q.question_part }}
</h6>

{% if h %}
<p class="text-muted">{{ h.question_part_hi }}</p>
{% endif %}


{% if q.image %}
<div class="text-center my-3">
<img src="{{ q.image.url }}" class="img-fluid rounded">
</div>
{% endif %}


<!-- OPTIONS -->

<div class="mt-3">

<!-- OPTION A -->

<div class="form-check mb-2">

<input class="form-check-input option-input"
type="radio"
name="question_{{ q.base_question_id }}"
value="A"
data-question="{{ forloop.counter }}"
{% if selected == "A" %}checked{% endif %}
{% if show_result %}disabled{% endif %}
{% if not show_result %}required{% endif %}>

<label class="form-check-label
{% if show_result %}
{% if q.correct_answer_choice == "A" %}
text-success fw-bold
{% elif selected == "A" %}
text-danger fw-bold
{% endif %}
{% endif %}
">

<strong>a)</strong> {{ q.answer_option_a }}

{% if h %}
<br>
<span class="text-muted">{{ h.answer_option_a_hi }}</span>
{% endif %}

</label>

</div>


<!-- OPTION B -->

<div class="form-check mb-2">

<input class="form-check-input option-input"
type="radio"
name="question_{{ q.base_question_id }}"
value="B"
data-question="{{ forloop.counter }}"
{% if selected == "B" %}checked{% endif %}
{% if show_result %}disabled{% endif %}>

<label class="form-check-label
{% if show_result %}
{% if q.correct_answer_choice == "B" %}
text-success fw-bold
{% elif selected == "B" %}
text-danger fw-bold
{% endif %}
{% endif %}
">

<strong>b)</strong> {{ q.answer_option_b }}

{% if h %}
<br>
<span class="text-muted">{{ h.answer_option_b_hi }}</span>
{% endif %}

</label>

</div>


<!-- OPTION C -->

<div class="form-check mb-2">

<input class="form-check-input option-input"
type="radio"
name="question_{{ q.base_question_id }}"
value="C"
data-question="{{ forloop.counter }}"
{% if selected == "C" %}checked{% endif %}
{% if show_result %}disabled{% endif %}>

<label class="form-check-label
{% if show_result %}
{% if q.correct_answer_choice == "C" %}
text-success fw-bold
{% elif selected == "C" %}
text-danger fw-bold
{% endif %}
{% endif %}
">

<strong>c)</strong> {{ q.answer_option_c }}

{% if h %}
<br>
<span class="text-muted">{{ h.answer_option_c_hi }}</span>
{% endif %}

</label>

</div>


<!-- OPTION D -->

<div class="form-check mb-2">

<input class="form-check-input option-input"
type="radio"
name="question_{{ q.base_question_id }}"
value="D"
data-question="{{ forloop.counter }}"
{% if selected == "D" %}checked{% endif %}
{% if show_result %}disabled{% endif %}>

<label class="form-check-label
{% if show_result %}
{% if q.correct_answer_choice == "D" %}
text-success fw-bold
{% elif selected == "D" %}
text-danger fw-bold
{% endif %}
{% endif %}
">

<strong>d)</strong> {{ q.answer_option_d }}

{% if h %}
<br>
<span class="text-muted">{{ h.answer_option_d_hi }}</span>
{% endif %}

</label>

</div>

</div>


<!-- EXPLANATION -->

{% if show_result %}

<hr>

<p>
<strong>Correct Answer:</strong>
<span class="text-success fw-bold">
{{ q.correct_answer_choice }}
</span>
</p>

<p>
<strong>Explanation:</strong><br>
{{ q.correct_answer_description }}
</p>

{% if h %}
<p class="text-muted">
{{ h.correct_answer_description_hi }}
</p>
{% endif %}

{% endif %}

</div>
</div>

{% endwith %}
{% endif %}
{% endwith %}
{% endfor %}



{% if not show_result %}

<div class="text-center mt-4">

<button type="button" class="btn btn-secondary me-2" onclick="prevQuestion()">Previous</button>

<button type="button" class="btn btn-primary me-2" onclick="nextQuestion()">Next</button>

<button type="submit" class="btn btn-success">Submit Quiz</button>

</div>

{% endif %}

</form>

</div>



<!-- RIGHT SIDE QUESTION PALETTE -->

{% if not show_result %}

<div class="col-md-3">

<div class="card shadow-sm">

<div class="card-body">

<h6>🧭 Question Palette</h6>

<div class="d-flex flex-wrap">

{% for pair in grouped_questions %}

<button type="button"
class="btn btn-outline-secondary m-1 palette-btn"
id="palette{{ forloop.counter }}"
onclick="goToQuestion({{ forloop.counter }})">

{{ forloop.counter }}

</button>

{% endfor %}

</div>

<hr>

<p>✅ Attempted: <span id="attempted">0</span></p>
<p>❌ Not Attempted: <span id="notAttempted">{{ grouped_questions|length }}</span></p>

</div>
</div>

</div>

{% endif %}

</div>
</div>



{% if not show_result %}

<script>

let currentQuestion = 1
const totalQuestions = document.querySelectorAll(".question-box").length

function showQuestion(num){

document.querySelectorAll(".question-box").forEach((q,i)=>{
q.style.display = (i+1 === num) ? "block" : "none"
})

}

function nextQuestion(){
if(currentQuestion < totalQuestions){
currentQuestion++
showQuestion(currentQuestion)
}
}

function prevQuestion(){
if(currentQuestion > 1){
currentQuestion--
showQuestion(currentQuestion)
}
}

function goToQuestion(num){
currentQuestion = num
showQuestion(num)
}

showQuestion(1)



/* ATTEMPT COUNTER */

const inputs = document.querySelectorAll(".option-input")

inputs.forEach(input=>{

input.addEventListener("change",function(){

let attemptedSet = new Set()

inputs.forEach(i=>{
if(i.checked){
attemptedSet.add(i.name)
}
})

document.getElementById("attempted").innerText = attemptedSet.size
document.getElementById("notAttempted").innerText = totalQuestions - attemptedSet.size

})

})



/* TIMER */

let totalTime = 900

const timerDisplay = document.getElementById("timer")
const progressBar = document.getElementById("timeProgress")

const countdown = setInterval(function(){

let minutes = Math.floor(totalTime/60)
let seconds = totalTime%60

timerDisplay.textContent =
String(minutes).padStart(2,"0")+":"+
String(seconds).padStart(2,"0")

progressBar.style.width = (totalTime/900*100)+"%"

totalTime--

if(totalTime < 0){

clearInterval(countdown)

alert("Time's up! Submitting quiz.")

document.getElementById("quizForm").submit()

}

},1000)

</script>

{% endif %}

{% endblock %}