{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.title_signup }} — PickkerMarket{% 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">
    <form class="auth-form" method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        <h1>{{ t.signup_title }}</h1>

        {% if form.non_field_errors %}
            <div class="field-error">{{ form.non_field_errors }}</div>
        {% endif %}

        <label>{{ t.signup_role_label }}</label>
        <div class="role-toggle">
            {% for radio in form.role %}
                <label>{{ radio.tag }} {{ radio.choice_label }}</label>
            {% endfor %}
        </div>

        <h3 class="form-section-heading">{{ t.signup_account_details_heading }}</h3>

        <label for="{{ form.email.id_for_label }}">{{ t.signup_email_label }}</label>
        {{ form.email }}
        {% if form.email.errors %}<div class="field-error">{{ form.email.errors }}</div>{% endif %}

        <div class="form-row-2">
            <div>
                <label for="{{ form.first_name.id_for_label }}">{{ t.signup_first_name }}</label>
                {{ form.first_name }}
            </div>
            <div>
                <label for="{{ form.last_name.id_for_label }}">{{ t.signup_last_name }}</label>
                {{ form.last_name }}
            </div>
        </div>

        <label for="{{ form.phone_number.id_for_label }}">{{ t.signup_phone_number }}</label>
        {{ form.phone_number }}

        <label for="{{ form.preferred_language.id_for_label }}">{{ t.signup_preferred_language }}</label>
        {{ form.preferred_language }}

        <h3 class="form-section-heading">{{ t.signup_password_heading }}</h3>

        <label for="{{ form.password1.id_for_label }}">{{ t.signup_password }}</label>
        {{ form.password1 }}

        <label for="{{ form.password2.id_for_label }}">{{ t.signup_confirm_password }}</label>
        {{ form.password2 }}
        {% if form.password2.errors %}<div class="field-error">{{ form.password2.errors }}</div>{% endif %}

        <div class="role-section" data-role-fields="customer">
            <h3 class="form-section-heading">{{ t.signup_address_heading }}</h3>

            <label for="{{ form.account_type.id_for_label }}">{{ t.signup_account_type }}</label>
            {{ form.account_type }}

            <label for="{{ form.business_name.id_for_label }}">{{ t.signup_business_name }}</label>
            {{ form.business_name }}

            <button type="button" id="customer-locate-btn" class="locate-btn" style="margin: 6px 0 4px;">
                <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>
                {{ t.signup_use_current_location }}
            </button>

            <label for="{{ form.address.id_for_label }}">{{ t.signup_address }}</label>
            {{ form.address }}

            <div class="form-row-2">
                <div>
                    <label for="{{ form.city.id_for_label }}">{{ t.signup_city }}</label>
                    {{ form.city }}
                </div>
                <div>
                    <label for="{{ form.area.id_for_label }}">{{ t.signup_area }}</label>
                    {{ form.area }}
                </div>
            </div>
        </div>

        <div class="role-section" data-role-fields="picker">
            <h3 class="form-section-heading">{{ t.signup_vehicle_market_heading }}</h3>

            <label for="{{ form.vehicle_type.id_for_label }}">{{ t.signup_vehicle_type }}</label>
            {{ form.vehicle_type }}
            {% if form.vehicle_type.errors %}<div class="field-error">{{ form.vehicle_type.errors }}</div>{% endif %}

            <label for="{{ form.license_plate.id_for_label }}">{{ t.signup_license_plate }}</label>
            {{ form.license_plate }}

            <label for="market-select">{{ t.signup_market_select_label }}</label>
            <select id="market-select" name="market_id">
                <option value="">{{ t.signup_market_select_placeholder }}</option>
                {% regroup markets by region as region_list %}
                {% for region in region_list %}
                <optgroup label="{{ region.grouper|default:t.signup_market_select_placeholder }}">
                    {% for m in region.list %}
                    <option value="{{ m.id }}" data-lat="{{ m.lat }}" data-lng="{{ m.lng }}">{{ m.name }}</option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>

            <label style="margin-top: 10px;">{{ t.signup_market_location_label }}</label>
            <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">{{ t.signup_market_location_help }}</p>
            {% if form.market_location.errors %}<div class="field-error">{{ form.market_location.errors }}</div>{% endif %}

            <div class="map-search-row">
                <div class="map-search-wrap">
                    <input type="text" id="picker-location-search" placeholder="e.g. Kariakoo Market">
                    <div class="geocode-results" id="picker-location-results"></div>
                </div>
                <button type="button" id="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>
                    {{ t.signup_use_current_location }}
                </button>
            </div>
            <div id="picker-location-map" class="map-container"></div>
            <p id="nearest-market-note" style="display: none; color: var(--muted); font-size: 0.85rem; margin-top: 6px;"></p>
            {{ form.market_location }}
            {{ form.location_lat }}
            {{ form.location_lng }}

            <label for="{{ form.license_number.id_for_label }}">{{ t.signup_license_number }}</label>
            {{ form.license_number }}
        </div>

        <div class="field-checkbox-row" style="display: flex; align-items: flex-start; gap: 8px; margin: 14px 0;">
            {{ form.agree_to_policies }}
            <label for="{{ form.agree_to_policies.id_for_label }}" style="font-weight: normal;">
                {{ t.signup_agree_prefix }}
                <a href="{% url 'market:terms' %}" target="_blank" rel="noopener">{{ t.signup_agree_terms }}</a>,
                <a href="{% url 'market:privacy' %}" target="_blank" rel="noopener">{{ t.signup_agree_privacy }}</a>
                {{ t.signup_agree_and }}
                <a href="{% url 'market:cookies' %}" target="_blank" rel="noopener">{{ t.signup_agree_cookies }}</a>
            </label>
        </div>
        {% if form.agree_to_policies.errors %}<div class="field-error">{{ form.agree_to_policies.errors }}</div>{% endif %}

        <button type="submit" class="btn-cta">{{ t.signup_submit }}</button>
    </form>

    <p class="auth-switch">{{ t.signup_has_account }} <a href="{% url 'accounts:login' %}">{{ t.signup_login_link }}</a></p>
</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>
    // Customer delivery-address autofill — no map, just a quick GPS fix
    // followed by a reverse-geocode lookup that fills Address/City/Mtaa in
    // one tap, since a customer just needs a rough starting point here (the
    // precise delivery pin is dropped later, at checkout).
    document.addEventListener('DOMContentLoaded', function () {
        var locateBtn = document.getElementById('customer-locate-btn');
        if (!locateBtn) return;
        var addressInput = document.getElementById('{{ form.address.id_for_label }}');
        var cityInput = document.getElementById('{{ form.city.id_for_label }}');
        var areaInput = document.getElementById('{{ form.area.id_for_label }}');
        var originalText = locateBtn.innerHTML;

        function fillFromCoords(lat, lng) {
            fetch('{% url "market:reverse_geocode_components_view" %}?lat=' + lat + '&lng=' + lng)
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (addressInput && data.address) addressInput.value = data.address;
                    if (cityInput && data.city) cityInput.value = data.city;
                    if (areaInput && data.mtaa) areaInput.value = data.mtaa;
                    locateBtn.innerHTML = originalText;
                })
                .catch(function () {
                    locateBtn.innerHTML = originalText;
                });
        }

        locateBtn.addEventListener('click', function () {
            locateBtn.innerHTML = '{{ t.signup_locating|escapejs }}';
            if (!navigator.geolocation) {
                locateBtn.innerHTML = originalText;
                return;
            }
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    fillFromCoords(position.coords.latitude, position.coords.longitude);
                },
                function () {
                    locateBtn.innerHTML = originalText;
                },
                { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 },
            );
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        initLocationPicker({
            mapId: 'picker-location-map',
            latInputId: '{{ form.location_lat.id_for_label }}',
            lngInputId: '{{ form.location_lng.id_for_label }}',
            addressInputId: '{{ form.market_location.id_for_label }}',
            searchInputId: 'picker-location-search',
            resultsId: 'picker-location-results',
            locateBtnId: 'picker-locate-btn',
            marketSelectId: 'market-select',
            nearestMarketNoteId: 'nearest-market-note',
            initialLat: -6.7924,
            initialLng: 39.2083,
            initialZoom: 12,
        });
    });
</script>
{% endblock %}