{% extends 'base.html' %}
{% load static_v %}
{% block title %}{{ vendor_type|title }}s — 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>{{ vendor_type|title }}s</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;">
            {% if vendor_type == 'warehouse' %}
            Registered warehouses a product can be sourced from instead of a market — real stock, fleet/truck
            delivered. Optionally owned by a fleet company (see Fleet Companies), whose own drivers are then
            tried first for its orders.
            {% else %}
            Registered industries/manufacturers a product can be sourced from for bulk/wholesale items — same
            fleet/truck delivery as Warehouse. Optionally owned by a fleet company.
            {% endif %}
            An order sourced from here can't mix with market or generic items in the same cart.
        </p>

        <div class="contact-form-wrap" style="max-width: 600px; margin-bottom: 30px;">
            <h3 style="margin-bottom: 6px;">Add a {{ vendor_type }}</h3>
            <form method="post" enctype="multipart/form-data" class="contact-form">
                {% csrf_token %}
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>

                <label for="region">Region / area group</label>
                <input type="text" id="region" name="region">

                <label for="region_search">Region (shown as a badge on this {{ vendor_type }}'s products)</label>
                <div class="region-picker" style="position: relative;">
                    <input type="text" id="region_search" class="region-search-input" placeholder="{{ t.region_search_placeholder }}" autocomplete="off">
                    <input type="hidden" class="region-search-value" name="region_name">
                    <div class="region-search-results"></div>
                </div>

                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" rows="2"></textarea>

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

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

                <label for="contact_phone" style="margin-top: 10px;">Contact phone (optional)</label>
                <input type="text" id="contact_phone" name="contact_phone">

                <label for="contact_person">Contact person (optional)</label>
                <input type="text" id="contact_person" name="contact_person">

                <label for="landmark_note">Finding it — landmark/directions (optional)</label>
                <textarea id="landmark_note" name="landmark_note" rows="2"></textarea>

                <label for="company_id" style="margin-top: 10px;">Owning fleet company (optional)</label>
                <select id="company_id" name="company_id">
                    <option value="">— none (uses the general B2B truck pool) —</option>
                    {% for c in companies %}
                    <option value="{{ c.id }}">{{ c.company_name }}</option>
                    {% endfor %}
                </select>

                {% if vendor_type == 'warehouse' %}
                <label for="storage_capacity_note">Storage capacity note (optional)</label>
                <input type="text" id="storage_capacity_note" name="storage_capacity_note" placeholder="e.g. 200 sq m cold storage">
                {% else %}
                <label for="license_number">License number (optional)</label>
                <input type="text" id="license_number" name="license_number">
                <label style="display: flex; align-items: center; gap: 6px; font-weight: 400; margin-top: 6px;">
                    <input type="checkbox" name="bulk_only" checked> Bulk/wholesale orders only
                </label>
                {% endif %}

                <label style="margin-top: 10px;">Categories</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="min_order_kg" style="margin-top: 10px;">Minimum order (kg) — B2C, far zone (optional)</label>
                <input type="number" step="any" min="0" id="min_order_kg" name="min_order_kg" placeholder="platform default">
                <label for="close_radius_min_order_kg">Minimum order (kg) — B2C, close zone (optional)</label>
                <input type="number" step="any" min="0" id="close_radius_min_order_kg" name="close_radius_min_order_kg" placeholder="falls back to the far-zone minimum above">
                <p style="color: var(--muted); font-size: 0.82rem; margin-top: -4px;">
                    A close-by B2C customer can be given a lower (or zero) minimum, since a nearby delivery stays cost-effective even for a small basket. Both are ignored for B2B — trucks have no minimum-order rule.
                </p>

                <label for="logo" style="margin-top: 10px;">Logo (optional)</label>
                <input type="file" id="logo" name="logo" accept="image/*">

                <button type="submit" class="btn-cta">Add {{ vendor_type|title }}</button>
            </form>
        </div>

        <div class="admin-table-wrap">
        <table class="admin-table">
            <thead>
                <tr><th>{{ vendor_type|title }}</th><th>Region</th><th>Coordinates</th><th>Status</th><th></th></tr>
            </thead>
            <tbody>
                {% for v in vendors %}
                <tr>
                    <td>
                        {% if v.logo_url %}<img src="{{ v.logo_url }}" alt="" style="height: 22px; width: 22px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 6px;">{% endif %}
                        {{ v.name }}
                        {% if v.notes %}<br><small style="color: var(--muted);">{{ v.notes|truncatechars:80 }}</small>{% endif %}
                    </td>
                    <td>{{ v.region|default:"—" }}</td>
                    <td>{{ v.lat }}, {{ v.lng }}</td>
                    <td>{% if v.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 vendor-edit-toggle" data-target="edit-vendor-{{ v.id }}">Edit</button>
                        <button type="button" class="btn-small vendor-edit-toggle" data-target="stock-vendor-{{ v.id }}">Stock</button>
                        <form method="post" action="{% url 'accounts:admin_toggle_vendor' vendor_type v.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn-small" style="background: var(--muted);">{% if v.is_active %}Hide{% else %}Show{% endif %}</button>
                        </form>
                    </td>
                </tr>
                <tr id="stock-vendor-{{ v.id }}" style="display: none;">
                    <td colspan="5" style="white-space: normal;">
                        {% if v.stock %}
                        <table class="admin-table" style="margin-bottom: 12px;">
                            <thead><tr><th>Product</th><th>In stock</th></tr></thead>
                            <tbody>
                                {% for s in v.stock %}
                                <tr>
                                    <td>{{ s.product_name }}</td>
                                    <td>{% if s.quantity < 10 %}<span class="surface-badge warn">{{ s.quantity }} {{ s.unit }} — low</span>{% else %}{{ s.quantity }} {{ s.unit }}{% endif %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% else %}
                        <p style="color: var(--muted); font-size: 0.85rem;">No stock-tracked products yet for this {{ vendor_type }} — every tied product is unlimited until you receive stock for it below.</p>
                        {% endif %}
                        {% if v.tied_products %}
                        <form method="post" action="{% url 'accounts:admin_receive_vendor_stock' vendor_type v.id %}" style="display: inline-flex; align-items: center; gap: 6px;">
                            {% csrf_token %}
                            <select name="product_id" required>
                                {% for p in v.tied_products %}
                                <option value="{{ p.id }}">{{ p.name }}</option>
                                {% endfor %}
                            </select>
                            <input type="number" min="1" name="quantity" placeholder="Qty received" required style="width: 120px;">
                            <button type="submit" class="btn-small">Receive Stock</button>
                        </form>
                        {% else %}
                        <p style="color: var(--muted); font-size: 0.85rem;">No products are tied to this {{ vendor_type }} yet — tie one from the product edit form first.</p>
                        {% endif %}
                    </td>
                </tr>
                <tr id="edit-vendor-{{ v.id }}" style="display: none;">
                    <td colspan="5" style="white-space: normal;">
                        <form method="post" enctype="multipart/form-data" action="{% url 'accounts:admin_edit_vendor' vendor_type v.id %}" class="contact-form" style="max-width: 600px;">
                            {% csrf_token %}
                            <label>Name</label>
                            <input type="text" name="name" value="{{ v.name }}" required>
                            <label>Region</label>
                            <input type="text" name="region" value="{{ v.region }}">
                            <label>Region (shown as a badge on this {{ vendor_type }}'s products)</label>
                            <div class="region-picker" style="position: relative;">
                                <input type="text" class="region-search-input" placeholder="{{ t.region_search_placeholder }}" value="{{ v.region_display_name }}" autocomplete="off">
                                <input type="hidden" class="region-search-value" name="region_name" value="{{ v.region_display_name }}">
                                <div class="region-search-results"></div>
                            </div>
                            <label>Notes</label>
                            <textarea name="notes" rows="2">{{ v.notes }}</textarea>
                            <label>Latitude</label>
                            <input type="number" step="any" name="lat" value="{{ v.lat }}" required>
                            <label>Longitude</label>
                            <input type="number" step="any" name="lng" value="{{ v.lng }}" required>
                            <label style="margin-top: 10px;">Contact phone</label>
                            <input type="text" name="contact_phone" value="{{ v.contact_phone|default:'' }}">
                            <label>Contact person</label>
                            <input type="text" name="contact_person" value="{{ v.contact_person|default:'' }}">
                            <label>Landmark/directions</label>
                            <textarea name="landmark_note" rows="2">{{ v.landmark_note|default:'' }}</textarea>
                            <label style="margin-top: 10px;">Owning fleet company</label>
                            <select name="company_id">
                                <option value="">— none —</option>
                                {% for c in companies %}
                                <option value="{{ c.id }}" {% if v.company_id == c.id %}selected{% endif %}>{{ c.company_name }}</option>
                                {% endfor %}
                            </select>
                            {% if vendor_type == 'warehouse' %}
                            <label>Storage capacity note</label>
                            <input type="text" name="storage_capacity_note" value="{{ v.storage_capacity_note|default:'' }}">
                            {% else %}
                            <label>License number</label>
                            <input type="text" name="license_number" value="{{ v.license_number|default:'' }}">
                            <label style="display: flex; align-items: center; gap: 6px; font-weight: 400; margin-top: 6px;">
                                <input type="checkbox" name="bulk_only" {% if v.bulk_only %}checked{% endif %}> Bulk/wholesale orders only
                            </label>
                            {% endif %}
                            <label style="margin-top: 10px;">Categories</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 v.category_list %}checked{% endif %}> {{ c.name }}
                                </label>
                                {% endfor %}
                            </div>
                            <label style="margin-top: 10px;">Minimum order (kg) — B2C, far zone</label>
                            <input type="number" step="any" min="0" name="min_order_kg" value="{{ v.min_order_kg|default:'' }}" placeholder="platform default">
                            <label>Minimum order (kg) — B2C, close zone</label>
                            <input type="number" step="any" min="0" name="close_radius_min_order_kg" value="{{ v.close_radius_min_order_kg|default:'' }}" placeholder="falls back to the far-zone minimum above">
                            <label style="margin-top: 10px;">Logo</label>
                            {% if v.logo_url %}<p style="margin: -4px 0 6px;"><img src="{{ v.logo_url }}" alt="" style="height: 36px; border-radius: 4px;"></p>{% endif %}
                            <input type="file" name="logo" accept="image/*">
                            <button type="submit" class="btn-cta">Save Changes</button>
                        </form>
                        <form method="post" action="{% url 'accounts:admin_delete_vendor' vendor_type v.id %}" style="margin-top: 10px;" onsubmit="return confirm('Remove {{ v.name }}? This cannot be undone.');">
                            {% csrf_token %}
                            <button type="submit" class="btn-small" style="background: var(--muted);">Remove</button>
                        </form>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="5">No {{ vendor_type }}s yet — add one above.</td></tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="{% static_v 'js/region-picker.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.vendor-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';
            });
        });
    });
</script>
{% endblock %}