{% extends "base.html" %}

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

{% block content %}
<div class="container vendor-portal vendor-products-page" data-vendor-page="products"
     id="vendor-products-root"
     data-currency="{{ currency_symbol | default(value='₹') }}">
    {% if vendor %}
    <header class="vendor-hero">
        <h1>Your prices</h1>
        <p class="text-muted">What the store pays you for each product. Customer checkout prices stay separate.</p>
        {% if last_saved %}
        <p class="vendor-last-saved">Last saved: {{ last_saved | date_in_tz(timezone=settings.timezone) }}</p>
        {% endif %}
    </header>

    <div class="vendor-tip-card vendor-tip-card--compact">
        <i class="fas fa-info-circle" aria-hidden="true"></i>
        <p>Tip: if another vendor sells the same item, the <strong>lowest</strong> price usually gets the order.</p>
    </div>

    <div class="vendor-search-row">
        <input type="search" id="vendor-product-search" class="form-control" placeholder="Search by product name" autocomplete="off">
    </div>

    <form id="vendor-prices-form">
        <div class="vendor-product-list">
            {% if products | length > 0 %}
            {% for p in products %}
            <article class="vendor-product-card" data-title="{{ p.product_title | lower }}">
                <div class="vendor-product-card-head">
                    <div class="vendor-product-thumb">
                        {% if p.image_url %}
                        <img src="{{ p.image_url }}" alt="" loading="lazy">
                        {% else %}
                        <span class="vendor-product-thumb-ph"><i class="fas fa-box"></i></span>
                        {% endif %}
                        {% if p.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 p.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">{{ p.product_title }}</h2>
                    </div>
                </div>
                <div class="vendor-product-price">
                    <label class="vendor-price-label" for="price-{{ p.product_id }}">Your price ({{ currency_symbol | default(value='₹') }})</label>
                    <input type="number" min="0" step="0.01" inputmode="decimal"
                           class="form-control vendor-price-input"
                           id="price-{{ p.product_id }}"
                           name="price-{{ p.product_id }}"
                           data-product-id="{{ p.product_id }}"
                           value="{% if p.unit_price %}{{ p.unit_price }}{% endif %}"
                           placeholder="0.00">
                </div>
            </article>
            {% endfor %}
            {% else %}
            <div class="empty-state card p-5 text-center">
                <h3>No products yet</h3>
                <p class="text-muted">Ask the store to assign products to your vendor account.</p>
            </div>
            {% endif %}
        </div>

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

    {% if recent_changes | length > 0 %}
    <section class="vendor-recent-changes">
        <h2>Recent updates</h2>
        <ul>
            {% for ch in recent_changes %}
            <li>
                <strong>{{ ch.product_title }}</strong>
                {% if ch.old_price %}{{ currency_symbol | default(value='₹') }}{{ ch.old_price }} → {% else %}set to {% endif %}
                {{ currency_symbol | default(value='₹') }}{{ ch.new_price }}
                <span class="text-muted">· {{ ch.changed_at | date_in_tz(timezone=settings.timezone) }}</span>
            </li>
            {% endfor %}
        </ul>
    </section>
    {% endif %}
    {% else %}
    <div class="card p-5 text-center vendor-access-denied">
        <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-products.js"></script>
{% endblock %}