{% extends 'base.html' %}

{% block content %}
<div class="container py-2">
  <!-- Header Section -->
  <div class="row mb-2">
    <div class="col-lg-8">
      <div class="mb-1">
        <a href="javascript:history.back()" class="text-decoration-none text-muted mb-1 d-inline-block btn btn-outline-secondary btn-sm" style="border-radius: 12px; padding: 6px 12px; transition: all 0.3s ease;">
          <i class="fas fa-arrow-left me-2"></i>Back
        </a>
      </div>
      <h4 class="display-6 fw-bold mb-2">Secure Checkout</h4>
      <p class="lead text-muted">Complete your subscription to unlock premium access</p>
    </div>
  </div>

  <div class="row g-4">
    <!-- Main Content Column -->
    <div class="col-lg-8">
      <!-- Plan Details Card -->
      <div class="card glass-card border-0 shadow-lg mb-4" style="border-radius: 20px;">
        <div class="card-body p-3">
          <h5 class="text-muted text-uppercase fw-bold mb-3" style="letter-spacing: 1px;">
            <i class="fas fa-check-circle text-success me-2"></i>Selected Plan
          </h5>
          
          <div class="d-flex align-items-start justify-content-between mb-4">
            <div>
              <h2 class="fw-bold mb-2" style="color: var(--primary);">{{ plan.name }}</h2>
              <p class="text-muted mb-3">{{ plan.description }}</p>
              
              <!-- Plan Features -->
              <div class="mt-4">
                <div class="d-flex align-items-center mb-3">
                  <i class="fas fa-infinity text-success me-3" style="font-size: 1.2rem;"></i>
                  <span>Unlimited access to all content</span>
                </div>
                <div class="d-flex align-items-center mb-3">
                  <i class="fas fa-star text-warning me-3" style="font-size: 1.2rem;"></i>
                  <span>Priority support</span>
                </div>
                <div class="d-flex align-items-center">
                  <i class="fas fa-lock text-info me-3" style="font-size: 1.2rem;"></i>
                  <span>Secure encrypted payments</span>
                </div>
              </div>
            </div>
            
            <div class="text-end">
              <div class="badge bg-success bg-opacity-10 text-success p-3 rounded-3" style="font-size: 0.9rem;">
                <i class="fas fa-trending-up me-2"></i>Most Popular
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Payment Provider Selection -->
      <div class="card glass-card border-0 shadow-lg" style="border-radius: 20px;">
        <div class="card-body p-5">
          <h5 class="text-muted text-uppercase fw-bold mb-4" style="letter-spacing: 1px;">
            <i class="fas fa-credit-card me-2"></i>Select Payment Method
          </h5>

          <form method="post" id="checkoutForm">
            {% csrf_token %}
            
            {% if form.errors %}
              <div class="alert alert-danger alert-dismissible fade show" role="alert" style="border-radius: 12px; border: 1px solid rgba(220,53,69,0.3); background: rgba(248,215,218,0.5);">
                <i class="fas fa-exclamation-circle me-2"></i>
                <strong>Payment Method Required</strong>
                <p class="mb-0 mt-2">Please select a payment provider to continue.</p>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            {% endif %}

            <!-- Payment Provider Options -->
            <div class="payment-options">
              {% for value, label in form.provider.field.choices %}
                <div class="form-check mb-3">
                  <div class="payment-option-wrapper p-4 rounded-3 border-2" style="cursor: pointer; border-color: #e0e0e0; transition: all 0.3s ease; background: #fafafa;">
                    <div class="d-flex align-items-center">
                      <input 
                        class="form-check-input payment-option-input" 
                        type="radio" 
                        name="provider" 
                        value="{{ value }}" 
                        id="provider_{{ value }}"
                        style="width: 24px; height: 24px; cursor: pointer; accent-color: var(--primary);"
                      />
                      <label for="provider_{{ value }}" class="form-check-label w-100 ms-3 mb-0" style="cursor: pointer;">
                        <div class="d-flex align-items-center justify-content-between">
                          <div>
                            <strong class="d-block" style="color: var(--text-dark);">{{ label }}</strong>
                            <small class="text-muted">
                              {% if 'stripe' in label|lower %}
                                Fast and secure payment processing
                              {% elif 'paypal' in label|lower %}
                                Pay with your PayPal account
                              {% else %}
                                {{ label }}
                              {% endif %}
                            </small>
                          </div>
                          <div class="payment-badge">
                            {% if 'stripe' in label|lower %}
                              <i class="fab fa-cc-stripe" style="font-size: 1.8rem; color: #0066CC;"></i>
                            {% elif 'paypal' in label|lower %}
                              <i class="fab fa-cc-paypal" style="font-size: 1.8rem; color: #003087;"></i>
                            {% else %}
                              <i class="fas fa-credit-card" style="font-size: 1.8rem; color: var(--primary);"></i>
                            {% endif %}
                          </div>
                        </div>
                      </label>
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>

            <!-- Security Info -->
            <div class="alert alert-info alert-dismissible fade show mt-4" role="alert" style="border-radius: 12px; border: 1px solid rgba(13,110,253,0.3); background: rgba(207,244,252,0.5);">
              <i class="fas fa-shield-alt me-2"></i>
              <strong>Your payment is secure</strong> - All transactions are encrypted with industry-standard SSL security.
            </div>

            <!-- Submit Button -->
            <div class="d-grid gap-2 mt-5">
              <button type="submit" class="btn btn-lg fw-bold text-white" style="background: linear-gradient(90deg, var(--primary), var(--primary-light)); border: none; border-radius: 12px; padding: 14px 24px; transition: all 0.3s ease; box-shadow: 0 8px 24px rgba(106, 13, 173, 0.3);">
                <i class="fas fa-lock me-2"></i>Proceed to Payment
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Sidebar - Order Summary -->
    <div class="col-lg-4">
      <div class="sticky-top" style="top: 100px;">
        <div class="card glass-card border-0 shadow-lg" style="border-radius: 20px;">
          <div class="card-body p-4">
            <h5 class="fw-bold mb-4">Order Summary</h5>

            <!-- Plan Item -->
            <div class="d-flex justify-content-between align-items-start mb-3 pb-3" style="border-bottom: 1px solid rgba(106, 13, 173, 0.1);">
              <div>
                <p class="mb-1 fw-500">{{ plan.name }}</p>
                <small class="text-muted">Subscription plan</small>
              </div>
              <p class="fw-bold mb-0" style="color: var(--primary);">{{ plan.currency }} {{ plan.price_amount|floatformat:2 }}</p>
            </div>

            <!-- Benefits List -->
            <div class="mb-4">
              <small class="text-muted text-uppercase fw-bold" style="letter-spacing: 0.5px;">Includes:</small>
              <ul class="list-unstyled mt-3">
                <li class="mb-2 d-flex align-items-center">
                  <i class="fas fa-check text-success me-2" style="font-size: 0.8rem;"></i>
                  <span class="small">Full access to library</span>
                </li>
                <li class="mb-2 d-flex align-items-center">
                  <i class="fas fa-check text-success me-2" style="font-size: 0.8rem;"></i>
                  <span class="small">Ad-free experience</span>
                </li>
                <li class="mb-2 d-flex align-items-center">
                  <i class="fas fa-check text-success me-2" style="font-size: 0.8rem;"></i>
                  <span class="small">Priority support</span>
                </li>
                <li class="d-flex align-items-center">
                  <i class="fas fa-check text-success me-2" style="font-size: 0.8rem;"></i>
                  <span class="small">Premium features</span>
                </li>
              </ul>
            </div>

            <!-- Total -->
            <div class="p-4 rounded-3" style="background: linear-gradient(135deg, rgba(106, 13, 173, 0.05), rgba(139, 92, 246, 0.05));">
              <div class="d-flex justify-content-between align-items-center">
                <span class="fw-bold">Total</span>
                <div class="text-end">
                  <p class="mb-0" style="font-size: 1.5rem; font-weight: 700; color: var(--primary);">{{ plan.currency }} {{ plan.price_amount|floatformat:2 }}</p>
                  <small class="text-muted">due today</small>
                </div>
              </div>
            </div>

            <!-- Trust Badges -->
            <div class="mt-4 pt-4" style="border-top: 1px solid rgba(106, 13, 173, 0.1);">
              <p class="small text-muted mb-3">Trusted by millions</p>
              <div class="d-flex gap-2 flex-wrap">
                <span class="badge bg-light text-muted" style="border-radius: 8px; padding: 8px 12px;">
                  <i class="fas fa-lock me-1"></i>SSL Secure
                </span>
                <span class="badge bg-light text-muted" style="border-radius: 8px; padding: 8px 12px;">
                  <i class="fas fa-check-shield me-1"></i>Verified
                </span>
                <span class="badge bg-light text-muted" style="border-radius: 8px; padding: 8px 12px;">
                  <i class="fas fa-undo me-1"></i>14-Day Money Back
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- Money Back Guarantee -->
        <div class="text-center mt-4">
          <small class="text-muted">
            <i class="fas fa-info-circle me-2"></i>
            Not satisfied? Get a full refund within 14 days.
          </small>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Payment Options -->
<style>
  .payment-option-wrapper {
    transition: all 0.3s ease;
  }

  .payment-option-wrapper:hover {
    border-color: var(--primary) !important;
    background: rgba(106, 13, 173, 0.03) !important;
  }

  .payment-option-input:checked ~ .form-check-label {
    color: var(--primary);
  }

  .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
  }

  .form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(106, 13, 173, 0.25);
  }

  .btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(106, 13, 173, 0.4) !important;
  }

  @media (max-width: 992px) {
    .sticky-top {
      position: static !important;
      margin-top: 2rem;
    }
  }
</style>
{% endblock %}