{% extends 'base.html' %}
{% load static %}
{% 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">
            {% 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>
            {% 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>
            {% 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 style="margin-top: 18px;">Pickup location</label>
            <div id="delivery-map" class="map-container"></div>
            <input type="hidden" id="id_lat" name="location_lat" value="{{ picker_profile.location_lat|default:'' }}">
            <input type="hidden" id="id_lng" name="location_lng" value="{{ picker_profile.location_lng|default:'' }}">

            <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 'js/location-picker.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        initLocationPicker({
            mapId: 'delivery-map',
            latInputId: 'id_lat',
            lngInputId: 'id_lng',
            addressInputId: null,
            searchInputId: null,
            resultsId: null,
            locateBtnId: null,
            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 %}