{% extends "base.html" %}

{% block page_title %}Dashboard{% endblock %}
{% block page_subtitle %}Welcome to DryClean360 — {{ SHOP_NAME }}{% endblock %}

{% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
    <div class="card">
        <p class="text-sm text-slate-500">Today's Orders</p>
        <p class="text-2xl font-bold text-slate-900 mt-1">{{ stats.todays_orders }}</p>
        {% if perms.manage_orders or perms.view_orders %}
        <a href="{% url 'orders:list' %}" class="text-xs text-brand-600 hover:text-brand-700 mt-1 inline-block">View orders</a>
        {% endif %}
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">Pending Orders</p>
        <p class="text-2xl font-bold text-amber-700 mt-1">{{ stats.pending_orders }}</p>
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">In Process</p>
        <p class="text-2xl font-bold text-amber-600 mt-1">{{ stats.in_process_orders }}</p>
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">Ready for Pickup</p>
        <p class="text-2xl font-bold text-brand-600 mt-1">{{ stats.ready_for_pickup }}</p>
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">Delivered Today</p>
        <p class="text-2xl font-bold text-green-700 mt-1">{{ stats.delivered_orders }}</p>
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">Revenue Today</p>
        <p class="text-2xl font-bold text-green-700 mt-1">₹{{ stats.revenue_today }}</p>
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">Revenue This Month</p>
        <p class="text-2xl font-bold text-green-700 mt-1">₹{{ stats.revenue_month }}</p>
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">Pending Payments</p>
        <p class="text-2xl font-bold text-red-600 mt-1">₹{{ stats.pending_payments }}</p>
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">Total Customers</p>
        <p class="text-2xl font-bold text-brand-600 mt-1">{{ stats.total_customers }}</p>
        {% if perms.manage_customers or perms.view_customers %}
        <a href="{% url 'customers:list' %}" class="text-xs text-brand-600 hover:text-brand-700 mt-1 inline-block">View customers</a>
        {% endif %}
    </div>
    <div class="card">
        <p class="text-sm text-slate-500">Active Items</p>
        <p class="text-2xl font-bold text-green-700 mt-1">{{ stats.active_items }}</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="card">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Recent Orders</h3>
        {% if stats.recent_orders %}
        <div class="table-scroll">
            <table>
                <thead><tr><th>Order</th><th>Customer</th><th>Total</th><th>Status</th></tr></thead>
                <tbody>
                    {% for o in stats.recent_orders %}
                    <tr>
                        <td><a href="{% url 'orders:detail' o.pk %}" class="text-brand-600">{{ o.order_number }}</a></td>
                        <td>{{ o.customer.name }}</td>
                        <td>₹{{ o.grand_total }}</td>
                        <td>{{ o.get_status_display }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}<p class="text-sm text-slate-500">No orders yet.</p>{% endif %}
    </div>
    <div class="card">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Recent Payments</h3>
        {% if stats.recent_payments %}
        <div class="table-scroll">
            <table>
                <thead><tr><th>Payment</th><th>Order</th><th>Amount</th><th>Date</th></tr></thead>
                <tbody>
                    {% for p in stats.recent_payments %}
                    <tr>
                        <td><a href="{% url 'payments:detail' p.pk %}" class="text-brand-600">{{ p.payment_number }}</a></td>
                        <td>{{ p.order.order_number }}</td>
                        <td>₹{{ p.amount_paid }}</td>
                        <td>{{ p.payment_date|date:"d M Y" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}<p class="text-sm text-slate-500">No payments yet.</p>{% endif %}
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="card">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Ready for Pickup</h3>
        {% if stats.ready_orders %}
        <div class="table-scroll">
            <table>
                <thead><tr><th>Order</th><th>Customer</th><th>Delivery</th></tr></thead>
                <tbody>
                    {% for o in stats.ready_orders %}
                    <tr>
                        <td><a href="{% url 'orders:detail' o.pk %}" class="text-brand-600">{{ o.order_number }}</a></td>
                        <td>{{ o.customer.name }}</td>
                        <td>{{ o.expected_delivery_date|date:"d M Y" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}<p class="text-sm text-slate-500">No orders ready.</p>{% endif %}
    </div>
    <div class="card">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Pending Payment</h3>
        {% if stats.pending_payment_orders %}
        <div class="table-scroll">
            <table>
                <thead><tr><th>Order</th><th>Customer</th><th>Balance</th></tr></thead>
                <tbody>
                    {% for o in stats.pending_payment_orders %}
                    <tr>
                        <td><a href="{% url 'orders:detail' o.pk %}" class="text-brand-600">{{ o.order_number }}</a></td>
                        <td>{{ o.customer.name }}</td>
                        <td>₹{{ o.balance_amount }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}<p class="text-sm text-slate-500">All caught up.</p>{% endif %}
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="card">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Quick Actions</h3>
        <div class="flex flex-wrap gap-2">
            {% if perms.manage_orders %}
            <a href="{% url 'orders:create' %}" class="btn-primary">New Order</a>
            {% endif %}
            {% if perms.manage_customers %}
            <a href="{% url 'customers:create' %}" class="btn-secondary">Add Customer</a>
            {% endif %}
            {% if perms.manage_inventory %}
            <a href="{% url 'items:create' %}" class="btn-secondary">Add Item</a>
            {% endif %}
        </div>
    </div>
    <div class="card">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Your Access</h3>
        <p class="text-sm text-slate-600">
            Logged in as <strong>{{ user.get_full_name|default:user.username }}</strong>
            <span class="badge {% if user.is_admin %}badge-admin{% elif user.is_counter_staff %}badge-counter{% else %}badge-delivery{% endif %} ml-2">
                {{ user.get_role_display }}
            </span>
        </p>
    </div>
</div>
{% endblock %}