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

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

{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-md-12">
                <h4 class="page-title">{% trans "Hospital Dashboard" %}</h4>
                <p class="text-muted">{% trans "Welcome to" %} {{ hospital.name }}</p>
            </div>
        </div>
        
        <!-- Statistics Cards -->
        <div class="row">
            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                <div class="dash-widget">
                    <span class="dash-widget-bg1"><i class="fa fa-hospital-o" aria-hidden="true"></i></span>
                    <div class="dash-widget-info text-right">
                        <h3>{{ hospital.name }}</h3>
                        <span class="widget-title1">{% trans "Hospital Code" %} <i class="fa fa-check" aria-hidden="true"></i></span>
                        <p>{{ hospital.hospital_code }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                <div class="dash-widget">
                    <span class="dash-widget-bg2"><i class="fa fa-users"></i></span>
                    <div class="dash-widget-info text-right">
                        <h3>{{ total_users }}</h3>
                        <span class="widget-title2">{% trans "Total Users" %} <i class="fa fa-check" aria-hidden="true"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                <div class="dash-widget">
                    <span class="dash-widget-bg3"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                    <div class="dash-widget-info text-right">
                        <h3>{{ total_upgrades }}</h3>
                        <span class="widget-title3">{% trans "Total Upgrades" %} <i class="fa fa-check" aria-hidden="true"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                <div class="dash-widget">
                    <span class="dash-widget-bg4"><i class="fa fa-heartbeat" aria-hidden="true"></i></span>
                    <div class="dash-widget-info text-right">
                        <h3>{{ active_upgrades }}</h3>
                        <span class="widget-title4">{% trans "Active Subscriptions" %} <i class="fa fa-check" aria-hidden="true"></i></span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Recent Upgrades -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title d-inline-block">{% trans "Recent Upgrades (Last 30 Days)" %}</h4>
                        <a href="{% url 'panel-hospital-upgrades' %}" class="btn btn-primary float-right">{% trans "View All" %}</a>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table mb-0">
                                <thead class="d-none">
                                    <tr>
                                        <th>{% trans "User" %}</th>
                                        <th>{% trans "Plan" %}</th>
                                        <th>{% trans "Date" %}</th>
                                        <th>{% trans "Days Remaining" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for upgrade in recent_upgrades %}
                                    <tr>
                                        <td style="min-width: 200px;">
                                            <h5 class="time-title p-0">{{ upgrade.user.profile.first_name }} {{ upgrade.user.profile.last_name }}</h5>
                                            <p>{{ upgrade.user.phone_number }}</p>
                                        </td>
                                        <td>
                                            <h5 class="time-title p-0">{% trans "Plan" %} #{{ upgrade.plan }}</h5>
                                            <p>{{ upgrade.credit_days_added }} {% trans "days credit" %}</p>
                                        </td>
                                        <td>
                                            <h5 class="time-title p-0">{{ upgrade.upgrade_date|date:"Y-m-d" }}</h5>
                                            <p>{{ upgrade.upgrade_date|timesince }} {% trans "ago" %}</p>
                                        </td>
                                        <td>
                                            {% if upgrade.days_remaining > 7 %}
                                                <span class="badge badge-success">{{ upgrade.days_remaining }} {% trans "days left" %}</span>
                                            {% elif upgrade.days_remaining > 0 %}
                                                <span class="badge badge-warning">{{ upgrade.days_remaining }} {% trans "days left" %}</span>
                                            {% else %}
                                                <span class="badge badge-danger">{% trans "Expired" %}</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="4" class="text-center">{% trans "No recent upgrades" %}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Quick Links -->
        <div class="row">
            <div class="col-md-12">
                <h4 class="mb-4">{% trans "Quick Links" %}</h4>
            </div>
            <div class="col-md-4">
                <a href="{% url 'panel-hospital-credentials' %}" class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-key fa-3x mb-3 text-primary"></i>
                        <h5>{% trans "View Credentials" %}</h5>
                        <p class="text-muted">{% trans "Access your API keys and credentials" %}</p>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="{% url 'panel-hospital-users' %}" class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-users fa-3x mb-3 text-success"></i>
                        <h5>{% trans "View Users" %}</h5>
                        <p class="text-muted">{% trans "See all users in your hospital" %}</p>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="{% url 'panel-hospital-upgrades' %}" class="card text-center">
                    <div class="card-body">
                        <i class="fa fa-arrow-up fa-3x mb-3 text-info"></i>
                        <h5>{% trans "Subscription Monitor" %}</h5>
                        <p class="text-muted">{% trans "Track subscription upgrades" %}</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
{% endblock %}