{% extends 'base.html' %}
{% load static %}
{% 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.settings_kicker }}</span>
        <h1>{{ t.profile_edit_title }}</h1>

        <form method="post" class="auth-form">
            {% 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 }}">

            {% if profile.account_type == 'b2b' %}
            <label for="business_name">{{ t.profile_business_name }}</label>
            <input type="text" id="business_name" name="business_name" value="{{ profile.business_name }}">
            {% endif %}

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

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

            <label style="margin-top: 22px;">{{ t.profile_registered_location_label }}</label>
            <p style="color: var(--muted); font-size: 0.88rem; margin: -4px 0 6px;">{{ t.profile_registered_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>

            <label for="address">{{ t.profile_address }}</label>
            <textarea id="address" name="address" rows="2">{{ profile.address }}</textarea>

            <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 'market:account_settings' %}">&larr; {{ t.settings_title }}</a></p>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<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: 'address',
            searchInputId: 'location-search',
            resultsId: 'location-results',
            locateBtnId: 'locate-me-btn',
            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 %}