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

{% block title %}MCQ Test - PassMCQ{% endblock title %}

{% block scriptcode %}
<script src="https://cdn.skypack.dev/@hotwired/turbo"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle filter modal
    const filterBtn = document.getElementById('filterBtn');
    const filterModal = document.getElementById('filterModal');
    const closeModal = document.getElementById('closeModal');
    
    filterBtn.addEventListener('click', function() {
        filterModal.classList.remove('hidden');
    });
    
    closeModal.addEventListener('click', function() {
        filterModal.classList.add('hidden');
    });
    
    // Close modal when clicking outside
    filterModal.addEventListener('click', function(e) {
        if (e.target === filterModal) {
            filterModal.classList.add('hidden');
        }
    });
});
</script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');
    
    @keyframes float {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(30px, -30px) rotate(120deg); }
        66% { transform: translate(-20px, 20px) rotate(240deg); }
    }
    
    @keyframes pulse-slow {
        0%, 100% { opacity: 0.2; transform: scale(1); }
        50% { opacity: 0.3; transform: scale(1.05); }
    }
    
    .subject-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .subject-card:hover {
        transform: translateY(-8px) scale(1.02);
    }
</style>
{% endblock scriptcode %}

{% block content %}
<div class="relative bg-gradient-to-br from-gray-50 via-blue-50/30 to-purple-50/30 dark:from-slate-900 dark:via-slate-900 dark:to-slate-800 w-full min-h-[90vh] pb-20 overflow-hidden transition-colors">
  
  <!-- Animated Background Blobs -->
  <div class="absolute top-0 left-0 w-96 h-96 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full opacity-20 blur-3xl animate-float"></div>
  <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full opacity-20 blur-3xl animate-pulse-slow"></div>
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-full opacity-15 blur-3xl"></div>
  
  <!-- Filter Button with Glass Morphism -->
  <button id="filterBtn" class="absolute left-4 sm:left-6 lg:left-8 top-4 z-20 bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl p-3 rounded-xl shadow-lg hover:shadow-2xl border border-gray-200/50 dark:border-slate-700/50 hover:scale-110 transition-all group">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600 dark:text-gray-300 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
    </svg>
  </button>

  <!-- Filter Modal with Modern Design -->
  <!-- Filter Modal with Modern Design -->
  <div id="filterModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="bg-white/90 dark:bg-slate-800/90 backdrop-blur-xl rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl border border-gray-200/50 dark:border-slate-700/50">
      <div class="flex justify-between items-center mb-6">
        <h3 class="text-xl font-bold bg-gradient-to-r from-emerald-600 to-blue-600 dark:from-emerald-400 dark:to-blue-400 bg-clip-text text-transparent">Filter Subscriptions</h3>
        <button id="closeModal" class="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-xl transition-all hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="space-y-2">
        <a href="?subscription=" 
           class="block px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 {% if not selected_subscription %}bg-gradient-to-r from-emerald-50 to-green-50 dark:from-emerald-900/30 dark:to-green-900/30 text-emerald-700 dark:text-emerald-400 font-semibold border border-emerald-200 dark:border-emerald-700{% else %}hover:bg-gray-50 dark:hover:bg-slate-700{% endif %} transition-all">
          All Subscriptions
        </a>
        {% for title in subscription_titles %}
        <a href="?subscription={{ title|urlencode }}" 
           class="block px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 {% if selected_subscription == title %}bg-gradient-to-r from-emerald-50 to-green-50 dark:from-emerald-900/30 dark:to-green-900/30 text-emerald-700 dark:text-emerald-400 font-semibold border border-emerald-200 dark:border-emerald-700{% else %}hover:bg-gray-50 dark:hover:bg-slate-700{% endif %} transition-all">
          {{ title }}
        </a>
        {% endfor %}
      </div>
    </div>
  </div>

  <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <turbo-frame id="mcqContent">
      <!-- Header with Gradient Text -->
      <div class="text-center mb-8">
        <h2 class="text-3xl lg:text-4xl font-bold mb-2">
          <span class="bg-gradient-to-r from-emerald-600 via-blue-600 to-purple-600 dark:from-emerald-400 dark:via-blue-400 dark:to-purple-400 bg-clip-text text-transparent">
            Select Exam Subject
          </span>
        </h2>
        <p class="text-gray-600 dark:text-gray-400">Choose a subject to start practicing</p>
      </div>

      <!-- Progress Indicator -->
      <div class="grid grid-cols-3 gap-3 py-6 max-w-md mx-auto">
        <div class="w-full h-2 bg-gradient-to-r from-emerald-500 to-green-500 rounded-full shadow-lg"></div>
        <div class="w-full h-2 bg-gray-300 dark:bg-slate-600 rounded-full"></div>
        <div class="w-full h-2 bg-gray-300 dark:bg-slate-600 rounded-full"></div>
      </div>

      {% if subscribed_subjects %}
      <div class="space-y-8">
        {% regroup subscribed_subjects by subscription_title as subscription_groups %}
        {% for group in subscription_groups %}
        <div class="space-y-4">
          <h3 class="text-lg font-semibold ml-2 text-gray-700 dark:text-gray-300 flex items-center gap-2">
            <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
            </svg>
            {{ group.grouper }}
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for item in group.list %}
            <a href="{% url 'app:mcq_chapter_page' item.subject.id %}"
              data-turbo-frame="mcqContent"
              class="subject-card group relative block bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden
                     border {{ item.color.border }} transition-all">
              <div class="absolute inset-0 bg-gradient-to-br {{ item.color.from }} {{ item.color.to }} opacity-5 group-hover:opacity-10 transition-opacity"></div>
              <div class="relative p-5 flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl {{ item.color.bg }} flex items-center justify-center flex-shrink-0 shadow-inner">
                  <svg class="w-6 h-6 {{ item.color.text }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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>
                </div>
                <div class="flex-1">
                  <div class="font-semibold text-gray-800 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">
                    {{ item.subject.name }}
                  </div>
                  {% if item.class_level %}
                  <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-1">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"/>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
                    </svg>
                    Class: {{ item.class_level.name }}
                  </div>
                  {% endif %}
                </div>
                <svg class="w-5 h-5 text-gray-400 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transform group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
              </div>
            </a>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <!-- Empty State with Modern Design -->
      <div class="flex flex-col gap-6 w-full justify-center items-center py-12">
        <div class="relative">
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-blue-500 rounded-full blur-2xl opacity-20"></div>
          <div class="relative bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm p-8 rounded-3xl shadow-2xl border border-gray-200/50 dark:border-slate-700/50">
            <svg class="w-20 h-20 mx-auto text-gray-300 dark:text-slate-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white mb-2">
              No Active Subscription
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mb-6">
              Subscribe to a plan to access practice tests
            </p>
            <a href="{% url 'subscription' %}" data-turbo='false' 
               class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-emerald-500 via-green-500 to-emerald-600 hover:from-emerald-600 hover:via-green-600 hover:to-emerald-700 text-white text-lg font-semibold rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
              </svg>
              Browse Plans
            </a>
          </div>
        </div>
      </div>
      {% endif %}
    </turbo-frame>
  </div>
</div>
{% endblock content %}