{% load bangla_numbers %}

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 px-4 sm:px-6 lg:px-8">

  <!-- Progress Report Section -->
  <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-200 dark:border-slate-700 overflow-hidden">
    <div class="p-5 border-b border-gray-100 dark:border-slate-700">
      <div class="flex justify-between items-center">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Progress Report</h2>
        <a href="{% url 'app:total_results_page' %}" data-turbo-frame="main" 
           class="text-sm text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 font-medium">
          View All →
        </a>
      </div>
    </div>
    
    <div class="p-5 max-h-72 overflow-auto">
      {% if all_exam_results %}
      <table class="w-full">
        <thead>
          <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <th class="pb-3">Subject</th>
            <th class="pb-3">Score</th>
            <th class="pb-3">Time</th>
            <th class="pb-3 text-right">Action</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
          {% for result in all_exam_results %}
          <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors">
            <td class="py-3">
              <span class="font-medium text-gray-800 dark:text-white">{{ result.exam.subject.name }}</span>
            </td>
            <td class="py-3">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if result.score >= 80 %}bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400{% elif result.score >= 50 %}bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400{% else %}bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400{% endif %}">
                {{ result.score }}%
              </span>
            </td>
            <td class="py-3 text-gray-600 dark:text-gray-400 text-sm">
              {{ result.time_taken_seconds }}s
            </td>
            <td class="py-3 text-right">
              <a href="{% url 'app:exam_results' result.exam.id %}" data-turbo-frame="main" 
                 class="text-green-600 dark:text-green-400 hover:text-green-700 text-sm font-medium">
                Details
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="flex flex-col items-center justify-center py-8 text-center">
        <svg class="w-12 h-12 text-gray-300 dark:text-slate-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <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>
        <p class="text-gray-500 dark:text-gray-400">No exam results found</p>
        <a href="{% url 'app:mcq_test' %}" data-turbo-frame="main" class="mt-3 text-green-600 dark:text-green-400 font-medium text-sm hover:underline">
          Take your first test →
        </a>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Active Subscriptions Section -->
  <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-200 dark:border-slate-700 overflow-hidden">
    <div class="p-5 border-b border-gray-100 dark:border-slate-700">
      <div class="flex justify-between items-center">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Active Subscriptions</h2>
        <a href="{% url 'subscription' %}" data-turbo-frame="main" data-turbo-action="advance"
           class="text-sm text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 font-medium">
          View Plans →
        </a>
      </div>
    </div>
    
    <div class="p-5 max-h-72 overflow-auto">
      {% if empty_subscription %}
      <div class="flex flex-col items-center justify-center py-8 text-center">
        <svg class="w-12 h-12 text-gray-300 dark:text-slate-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
        </svg>
        <p class="text-gray-500 dark:text-gray-400">No active subscriptions</p>
        <a href="{% url 'subscription' %}" data-turbo-frame="main" data-turbo-action="advance" 
           class="mt-3 text-green-600 dark:text-green-400 font-medium text-sm hover:underline">
          Browse plans →
        </a>
      </div>
      {% else %}
      <div class="space-y-3">
        {% for a in bundle_subscription %}
        <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-slate-700/50 rounded-xl border border-gray-100 dark:border-slate-600 hover:border-green-200 dark:hover:border-green-700 transition-colors">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
            </div>
            <span class="font-medium text-gray-800 dark:text-white">{{ a.bundle_subscription_details.title }}</span>
          </div>
          <a href="{% url 'app:mcq_test' %}" data-turbo-frame="main" 
             class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-lg transition-colors">
            Start Test
          </a>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</div>