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

{% block title %}Select Chapter - PassMCQ{% endblock %}

{% block content %}
<turbo-frame id="mcqContent">
  <div class="max-w-4xl mx-auto p-4 md:p-6">
    <!-- Header -->
    <h2 class="text-2xl lg:text-3xl font-bold text-center mb-6 text-gray-800 dark:text-white">
      Select Chapters
    </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-gray-300 dark:bg-gray-600 rounded-full"></div>
    </div>

    <!-- Subject Info -->
    <div class="flex flex-wrap justify-between items-center mb-6 gap-4">
      <h1 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white">{{ subject.name }}</h1>
      <p class="text-base text-gray-600 dark:text-gray-400">
        Total <strong class="text-emerald-600 dark:text-emerald-400">{{ subject_question_count }}</strong> questions
      </p>
    </div>

    <!-- Chapter Selection Form -->
    <form method="GET" action="{% url 'app:preview_page' %}" data-turbo-frame="mcqContent">
      <input type="hidden" name="subject" value="{{ subject.id }}">
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-24">
        {% for chapter in chapters %}
          <label class="flex items-center gap-3 bg-white dark:bg-slate-800 p-4 rounded-xl border border-gray-200 dark:border-slate-600 hover:shadow-lg hover:border-emerald-300 dark:hover:border-emerald-600 cursor-pointer transition-all duration-200 group">
            <input type="checkbox"
                   name="chapters"
                   value="{{ chapter.id }}"
                   class="w-5 h-5 text-emerald-600 bg-gray-100 dark:bg-slate-700 border-gray-300 dark:border-slate-500 rounded focus:ring-emerald-500 focus:ring-2">
            <div class="flex justify-between items-center w-full">
              <span class="text-gray-800 dark:text-gray-200 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">
                {{ chapter.title }}
              </span>
              <span class="text-sm text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-slate-700 px-2 py-1 rounded-full">
                {{ chapter.question_count }} Q
              </span>
            </div>
          </label>
        {% empty %}
          <div class="col-span-2 text-center py-8 text-gray-500 dark:text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
            <p>No chapters available</p>
          </div>
        {% endfor %}
      </div>

      <!-- Fixed Bottom Button -->
      <div class="fixed bottom-16 lg:bottom-0 left-0 right-0 bg-white dark:bg-slate-800 shadow-[0_-4px_20px_rgba(0,0,0,0.1)] py-4 px-6 z-40">
        <div class="max-w-4xl mx-auto flex justify-end">
          <button type="submit"
                  class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-3 rounded-xl font-medium transition-colors shadow-md hover:shadow-lg">
            Next Step
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </button>
        </div>
      </div>
    </form>
  </div>
</turbo-frame>
{% endblock content %}