{% extends "dashboard/base.html" %}
{% load static %}
{% load bangla_numbers %}

{% block title %}Exam Preview - PassMCQ{% endblock %}

{% block content %}
<turbo-frame id="mcqContent">
  <div class="max-w-3xl mx-auto p-4 md:p-6 pb-28">
    <!-- Header -->
    <h2 class="text-2xl lg:text-3xl font-bold text-center mb-6 text-gray-800 dark:text-white">
      Review & Start Exam
    </h2>

    <!-- Progress Steps -->
    <div class="grid grid-cols-3 gap-3 py-6">
      <div class="w-full h-1 bg-emerald-500 rounded-full"></div>
      <div class="w-full h-1 bg-emerald-500 rounded-full"></div>
      <div class="w-full h-1 bg-emerald-500 rounded-full"></div>
    </div>

    <!-- Exam Summary Card -->
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6 mb-6">
      <!-- Subject -->
      <div class="mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Subject</span>
        <p class="text-lg font-semibold text-emerald-600 dark:text-emerald-400">{{ subject.name }}</p>
      </div>

      <!-- Selected Chapters -->
      <div class="mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Selected Chapters</span>
        <ul class="mt-2 space-y-2">
          {% for ch in selected_chapters %}
            <li class="flex items-center justify-between bg-gray-50 dark:bg-slate-700 px-4 py-2 rounded-lg">
              <span class="text-gray-800 dark:text-gray-200">{{ ch.title }}</span>
              <span class="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-slate-600 px-2 py-1 rounded-full">
                {{ ch.questions.count }} questions
              </span>
            </li>
          {% endfor %}
        </ul>
      </div>

      <!-- Total Questions -->
      <div class="flex items-center gap-2 p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        <span class="font-semibold text-emerald-700 dark:text-emerald-300">
          Total Available: {{ total_questions }} questions
        </span>
      </div>
    </div>

    <!-- Exam Configuration Form -->
    <form method="POST" action="{% url 'app:start_exam' %}" data-turbo="false" class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg p-6">
      {% csrf_token %}
      <input type="hidden" name="subject_id" value="{{ subject_id }}">
      <input type="hidden" name="chapter_ids" value="{{ chapter_ids_str }}">

      <!-- Exam Title -->
      <div class="mb-6">
        <label for="exam_title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          Exam Title
        </label>
        <input type="text" 
               id="exam_title" 
               name="exam_title"
               value="{{ title }}"
               class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
               placeholder="Give your exam a title"
               required>
      </div>

      <!-- Number of Questions -->
      <div class="mb-6">
        <label for="num_questions" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          Number of Questions
        </label>
        <input type="number" 
               id="num_questions" 
               name="num_questions"
               min="1" 
               max="{{ total_questions }}"
               class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
               placeholder="Enter number of questions"
               required>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Maximum: {{ total_questions }}</p>
      </div>

      <!-- Duration -->
      <div class="mb-8">
        <label for="duration_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          Duration (minutes)
        </label>
        <input type="number" 
               id="duration_minutes" 
               name="duration_minutes"
               min="1"
               class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
               placeholder="Enter exam duration in minutes"
               required>
      </div>

      <!-- Submit Button -->
      <button type="submit"
              class="w-full inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-4 rounded-xl font-semibold text-lg transition-colors shadow-lg hover:shadow-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Start Exam
      </button>
    </form>
  </div>
</turbo-frame>
{% endblock content %}