{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold fs-3">Dashboard Overview</h2>
    <div class="text-muted small">Welcome, {{ request.user.username }}</div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card p-3 border-start border-4 border-primary h-100">
            <div class="d-flex justify-content-between align-items-center">
                <div><h6 class="text-muted small fw-bold">TODAY'S SALES</h6><h3 class="mb-0 fw-bold">Rs. {{ sales_today|default:"0" }}</h3></div>
                <i class="fas fa-wallet fa-2x text-primary opacity-25"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3 border-start border-4 border-success h-100">
            <div class="d-flex justify-content-between align-items-center">
                <div><h6 class="text-muted small fw-bold">MONTHLY SALES</h6><h3 class="mb-0 fw-bold">Rs. {{ sales_month|default:"0" }}</h3></div>
                <i class="fas fa-chart-line fa-2x text-success opacity-25"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3 border-start border-4 border-warning h-100">
            <div class="d-flex justify-content-between align-items-center">
                <div><h6 class="text-muted small fw-bold">LOW STOCK</h6><h3 class="mb-0 fw-bold">{{ low_stock_count }}</h3></div>
                <i class="fas fa-exclamation-triangle fa-2x text-warning opacity-25"></i>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h5 class="fw-bold m-0 fs-6">Recent Orders</h5>
        <a href="{% url 'order_book_page' %}" class="btn btn-sm btn-light text-primary">View All</a>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr><th>Invoice #</th><th>Date</th><th>Party Name</th><th>Total</th></tr>
            </thead>
            <tbody>
                {% for order in recent_orders %}
                <tr>
                    <td class="text-muted">#{{ order.id }}</td>
                    <td>{{ order.created_at|date:"M d, H:i" }}</td>
                    <td class="fw-bold">{{ order.party_name|title }}</td>
                    <td class="text-success fw-bold">Rs. {{ order.total_amount }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="4" class="text-center py-4 text-muted">No recent activity.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}