{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container py-5">

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-5">
    <div>
      <h1 class="display-6 fw-bold">Admin Approvals</h1>
      <p class="text-muted mb-0">Approve subscriber payments and review investor activity</p>
    </div>
    <a href="{% url 'core:admin_investment_management' %}" class="btn btn-outline-success">
      ← Back to Investment Dashboard
    </a>
  </div>

  <!-- Stats -->
  <div class="row g-4 mb-5">
    <div class="col-md-4">
      <div class="card border-0 shadow-sm bg-warning bg-opacity-10">
        <div class="card-body">
          <p class="text-muted small mb-1">Pending Subscriptions</p>
          <h2 class="fw-bold mb-0">{{ pending_subs_count }}</h2>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm bg-primary bg-opacity-10">
        <div class="card-body">
          <p class="text-muted small mb-1">Active Investments</p>
          <h2 class="fw-bold mb-0">{{ active_investments_count }}</h2>
        </div>
      </div>
    </div>
  </div>

  <!-- ==================== PENDING SUBSCRIPTIONS ==================== -->
  <div class="card border-0 shadow-sm mb-5">
    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Pending Subscription Payments</h5>
      <span class="badge bg-warning text-dark">{{ pending_subscriptions|length }}</span>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>User</th>
              <th>Plan</th>
              <th>Amount</th>
              <th>Provider</th>
              <th>Date</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for tx in pending_subscriptions %}
            <tr>
              <td>
                <strong>{{ tx.user.username }}</strong><br>
                <small class="text-muted">{{ tx.user.email }}</small>
              </td>
              <td>{{ tx.plan.name }}</td>
              <td class="fw-semibold">${{ tx.amount|floatformat:2 }}</td>
              <td>
                <span class="badge bg-info text-dark">{{ tx.provider|upper }}</span>
              </td>
              <td>{{ tx.created_at|date:"M d, Y H:i" }}</td>
              <td>
                <div class="d-flex gap-2">
                  <form method="post" action="{% url 'core:approve_subscription_payment' tx.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-success btn-sm">
                      Approve
                    </button>
                  </form>
                  <form method="post" action="{% url 'core:reject_subscription_payment' tx.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-danger btn-sm">
                      Reject
                    </button>
                  </form>
                  <form method="post" 
                        action="{% url 'core:delete_subscription_payment' tx.pk %}"
                        onsubmit="return confirm('Are you sure you want to permanently delete this subscription payment?');">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
                  </form>
                </div>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="6" class="text-center py-5 text-muted">
                No pending subscription payments.
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- ==================== ACTIVE / RECENT INVESTMENTS ==================== -->
  <div class="card border-0 shadow-sm">
    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Recent / Active Investments</h5>
      <span class="badge bg-primary">{{ pending_investments|length }}</span>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Investor</th>
              <th>Plan</th>
              <th>Amount</th>
              <th>Profit</th>
              <th>Payout</th>
              <th>Status</th>
              <th>Started</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {% for inv in pending_investments %}
            <tr>
              <td>
                <strong>{{ inv.user.username }}</strong>
              </td>
              <td>{{ inv.plan.name }}</td>
              <td>${{ inv.amount|floatformat:2 }}</td>
              <td class="text-success">${{ inv.profit|floatformat:2 }}</td>
              <td class="fw-semibold">${{ inv.payout|floatformat:2 }}</td>
              <td>
                {% if inv.status == "active" %}
                  <span class="badge bg-success">Active</span>
                {% else %}
                  <span class="badge bg-secondary">{{ inv.get_status_display }}</span>
                {% endif %}
              </td>
              <td>{{ inv.started_at|date:"M d, Y" }}</td>
              <td>
                <form method="post" action="{% url 'core:approve_investment' inv.pk %}">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-outline-primary btn-sm">
                    Confirm
                  </button>
                </form>
              </td>
              <td>
  <div class="d-flex gap-2 flex-wrap">
    <form method="post" action="{% url 'core:approve_investment' inv.pk %}">
      {% csrf_token %}
      <button type="submit" class="btn btn-outline-primary btn-sm">Confirm</button>
    </form>

    <form method="post" 
          action="{% url 'core:delete_investment' inv.pk %}"
          onsubmit="return confirm('Are you sure you want to permanently delete this investment?');">
      {% csrf_token %}
      <button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
    </form>
  </div>
</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="8" class="text-center py-5 text-muted">
                No active investments found.
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}