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

{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

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

<form method="post" enctype="multipart/form-data" id="order-form" class="space-y-6"
      data-can-override="{% if can_override %}true{% else %}false{% endif %}"
      {% if is_create and not preselected_customer %}data-customer-mode="search" data-customer-search-url="{% url 'orders:customer_search_api' %}"{% endif %}>
    {% csrf_token %}

    <div class="card">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Customer &amp; Delivery</h3>

        {% if preselected_customer %}
        <div id="preselected-customer-card" class="rounded-lg border-2 border-brand-200 bg-brand-50 p-4 mb-4">
            <p class="text-xs font-medium uppercase tracking-wide text-brand-700 mb-2">Selected Customer</p>
            <p class="text-xl font-semibold text-slate-900">{{ preselected_customer.name }}</p>
            <dl class="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3 text-sm">
                <div>
                    <dt class="text-slate-500">Mobile</dt>
                    <dd class="font-medium">{{ preselected_customer.mobile_number }}</dd>
                </div>
                <div>
                    <dt class="text-slate-500">WhatsApp</dt>
                    <dd class="font-medium">{{ preselected_customer.whatsapp_number|default:"—" }}</dd>
                </div>
                <div>
                    <dt class="text-slate-500">Alternate</dt>
                    <dd class="font-medium">{{ preselected_customer.alternate_number|default:"—" }}</dd>
                </div>
            </dl>
            <a href="{% url 'orders:create' %}" class="btn-secondary mt-4 inline-flex">Change Customer</a>
        </div>
        <input type="hidden" name="customer" id="id_customer" value="{{ preselected_customer.pk }}">
        {% if form.customer.errors %}<p class="text-red-600 text-xs mt-1">{{ form.customer.errors.0 }}</p>{% endif %}
        {% elif order %}
        <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4 text-sm">
            <div>
                <dt class="text-slate-500">Customer Name</dt>
                <dd class="font-semibold text-base text-slate-900">{{ order.customer.name }}</dd>
            </div>
            <div>
                <dt class="text-slate-500">Mobile Number</dt>
                <dd class="font-medium text-base">{{ order.customer.mobile_number }}</dd>
            </div>
            <div>
                <dt class="text-slate-500">WhatsApp Number</dt>
                <dd class="font-medium text-base">{{ order.customer.whatsapp_number|default:"—" }}</dd>
            </div>
            <div>
                <dt class="text-slate-500">Alternate Number</dt>
                <dd class="font-medium text-base">{{ order.customer.alternate_number|default:"—" }}</dd>
            </div>
        </dl>
        {{ form.customer }}
        {% else %}
        <div class="mb-4">
            <label for="customer-search-input" class="block text-sm font-medium text-slate-700 mb-1">Search Customer</label>
            <div class="flex flex-wrap items-center gap-2">
                <input type="text" id="customer-search-input" class="form-input filter-search-compact"
                       placeholder="Last 4 digits of mobile" maxlength="15" autocomplete="off">
                <button type="button" id="customer-search-btn" class="btn-secondary">Search</button>
            </div>
            <p class="text-xs text-slate-500 mt-1">Enter at least 4 digits, click Search, then Select a customer from the popup.</p>
            {% if form.customer.errors %}<p class="text-red-600 text-xs mt-1">{{ form.customer.errors.0 }}</p>{% endif %}
        </div>
        <div id="selected-customer-card" class="hidden rounded-lg border-2 border-brand-200 bg-brand-50 p-4 mb-4"></div>
        <input type="hidden" name="customer" id="id_customer" value="">
        {% endif %}

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Order Date *</label>
                {{ form.order_date }}
                <p class="text-xs text-slate-500 mt-1">Date when the order is received.</p>
            </div>
            <div>
                <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">When the customer expects pickup/delivery.</p>
            </div>
            {% if not is_create %}
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Status</label>
                {{ form.status }}
            </div>
            {% else %}
            {{ form.status }}
            {% endif %}
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-slate-700 mb-1">Remarks</label>
                {{ form.remarks }}
            </div>
        </div>
    </div>

    <div class="card">
        <div class="flex flex-wrap justify-between items-center gap-3 mb-4">
            <h3 class="text-lg font-semibold text-slate-900">Order Items</h3>
            <button type="button" id="add-item-row" class="btn-secondary">Add Item</button>
        </div>
        <p class="text-sm text-slate-500 mb-4">Click <strong>Add Item</strong> to add garments. Enter manual price based on condition/size. Price range is for reference only.</p>
        <div class="table-scroll-card card" style="padding:0;border:none;box-shadow:none">
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Qty</th>
                            <th>Price Range</th>
                            <th>Manual Price (₹)</th>
                            <th>Line Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="order-items-body"></tbody>
                </table>
            </div>
        </div>
        <p id="no-items-hint" class="text-sm text-slate-400 mt-3">No items added yet. Click Add Item to begin.</p>
    </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">Discount &amp; Payment</h3>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Discount Amount</label>
                    {{ form.discount_amount }}
                    <p class="text-xs text-slate-500 mt-1">{{ form.discount_amount.help_text }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Advance Paid</label>
                    {{ form.advance_paid }}
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Payment Mode</label>
                    {{ form.payment_mode }}
                </div>
            </div>
        </div>
        <div class="card">
            <h3 class="text-lg font-semibold text-slate-900 mb-4">Order Summary</h3>
            <dl class="space-y-3 text-lg">
                <div class="flex justify-between"><dt class="text-slate-500">Subtotal</dt><dd id="display-subtotal" class="font-semibold">₹0.00</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Grand Total</dt><dd id="display-grand-total" class="font-bold text-brand-600">₹0.00</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Balance</dt><dd id="display-balance" class="font-semibold text-amber-700">₹0.00</dd></div>
            </dl>
        </div>
    </div>

    <div class="card">
        <button type="button" id="toggle-photo-section" class="btn-primary w-full md:w-auto">
            Capture Order Pics
        </button>
        <div id="order-photo-section" class="hidden mt-4">
            <h3 class="text-lg font-semibold text-slate-900 mb-2">Before Cleaning Photos</h3>
            <p class="text-sm text-slate-500 mb-4">Use tablet camera to capture garment photos.</p>
            <div id="photo-rows"></div>
            <button type="button" id="add-photo-row" class="btn-secondary mt-2">Add Photo Row</button>
        </div>
    </div>

    <div class="flex flex-wrap gap-3">
        <button type="submit" class="btn-primary">Save Order</button>
        <a href="{% if order %}{% url 'orders:detail' order.pk %}{% else %}{% url 'orders:list' %}{% endif %}" class="btn-secondary">Cancel</a>
    </div>
</form>

{{ item_catalog|json_script:"item-catalog-data" }}
{% if existing_items %}
<script id="existing-items-data" type="application/json">{{ existing_items|safe }}</script>
{% endif %}
<script id="photo-types-data" type="application/json">{{ photo_types_json|safe }}</script>
{% endblock %}

{% block page_modals %}
{% if is_create and not preselected_customer %}
{% include "partials/customer_search_modal.html" %}
{% endif %}
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/orders.js' %}"></script>
{% if is_create and not preselected_customer %}
<script src="{% static 'js/customer_search.js' %}"></script>
{% endif %}
{% endblock %}