{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}Register B2B Picker — Admin{% endblock %}

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

{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 700px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Register B2B Picker</h1>
            </div>
            <a href="{% url 'accounts:admin_users' %}" class="btn-small">&larr; Back to Manage Users</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 24px;">
            B2B pickers (truck drivers) don't self-signup — you register them here directly. They're
            immediately approved and visible to B2B customers, and get emailed a link to set their own
            password and log in.
        </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" required>

            <label for="last_name">Last name</label>
            <input type="text" id="last_name" name="last_name">

            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>

            <label for="phone_number">Phone number</label>
            <input type="text" id="phone_number" name="phone_number">

            <label for="truck_type_id">Truck type</label>
            <select id="truck_type_id" name="truck_type_id" required>
                <option value="">— Select —</option>
                {% for t in truck_types %}
                <option value="{{ t.id }}">{{ t.icon }} {{ t.name }} ({{ t.capacity_label }})</option>
                {% endfor %}
            </select>

            <label for="market_location">Depot / base address</label>
            <input type="text" id="market_location" name="market_location">

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

            <label style="margin-top: 18px;">Base location</label>
            <div id="delivery-map" class="map-container"></div>
            <input type="hidden" id="id_lat" name="location_lat">
            <input type="hidden" id="id_lng" name="location_lng">

            <button type="submit" class="btn-cta" style="margin-top: 20px;">Register Picker</button>
        </form>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v '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: {{ center.lat }},
            initialLng: {{ center.lng }},
            initialZoom: 12,
        });
    });
</script>
{% endblock %}