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

{% block title %}Annual Subscription - PassMCQ{% endblock title %}

{% block content %}
<div class="bg-gray-50 dark:bg-slate-900 w-full min-h-screen">
  <div class="w-[90%] md:w-[80%] max-w-[1280px] mx-auto py-8 md:py-12">
    
    <!-- Header -->
    <div class="text-center mb-10">
      <h1 class="text-2xl md:text-3xl xl:text-4xl font-bold text-gray-800 dark:text-white">
        Annual <span class="text-amber-600 dark:text-amber-400">Subscription</span>
      </h1>
      <p class="mt-4 text-gray-600 dark:text-gray-400">
        Get full year access to all subjects in your class level
      </p>
    </div>

    <!-- Subscription Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {% for a in annual_subscription %}
      <div class="flex flex-col bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
        
        <!-- Image Container 16:9 -->
        <div class="relative w-full" style="padding-bottom: 56.25%;">
          {% if a.image %}
          <img src="{{ a.image.url }}" alt="{{ a.title }}"
               class="absolute inset-0 w-full h-full object-cover"/>
          {% else %}
          <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-white/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          {% endif %}
        </div>

        <div class="flex flex-col flex-grow p-6">
        <div class="flex-grow">
          <h2 class="text-xl md:text-2xl font-bold text-amber-600 dark:text-amber-400">{{ a.title }}</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-3">{{ a.description }}</p>

          <div class="mt-5">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">What's Included:</h3>
            <ul class="space-y-2">
              {% for key in a.keys.all %}
              <li class="flex items-start gap-2 text-sm text-gray-600 dark:text-gray-400">
                <svg class="h-4 w-4 text-emerald-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                {{ key.key }}
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>

          <div class="flex flex-row justify-between items-center mt-6 pt-4 border-t border-gray-100 dark:border-slate-700">
          <span class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
            {% if a.price == 0 %}
              Free
            {% else %}
              ৳{{ a.price }}
            {% endif %}
          </span>

          {% if a.price == 0 %}
          <form action="{% url 'free_subscription' 'annual' a.id %}"
                method="POST"
                data-turbo-frame="mainContent"
                data-turbo="false"
                class="subscription-form"
                onsubmit="handleLoadingForm(event, this)">
            {% csrf_token %}
            <button type="submit"
                    class="submit-btn inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-5 py-2.5 rounded-xl font-medium transition-colors">
              <svg class="hidden animate-spin h-5 w-5 text-white spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
              </svg>
              <span class="submit-label">Subscribe Free</span>
            </button>
          </form>
          {% else %}
          <a href="{% url 'app:checkout_annual' a.id %}"
             class="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-5 py-2.5 rounded-xl font-medium transition-colors"
             data-turbo-frame="mainContent"
             data-turbo-action="advance">
            Subscribe Now
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
          {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock content %}

{% block script_link %}
<script>
  function handleLoadingForm(event, form) {
    const submitBtn = form.querySelector(".submit-btn");
    const spinner = submitBtn.querySelector(".spinner");
    const label = submitBtn.querySelector(".submit-label");

    submitBtn.disabled = true;
    spinner.classList.remove("hidden");
    label.textContent = "Processing...";
  }
</script>
{% endblock script_link %}