{% extends 'dashboard/base.html' %}
{% load static %}
{% load humanize %}

{% block title %}Subscribe to a Plan - Peza API{% endblock %}
{% block breadcrumb %}Subscribe to a Plan{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-6">
  <!-- Header -->
  <div class="mb-8">
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-gray-900">Choose Your Plan</h1>
        <p class="text-gray-600 mt-1">Select the perfect plan for your API needs</p>
      </div>
      {% if current_plan %}
      <div class="px-4 py-2 bg-blue-50 border border-blue-100 rounded-lg">
        <div class="text-sm text-blue-600">Current Plan</div>
        <div class="font-semibold text-blue-900">{{ current_plan.name }}</div>
      </div>
      {% endif %}
    </div>
  </div>

  {% if messages %}
  <div class="mb-6">
    {% for message in messages %}
    <div class="px-4 py-3 rounded-lg mb-2 {% if message.tags == 'success' %}bg-green-50 text-green-800 border border-green-200{% elif message.tags == 'error' %}bg-red-50 text-red-800 border border-red-200{% else %}bg-blue-50 text-blue-800 border border-blue-200{% endif %}">
      {{ message }}
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if not selected_plan %}
  <!-- Plan Selection -->
  <div class="grid lg:grid-cols-3 gap-6 mb-8 pt-12">
    {% for plan in plans %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:border-blue-300 transition-all duration-300 hover:shadow-md {% if forloop.counter == 2 %}border-2 border-blue-500 relative{% endif %}">
      {% if forloop.counter == 2 %}
      <div class="absolute top-2 left-1/2 transform -translate-x-1/2">
        <span class="px-4 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full flex items-center">
          <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
          </svg>
          Most Popular
        </span>
      </div>
      {% elif forloop.counter == 3 %}
      <div class="absolute top-2 left-1/2 transform -translate-x-1/2">
        <span class="px-4 py-1 bg-purple-500 text-white text-xs font-semibold rounded-full flex items-center">
          <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.2 6.5 10.266a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"/>
          </svg>
          Best Value
        </span>
      </div>
      {% endif %}
      
      <div class="mb-6">
        <h3 class="text-xl font-bold text-gray-900">{{ plan.name }}</h3>
        <p class="text-gray-600 text-sm mt-1">{{ plan.description }}</p>
      </div>
      
      <div class="mb-6">
        <div class="flex items-baseline">
          <span class="text-sm text-gray-500">MWK</span>
          <span class="text-4xl font-bold text-gray-900 ml-1">{{ plan.price_monthly|floatformat:0|intcomma }}</span>
          <span class="text-gray-500 ml-2">/month</span>
        </div>
      </div>
      
      <ul class="space-y-3 mb-8">
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
          <span class="text-gray-700">{{ plan.requests_per_month|default:"Unlimited" }} requests/month</span>
        </li>
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
          <span class="text-gray-700">Full API access</span>
        </li>
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
          <span class="text-gray-700">Email support</span>
        </li>
        {% if plan.price_monthly > 0 %}
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
          <span class="text-gray-700">Priority support</span>
        </li>
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
          <span class="text-gray-700">Advanced analytics</span>
        </li>
        {% endif %}
      </ul>
      
      <a href="{% url 'subscribe-plan' plan.id %}" class="block w-full text-center px-4 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
        Select Plan
      </a>
    </div>
    {% endfor %}
  </div>
  
  <!-- Current Usage Info -->
  {% if current_plan %}
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
    <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center">
      <svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
      </svg>
      Your Current Usage
    </h3>
    <div class="grid md:grid-cols-2 gap-6">
      <div>
        <div class="text-sm text-gray-600 mb-1">Plan Limit</div>
        <div class="text-2xl font-bold text-gray-900">{{ current_plan.requests_per_month|intcomma }} requests</div>
      </div>
      <div>
        <div class="text-sm text-gray-600 mb-1">Used This Month</div>
        <div class="text-2xl font-bold text-gray-900">{{ current_usage|default:0|intcomma }} requests</div>
      </div>
    </div>
  </div>
  {% endif %}
  
  {% else %}
  <!-- Payment Form -->
  <div class="grid lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
      <!-- Selected Plan Summary -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h2 class="text-xl font-bold text-gray-900">Selected Plan</h2>
            <p class="text-gray-600">Complete your payment to activate</p>
          </div>
          <div class="px-4 py-2 bg-blue-50 border border-blue-100 rounded-lg">
            <div class="text-lg font-bold text-blue-900">MWK {{ selected_plan.price_monthly|floatformat:0|intcomma }}</div>
            <div class="text-sm text-blue-600">per month</div>
          </div>
        </div>
        
        <div class="border-t border-gray-200 pt-4">
          <h3 class="text-lg font-semibold text-gray-900 mb-3">{{ selected_plan.name }}</h3>
          <p class="text-gray-700 mb-4">{{ selected_plan.description }}</p>
          
          <div class="grid md:grid-cols-2 gap-4">
            <div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
              <div class="flex items-center">
                <div class="p-2 bg-blue-100 rounded-lg mr-3">
                  <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                  </svg>
                </div>
                <div>
                  <div class="text-sm text-gray-500">Requests Limit</div>
                  <div class="font-semibold text-gray-900">{{ selected_plan.requests_per_month|intcomma }}/month</div>
                </div>
              </div>
            </div>
            
            <div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
              <div class="flex items-center">
                <div class="p-2 bg-green-100 rounded-lg mr-3">
                  <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                  </svg>
                </div>
                <div>
                  <div class="text-sm text-gray-500">Support Level</div>
                  <div class="font-semibold text-gray-900">
                    {% if selected_plan.price_monthly > 0 %}Priority{% else %}Standard{% endif %}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Payment Form -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center">
          <svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
          </svg>
          Complete Your Payment
        </h3>
        
     <!-- REPLACE the form section in subscribe.html with this -->
<form method="POST" id="paymentForm" class="space-y-6">
  {% csrf_token %}
  
  <div class="grid md:grid-cols-2 gap-4">
    <div class="space-y-2">
      <label class="block text-sm font-medium text-gray-700 mb-1">First Name *</label>
      <input type="text" 
             name="first_name" 
             id="id_first_name"
             value="{{ form.first_name.value|default:'' }}"
             class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             placeholder="Enter your first name"
             required>
      {% if form.first_name.errors %}
        <p class="text-red-600 text-sm">{{ form.first_name.errors.0 }}</p>
      {% endif %}
    </div>
    
    <div class="space-y-2">
      <label class="block text-sm font-medium text-gray-700 mb-1">Last Name *</label>
      <input type="text" 
             name="last_name" 
             id="id_last_name"
             value="{{ form.last_name.value|default:'' }}"
             class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             placeholder="Enter your last name"
             required>
      {% if form.last_name.errors %}
        <p class="text-red-600 text-sm">{{ form.last_name.errors.0 }}</p>
      {% endif %}
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="block text-sm font-medium text-gray-700 mb-1">Email Address *</label>
    <input type="email" 
           name="email" 
           id="id_email"
           value="{{ form.email.value|default:'' }}"
           class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
           placeholder="you@example.com"
           required>
    {% if form.email.errors %}
      <p class="text-red-600 text-sm">{{ form.email.errors.0 }}</p>
    {% endif %}
  </div>
  
  <!-- Hidden operator field that will be set by radio buttons -->
  <input type="hidden" name="operator_ref_id" id="id_operator_ref_id" value="">
  
  <!-- Mobile Number -->
  <div class="space-y-2">
    <label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number *</label>
    <div class="relative">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <span class="text-gray-500">+265</span>
      </div>
      <input type="tel" 
             name="mobile" 
             id="id_mobile"
             value="{{ form.mobile.value|default:'' }}"
             class="w-full pl-16 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             placeholder="99 123 4567"
             pattern="[0-9]{9}"
             maxlength="9"
             required>
    </div>
    <p class="text-xs text-gray-500">Enter 9 digits (e.g., 991234567 for Airtel or 881234567 for TNM)</p>
    {% if form.mobile.errors %}
      <p class="text-red-600 text-sm">{{ form.mobile.errors.0 }}</p>
    {% endif %}
  </div>
  
  <!-- Provider Selection Cards -->
  <div class="space-y-2">
    <label class="block text-sm font-medium text-gray-700 mb-2">Select Mobile Money Provider *</label>
    <!-- small provider logo display (used by JS) -->
    <div id="providerLogo" class="mb-3">
      <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
    </div>
    <div class="grid grid-cols-2 gap-3">
      {% for op in mobile_operators %}
      {% with op_ref=op.mobile_money_operator_ref_id|default:op.ref_id|default:op.id %}
      <label class="relative cursor-pointer">
        <input type="radio"
               name="operator_ref_id_radio"
               value="{{ op_ref }}"
               class="sr-only peer"
               required>
        <div class="p-4 border-2 border-gray-300 rounded-lg hover:border-blue-400 peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-200 transition-all relative">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 flex items-center justify-center bg-white rounded">
              {% if op.logo %}
                <img src="{{ op.logo }}" alt="{{ op.name }}" class="w-full h-full object-contain">
              {% elif 'airtel' in op.name|lower %}
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Airtel_logo-01.png/500px-Airtel_logo-01.png" alt="Airtel" class="w-full h-full object-contain">
              {% elif 'tnm' in op.name|lower %}
                <img src="https://play-lh.googleusercontent.com/SJ8QVBmZDtyOrCNWm--hhrscxB2jOQk70ieGvYszXJzxmXG1ZKLp4ux-4HcOM9cFYgg=w240-h480-rw" alt="{{ op.name }}" class="w-full h-full object-contain">
              {% else %}
                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
              {% endif %}
            </div>
            <div>
              <div class="font-medium text-gray-900">{{ op.name }}</div>
              <div class="text-xs text-gray-500">{{ op.description|default:'' }}</div>
            </div>
          </div>
          <!-- Checkmark when selected -->
          <div class="hidden peer-checked:block absolute top-2 right-2">
            <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
          </div>
        </div>
      </label>
      {% endwith %}
      {% empty %}
      <!-- Fallback to hardcoded providers if none available -->
      <div class="col-span-2 text-sm text-gray-600">No mobile money providers available. Please try again later.</div>
      {% endfor %}
    </div>
    {% if form.operator_ref_id.errors %}
      <p class="text-red-600 text-sm">{{ form.operator_ref_id.errors.0 }}</p>
    {% endif %}
  </div>
  
  <!-- Hidden fields for amount and plan -->
  <input type="hidden" name="amount" value="{{ selected_plan.price_monthly }}">
  <input type="hidden" name="plan_id" value="{{ selected_plan.id }}">
  
  <!-- Submit Button -->
  <button type="submit" 
          class="w-full px-4 py-3.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" 
          id="payBtn">
    <div class="flex items-center justify-center">
      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
      </svg>
      Pay MWK {{ selected_plan.price_monthly|floatformat:0|intcomma }}
    </div>
  </button>
  
  <!-- Display all form errors -->
  {% if form.non_field_errors %}
    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
      {% for error in form.non_field_errors %}
        <p class="text-red-600 text-sm">{{ error }}</p>
      {% endfor %}
    </div>
  {% endif %}
</form>

<!-- Add custom CSS for better styling -->
<style>
/* Provider logo styling */
.provider-logo.airtel {
  color: #E60000;
}

.provider-logo.tnm {
  color: #00A859;
}

/* Provider card styling */
label:hover .provider-card {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Custom checkmark for radio selection */
.peer-checked + div::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background-color: var(--primary);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Better select dropdown styling */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Image container styling */
.provider-img-container {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--border);
}

.provider-img-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Smooth transitions */
input, select, [class*="peer-checked"] {
  transition: all 0.2s ease-in-out;
}
</style>

<script>
// JavaScript to sync radio buttons with select dropdown and update logos
document.addEventListener('DOMContentLoaded', function() {
  const selectElement = document.getElementById('id_operator_ref_id');
  const providerLogo = document.getElementById('providerLogo');
  const radioButtons = document.querySelectorAll('input[name="operator_ref_id_radio"]');
  
  // Function to update logo in dropdown based on provider
  function updateProviderLogo(provider) {
    if (!providerLogo) return;
    if (provider === 'airtel') {
      providerLogo.innerHTML = `
        <div class="w-6 h-6 flex items-center justify-center">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Airtel_logo-01.png/500px-Airtel_logo-01.png" 
               alt="Airtel" 
               class="w-full h-full object-contain"
               onerror="this.onerror=null; this.src='https://play-lh.googleusercontent.com/SJ8QVBmZDtyOrCNWm--hhrscxB2jOQk70ieGvYszXJzxmXG1ZKLp4ux-4HcOM9cFYgg=w240-h480-rw';">
        </div>
      `;
    } else if (provider === 'tnm') {
      providerLogo.innerHTML = `
        <div class="w-6 h-6 flex items-center justify-center">
          <img src="https://play-lh.googleusercontent.com/SJ8QVBmZDtyOrCNWm--hhrscxB2jOQk70ieGvYszXJzxmXG1ZKLp4ux-4HcOM9cFYgg=w240-h480-rw" 
               alt="TNM" 
               class="w-full h-full object-contain"
               onerror="this.onerror=null; this.src='https://play-lh.googleusercontent.com/SJ8QVBmZDtyOrCNWm--hhrscxB2jOQk70ieGvYszXJzxmXG1ZKLp4ux-4HcOM9cFYgg=w240-h480-rw';">
        </div>
      `;
    } else {
      providerLogo.innerHTML = `
        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      `;
    }
  }
  
  // Update logo when select changes
  selectElement.addEventListener('change', function() {
    updateProviderLogo(this.value);
    
    // Sync with radio buttons
    radioButtons.forEach(radio => {
      radio.checked = radio.value === this.value;
    });
  });
  
  // Sync radio buttons with select
  radioButtons.forEach(radio => {
    radio.addEventListener('change', function() {
      selectElement.value = this.value;
      updateProviderLogo(this.value);
    });
  });
  
  // Initialize logo
  updateProviderLogo(selectElement.value);
  
  // Also sync hidden form field with radio buttons on form submit
  document.getElementById('paymentForm').addEventListener('submit', function(e) {
    const selectedRadio = document.querySelector('input[name="operator_ref_id_radio"]:checked');
    if (selectedRadio) {
      selectElement.value = selectedRadio.value;
    }
  });
});
</script>
      </div>
    </div>
    
    <!-- Sidebar -->
    <aside class="space-y-6">
      <!-- Payment Instructions -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h4 class="text-sm font-medium text-gray-700 mb-4 flex items-center">
          <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          Payment Instructions
        </h4>
        <ol class="space-y-3">
          <li class="flex items-start">
            <span class="flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-xs font-semibold mr-3 flex-shrink-0">1</span>
            <span class="text-sm text-gray-600">Fill in your billing information</span>
          </li>
          <li class="flex items-start">
            <span class="flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-xs font-semibold mr-3 flex-shrink-0">2</span>
            <span class="text-sm text-gray-600">Choose your mobile money provider</span>
          </li>
          <li class="flex items-start">
            <span class="flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-xs font-semibold mr-3 flex-shrink-0">3</span>
            <span class="text-sm text-gray-600">Enter your phone number (9 digits)</span>
          </li>
          <li class="flex items-start">
            <span class="flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-xs font-semibold mr-3 flex-shrink-0">4</span>
            <span class="text-sm text-gray-600">Click "Pay" and wait for the phone prompt</span>
          </li>
          <li class="flex items-start">
            <span class="flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-xs font-semibold mr-3 flex-shrink-0">5</span>
            <span class="text-sm text-gray-600">Enter your PIN to authorize the payment</span>
          </li>
        </ol>
      </div>
      
      <!-- Important Notice -->
      <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
        <div class="flex items-center mb-3">
          <svg class="w-5 h-5 text-yellow-600 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.998-.833-2.732 0L4.346 16.5c-.77.833.192 2.5 1.732 2.5z"/>
          </svg>
          <h4 class="text-sm font-medium text-yellow-700">Important Notice</h4>
        </div>
        <p class="text-xs text-yellow-600">
          <strong>Stay on this page</strong> after clicking "Pay" - we'll track your payment automatically. 
          Do not close the browser until payment is confirmed.
        </p>
      </div>
      
      <!-- Need Help? -->
      <div class="bg-gray-50 border border-gray-200 rounded-xl p-6">
        <h4 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
          <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          Need Help?
        </h4>
        <p class="text-xs text-gray-600 mb-3">Having issues with payment?</p>
        <a href="mailto:support@pezaapi.com" class="inline-flex items-center text-sm text-blue-600 hover:text-blue-700">
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
          Contact Support
        </a>
      </div>
    </aside>
  </div>
  {% endif %}
</main>

<!-- Payment Status Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" id="paymentModal">
  <div class="flex items-center justify-center min-h-screen p-4">
    <div class="bg-white rounded-xl shadow-xl max-w-md w-full">
      <!-- Loading State -->
      <div id="loadingState" class="p-8">
        <div class="text-center">
          <div class="w-16 h-16 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mx-auto mb-4"></div>
          <h2 class="text-xl font-bold text-gray-900 mb-2">Processing Payment</h2>
          <p class="text-gray-600">Please wait while we initialize your payment...</p>
        </div>
      </div>

      <!-- Pending/Polling State -->
      <div id="pendingState" class="p-8 hidden">
        <div class="text-center">
          <div class="w-16 h-16 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mx-auto mb-4"></div>
          <h2 class="text-xl font-bold text-gray-900 mb-2">Check Your Phone</h2>
          <p class="text-gray-600 mb-4">A payment prompt has been sent to your mobile device</p>
          
          <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6 text-left">
            <div class="flex items-start">
              <svg class="w-5 h-5 text-yellow-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              <div>
                <div class="text-sm font-medium text-yellow-700 mb-1">Action Required:</div>
                <p class="text-xs text-yellow-600">Enter your mobile money PIN on your phone to complete the payment</p>
              </div>
            </div>
          </div>

          <div class="bg-blue-50 rounded-lg p-4 mb-4">
            <p class="text-sm text-blue-600 mb-2">
              Checking payment status... Attempt <span id="pollAttempt">0</span> of <span id="pollMaxAttempts">10</span>
            </p>
            <div class="text-2xl font-bold text-blue-900 mb-1">
              <span id="timeRemaining">30</span>s
            </div>
            <div class="text-xs text-blue-600">Time remaining</div>
          </div>

          <p class="text-sm text-gray-500">
            Do not close this window. We're automatically checking your payment status.
          </p>
        </div>
      </div>

      <!-- Success State -->
      <div id="successState" class="p-8 hidden">
        <div class="text-center">
          <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
          </div>
          <h2 class="text-xl font-bold text-green-600 mb-2">Payment Successful!</h2>
          <p class="text-gray-600 mb-6">Your subscription has been activated successfully</p>
          
          <button class="w-full px-4 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors" onclick="window.location.href='{% url 'developer-dashboard' %}'">
            Go to Dashboard
          </button>
        </div>
      </div>

      <!-- Error State -->
      <div id="errorState" class="p-8 hidden">
        <div class="text-center">
          <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <h2 class="text-xl font-bold text-red-600 mb-2">Payment Failed</h2>
          <p class="text-gray-600 mb-2" id="errorMessage">Something went wrong. Please try again.</p>
          
          <div class="flex space-x-3 mt-6">
            <button class="flex-1 px-4 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors" onclick="closeModal()">
              Try Again
            </button>
            <button class="flex-1 px-4 py-3 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition-colors" onclick="window.location.href='{% url 'billing-history' %}'">
              View History
            </button>
          </div>
        </div>
      </div>

      <!-- Cancelled State -->
      <div id="cancelledState" class="p-8 hidden">
        <div class="text-center">
          <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <h2 class="text-xl font-bold text-yellow-600 mb-2">Payment Cancelled</h2>
          <p class="text-gray-600 mb-6">You cancelled the payment on your phone</p>
          
          <button class="w-full px-4 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors" onclick="closeModal()">
            Try Again
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

{% block extra_js %}
<script>
// Payment status tracking - use var so reloading script doesn't throw redeclaration errors
var currentTransactionId = window.currentTransactionId || null;
var pollAttempts = typeof window.pollAttempts !== 'undefined' ? window.pollAttempts : 0;
var pollTimeout = window.pollTimeout || null;
var countdownInterval = window.countdownInterval || null;
var pollInterval = window.pollInterval || 3000;
var maxTime = window.maxTime || 30;
var maxPollAttempts = window.maxPollAttempts || Math.ceil((maxTime * 1000) / pollInterval);
var pollStartedAt = window.pollStartedAt || null;
var isPolling = window.isPolling || false;
var isSubmittingPayment = window.isSubmittingPayment || false;

function showModalState(state) {
    const states = ['loadingState', 'pendingState', 'successState', 'errorState', 'cancelledState'];
    states.forEach(s => {
        const element = document.getElementById(s);
        if (element) {
            element.classList.add('hidden');
        }
    });
    
    const currentState = document.getElementById(state);
    if (currentState) {
        currentState.classList.remove('hidden');
    }
    
    document.getElementById('paymentModal').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('paymentModal').classList.add('hidden');
    if (pollTimeout) {
        clearTimeout(pollTimeout);
        pollTimeout = null;
    }
    if (countdownInterval) {
        clearInterval(countdownInterval);
        countdownInterval = null;
    }
    pollAttempts = 0;
    pollStartedAt = null;
    isPolling = false;
    isSubmittingPayment = false;
    
    const payBtn = document.getElementById('payBtn');
    if (payBtn) {
        payBtn.disabled = false;
        payBtn.innerHTML = `
          <div class="flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
            </svg>
            Pay MWK {{ selected_plan.price_monthly|floatformat:0|intcomma }}
          </div>
        `;
    }
}

function startCountdown() {
    let timeLeft = maxTime;
    const timeDisplay = document.getElementById('timeRemaining');
    if (!timeDisplay) return;
    timeDisplay.textContent = timeLeft;
    
    countdownInterval = setInterval(() => {
        timeLeft--;
        timeDisplay.textContent = Math.max(timeLeft, 0);
        
        if (timeLeft <= 0) {
            clearInterval(countdownInterval);
            countdownInterval = null;
        }
    }, 1000);
}

async function pollPaymentStatus() {
    if (!currentTransactionId) {
        isPolling = false;
        return;
    }

    const timedOut = pollStartedAt && ((Date.now() - pollStartedAt) >= (maxTime * 1000));
    if (timedOut || pollAttempts >= maxPollAttempts) {
        if (pollTimeout) {
            clearTimeout(pollTimeout);
            pollTimeout = null;
        }
        if (countdownInterval) {
            clearInterval(countdownInterval);
            countdownInterval = null;
        }
        isPolling = false;
        const errorMessage = document.getElementById('errorMessage');
        if (errorMessage) {
            errorMessage.textContent = 
                'Payment verification timed out after 30 seconds. Please check billing history before retrying.';
        }
        showModalState('errorState');
        return;
    }

    pollAttempts++;
    const pollAttemptElement = document.getElementById('pollAttempt');
    if (pollAttemptElement) {
        pollAttemptElement.textContent = pollAttempts;
    }

    try {
        const response = await fetch(`/payments/check/${currentTransactionId}/`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();

        switch(data.status) {
            case 'success':
                if (pollTimeout) clearTimeout(pollTimeout);
                if (countdownInterval) clearInterval(countdownInterval);
                pollTimeout = null;
                countdownInterval = null;
                isPolling = false;
                showModalState('successState');
                setTimeout(() => {
                    window.location.href = '/dashboard/';
                }, 3000);
                break;

            case 'failed':
                if (pollTimeout) clearTimeout(pollTimeout);
                if (countdownInterval) clearInterval(countdownInterval);
                pollTimeout = null;
                countdownInterval = null;
                isPolling = false;
                const errorMsg = document.getElementById('errorMessage');
                if (errorMsg) {
                    errorMsg.textContent = 
                        data.message || 'Payment failed. Please try again.';
                }
                showModalState('errorState');
                break;

            case 'cancelled':
                if (pollTimeout) clearTimeout(pollTimeout);
                if (countdownInterval) clearInterval(countdownInterval);
                pollTimeout = null;
                countdownInterval = null;
                isPolling = false;
                showModalState('cancelledState');
                break;

            case 'pending':
                pollTimeout = setTimeout(pollPaymentStatus, pollInterval);
                break;

            default:
                pollTimeout = setTimeout(pollPaymentStatus, pollInterval);
        }

    } catch (error) {
        console.error('Poll error:', error);
        
        if (pollAttempts < maxPollAttempts) {
            pollTimeout = setTimeout(pollPaymentStatus, pollInterval);
        } else {
            if (countdownInterval) {
                clearInterval(countdownInterval);
                countdownInterval = null;
            }
            isPolling = false;
            const errorMsg = document.getElementById('errorMessage');
            if (errorMsg) {
                errorMsg.textContent = 
                    'Unable to verify payment. Please check your billing history.';
            }
            showModalState('errorState');
        }
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const maxAttemptsDisplay = document.getElementById('pollMaxAttempts');
    if (maxAttemptsDisplay) {
        maxAttemptsDisplay.textContent = maxPollAttempts;
    }

    // Hide modal initially
    const modal = document.getElementById('paymentModal');
    if (modal) {
        modal.classList.add('hidden');
    }
    
  // Provider selection sync
  const selectElement = document.getElementById('id_operator_ref_id');
  const radioButtons = document.querySelectorAll('input[name="operator_ref_id_radio"]');
  const providerLogo = document.getElementById('providerLogo');
    
    function updateProviderLogo(provider) {
        if (!providerLogo) return;
        
        if (provider === 'airtel' || provider === '1') {
            providerLogo.innerHTML = `
                <div class="w-6 h-6 flex items-center justify-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Airtel_logo-01.png/500px-Airtel_logo-01.png" 
                         alt="Airtel" 
                         class="w-full h-full object-contain">
                </div>
            `;
        } else if (provider === 'tnm' || provider === '2') {
            providerLogo.innerHTML = `
                <div class="w-6 h-6 flex items-center justify-center">
                    <img src="https://play-lh.googleusercontent.com/SJ8QVBmZDtyOrCNWm--hhrscxB2jOQk70ieGvYszXJzxmXG1ZKLp4ux-4HcOM9cFYgg=w240-h480-rw" 
                         alt="TNM" 
                         class="w-full h-full object-contain">
                </div>
            `;
        }
    }
    
    // Sync radio buttons with hidden field
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            if (selectElement) {
                selectElement.value = this.value;
            }
            updateProviderLogo(this.value);
        });
    });
    
    // Initialize logo
    if (selectElement && selectElement.value) {
        updateProviderLogo(selectElement.value);
    }
    
    // Form submission
    const paymentForm = document.getElementById('paymentForm');
    if (paymentForm && !paymentForm.dataset.handlerBound) {
        paymentForm.dataset.handlerBound = '1';
        paymentForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            if (isSubmittingPayment) {
                return;
            }
            isSubmittingPayment = true;
            
            // Validate operator is selected
            const selectedRadio = document.querySelector('input[name="operator_ref_id_radio"]:checked');
            if (!selectedRadio) {
                isSubmittingPayment = false;
                alert('Please select a mobile money provider (Airtel or TNM)');
                return;
            }
            
            // Set hidden field value
            if (selectElement) {
                selectElement.value = selectedRadio.value;
            }
            
            const payBtn = document.getElementById('payBtn');
            if (payBtn) {
                payBtn.disabled = true;
                payBtn.innerHTML = `
                  <div class="flex items-center justify-center">
                    <svg class="w-5 h-5 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                    Processing...
                  </div>
                `;
            }
            
            showModalState('loadingState');
            
            const formData = new FormData(this);
            
            try {
                const response = await fetch(this.action || window.location.href, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                const responseText = await response.text();
                let data;
                
                try {
                    data = JSON.parse(responseText);
                } catch (parseError) {
                    console.error('Response text:', responseText);
                    throw new Error('Server returned invalid response. Please try again.');
                }

                if (data.status === 'success' && data.transaction_id) {
                    currentTransactionId = data.transaction_id;
                    pollAttempts = 0;
                    pollStartedAt = Date.now();
                    
                    showModalState('pendingState');
                    if (countdownInterval) {
                        clearInterval(countdownInterval);
                        countdownInterval = null;
                    }
                    startCountdown();
                    
                    if (!isPolling) {
                        isPolling = true;
                        pollTimeout = setTimeout(pollPaymentStatus, 2000);
                    }
                } else if (data.status === 'error') {
                    throw new Error(data.message || 'Payment initialization failed');
                } else {
                    throw new Error(data.message || 'Unexpected response from server');
                }

            } catch (error) {
                console.error('Payment error:', error);
                const errorMsg = document.getElementById('errorMessage');
                if (errorMsg) {
                    errorMsg.textContent = error.message || 'Failed to initiate payment. Please try again.';
                }
                showModalState('errorState');
            } finally {
                isSubmittingPayment = false;
            }
        });
    }
});

// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    if (pollTimeout) clearTimeout(pollTimeout);
    if (countdownInterval) clearInterval(countdownInterval);
});
</script>
{% endblock %}
{% endblock %}