{% extends "base.html" %}
{% load static %}

{% block title %}Orders{% endblock %}
{% block page_title %}Orders{% endblock %}
{% block page_subtitle %}Manage dry cleaning orders{% endblock %}

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

<div class="toolbar-tablet">
    <form method="get" id="order-list-filter-form" class="toolbar-tablet-filters"
          data-customer-search-url="{% url 'orders:customer_search_api' %}">
        <div class="filter-field">
            <label for="{{ form.q.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                Search Order / Customer / Mobile
            </label>
            <div class="flex flex-wrap items-center gap-2">
                {{ form.q }}
                <button type="button" id="order-list-customer-search-btn" class="btn-secondary">Search</button>
            </div>
            <p class="text-xs text-slate-500 mt-1">Enter last 4 digits of mobile, Search, Select customer, then Filter.</p>
        </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">
                Order Status
            </label>
            {{ form.status }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.created_date.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                Created Date
            </label>
            {{ form.created_date }}
            <p class="text-xs text-slate-500 mt-1">{{ form.created_date.help_text }}</p>
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.expected_delivery_date.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                Expected Delivery Date
            </label>
            {{ form.expected_delivery_date }}
            <p class="text-xs text-slate-500 mt-1">{{ form.expected_delivery_date.help_text }}</p>
        </div>
        <div class="filter-field flex items-end gap-2">
            <button type="submit" class="btn-secondary">Filter</button>
            <a href="{% url 'orders:list' %}" class="btn-secondary">Clear</a>
        </div>
    </form>
    {% if can_manage %}
    <div class="toolbar-tablet-actions">
        <a href="{% url 'orders:create' %}" class="btn-primary">New Order</a>
    </div>
    {% endif %}
</div>

<div id="selected-customer-filter-banner" class="hidden card mb-4 text-sm text-brand-800 bg-brand-50 border border-brand-200"></div>

<div class="table-scroll-card card">
    {% if page_obj.object_list %}
    <div class="table-scroll">
    <table>
        <thead>
            <tr>
                <th>Order #</th><th>Customer</th><th>Mobile</th><th>Items</th>
                <th>Subtotal</th><th>Discount</th><th>Grand Total</th>
                <th>Advance</th><th>Balance</th><th>Status</th>
                <th>Delivery</th><th>Created</th><th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for order in page_obj %}
            <tr>
                <td class="font-medium">{{ order.order_number }}</td>
                <td>{{ order.customer.name }}</td>
                <td>{{ order.customer.mobile_number }}</td>
                <td>{{ order.items_count }}</td>
                <td>₹{{ order.subtotal }}</td>
                <td>₹{{ order.discount_amount }}</td>
                <td>₹{{ order.grand_total }}</td>
                <td>₹{{ order.advance_paid }}</td>
                <td>₹{{ order.balance_amount }}</td>
                <td><span class="badge badge-counter">{{ order.get_status_display }}</span></td>
                <td>{{ order.expected_delivery_date|date:"d M Y" }}</td>
                <td>{{ order.created_at|date:"d M Y" }}</td>
                <td>
                    <a href="{% url 'orders:detail' order.pk %}" class="table-action-link text-brand-600">View</a>
                    {% if can_manage %}
                    <a href="{% url 'orders:edit' order.pk %}" class="table-action-link text-brand-600">Edit</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    {% include "partials/empty_state.html" with title="No orders found" action_url="/orders/create/" action_label="Create Order" %}
    {% endif %}
</div>
{% include "partials/pagination.html" %}
{% endblock %}

{% block page_modals %}
{% include "partials/customer_search_modal.html" %}
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/customer_search.js' %}"></script>
{% endblock %}