{% extends 'base.html' %}
{% load static_v %}
{% block title %}Regions — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 700px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Regions</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 24px;">
            The canonical list of delivery regions. B2C orders only match a picker registered in the same region
            as the delivery — tag your Known Areas (below) and picker profiles with a region to turn this on for
            them; anything left untagged keeps working exactly as before. B2B stays region-free (inter-regional).
        </p>

        <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Add Region</h3>
            <p style="color: var(--muted); font-size: 0.85rem; margin: -2px 0 10px;">Search for the place instead of typing a region name — resolved via HERE, and added to the catalog automatically.</p>
            <form method="post" class="contact-form">
                {% csrf_token %}
                <div class="region-picker" style="position: relative;">
                    <input type="text" class="region-search-input" placeholder="Search e.g. Kinondoni, Arusha…" autocomplete="off">
                    <input type="hidden" class="region-search-value" name="region_name">
                    <div class="region-search-results"></div>
                </div>
                <button type="submit" class="btn-cta">Add Region</button>
            </form>
        </div>

        <h3 style="margin-bottom: 12px;">Registered Regions</h3>
        {% for region in regions %}
        <div class="order-card">
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;">
                <div>
                    <h4 style="margin: 0 0 2px;">{{ region.name_en }}</h4>
                    {% if region.name_sw and region.name_sw != region.name_en %}<p style="font-size: 0.82rem; color: var(--muted);">{{ region.name_sw }}</p>{% endif %}
                </div>
                <div style="display: flex; gap: 8px; flex-shrink: 0;">
                    <button type="button" class="btn-small region-edit-toggle" data-target="edit-region-{{ region.id }}">Edit</button>
                    <form method="post" action="{% url 'accounts:admin_delete_region' region.id %}" onsubmit="return confirm('Delete this region? This cannot be undone.');">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: var(--muted);">Delete</button>
                    </form>
                </div>
            </div>

            <form method="post" action="{% url 'accounts:admin_edit_region' region.id %}" id="edit-region-{{ region.id }}" class="contact-form" style="display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);">
                {% csrf_token %}
                <label for="name_en-{{ region.id }}">Name (English)</label>
                <input type="text" id="name_en-{{ region.id }}" name="name_en" value="{{ region.name_en }}" required>

                <label for="name_sw-{{ region.id }}">Name (Swahili)</label>
                <input type="text" id="name_sw-{{ region.id }}" name="name_sw" value="{{ region.name_sw }}">

                <button type="submit" class="btn-cta">Save Changes</button>
            </form>
        </div>
        {% empty %}
        <p style="color: var(--muted);">No regions yet — add your first one above.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="{% static_v 'js/region-picker.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.region-edit-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var form = document.getElementById(btn.getAttribute('data-target'));
                if (!form) return;
                var isOpen = form.style.display !== 'none';
                form.style.display = isOpen ? 'none' : 'flex';
                btn.textContent = isOpen ? 'Edit' : 'Cancel';
            });
        });
    });
</script>
{% endblock %}