{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Reports{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
{% endblock %}
{% block content %}
<div class="container">

    <h1 class="brand">Gvelo Enterprise Platform</h1>

    <div class="card">

        <h2>Business Reports</h2>
        <p>
            {{ ui.button('Smart Export & BI Distribution', '/reports/exports') }}
            {{ ui.button('Enterprise Reporting', '/reports/enterprise') }}
        </p>

        <hr>

        <h3>💰 Total Sales</h3>
        <p>{{sales}}</p>

        <h3>🧾 Total Transactions</h3>
        <p>{{transactions}}</p>

        <h3>📦 Stock Remaining</h3>
        <p>{{stock}}</p>

        <hr>

        <h3>🏆 Top Products</h3>
        {% for p in top_products %}
            <p>{{p[0]}} (Stock: {{p[1]}})</p>
        {% endfor %}

        <hr>

        <h3>📉 Low Performing Products</h3>
        {% for p in low_products %}
            <p>{{p[0]}} (Stock: {{p[1]}})</p>
        {% endfor %}

        <br>
        <a href="/admin">Back</a>

    </div>
</div>
{% endblock %}