{% extends 'base.html' %}
{% load static %}
{% block title %}Market — PickkerMarket{% endblock %}
{% block content %}
<section class="page-hero" style="background-image: url('{% static 'img/market-web.jpg' %}');">
    <div class="page-hero-inner">
        <h1>{{ t.market_title }}</h1>
        <p>{{ t.market_subtitle }}</p>
        {% if is_b2b %}<span class="b2b-hero-badge">{{ t.market_b2b_hero_badge }}</span>{% endif %}
    </div>
    {% include 'market/_market_ticker.html' %}
</section>

{% if picker_session.is_authenticated and picker_session.role == 'customer' %}
<div class="business-mode-bar">
    <div class="container business-mode-row">
        <span class="business-mode-copy">
            {% if is_b2b %}{{ t.market_business_mode_on }}{% else %}{{ t.market_business_mode_off }}{% endif %}
        </span>
        <form method="post" action="{% url 'market:toggle_business_mode' %}" class="mode-switch-form">
            {% csrf_token %}
            <input type="hidden" name="next" value="{% url 'market:market' %}">
            <span class="mode-switch-label">{{ t.market_personal }}</span>
            <label class="mode-switch">
                <input type="checkbox" onchange="this.form.submit()" {% if is_b2b %}checked{% endif %} aria-label="Toggle Business Mode">
                <span class="mode-switch-track"><span class="mode-switch-thumb"></span></span>
            </label>
            <span class="mode-switch-label">{{ t.market_business }}</span>
        </form>
    </div>
</div>
{% endif %}

<section class="produce-section">
    <div class="container">
        <span class="section-kicker">{% if is_b2b %}{{ t.market_wholesale_catalog }}{% else %}{{ t.market_available_now }}{% endif %}</span>
        <h2>{% if is_b2b %}{{ t.market_bulk_pricing }}{% else %}{{ t.market_browse_produce }}{% endif %}</h2>

        <form method="get" class="market-filter-bar">
            <input type="text" name="q" value="{{ search_query }}" placeholder="{{ t.market_search_placeholder }}" class="market-search-input">
            <select name="category" class="market-category-select" onchange="this.form.submit()">
                <option value="">{{ t.market_all_categories }}</option>
                {% for c in categories %}
                <option value="{{ c.name }}" {% if selected_category == c.name %}selected{% endif %}>{{ c.name }}</option>
                {% endfor %}
            </select>
            <button type="submit" class="btn-small">{{ t.market_search_button }}</button>
            {% if selected_category or search_query %}
            <a href="{% url 'market:market' %}" class="btn-small market-clear-filter">{{ t.market_clear_filters }}</a>
            {% endif %}
        </form>

        <div class="ue-grid">
            {% for product in products %}
            <div class="ue-card">
                <div class="ue-card-media">
                    {% if product.image_url %}
                        <img src="{{ product.image_url }}" alt="{{ product.name }}">
                    {% else %}
                        <img src="{% static 'img/market-thumb.jpg' %}" alt="{{ product.name }}">
                    {% endif %}
                    {% if is_b2b %}<span class="b2b-badge">B2B</span>{% endif %}
                </div>
                <div class="ue-card-body">
                    <h3>{{ product.name }}</h3>
                    <p class="ue-card-meta">{{ product.category }} &middot; per {{ product.unit }}</p>
                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                        <span class="ue-price" id="price-{{ product.id }}">TSh {{ product.effective_price|floatformat:0 }}</span>
                        {% if product.price_badge and product.price_badge.change_pct != None %}
                        <span class="surface-badge {% if product.price_badge.direction == 'up' %}warn{% elif product.price_badge.direction == 'down' %}ok{% endif %}" title="vs. previous {{ product.price_badge.region }} price">
                            {% if product.price_badge.direction == 'up' %}&#9650;{% elif product.price_badge.direction == 'down' %}&#9660;{% else %}&#8212;{% endif %} {{ product.price_badge.change_pct }}%
                        </span>
                        {% endif %}
                        {% if product.bulk_savings_pct %}
                        <span class="bulk-savings-badge">{{ t.market_save_prefix }} {{ product.bulk_savings_pct }}{{ t.market_save_suffix }}</span>
                        {% endif %}
                    </div>
                    {% if product.min_qty > 1 %}<p class="ue-min-qty" id="min-qty-note-{{ product.id }}">{{ t.market_sold_in_lots }} {{ product.min_qty }} {{ product.unit }}</p>{% endif %}

                    {% if picker_session.is_authenticated and picker_session.role == 'customer' %}
                    <form method="post" action="{% url 'market:add_to_cart' product.id %}" class="ue-add-row measure-add-row">
                        {% csrf_token %}
                        <input type="hidden" name="next" value="{% url 'market:market' %}">
                        {% if product.active_measures %}
                        <select name="measure_id" class="ue-measure-select" data-price-target="price-{{ product.id }}" data-qty-target="qty-{{ product.id }}" data-note-target="min-qty-note-{{ product.id }}" data-sold-in-lots-text="{{ t.market_sold_in_lots }}">
                            <option value="" data-price="{{ product.effective_price|floatformat:0 }}" data-unit="{{ product.unit }}" data-min-qty="{{ product.min_qty }}">{{ product.unit|title }} — TSh {{ product.effective_price|floatformat:0 }}</option>
                            {% for m in product.active_measures %}
                            <option value="{{ m.id }}" data-price="{{ m.price|floatformat:0 }}" data-unit="{{ m.label }}" data-min-qty="{{ m.min_qty|default:'1' }}" {% if m.is_default %}selected{% endif %}>{{ m.label }} — TSh {{ m.price|floatformat:0 }}{% if m.min_qty > 1 %} (min {{ m.min_qty }}){% endif %}</option>
                            {% endfor %}
                        </select>
                        {% endif %}
                        <input type="number" name="quantity" id="qty-{{ product.id }}" class="ue-qty-input" value="{{ product.min_qty }}" min="{{ product.min_qty }}" aria-label="Quantity">
                        <button type="submit" class="ue-add-btn-front" aria-label="{{ t.market_add_to_cart }} — {{ product.name }}" title="{{ t.market_add_to_cart }}">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 5v14M5 12h14"/></svg>
                        </button>
                    </form>
                    {% else %}
                    <p class="auth-switch" style="margin-top: 10px;"><a href="{% url 'accounts:login' %}">{{ t.market_log_in_to_purchase }}</a></p>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <p>{{ t.market_no_produce }}</p>
            {% endfor %}
        </div>
    </div>
</section>

<section class="content-section">
    <div class="content-inner">
        <p>{{ t.market_cant_find }} <a href="{% url 'market:contact' %}">{{ t.market_get_in_touch }}</a> {{ t.market_and_help }}</p>
    </div>
</section>

{% if picker_session.role == 'customer' %}
{% include 'market/_chat_widget.html' %}
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.ue-measure-select').forEach(function (select) {
            var priceEl = document.getElementById(select.dataset.priceTarget);
            var qtyEl = document.getElementById(select.dataset.qtyTarget);
            var noteEl = document.getElementById(select.dataset.noteTarget);

            function applyOption(option) {
                if (priceEl) priceEl.textContent = 'TSh ' + option.dataset.price;
                var minQty = parseInt(option.dataset.minQty, 10) || 1;
                if (qtyEl) {
                    qtyEl.min = minQty;
                    if (parseInt(qtyEl.value, 10) < minQty) qtyEl.value = minQty;
                }
                if (noteEl) {
                    if (minQty > 1) {
                        noteEl.textContent = select.dataset.soldInLotsText + ' ' + minQty + ' ' + option.dataset.unit;
                        noteEl.style.display = '';
                    } else {
                        noteEl.style.display = 'none';
                    }
                }
            }

            select.addEventListener('change', function () {
                applyOption(select.options[select.selectedIndex]);
            });
        });
    });
</script>
{% endblock %}