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

<div class="container mt-5">
<div class="card shadow-sm p-4">

<h4 class="mb-4">🎯 Generate Daily Quiz</h4>

{% if error %}
<div class="alert alert-danger">
{{ error }}
</div>
{% endif %}

<form method="POST">
{% csrf_token %}

<!-- Quiz Mode -->
<div class="mb-3">
<label class="form-label fw-bold">Quiz Mode</label>
{{ form.mode }}
</div>

<!-- Number of Questions -->
<div class="mb-3">
<label class="form-label">Number of Questions</label>
{{ form.number_of_questions }}
</div>

<hr>

<!-- ===================================== -->
<!-- Manual Question Selection -->
<!-- ===================================== -->

<div id="manualSection">

<h5 class="mb-3">Select Questions Manually</h5>

<div style="max-height:520px; overflow-y:auto; border:1px solid #ddd; padding:15px; border-radius:8px;">

<div class="row">

{% for pair in questions %}
<div class="col-12 mb-4">

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

<input class="form-check-input"
type="checkbox"
name="selected_questions"
value="{{ pair.english.id }}"
id="q{{ pair.english.base_question_id }}">

<label class="form-check-label fw-bold" for="q{{ pair.english.base_question_id }}">

Question {{ pair.english.question_number }}
&nbsp; | &nbsp;
Base ID : {{ pair.english.base_question_id }}

</label>

</div>

<div class="row">

<!-- ======================= -->
<!-- ENGLISH QUESTION -->
<!-- ======================= -->

<div class="col-md-6 mb-2">

<div class="card h-100 border-primary">

<div class="card-body">

{% if pair.english %}

<h6 class="text-primary fw-bold">
English
</h6>

<p>{{ pair.english.question_part }}</p>

{% if pair.english.answer_option_a %}
<p>(a) {{ pair.english.answer_option_a }}</p>
{% endif %}

{% if pair.english.answer_option_b %}
<p>(b) {{ pair.english.answer_option_b }}</p>
{% endif %}

{% if pair.english.answer_option_c %}
<p>(c) {{ pair.english.answer_option_c }}</p>
{% endif %}

{% if pair.english.answer_option_d %}
<p>(d) {{ pair.english.answer_option_d }}</p>
{% endif %}

{% else %}

<p class="text-danger">No English version available.</p>

{% endif %}

</div>
</div>

</div>

<!-- ======================= -->
<!-- HINDI QUESTION -->
<!-- ======================= -->

<div class="col-md-6 mb-2">

<div class="card h-100 border-success">

<div class="card-body">

{% if pair.hindi %}

<h6 class="text-success fw-bold">
Hindi
</h6>

<p>{{ pair.hindi.question_part_hi }}</p>

{% if pair.hindi.answer_option_a_hi %}
<p>(a) {{ pair.hindi.answer_option_a_hi }}</p>
{% endif %}

{% if pair.hindi.answer_option_b_hi %}
<p>(b) {{ pair.hindi.answer_option_b_hi }}</p>
{% endif %}

{% if pair.hindi.answer_option_c_hi %}
<p>(c) {{ pair.hindi.answer_option_c_hi }}</p>
{% endif %}

{% if pair.hindi.answer_option_d_hi %}
<p>(d) {{ pair.hindi.answer_option_d_hi }}</p>
{% endif %}

{% else %}

<p class="text-danger">No Hindi version available.</p>

{% endif %}

</div>
</div>

</div>

</div>

</div>

{% empty %}

<p class="text-danger">No questions available.</p>

{% endfor %}

</div>

</div>

</div>

<!-- ===================================== -->
<!-- BUTTONS -->
<!-- ===================================== -->

<div class="mt-4">

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

<button type="reset" class="btn btn-outline-secondary ms-2">
Reset
</button>

</div>

</form>

</div>
</div>

<!-- ===================================== -->
<!-- SCRIPT -->
<!-- ===================================== -->

<script>

function toggleManualSection(){

const mode = document.querySelector('input[name="mode"]:checked').value
const manualSection = document.getElementById("manualSection")

if(mode === "manual"){
manualSection.style.display = "block"
}
else{
manualSection.style.display = "none"
}

}

document.addEventListener("DOMContentLoaded", function(){

toggleManualSection()

const radios = document.querySelectorAll('input[name="mode"]')

radios.forEach(radio => {
radio.addEventListener("change", toggleManualSection)
})

})

</script>

{% endblock %}