{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-5">
        <h1 class="display-4 fw-bold" style="color: var(--vibrant-accent);">Manager Dashboard</h1>
        <div>
            <a href="{% url 'manage_users' %}" class="btn btn-outline-light me-2">Manage Users</a>
            <a href="{% url 'pos' %}" class="btn btn-vibrant px-4">Go to POS</a>
        </div>
    </div>

    <div class="row mb-5">
        <div class="col-md-4">
            <div class="card p-4 shadow-sm h-100">
                <h5 class="text-secondary mb-3">Total Sales (All Time)</h5>
                <h2 class="display-5 fw-bold">${{ total_sales|stringformat:".2f" }}</h2>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card p-4 shadow-sm h-100">
                <h5 class="text-secondary mb-3">Ingredient Stock Levels</h5>
                <div class="row">
                    {% for ingredient in ingredients %}
                    <div class="col-md-4 mb-3">
                        <div class="p-3 bg-dark rounded border {% if ingredient.stock_quantity < 500 %}border-danger{% else %}border-secondary{% endif %}">
                            <div class="small text-secondary">{{ ingredient.name }}</div>
                            <div class="h4 mb-0">{{ ingredient.stock_quantity|floatformat:0 }} <small class="fs-6">{{ ingredient.unit }}</small></div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body p-4">
            <h3 class="mb-4">Recent Orders</h3>
            <div class="table-responsive">
                <table class="table table-dark table-hover align-middle border-0">
                    <thead class="text-secondary">
                        <tr>
                            <th>Order #</th>
                            <th>Time</th>
                            <th>Items</th>
                            <th>Notes</th>
                            <th class="text-end">Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in orders %}
                        <tr>
                            <td class="fw-bold">{{ order.order_number }}</td>
                            <td>{{ order.created_at|date:"H:i" }} <small class="text-secondary">{{ order.created_at|date:"d M" }}</small></td>
                            <td>
                                {% for item in order.items.all %}
                                <span class="badge bg-secondary">{{ item.quantity }}x {{ item.menu_item.name }}</span>
                                {% endfor %}
                            </td>
                            <td><small class="text-secondary">{{ order.customer_notes|truncatechars:30 }}</small></td>
                            <td class="text-end fw-bold">${{ order.total_price }}</td>
                            <td class="text-end">
                                <a href="{% url 'receipt' order.order_number %}" class="btn btn-sm btn-outline-light">Receipt</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center py-5 text-secondary">No orders found yet.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}