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

        <p style="color: var(--muted); margin-bottom: 20px;">
            The registered physical markets pickers are based out of — starting with Dar es Salaam. A B2C picker
            picks their market at signup (or from their profile), which sets their base location from here instead
            of hand-placing a pin. Hiding a market stops it from being offered to new/editing pickers without
            deleting its data.
        </p>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 20px;">
            <h3 style="margin-bottom: 6px;">Add a market</h3>
            <form method="post" class="contact-form">
                {% csrf_token %}
                <label for="name">Market name</label>
                <input type="text" id="name" name="name" placeholder="e.g. Soko la Kariakoo (Food Section)" required>

                <label for="region">Region / area group</label>
                <input type="text" id="region" name="region" placeholder="e.g. Central Hubs & Downtown">

                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" rows="2" placeholder="What this market is known for…"></textarea>

                <label for="lat">Latitude</label>
                <input type="number" step="0.0001" id="lat" name="lat" placeholder="-6.8197" required>

                <label for="lng">Longitude</label>
                <input type="number" step="0.0001" id="lng" name="lng" placeholder="39.2730" required>

                <button type="submit" class="btn-cta">Add Market</button>
            </form>
        </div>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Bulk import via CSV</h3>
            <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 10px;">
                Columns: <code>Region, Market Name &amp; Location, Primary Focus / Notes, Latitude, Longitude</code>
                (or lowercase <code>region, name, notes, lat, lng</code>). A row whose name already exists updates
                it instead of duplicating it.
            </p>
            <form method="post" enctype="multipart/form-data" class="contact-form" id="csv-import-form">
                {% csrf_token %}
                <input type="file" name="csv_file" accept=".csv" required>
                <button type="submit" class="btn-cta" id="csv-import-btn">Import CSV</button>
            </form>
        </div>

        <input type="text" id="market-filter" placeholder="Type to filter by name or region…" style="width: 100%; margin-bottom: 16px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--dark);">

        <div class="admin-table-wrap">
        <table class="admin-table" id="markets-table">
            <thead>
                <tr><th>Market</th><th>Region</th><th>Coordinates</th><th>Status</th><th></th></tr>
            </thead>
            <tbody>
                {% for market in markets %}
                <tr class="market-row" data-search="{{ market.name }} {{ market.region }}">
                    <td>{{ market.name }}{% if market.notes %}<br><small style="color: var(--muted);">{{ market.notes|truncatechars:80 }}</small>{% endif %}</td>
                    <td>{{ market.region|default:"—" }}</td>
                    <td>{{ market.lat }}, {{ market.lng }}</td>
                    <td>{% if market.is_active %}<span class="surface-badge ok">Active</span>{% else %}<span class="surface-badge warn">Hidden</span>{% endif %}</td>
                    <td style="display: flex; gap: 6px;">
                        <button type="button" class="btn-small market-edit-toggle" data-target="edit-market-{{ market.id }}">Edit</button>
                        <form method="post" action="{% url 'accounts:admin_toggle_market' market.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn-small" style="background: var(--muted);">{% if market.is_active %}Hide{% else %}Show{% endif %}</button>
                        </form>
                    </td>
                </tr>
                <tr class="market-edit-row" id="edit-market-{{ market.id }}" style="display: none;">
                    <td colspan="5" style="white-space: normal;">
                        <form method="post" action="{% url 'accounts:admin_edit_market' market.id %}" class="contact-form" style="max-width: 600px;">
                            {% csrf_token %}
                            <label for="name-{{ market.id }}">Market name</label>
                            <input type="text" id="name-{{ market.id }}" name="name" value="{{ market.name }}" required>

                            <label for="region-{{ market.id }}">Region / area group</label>
                            <input type="text" id="region-{{ market.id }}" name="region" value="{{ market.region }}">

                            <label for="notes-{{ market.id }}">Notes</label>
                            <textarea id="notes-{{ market.id }}" name="notes" rows="2">{{ market.notes }}</textarea>

                            <label for="lat-{{ market.id }}">Latitude</label>
                            <input type="number" step="0.0001" id="lat-{{ market.id }}" name="lat" value="{{ market.lat }}" required>

                            <label for="lng-{{ market.id }}">Longitude</label>
                            <input type="number" step="0.0001" id="lng-{{ market.id }}" name="lng" value="{{ market.lng }}" required>

                            <button type="submit" class="btn-cta">Save Changes</button>
                        </form>
                        <form method="post" action="{% url 'accounts:admin_delete_market' market.id %}" style="margin-top: 10px;" onsubmit="return confirm('Remove {{ market.name }}? Pickers based here keep their last saved location. This cannot be undone.');">
                            {% csrf_token %}
                            <button type="submit" class="btn-small" style="background: var(--muted);">Remove this market</button>
                        </form>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="5">No markets yet — add one above or import a CSV.</td></tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.market-edit-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var row = document.getElementById(btn.getAttribute('data-target'));
                if (!row) return;
                var isOpen = row.style.display !== 'none';
                row.style.display = isOpen ? 'none' : 'table-row';
                btn.textContent = isOpen ? 'Edit' : 'Cancel';
            });
        });

        var csvForm = document.getElementById('csv-import-form');
        if (csvForm) {
            csvForm.addEventListener('submit', function () {
                var btn = document.getElementById('csv-import-btn');
                btn.disabled = true;
                btn.textContent = 'Importing…';
            });
        }

        var filterInput = document.getElementById('market-filter');
        var rows = document.querySelectorAll('.market-row');
        filterInput.addEventListener('input', function () {
            var q = filterInput.value.trim().toLowerCase();
            rows.forEach(function (row) {
                var haystack = (row.dataset.search || '').toLowerCase();
                var editRow = row.nextElementSibling;
                var matches = !q || haystack.indexOf(q) !== -1;
                row.style.display = matches ? '' : 'none';
                if (editRow && editRow.classList.contains('market-edit-row') && !matches) {
                    editRow.style.display = 'none';
                }
            });
        });
    });
</script>
{% endblock %}