{% extends 'admin/layout.html.twig' %}

{% block title %}Dashboard · Cashier Assistant{% endblock %}

{% block admin_content %}
<div class="topbar">
    <div>
        <h1 class="section-title">Dashboard</h1>
        <div class="muted">{{ store.name }} · {{ store.code }}</div>
    </div>
</div>

<div class="grid grid-4" style="margin-bottom:16px;">
    <div class="card">
        <div class="kpi-label">Products</div>
        <div class="kpi-value">{{ productCount }}</div>
    </div>
    <div class="card">
        <div class="kpi-label">Sales today</div>
        <div class="kpi-value">{{ todaySalesCount }}</div>
    </div>
    <div class="card">
        <div class="kpi-label">Revenue today</div>
        <div class="kpi-value">${{ (todaySalesTotalCents / 100)|number_format(2, '.', ',') }}</div>
    </div>
    <div class="card">
        <div class="kpi-label">Low stock items</div>
        <div class="kpi-value">{{ lowStock|length }}</div>
    </div>
</div>

<div class="grid grid-2">
    <div class="card">
        <h2 class="section-title" style="font-size:1.05rem;">Recent sales</h2>
        {% if recentSales is empty %}
            <p class="muted">No sales synced yet.</p>
        {% else %}
            <table>
                <thead>
                    <tr>
                        <th>Sale</th>
                        <th>Status</th>
                        <th>Total</th>
                        <th>When</th>
                    </tr>
                </thead>
                <tbody>
                {% for sale in recentSales %}
                    <tr>
                        <td>{{ sale.saleNumber }}</td>
                        <td>
                            <span class="badge {{ sale.voided ? 'badge-danger' : 'badge-ok' }}">
                                {{ sale.status }}
                            </span>
                        </td>
                        <td>${{ (sale.totalCents / 100)|number_format(2, '.', ',') }}</td>
                        <td class="muted">{{ sale.createdAt|date('Y-m-d H:i') }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>

    <div class="card">
        <h2 class="section-title" style="font-size:1.05rem;">Low stock alerts</h2>
        {% if lowStock is empty %}
            <p class="muted">Stock levels look healthy.</p>
        {% else %}
            <table>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Stock</th>
                        <th>Reorder</th>
                    </tr>
                </thead>
                <tbody>
                {% for product in lowStock %}
                    <tr>
                        <td>
                            <strong>{{ product.name }}</strong><br>
                            <span class="muted">{{ product.barcode }}</span>
                        </td>
                        <td><span class="badge badge-warn">{{ product.stockOnHand }}</span></td>
                        <td>{{ product.reorderPoint }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <p style="margin-top:14px;">
                <a href="{{ path('admin_products_low_stock') }}">View supplier suggestions →</a>
            </p>
        {% endif %}
    </div>
</div>
{% endblock %}