{% 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>

    <!-- Reports Navigation Cards -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <a href="{% url 'expense_report' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
                <div class="card-body text-center p-4">
                    <div class="icon-box bg-danger-soft text-danger rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                        <i class="bi bi-wallet2 fs-3"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-1">{% trans "Expense Report" %}</h6>
                    <small class="text-muted">{% trans "Track spending by category & date" %}</small>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="{% url 'cashflow_report' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
                <div class="card-body text-center p-4">
                    <div class="icon-box bg-success-soft text-success rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                        <i class="bi bi-cash-stack fs-3"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-1">{% trans "Cashflow" %}</h6>
                    <small class="text-muted">{% trans "Inflow vs Outflow analysis" %}</small>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="{% url 'customer_statement' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
                <div class="card-body text-center p-4">
                    <div class="icon-box bg-primary-soft text-primary rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                        <i class="bi bi-people fs-3"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-1">{% trans "Customer Statement" %}</h6>
                    <small class="text-muted">{% trans "Account balances & history" %}</small>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="{% url 'supplier_statement' %}" class="card border-0 shadow-sm text-decoration-none h-100 lift-hover">
                <div class="card-body text-center p-4">
                    <div class="icon-box bg-warning-soft text-warning rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                        <i class="bi bi-truck fs-3"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-1">{% trans "Supplier Statement" %}</h6>
                    <small class="text-muted">{% trans "Payables & purchase history" %}</small>
                </div>
            </a>
        </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>

<style>
    .bg-danger-soft { background-color: rgba(220, 53, 69, 0.1); }
    .bg-success-soft { background-color: rgba(25, 135, 84, 0.1); }
    .bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); }
    .bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); }
    .lift-hover { transition: transform 0.2s, box-shadow 0.2s; }
    .lift-hover:hover { transform: translateY(-5px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
</style>
{% endblock %}