{% extends 'hospital/base.html' %}
{% load static %}
{% load i18n %}

{% block sidebar.upgrades %} class="active" {% endblock %}

{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-sm-8">
                <h4 class="page-title">{% trans "Subscription Upgrades" %}</h4>
            </div>
        </div>
        
        <!-- Summary Cards -->
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-exclamation-triangle fa-2x text-danger mb-2"></i>
                        <h3>{{ expiring_soon_count }}</h3>
                        <p class="text-muted">{% trans "Expiring Soon" %}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-check-circle fa-2x text-success mb-2"></i>
                        <h3>{{ recently_upgraded_count }}</h3>
                        <p class="text-muted">{% trans "Recently Upgraded" %}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-heartbeat fa-2x text-info mb-2"></i>
                        <h3>{{ active_subscriptions_count }}</h3>
                        <p class="text-muted">{% trans "Active Subscriptions" %}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-arrow-up fa-2x text-primary mb-2"></i>
                        <h3>{{ total_upgrades }}</h3>
                        <p class="text-muted">{% trans "Total Upgrades" %}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Expiring Soon Section -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-danger text-white">
                        <h4 class="card-title mb-0">
                            <i class="fa fa-exclamation-triangle"></i> {% trans "Expiring Soon" %} (< 7 {% trans "days" %})
                        </h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>{% trans "User Name" %}</th>
                                        <th>{% trans "Phone" %}</th>
                                        <th>{% trans "Upgrade Date" %}</th>
                                        <th>{% trans "Days Remaining" %}</th>
                                        <th>{% trans "Plan Type" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for upgrade in expiring_soon %}
                                        <tr>
                                            <td>{{ upgrade.user.profile.first_name }} {{ upgrade.user.profile.last_name }}</td>
                                            <td>{{ upgrade.user.phone_number }}</td>
                                            <td>{{ upgrade.upgrade_date|date:"Y-m-d" }}</td>
                                            <td><span class="badge badge-warning">{{ upgrade.days_remaining }} {% trans "days" %}</span></td>
                                            <td><span class="badge badge-info">{% trans "Plan" %} #{{ upgrade.plan }}</span></td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">{% trans "No subscriptions expiring soon" %}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Recently Upgraded Section -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h4 class="card-title mb-0">
                            <i class="fa fa-check-circle"></i> {% trans "Recently Upgraded" %} ({% trans "Last 7 days" %})
                        </h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>{% trans "User Name" %}</th>
                                        <th>{% trans "Phone" %}</th>
                                        <th>{% trans "Upgrade Date" %}</th>
                                        <th>{% trans "Days Remaining" %}</th>
                                        <th>{% trans "Plan Type" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for upgrade in recently_upgraded %}
                                        <tr>
                                            <td>{{ upgrade.user.profile.first_name }} {{ upgrade.user.profile.last_name }}</td>
                                            <td>{{ upgrade.user.phone_number }}</td>
                                            <td>{{ upgrade.upgrade_date|date:"Y-m-d" }}</td>
                                            <td><span class="badge badge-success">{{ upgrade.days_remaining }} {% trans "days" %}</span></td>
                                            <td><span class="badge badge-info">{% trans "Plan" %} #{{ upgrade.plan }}</span></td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">{% trans "No recent upgrades" %}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Active Subscriptions Section -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h4 class="card-title mb-0">
                            <i class="fa fa-heartbeat"></i> {% trans "Active Subscriptions" %}
                        </h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>{% trans "User Name" %}</th>
                                        <th>{% trans "Phone" %}</th>
                                        <th>{% trans "Upgrade Date" %}</th>
                                        <th>{% trans "Days Remaining" %}</th>
                                        <th>{% trans "Plan Type" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for upgrade in active_subscriptions %}
                                        <tr>
                                            <td>{{ upgrade.user.profile.first_name }} {{ upgrade.user.profile.last_name }}</td>
                                            <td>{{ upgrade.user.phone_number }}</td>
                                            <td>{{ upgrade.upgrade_date|date:"Y-m-d" }}</td>
                                            <td><span class="badge badge-success">{{ upgrade.days_remaining }} {% trans "days" %}</span></td>
                                            <td><span class="badge badge-info">{% trans "Plan" %} #{{ upgrade.plan }}</span></td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">{% trans "No active subscriptions" %}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}