{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.profile_edit_title }} — 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">
    <div class="content-inner" style="max-width: 700px;">
        <span class="section-kicker">{{ t.picker_dashboard_kicker }}</span>
        <h1>{{ t.profile_edit_title }}</h1>

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

            <label for="last_name">{{ t.profile_last_name }}</label>
            <input type="text" id="last_name" name="last_name" value="{{ user_row.last_name }}">

            <label for="phone_number">{{ t.profile_phone }}</label>
            <input type="text" id="phone_number" name="phone_number" value="{{ user_row.phone_number }}">

            <label for="sms_language">{{ t.profile_sms_language }}</label>
            <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">{{ t.profile_sms_language_help }}</p>
            <select id="sms_language" name="sms_language">
                <option value="sw" {% if user_row.sms_language != 'en' %}selected{% endif %}>{{ t.language_swahili }}</option>
                <option value="en" {% if user_row.sms_language == 'en' %}selected{% endif %}>{{ t.language_english }}</option>
            </select>

            {% if profile.picker_segment == 'b2b' %}
            <label for="truck_type_id">{{ t.profile_truck_type }}</label>
            <select id="truck_type_id" name="truck_type_id">
                {% for tt in truck_types %}
                <option value="{{ tt.id }}" {% if profile.truck_type_id == tt.id %}selected{% endif %}>{{ tt.icon }} {{ tt.name }} ({{ tt.capacity_label }})</option>
                {% endfor %}
            </select>
            {% else %}
            <label for="vehicle_type">{{ t.profile_vehicle_type }}</label>
            <select id="vehicle_type" name="vehicle_type">
                {% for value, label in vehicle_choices %}
                <option value="{{ value }}" {% if profile.vehicle_type == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>

            <label for="license_plate">{{ t.profile_license_plate }}</label>
            <input type="text" id="license_plate" name="license_plate" value="{{ profile.license_plate }}">

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

            <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 }}" {% if profile.market_id == m.id %}selected{% endif %}>{{ m.name }}</option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>
            {% endif %}

            <label for="market_location">{{ t.profile_market_location }}</label>
            <input type="text" id="market_location" name="market_location" value="{{ profile.market_location }}">

            <label for="regions_served">{{ t.profile_regions_served }}</label>
            <p style="color: var(--muted); font-size: 0.88rem; margin: -4px 0 6px;">{{ t.profile_regions_served_help }}</p>
            <input type="text" id="regions_served" name="regions_served" value="{{ profile.regions_served }}" placeholder="{{ t.profile_regions_served_placeholder }}">

            <label style="margin-top: 22px;">{{ t.profile_your_photo }}</label>
            <p style="color: var(--muted); font-size: 0.88rem; margin: -4px 0 6px;">{{ t.profile_your_photo_help }}</p>
            {% if profile.photo_url %}<img src="{{ profile.photo_url }}" alt="" style="width: 90px; height: 90px; object-fit: cover; border-radius: 50%; margin-bottom: 8px; display: block;">{% endif %}
            <input type="file" name="photo" accept="image/*" capture="user">

            <label for="license_number" style="margin-top: 14px;">{{ t.signup_license_number }}</label>
            <input type="text" id="license_number" name="license_number" value="{{ profile.license_number }}">

            <label style="margin-top: 22px;">{{ t.profile_location_label }}</label>
            <p style="color: var(--muted); font-size: 0.88rem; margin: -4px 0 6px;">{{ t.profile_location_help }}</p>
            <div class="map-search-row">
                <div class="map-search-wrap">
                    <input type="text" id="location-search" placeholder="{{ t.location_search_placeholder }}">
                    <div class="geocode-results" id="location-results"></div>
                </div>
                <button type="button" id="locate-me-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.location_use_current }}
                </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>
            <input type="hidden" id="id_lat" name="lat" value="{{ profile.location_lat|default:'' }}">
            <input type="hidden" id="id_lng" name="lng" value="{{ profile.location_lng|default:'' }}">

            <button type="submit" class="btn-cta" style="margin-top: 20px;">{{ t.profile_save }}</button>
        </form>
        <p class="auth-switch"><a href="{% url 'accounts:picker_home' %}">&larr; {{ t.nav_my_dashboard }}</a></p>
    </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: 'market_location',
            searchInputId: 'location-search',
            resultsId: 'location-results',
            locateBtnId: 'locate-me-btn',
            marketSelectId: 'market-select',
            nearestMarketNoteId: 'nearest-market-note',
            initialLat: {{ profile.location_lat|default:center.lat }},
            initialLng: {{ profile.location_lng|default:center.lng }},
            initialMarkerLat: {{ profile.location_lat|default:"null" }},
            initialMarkerLng: {{ profile.location_lng|default:"null" }},
            initialZoom: {% if profile.location_lat %}15{% else %}12{% endif %},
        });
    });
</script>
{% endblock %}