{% extends "base.html" %}

{% block title %}Orders Report{% endblock %}
{% block page_title %}Orders Report{% endblock %}
{% block page_subtitle %}Filter and export order data{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="toolbar-tablet">
    <form method="get" class="toolbar-tablet-filters">
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.date_from.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">From Date</label>
            {{ form.date_from }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.date_to.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">To Date</label>
            {{ form.date_to }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">Status</label>
            {{ form.status }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.payment_status.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">Payment Status</label>
            {{ form.payment_status }}
        </div>
        <div class="filter-field min-w-[180px]">
            <label for="{{ form.customer.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">Customer</label>
            {{ form.customer }}
        </div>
        <div class="filter-field flex items-end gap-2">
            <button type="submit" class="btn-secondary">Filter</button>
            <a href="{% url 'reports:orders' %}" class="btn-secondary">Clear</a>
        </div>
    </form>
    <div class="toolbar-tablet-actions">
        <a href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}export=csv" class="btn-secondary">Export CSV</a>
        <a href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}export=xlsx" class="btn-secondary">Export Excel</a>
    </div>
</div>

<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
    <div class="card text-center">
        <p class="text-sm text-slate-500">Total Orders</p>
        <p class="text-xl font-bold">{{ summary.total_orders }}</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">Grand Total</p>
        <p class="text-xl font-bold text-brand-600">₹{{ summary.total_grand }}</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">Discount</p>
        <p class="text-xl font-bold text-amber-700">₹{{ summary.total_discount }}</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">Paid</p>
        <p class="text-xl font-bold text-green-700">₹{{ summary.total_paid }}</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">Balance</p>
        <p class="text-xl font-bold">₹{{ summary.total_balance }}</p>
    </div>
</div>

<div class="table-scroll-card card">
    {% if orders %}
    <div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>Order #</th><th>Customer</th><th>Grand Total</th><th>Paid</th><th>Balance</th><th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for order in orders %}
            <tr>
                <td class="font-medium">
                    <a href="{% url 'orders:detail' order.pk %}" class="table-action-link text-brand-600">{{ order.order_number }}</a>
                </td>
                <td>{{ order.customer.name }}</td>
                <td>₹{{ order.grand_total }}</td>
                <td>₹{{ order.total_paid }}</td>
                <td>₹{{ order.balance_amount }}</td>
                <td><span class="badge badge-counter">{{ order.get_status_display }}</span></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    {% include "partials/empty_state.html" with title="No orders match filters" %}
    {% endif %}
</div>
{% endblock %}