{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}Edit User — Admin{% endblock %}

{% block extra_head %}
{% if picker_profile %}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />{% endif %}
{% endblock %}

{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 600px;">
        <span class="section-kicker">Admin Portal</span>
        <h1>Edit {{ edited_user.first_name }} {{ edited_user.last_name }}</h1>
        <p style="color: var(--muted); margin-bottom: 20px;">{{ edited_user.email }} &middot; {{ edited_user.role|title }}</p>

        <form method="post" class="auth-form" enctype="multipart/form-data">
            {% csrf_token %}
            <label for="first_name">First name</label>
            <input type="text" id="first_name" name="first_name" value="{{ edited_user.first_name }}">

            <label for="last_name">Last name</label>
            <input type="text" id="last_name" name="last_name" value="{{ edited_user.last_name }}">

            <label for="phone_number">Phone number</label>
            <input type="text" id="phone_number" name="phone_number" value="{{ edited_user.phone_number }}">

            {% if customer_profile %}
            <label for="account_type">Account type</label>
            <select id="account_type" name="account_type">
                {% for value, label in account_type_choices %}
                <option value="{{ value }}" {% if customer_profile.account_type == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>

            <label for="business_name">Business name</label>
            <input type="text" id="business_name" name="business_name" value="{{ customer_profile.business_name }}">

            <label for="address">Address</label>
            <textarea id="address" name="address" rows="2">{{ customer_profile.address }}</textarea>

            <label for="city">City</label>
            <input type="text" id="city" name="city" value="{{ customer_profile.city }}">

            <label for="area">Area</label>
            <input type="text" id="area" name="area" value="{{ customer_profile.area }}">
            {% endif %}

            {% if picker_profile %}
            <p style="color: var(--muted); font-size: 0.85rem; margin-top: -6px;">
                Segment: <strong>{% if picker_profile.picker_segment == 'b2b' %}B2B (truck){% else %}B2C{% endif %}</strong>
            </p>

            {% if picker_profile.picker_segment == 'b2b' %}
            <label for="truck_type_id">Truck type</label>
            <select id="truck_type_id" name="truck_type_id">
                {% for t in truck_types %}
                <option value="{{ t.id }}" {% if picker_profile.truck_type_id == t.id %}selected{% endif %}>{{ t.icon }} {{ t.name }} ({{ t.capacity_label }})</option>
                {% endfor %}
            </select>

            <label for="warehouses">Ties to these warehouses/industries/markets</label>
            <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">
                A standalone B2B picker (one truck, no fleet company) offered first for an order tied to any of these — ctrl/cmd-click to select more than one. Leave empty to stay in the general B2B pool, matched by proximity only.
            </p>
            <select id="warehouses" name="warehouses" multiple size="5">
                {% for w in vendor_tie_options %}
                <option value="{{ w.vendor_key }}" {% if w.vendor_key in picker_vendor_tie_keys %}selected{% endif %}>{{ w.name }} ({{ w.vendor_type|title }})</option>
                {% endfor %}
            </select>
            {% else %}
            <label for="vehicle_type">Vehicle type</label>
            <select id="vehicle_type" name="vehicle_type">
                {% for value, label in vehicle_choices %}
                <option value="{{ value }}" {% if picker_profile.vehicle_type == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>

            <label for="license_plate">License plate</label>
            <input type="text" id="license_plate" name="license_plate" value="{{ picker_profile.license_plate }}">

            <label for="source_type">Sources from</label>
            <select id="source_type" name="source_type">
                {% for value, label in source_choices %}
                <option value="{{ value }}" {% if picker_profile.source_type == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>

            <label for="market-select">Base market</label>
            <select id="market-select" name="market_id">
                <option value="">— pick manually on the map —</option>
                {% regroup markets by region as region_list %}
                {% for region in region_list %}
                <optgroup label="{{ region.grouper|default:"Other" }}">
                    {% for m in region.list %}
                    <option value="{{ m.id }}" data-lat="{{ m.lat }}" data-lng="{{ m.lng }}" {% if picker_profile.market_id == m.id %}selected{% endif %}>{{ m.name }}</option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>
            {% endif %}

            <label for="market_location">{% if picker_profile.picker_segment == 'b2b' %}Depot / base address{% else %}Market location{% endif %}</label>
            <input type="text" id="market_location" name="market_location" value="{{ picker_profile.market_location }}">

            <label for="regions_served">Regions served</label>
            <input type="text" id="regions_served" name="regions_served" value="{{ picker_profile.regions_served }}" placeholder="e.g. Kinondoni, Ilala, Temeke">

            <label>Registered region (B2C region-lock)</label>
            <p style="color: var(--muted); font-size: 0.82rem; margin: -4px 0 6px;">For individual customer orders only — leave unset to keep matching by distance only.</p>
            <div class="region-picker" style="position: relative;">
                <input type="text" class="region-search-input" placeholder="Search e.g. Kinondoni, Arusha…" value="{{ picker_profile.region_name|default:'' }}" autocomplete="off">
                <input type="hidden" class="region-search-value" name="region_name" value="{{ picker_profile.region_name|default:'' }}">
                <div class="region-search-results"></div>
            </div>

            <label style="margin-top: 18px;">Photo — review before approving</label>
            <div style="margin-bottom: 10px;">
                {% if picker_profile.photo_url %}
                <img src="{{ picker_profile.photo_url }}" alt="" style="width: 100px; height: 100px; object-fit: cover; border-radius: 50%; display: block; margin-bottom: 6px;">
                {% else %}
                <p style="color: var(--muted); font-size: 0.85rem;">Not provided yet (optional for now)</p>
                {% endif %}
                <input type="file" name="photo" accept="image/*" capture="user">
            </div>
            <label for="license_number">License / ID number</label>
            <input type="text" id="license_number" name="license_number" value="{{ picker_profile.license_number }}">

            <label style="margin-top: 18px;">Pickup location</label>
            <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">
                Search a market/area name, use current location, click the map to set a pin, drag the pin to fine-tune, or reset it if the picker couldn't set it themselves.
            </p>
            <div class="map-search-row">
                <div class="map-search-wrap">
                    <input type="text" id="admin-picker-location-search" placeholder="e.g. Kariakoo Market">
                    <div class="geocode-results" id="admin-picker-location-results"></div>
                </div>
                <button type="button" id="admin-picker-locate-btn" class="locate-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
                    Use current location
                </button>
                <button type="button" id="admin-picker-reset-btn" class="btn-small" style="background: var(--muted);">Reset location</button>
            </div>
            <div id="delivery-map" class="map-container"></div>
            <p id="nearest-market-note" style="display: none; color: var(--muted); font-size: 0.85rem; margin-top: 6px;"></p>

            <div style="display: flex; gap: 10px; margin-top: 10px;">
                <div style="flex: 1;">
                    <label for="id_lat">Latitude</label>
                    <input type="number" step="any" id="id_lat" name="location_lat" value="{{ picker_profile.location_lat|default:'' }}" placeholder="e.g. -6.7924">
                </div>
                <div style="flex: 1;">
                    <label for="id_lng">Longitude</label>
                    <input type="number" step="any" id="id_lng" name="location_lng" value="{{ picker_profile.location_lng|default:'' }}" placeholder="e.g. 39.2083">
                </div>
            </div>
            <p style="color: var(--muted); font-size: 0.82rem; margin: 4px 0 0;">Type exact coordinates directly if you have them — the map and address above update to match.</p>

            <p style="color: var(--muted); font-size: 0.85rem; margin-top: 10px;">
                Approval status: {% if picker_profile.is_approved %}<strong style="color: var(--blue);">Approved</strong>{% else %}<strong>Pending</strong> &mdash; approve from the Manage Users list{% endif %}
            </p>
            {% endif %}

            <button type="submit" class="btn-cta">Save changes</button>
        </form>
        <p class="auth-switch"><a href="{% url 'accounts:admin_users' %}">&larr; Back to Manage Users</a></p>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
{% if picker_profile %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/location-picker.js' %}"></script>
<script src="{% static_v 'js/region-picker.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        initLocationPicker({
            mapId: 'delivery-map',
            latInputId: 'id_lat',
            lngInputId: 'id_lng',
            addressInputId: 'market_location',
            searchInputId: 'admin-picker-location-search',
            resultsId: 'admin-picker-location-results',
            locateBtnId: 'admin-picker-locate-btn',
            resetBtnId: 'admin-picker-reset-btn',
            marketSelectId: 'market-select',
            nearestMarketNoteId: 'nearest-market-note',
            initialLat: {{ picker_profile.location_lat|default:center.lat }},
            initialLng: {{ picker_profile.location_lng|default:center.lng }},
            initialMarkerLat: {{ picker_profile.location_lat|default:"null" }},
            initialMarkerLng: {{ picker_profile.location_lng|default:"null" }},
            initialZoom: {% if picker_profile.location_lat %}15{% else %}12{% endif %},
        });
    });
</script>
{% endif %}
{% endblock %}