{% extends "base.html" %}
{% import "macros/empty_state.html" as empty %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/vendor/assets/css/vendor.ui.css">
{% endblock %}

{% block content %}
<div class="container vendor-orders-container vendor-portal" data-vendor-page="orders"
     data-currency="{{ currency_symbol | default(value='₹') }}"
     data-needs-prices="{% if needs_prices_before_orders %}1{% else %}0{% endif %}">
    {% if error %}
        <div class="card p-5 text-center">
            <i class="fas fa-exclamation-triangle fa-3x mb-3 text-danger"></i>
            <h3>Something went wrong</h3>
            <p>{{ error }}</p>
            <a href="/plugins/vendor/" class="btn btn-primary mt-3">Back to home</a>
        </div>
    {% elif vendor %}
        <div class="header-section mb-3">
            <h1>Orders to pack</h1>
            <p class="text-muted">Accept items, pack them, then tap Ready to pickup. Status is tracked by the <code>vendor_assignment</code> FSM.</p>
        </div>

        <section id="vendor-price-gate" class="vendor-price-gate mb-4"
                 {% if not needs_prices_before_orders %}hidden{% endif %}>
            <header class="vendor-hero">
                <h1>Set your prices first</h1>
                <p class="text-muted">These products are on open orders without a store price. Set each once — then your order list unlocks.</p>
            </header>

            <form id="vendor-price-gate-form">
                <div id="vendor-price-gate-list" class="vendor-product-list">
                    {% for product in products_needing_price %}
                    <article class="vendor-product-card" data-product-id="{{ product.product_id }}"
                             data-title="{{ product.product_title | lower }}">
                        <div class="vendor-product-card-head">
                            <div class="vendor-product-thumb">
                                {% if product.image_url %}
                                <img src="{{ product.image_url }}" alt="" loading="lazy">
                                {% else %}
                                <span class="vendor-product-thumb-ph"><i class="fas fa-box"></i></span>
                                {% endif %}
                                {% if product.dietary_type == "veg" %}<span class="catalog-dietary-indicator catalog-dietary-indicator--veg" role="img" aria-label="Vegetarian"><span class="catalog-dietary-indicator__mark" aria-hidden="true"><span></span></span></span>{% elif product.dietary_type == "non_veg" %}<span class="catalog-dietary-indicator catalog-dietary-indicator--non_veg" role="img" aria-label="Non-vegetarian"><span class="catalog-dietary-indicator__mark" aria-hidden="true"><span></span></span></span>{% endif %}
                            </div>
                            <div class="vendor-product-body">
                                <h2 class="vendor-product-title">{{ product.product_title }}</h2>
                                <p class="vendor-product-meta">
                                    In {{ product.order_count }} open order line{% if product.order_count != 1 %}s{% endif %}
                                    {% if product.total_quantity %} · qty {{ product.total_quantity }}{% endif %}
                                </p>
                            </div>
                        </div>
                        <div class="vendor-product-price">
                            <label class="vendor-price-label" for="gate-price-{{ product.product_id }}">
                                Your price ({{ currency_symbol | default(value='₹') }})
                            </label>
                            <input type="number" min="0.01" step="0.01" inputmode="decimal"
                                   class="form-control vendor-price-input"
                                   id="gate-price-{{ product.product_id }}"
                                   name="price-{{ product.product_id }}"
                                   data-product-id="{{ product.product_id }}"
                                   placeholder="0.00"
                                   required>
                        </div>
                    </article>
                    {% endfor %}
                </div>

                {% if products_needing_price | length > 0 %}
                <div class="vendor-sticky-save">
                    <button type="submit" class="btn btn-primary vendor-btn-lg" id="vendor-gate-save-all-btn">
                        <i class="fas fa-save"></i> Save prices
                    </button>
                </div>
                {% endif %}
            </form>
        </section>

        <div id="vendor-orders-section" {% if needs_prices_before_orders %}hidden{% endif %}>
        <div class="vendor-orders-view-toolbar mb-4" role="tablist" aria-label="Order lists">
            <div class="btn-group vendor-orders-tabs" role="group">
                <button type="button" class="btn btn-secondary vendor-tab-btn active" data-vendor-tab="ongoing" id="tab-btn-ongoing" aria-selected="true" aria-controls="vendor-tab-panel-ongoing">
                    To do
                </button>
                <button type="button" class="btn btn-secondary vendor-tab-btn" data-vendor-tab="completed" id="tab-btn-completed" aria-selected="false" aria-controls="vendor-tab-panel-completed">
                    Done
                </button>
            </div>
        </div>

        <div id="vendor-tab-panel-ongoing" class="vendor-orders-tab-panel" role="tabpanel" aria-labelledby="tab-btn-ongoing">
            {% if assignments_ongoing | length > 0 %}
            {% set_global current_order = "" %}
            {% for assignment in assignments_ongoing %}
                {% if assignment.order_number != current_order %}
                    {% if current_order != "" %}
                        </div></div>
                    {% endif %}
                    <div class="order-card vendor-order-card" data-order-id="{{ assignment.order_id }}">
                        <div class="order-header">
                            <div class="order-header-info">
                                <h3>Order #{{ assignment.order_number }}</h3>
                                <span class="order-date">{{ assignment.order_date | date_in_tz(timezone=settings.timezone) }}</span>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary vendor-notify-ready" data-order-id="{{ assignment.order_id }}">
                                <i class="fas fa-box-open"></i> Ready to pickup
                            </button>
                        </div>
                        <div class="order-body">
                    {% set_global current_order = assignment.order_number %}
                {% endif %}

                <div class="assignment-item"
                     data-assignment-id="{{ assignment.id }}"
                     data-product-id="{{ assignment.product_id }}">
                    <div class="item-info">
                        <span class="item-title">{{ assignment.product_title }}</span>
                        <span class="item-meta item-qty">Qty: {{ assignment.quantity }}</span>
                        {% if assignment.display_rate %}
                        <span class="item-meta item-vendor-rate">Your rate: {{ currency_symbol | default(value='₹') }}{{ assignment.display_rate }}</span>
                        {% elif assignment.vendor_unit_price %}
                        <span class="item-meta item-vendor-rate">Your rate: {{ currency_symbol | default(value='₹') }}{{ assignment.vendor_unit_price }}</span>
                        {% else %}
                        <span class="item-meta item-vendor-rate item-vendor-rate--pending" hidden>Your rate: —</span>
                        {% endif %}
                    </div>
                    <div class="item-status-control">
                        {% if assignment.status == 'pending' %}
                        <div class="item-actions-group">
                            <button data-assignment-id="{{ assignment.id }}" data-status="accepted"
                                    class="btn btn-sm btn-success vendor-status-btn" title="Accept">
                                ✓ Accept
                            </button>
                            <button data-assignment-id="{{ assignment.id }}" data-status="rejected" class="btn btn-sm btn-danger vendor-status-btn" title="Reject">✕ Can’t supply</button>
                        </div>
                        {% else %}
                        <span class="status-badge status-{{ assignment.status }}">{{ assignment.status }}</span>
                        {% endif %}
                    </div>
                </div>

                {% if loop.last %}
                    </div></div>
                {% endif %}
            {% endfor %}
            {% else %}
            {{ empty::empty_state(icon="fas fa-inbox", title="No orders waiting", description="Nothing to pack right now. New orders will show up here.") }}
            {% endif %}
        </div>

        <div id="vendor-tab-panel-completed" class="vendor-orders-tab-panel" role="tabpanel" aria-labelledby="tab-btn-completed" hidden>
            {% if assignments_completed | length > 0 %}
            {% set_global current_order_c = "" %}
            {% for assignment in assignments_completed %}
                {% if assignment.order_number != current_order_c %}
                    {% if current_order_c != "" %}
                        </div></div>
                    {% endif %}
                    <div class="order-card order-card--completed" data-order-id="{{ assignment.order_id }}">
                        <div class="order-header order-header--completed">
                            <div class="order-header-info">
                                <h3>Order #{{ assignment.order_number }}</h3>
                                <span class="order-date">{{ assignment.order_date | date_in_tz(timezone=settings.timezone) }}</span>
                            </div>
                            <span class="badge badge-outline order-done-badge">Ready to pickup</span>
                        </div>
                        <div class="order-body">
                    {% set_global current_order_c = assignment.order_number %}
                {% endif %}

                <div class="assignment-item assignment-item--readonly" data-assignment-id="{{ assignment.id }}">
                    <div class="item-info">
                        <span class="item-title">{{ assignment.product_title }}</span>
                        <span class="item-meta item-qty">Qty: {{ assignment.quantity }}</span>
                        {% if assignment.display_rate %}
                        <span class="item-meta item-vendor-rate">Your rate: {{ currency_symbol | default(value='₹') }}{{ assignment.display_rate }}</span>
                        {% elif assignment.vendor_unit_price %}
                        <span class="item-meta item-vendor-rate">Your rate: {{ currency_symbol | default(value='₹') }}{{ assignment.vendor_unit_price }}</span>
                        {% endif %}
                    </div>
                    <div class="item-status-control">
                        <span class="status-badge status-{{ assignment.status }}">{{ assignment.status }}</span>
                    </div>
                </div>

                {% if loop.last %}
                    </div></div>
                {% endif %}
            {% endfor %}
            {% else %}
            {{ empty::empty_state(icon="fas fa-check-circle", title="No completed orders yet", description="Orders appear here after you mark them ready to pickup.") }}
            {% endif %}
        </div>
        </div>

    {% else %}
        <div class="card p-5 text-center">
            <i class="fas fa-user-lock fa-3x mb-3 text-muted"></i>
            <h3>Vendor access needed</h3>
            <p>Ask the store to set you up as a vendor.</p>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/vendor/assets/js/vendor-orders.js"></script>
{% endblock %}