{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans "Smart Reports" %} | {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h1 class="h3 fw-bold">{% trans "Analytics & Reports" %}</h1>
            <p class="text-muted">{% trans "Deep dive into your business performance." %}</p>
        </div>
    </div>

    <div class="row g-4">
        <!-- Monthly Revenue Table -->
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm p-4 h-100">
                <h5 class="fw-bold mb-4">{% trans "Monthly Revenue" %}</h5>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>{% trans "Month" %}</th>
                                <th class="text-end">{% trans "Revenue" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in monthly_sales %}
                            <tr>
                                <td>{{ sale.month|date:"F Y" }}</td>
                                <td class="text-end fw-bold">{{ site_settings.currency_symbol }}{{ sale.total|floatformat:3 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="2" class="text-center text-muted">{% trans "No data available." %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Top Products -->
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm p-4 h-100">
                <h5 class="fw-bold mb-4">{% trans "Top Selling Products" %}</h5>
                <ul class="list-group list-group-flush">
                    {% for item in top_products %}
                    <li class="list-group-item px-0 py-3 border-0 d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-0 fw-bold">
                                {% if LANGUAGE_CODE == 'ar' %}{{ item.product__name_ar }}{% else %}{{ item.product__name_en }}{% endif %}
                            </p>
                            <small class="text-muted">{{ item.total_qty }} {% trans "units sold" %}</small>
                        </div>
                        <div class="text-end">
                            <span class="d-block fw-bold text-primary">{{ site_settings.currency_symbol }}{{ item.revenue|floatformat:3 }}</span>
                        </div>
                    </li>
                    {% empty %}
                    <li class="list-group-item px-0 border-0 text-center text-muted">{% trans "No sales data." %}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}