{% extends 'base.html' %}
{% block title %}{% if product %}Edit{% else %}Add{% endif %} Product — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <form class="auth-form" method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        <h1>{% if product %}Edit{% else %}Add{% endif %} Product</h1>

        <div class="form-row-2">
            <div>
                <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
                {{ form.name }}
                {% if form.name.errors %}<div class="field-error">{{ form.name.errors }}</div>{% endif %}
            </div>
            <div>
                <label for="{{ form.name_sw.id_for_label }}">{{ form.name_sw.label }}</label>
                {{ form.name_sw }}
                <small style="color: var(--muted);">{{ form.name_sw.help_text }}</small>
            </div>
        </div>

        {% for field in form %}
            {% if field.name != "name" and field.name != "name_sw" %}
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            {% if field.help_text %}<small style="color: var(--muted);">{{ field.help_text }}</small>{% endif %}
            {% if field.errors %}<div class="field-error">{{ field.errors }}</div>{% endif %}
            {% endif %}
        {% endfor %}

        {% if product %}
        <label style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
            <input type="checkbox" name="is_approved" {% if product.is_approved %}checked{% endif %}>
            Approved (visible and purchasable to customers)
        </label>
        {% if not product.is_approved %}<small style="color: var(--muted);">This product was submitted by a fleet company and is not yet visible to customers — review the details above, then tick this and save to make it live.</small>{% endif %}
        {% endif %}

        <button type="submit" class="btn-cta">Save Product</button>
    </form>

    {% if product %}
    <p class="auth-switch"><a href="{% url 'accounts:admin_product_measures' product.id %}">Manage measures (bucket, sack, sadolin, piece) &rarr;</a></p>
    {% endif %}

    <div class="category-manager">
        <h3 style="margin-bottom: 8px;">Registered categories</h3>
        <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 10px;">
            Categories offered above come from this registered list — add a new one here if it's missing.
        </p>
        {% if categories %}
        <div class="category-chip-row">
            {% for c in categories %}
            <div class="category-chip" style="display: inline-flex; align-items: center; gap: 6px;">
                <span>{{ c.name }}{% if c.name_sw %} <small style="color: var(--muted);">({{ c.name_sw }})</small>{% endif %} <small style="color: var(--muted);" title="Picking-fee 'how scattered' factor">&middot; x{{ c.dispersion_factor|default:'1.0' }}</small></span>
                <button type="button" style="background: none; border: none; font-size: 13px; cursor: pointer; color: var(--muted); padding: 0;" title="Edit"
                    data-cat-id="{{ c.id }}" data-cat-name="{{ c.name|escapejs }}" data-cat-name-sw="{{ c.name_sw|default:''|escapejs }}"
                    data-cat-dispersion="{{ c.dispersion_factor|default:'1.0' }}"
                    onclick="editCategory(this)">&#9998;</button>
                <form id="edit-cat-{{ c.id }}" method="post" action="{% url 'accounts:admin_edit_category' c.id %}" style="display: none;">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.path }}">
                    <input type="hidden" name="new_name" id="edit-cat-name-{{ c.id }}" value="">
                    <input type="hidden" name="new_name_sw" id="edit-cat-name-sw-{{ c.id }}" value="">
                    <input type="hidden" name="new_dispersion_factor" id="edit-cat-dispersion-{{ c.id }}" value="">
                </form>

                <button type="button" style="background: none; border: none; font-size: 15px; cursor: pointer; color: var(--muted); padding: 0;" title="Delete" onclick="if(confirm('Delete {{ c.name }}?')) document.getElementById('delete-cat-{{ c.id }}').submit();">&times;</button>
                <form id="delete-cat-{{ c.id }}" method="post" action="{% url 'accounts:admin_delete_category' c.id %}" style="display: none;">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.path }}">
                </form>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        <form method="post" action="{% url 'accounts:admin_add_category' %}" class="category-add-form">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ request.path }}">
            <input type="text" name="new_category_name" placeholder="e.g. Dairy (English)" maxlength="100" required>
            <input type="text" name="new_category_name_sw" placeholder="e.g. Maziwa (Kiswahili, optional)" maxlength="100">
            <input type="number" name="new_category_dispersion_factor" placeholder="Scatter x1.0" step="0.1" min="0.1" style="width: 100px;">
            <button type="submit" class="btn-small">+ Add category</button>
        </form>
        <p style="color: var(--muted); font-size: 0.8rem; margin-top: 6px;">
            "Scatter" (default 1.0) estimates how spread out a category's stalls usually are across the market —
            higher for categories like vegetables that tend to be scattered across many stalls, 1.0 for ones that
            usually cluster in one area (grains, fruits). Only affects pricing if Fee Settings' "extra distinct item
            fee" is turned on.
        </p>
    </div>

    <div class="category-manager">
        <h3 style="margin-bottom: 8px;">Registered units</h3>
        <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 10px;">
            The "Unit" choice above, and each product's extra measures (bucket, sack, sadolin, piece, ...), are
            drawn from this list — register a new one here and it's available everywhere right away, in both
            languages, without touching any product already using the existing units.
        </p>
        {% if measure_units %}
        <div class="category-chip-row">
            {% for u in measure_units %}
            <div class="category-chip" style="display: inline-flex; align-items: center; gap: 6px;">
                <span>{{ u.label_en }}{% if u.label_sw %} <small style="color: var(--muted);">({{ u.label_sw }})</small>{% endif %}</span>
                <button type="button" style="background: none; border: none; font-size: 13px; cursor: pointer; color: var(--muted); padding: 0;" title="Edit"
                    data-unit-id="{{ u.id }}" data-unit-label-en="{{ u.label_en|escapejs }}" data-unit-label-sw="{{ u.label_sw|default:''|escapejs }}"
                    onclick="editUnit(this)">&#9998;</button>
                <form id="edit-unit-{{ u.id }}" method="post" action="{% url 'accounts:admin_edit_measure_unit' u.id %}" style="display: none;">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.path }}">
                    <input type="hidden" name="new_label_en" id="edit-unit-label-en-{{ u.id }}" value="">
                    <input type="hidden" name="new_label_sw" id="edit-unit-label-sw-{{ u.id }}" value="">
                </form>

                <button type="button" style="background: none; border: none; font-size: 15px; cursor: pointer; color: var(--muted); padding: 0;" title="Delete" onclick="if(confirm('Delete {{ u.label_en }}?')) document.getElementById('delete-unit-{{ u.id }}').submit();">&times;</button>
                <form id="delete-unit-{{ u.id }}" method="post" action="{% url 'accounts:admin_delete_measure_unit' u.id %}" style="display: none;">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.path }}">
                </form>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        <form method="post" action="{% url 'accounts:admin_add_measure_unit' %}" class="category-add-form">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ request.path }}">
            <input type="text" name="new_unit_key" placeholder="Key, e.g. half_cup" maxlength="50" required>
            <input type="text" name="new_unit_label_en" placeholder="English, e.g. 1/2 Cup" maxlength="100" required>
            <input type="text" name="new_unit_label_sw" placeholder="Kiswahili, e.g. Nusu Kikombe (optional)" maxlength="100">
            <button type="submit" class="btn-small">+ Register unit</button>
        </form>
    </div>

    <p class="auth-switch"><a href="{% url 'accounts:admin_portal' %}">&larr; Back to admin portal</a></p>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    function editCategory(btn) {
        var id = btn.getAttribute('data-cat-id');
        var currentName = btn.getAttribute('data-cat-name');
        var currentNameSw = btn.getAttribute('data-cat-name-sw');
        var currentDispersion = btn.getAttribute('data-cat-dispersion');
        var newName = prompt('English name:', currentName);
        if (!newName) return;
        var newNameSw = prompt('Kiswahili name (optional, leave blank to clear):', currentNameSw);
        if (newNameSw === null) return;
        var newDispersion = prompt('Picking-fee "scatter" factor (1.0 = clusters in one area, higher = spread across many stalls):', currentDispersion);
        if (newDispersion === null) return;
        document.getElementById('edit-cat-name-' + id).value = newName;
        document.getElementById('edit-cat-name-sw-' + id).value = newNameSw;
        document.getElementById('edit-cat-dispersion-' + id).value = newDispersion || '1.0';
        document.getElementById('edit-cat-' + id).submit();
    }

    function editUnit(btn) {
        var id = btn.getAttribute('data-unit-id');
        var currentLabelEn = btn.getAttribute('data-unit-label-en');
        var currentLabelSw = btn.getAttribute('data-unit-label-sw');
        var newLabelEn = prompt('English label:', currentLabelEn);
        if (!newLabelEn) return;
        var newLabelSw = prompt('Kiswahili label (optional, leave blank to clear):', currentLabelSw);
        if (newLabelSw === null) return;
        document.getElementById('edit-unit-label-en-' + id).value = newLabelEn;
        document.getElementById('edit-unit-label-sw-' + id).value = newLabelSw;
        document.getElementById('edit-unit-' + id).submit();
    }
</script>
{% endblock %}