{% 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 %}

        <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 %}</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 }}"
                    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="">
                </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">
            <button type="submit" class="btn-small">+ Add category</button>
        </form>
    </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 newName = prompt('English name:', currentName);
        if (!newName) return;
        var newNameSw = prompt('Kiswahili name (optional, leave blank to clear):', currentNameSw);
        if (newNameSw === null) return;
        document.getElementById('edit-cat-name-' + id).value = newName;
        document.getElementById('edit-cat-name-sw-' + id).value = newNameSw;
        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 %}