<!DOCTYPE html>
<html lang="en">
  {% load static %}

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Subscription Plans - Tayapromediverse</title>

    <link rel="stylesheet" href="{% static 'css/signin.css' %}" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
      rel="stylesheet"
    />

    <!-- Toastify CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
    />

    <style>
      .subscription-header {
        text-align: center;
        margin-bottom: 12px;
        width: 100%;
      }

      .subscription-header h2 {
        font-size: 18px;
        font-weight: 600;
        color: #222;
        margin-bottom: 3px;
      }

      .subscription-header p {
        font-size: 12px;
        color: #666;
      }

      .plans-container {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: 100%;
        max-width: 440px;
      }

      .plan-card {
        background: #fff;
        border: 1px solid #DCDBDD;
        border-radius: 8px;
        padding: 16px 14px;
        transition: all 0.2s ease;
        flex: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
      }

      .plan-card:hover {
        border-color: #4A30F5;
        box-shadow: 0 3px 12px rgba(74, 48, 245, 0.15);
        transform: translateY(-2px);
      }

      .plan-type {
        font-size: 10px;
        font-weight: 700;
        color: #4A30F5;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 6px;
      }

      .plan-name {
        font-size: 15px;
        font-weight: 600;
        color: #222;
        margin-bottom: 8px;
        line-height: 1.2;
      }

      .plan-price {
        font-size: 28px;
        font-weight: 700;
        color: #222;
        margin-bottom: 3px;
        line-height: 1;
      }

      .plan-price span {
        font-size: 13px;
        font-weight: 400;
        color: #666;
      }

      .plan-duration {
        font-size: 11px;
        color: #999;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
      }

      .plan-description {
        display: none;
      }

      .plan-features {
        list-style: none;
        padding: 0;
        margin: 0 0 auto 0;
        text-align: left;
      }

      .plan-features li {
        padding: 3px 0;
        color: #555;
        font-size: 11px;
        line-height: 1.3;
        display: flex;
        align-items: flex-start;
      }

      .plan-features li:before {
        content: "✓";
        color: #4A30F5;
        font-weight: bold;
        margin-right: 6px;
        font-size: 12px;
        flex-shrink: 0;
      }

      .subscribe-btn {
        width: 100%;
        height: 42px;
        background: #4A30F5;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-top: 10px;
      }

      .subscribe-btn:hover {
        background: #3d28d4;
      }

      .subscribe-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
      }

      .current-subscription {
        background: #e6ffed;
        border: 1px solid #b2f5ea;
        padding: 8px;
        border-radius: 8px;
        margin-bottom: 10px;
        width: 100%;
        max-width: 440px;
      }

      .current-subscription h3 {
        color: #228B22;
        margin-bottom: 3px;
        font-size: 11px;
        font-weight: 600;
      }

      .current-subscription p {
        color: #555;
        margin: 1px 0;
        font-size: 10px;
      }

      .back-link {
        margin-top: 10px;
        color: #4A30F5;
        text-decoration: none;
        font-size: 12px;
      }

      .back-link:hover {
        text-decoration: underline;
      }

      .mobile-logo {
        display: none;
      }

      @media (max-width: 1024px) {
        .mobile-logo {
          display: block;
          margin: 40px auto 20px;
          text-align: center;
        }

        .mobile-logo img {
          max-width: 140px;
        }

        .plans-container {
          flex-direction: column;
          max-width: 320px;
        }
        
        .current-subscription {
          max-width: 320px;
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <!-- Left side -->
      <div class="left-side">
        <img
          src="{% static 'images/logo-desktop.png' %}"
          alt="Tayapromediverse Logo"
        />
      </div>

      <!-- Right side -->
      <div class="right-side">
        <div class="mobile-logo">
          <img
            src="{% static 'images/logo-mobile.png' %}"
            alt="Tayapromediverse Mobile Logo"
            style="max-width: 180px"
          />
        </div>

        <div class="form-container">
        <div class="subscription-header">
          <h2>Chooseee Your Subscription Plan</h2>
          <p>Select the plan that best fits your needs</p>
        </div>

        {% if current_subscription %}
        <div class="current-subscription">
          <h3>✓ Current Active Subscription</h3>
          <p><strong>Plan:</strong> {{ current_subscription.plan.name }}</p>
          <p><strong>Status:</strong> {{ current_subscription.get_status_display }}</p>
          {% if current_subscription.end_date %}
          <p><strong>Valid Until:</strong> {{ current_subscription.end_date|date:"F d, Y" }}</p>
          <p><strong>Days Remaining:</strong> {{ current_subscription.days_remaining }}</p>
          {% endif %}
        </div>
        {% endif %}

        <div class="plans-container">
          {% for plan in plans %}
          <div class="plan-card">
            <div class="plan-type">{{ plan.get_plan_type_display }}</div>
            <div class="plan-name">{{ plan.name }}</div>
            <div class="plan-price">
              ${{ plan.price }}
              <span>/ year</span>
            </div>
            <div class="plan-duration">Billed annually</div>
            
            {% if plan.description %}
            <div class="plan-description">{{ plan.description }}</div>
            {% endif %}

            <ul class="plan-features">
              {% if plan.plan_type == 'practitioner' %}
              <li>Full access to practitioner tools</li>
              <li>Patient management system</li>
              <li>Advanced analytics</li>
              <li>Priority support</li>
              {% else %}
              <li>Full access to patient portal</li>
              <li>Health tracking tools</li>
              <li>Appointment scheduling</li>
              <li>24/7 support</li>
              {% endif %}
            </ul>

            <button
              class="subscribe-btn"
              onclick="subscribeToPlan({{ plan.id }})"
              {% if current_subscription and current_subscription.status == 'active' %}
              disabled
              {% endif %}
            >
              {% if current_subscription and current_subscription.status == 'active' %}
              Already Subscribed
              {% else %}
              Subscribe Now
              {% endif %}
            </button>
          </div>
          {% empty %}
          <p>No subscription plans available at this time.</p>
          {% endfor %}
        </div>

        <a href="/" class="back-link">← Back to Dashboard</a>
        </div>
      </div>
    </div>

    <script>
      const STRIPE_PUBLISHABLE_KEY = "{{ stripe_publishable_key }}";

      function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== "") {
          const cookies = document.cookie.split(";");
          for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === name + "=") {
              cookieValue = decodeURIComponent(
                cookie.substring(name.length + 1)
              );
              break;
            }
          }
        }
        return cookieValue;
      }

      async function subscribeToPlan(planId) {
        try {
          const response = await fetch("/subscription/checkout/", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "X-CSRFToken": getCookie("csrftoken"),
            },
            body: JSON.stringify({ plan_id: planId }),
          });

          const data = await response.json();

          if (data.success && data.checkout_url) {
            // Redirect to Stripe Checkout
            window.location.href = data.checkout_url;
          } else {
            if (window.ToastifyUtils) {
              window.ToastifyUtils.error(data.error || "Failed to create checkout session");
            } else {
              alert(data.error || "Failed to create checkout session");
            }
          }
        } catch (error) {
          console.error("Error:", error);
          if (window.ToastifyUtils) {
            window.ToastifyUtils.error("An error occurred. Please try again.");
          } else {
            alert("An error occurred. Please try again.");
          }
        }
      }
    </script>

    <!-- Toastify JS -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/toastify-js"
    ></script>

    <!-- Toastify Utils -->
    <script src="{% static 'js/toastify-utils.js' %}"></script>

    <!-- Django Messages with Toastify -->
    {% if messages %}
    <div id="django-messages" style="display: none">
      {% for message in messages %}
      <div
        data-type="{{ message.tags }}"
        data-message="{{ message|escapejs }}"
      ></div>
      {% endfor %}
    </div>
    {% endif %}
  </body>
</html>

