{% extends "admin_base.html" %}

{% block title %}Subscriptions{% endblock %}
{% block page_title %}Subscription Management{% endblock %}
{% block page_description %}Monitor and manage all tenant subscriptions{% endblock %}

{% block content %}
<!-- Filters -->
<div class="admin-card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label for="status" class="form-label">Payment Status</label>
                <select name="status" id="status" class="form-select">
                    <option value="">All Statuses</option>
                    {% for value, label in status_choices %}
                    <option value="{{ value }}" {% if status == value %}selected{% endif %}>
                        {{ label }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="col-md-4">
                <button type="submit" class="btn btn-admin-primary">
                    <i class="fas fa-filter me-1"></i>Filter
                </button>
                <a href="?" class="btn btn-outline-secondary ms-2">
                    <i class="fas fa-times me-1"></i>Clear
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Subscriptions Table -->
<div class="admin-card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">
            <i class="fas fa-credit-card me-2"></i>Subscriptions ({{ page_obj.paginator.count }})
        </h5>
        <div class="btn-group">
            <button class="btn btn-success btn-sm" onclick="exportSubscriptions()">
                <i class="fas fa-download me-1"></i>Export
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        {% if page_obj %}
        <div class="table-responsive">
            <table class="table table-admin table-hover mb-0">
                <thead>
                    <tr>
                        <th>Tenant</th>
                        <th>Plan</th>
                        <th>Amount</th>
                        <th>Period</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th width="100">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for subscription in page_obj %}
                    <tr>
                        <td>
                            <div>
                                <div class="fw-semibold">{{ subscription.tenant.name }}</div>
                                <small class="text-muted">{{ subscription.tenant.slug }}</small>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-{% if subscription.plan == 'premium' %}primary{% elif subscription.plan == 'standard' %}info{% else %}secondary{% endif %}">
                                {{ subscription.get_plan_display }}
                            </span>
                        </td>
                        <td>
                            <div class="fw-semibold">KES {{ subscription.amount|floatformat:0 }}</div>
                        </td>
                        <td>
                            <div>{{ subscription.start_date|date:"M d, Y" }}</div>
                            <small class="text-muted">to {{ subscription.end_date|date:"M d, Y" }}</small>
                        </td>
                        <td>
                            <span class="badge bg-{% if subscription.payment_status == 'paid' %}success{% elif subscription.payment_status == 'pending' %}warning{% elif subscription.payment_status == 'failed' %}danger{% else %}secondary{% endif %}">
                                {{ subscription.get_payment_status_display }}
                            </span>
                        </td>
                        <td>
                            <div>{{ subscription.created_at|date:"M d, Y" }}</div>
                            <small class="text-muted">{{ subscription.created_at|timesince }} ago</small>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" onclick="viewSubscription('{{ subscription.id }}')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                {% if subscription.payment_status == 'pending' %}
                                <button class="btn btn-outline-success" onclick="markAsPaid('{{ subscription.id }}')">
                                    <i class="fas fa-check"></i>
                                </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <div class="card-footer bg-white">
            <nav>
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% if status %}&status={{ status }}{% endif %}">First</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if status %}&status={{ status }}{% endif %}">Previous</a>
                        </li>
                    {% endif %}
                    
                    <li class="page-item active">
                        <span class="page-link">{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                    </li>
                    
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if status %}&status={{ status }}{% endif %}">Next</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if status %}&status={{ status }}{% endif %}">Last</a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
        
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-credit-card fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No subscriptions found</h5>
            <p class="text-muted">Subscriptions will appear here as tenants upgrade.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function viewSubscription(subscriptionId) {
    // Implement view subscription details
    console.log('View subscription:', subscriptionId);
}

function markAsPaid(subscriptionId) {
    if (confirm('Mark this subscription as paid?')) {
        // Implement mark as paid functionality
        console.log('Mark as paid:', subscriptionId);
    }
}

function exportSubscriptions() {
    // Implement export functionality
    alert('Export functionality would be implemented here.');
}
</script>
{% endblock %}