{% 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" enctype="multipart/form-data" 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>

                <label for="contact_phone" style="margin-top: 10px;">Shop/stall contact phone (optional)</label>
                <input type="text" id="contact_phone" name="contact_phone" placeholder="e.g. +255 6XX XXX XXX">

                <label for="contact_person">Contact person (optional)</label>
                <input type="text" id="contact_person" name="contact_person" placeholder="e.g. Mama Neema">

                <label for="landmark_note">Finding it — landmark/directions (optional)</label>
                <p style="color: var(--muted); font-size: 0.82rem; margin: -4px 0 6px;">
                    Shown to the picker when a product is tied to this specific market — helps them actually find
                    it once they're nearby, especially in a crowded market where a map pin alone isn't enough.
                </p>
                <textarea id="landmark_note" name="landmark_note" rows="2" placeholder="e.g. Blue-roofed stall behind the fish section, ask for Mama Neema"></textarea>

                <label style="margin-top: 10px;">Categories — what this market is known for</label>
                <div style="display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 6px;">
                    {% for c in categories %}
                    <label style="display: flex; align-items: center; gap: 5px; font-weight: 400;">
                        <input type="checkbox" name="categories" value="{{ c.name }}"> {{ c.name }}
                    </label>
                    {% endfor %}
                </div>

                <label for="logo" style="margin-top: 10px;">Logo (optional)</label>
                <p style="color: var(--muted); font-size: 0.82rem; margin: -4px 0 6px;">
                    Shown instead of the market name wherever a product is tagged with this market — leave blank to
                    just show the name as text.
                </p>
                <input type="file" id="logo" name="logo" accept="image/*">

                <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>
                        {% if market.logo_url %}<img src="{{ market.logo_url }}" alt="" style="height: 22px; width: 22px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 6px;">{% endif %}
                        {{ market.name }}
                        {% if market.notes %}<br><small style="color: var(--muted);">{{ market.notes|truncatechars:80 }}</small>{% endif %}
                        {% if market.category_list %}<br><small style="color: var(--muted);">{{ market.category_list|join:", " }}</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" enctype="multipart/form-data" 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>

                            <label for="contact_phone-{{ market.id }}" style="margin-top: 10px;">Shop/stall contact phone (optional)</label>
                            <input type="text" id="contact_phone-{{ market.id }}" name="contact_phone" value="{{ market.contact_phone|default:'' }}">

                            <label for="contact_person-{{ market.id }}">Contact person (optional)</label>
                            <input type="text" id="contact_person-{{ market.id }}" name="contact_person" value="{{ market.contact_person|default:'' }}">

                            <label for="landmark_note-{{ market.id }}">Finding it — landmark/directions (optional)</label>
                            <textarea id="landmark_note-{{ market.id }}" name="landmark_note" rows="2">{{ market.landmark_note|default:'' }}</textarea>

                            <label style="margin-top: 10px;">Categories — what this market is known for</label>
                            <div style="display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 6px;">
                                {% for c in categories %}
                                <label style="display: flex; align-items: center; gap: 5px; font-weight: 400;">
                                    <input type="checkbox" name="categories" value="{{ c.name }}" {% if c.name in market.category_list %}checked{% endif %}> {{ c.name }}
                                </label>
                                {% endfor %}
                            </div>

                            <label for="logo-{{ market.id }}" style="margin-top: 10px;">Logo (optional)</label>
                            {% if market.logo_url %}
                            <p style="margin: -4px 0 6px;"><img src="{{ market.logo_url }}" alt="" style="height: 36px; border-radius: 4px;"></p>
                            {% endif %}
                            <input type="file" id="logo-{{ market.id }}" name="logo" accept="image/*">

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