{% 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.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 }}">

            <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.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 }}">

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

            <label for="business_license_number">{{ t.signup_business_license_number }}</label>
            <input type="text" id="business_license_number" name="business_license_number" value="{{ profile.business_license_number }}">
            {% 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>

        <h2 style="margin-top: 40px;">{{ t.profile_named_locations_title }}</h2>
        <p style="color: var(--muted); font-size: 0.9rem; margin-bottom: 18px;">{{ t.profile_named_locations_help }}</p>

        {% for kind, loc in named_location_forms %}
        <div class="order-card" style="margin-bottom: 20px;">
            <strong>{{ loc.label }}</strong>
            <span class="surface-badge {% if loc.location %}ok{% endif %}" style="margin-left: 8px;">
                {% if loc.location %}{{ t.profile_named_location_registered }}{% else %}{{ t.profile_named_location_not_set }}{% endif %}
            </span>
            {% if loc.location and loc.location.address %}<p style="color: var(--muted); font-size: 0.88rem; margin-top: 6px;">{{ loc.location.address }}</p>{% endif %}

            <form method="post" action="{% url 'market:profile_save_named_location' kind %}" style="margin-top: 12px;">
                {% csrf_token %}
                <div class="map-search-row">
                    <div class="map-search-wrap">
                        <input type="text" id="{{ kind }}-location-search" placeholder="{{ t.location_search_placeholder }}">
                        <div class="geocode-results" id="{{ kind }}-location-results"></div>
                    </div>
                    <button type="button" id="{{ kind }}-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.location_use_current }}
                    </button>
                </div>
                <div id="{{ kind }}-map" class="map-container" style="height: 220px;"></div>
                <input type="text" name="address" id="{{ kind }}-address" value="{{ loc.location.address|default:'' }}" placeholder="{{ t.profile_address }}" style="margin-top: 8px;">
                <input type="hidden" name="lat" id="{{ kind }}-lat" value="{{ loc.location.lat|default:'' }}">
                <input type="hidden" name="lng" id="{{ kind }}-lng" value="{{ loc.location.lng|default:'' }}">
                <button type="submit" class="btn-cta" style="margin-top: 10px;">{{ loc.save_label }}</button>
            </form>
        </div>
        {% endfor %}

        <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_v '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 %},
        });

        initLocationPicker({
            mapId: 'home-map',
            latInputId: 'home-lat',
            lngInputId: 'home-lng',
            addressInputId: 'home-address',
            searchInputId: 'home-location-search',
            resultsId: 'home-location-results',
            locateBtnId: 'home-locate-btn',
            initialLat: {{ home_location.lat|default:center.lat }},
            initialLng: {{ home_location.lng|default:center.lng }},
            initialMarkerLat: {{ home_location.lat|default:"null" }},
            initialMarkerLng: {{ home_location.lng|default:"null" }},
            initialZoom: {% if home_location %}15{% else %}12{% endif %},
        });

        initLocationPicker({
            mapId: 'business-map',
            latInputId: 'business-lat',
            lngInputId: 'business-lng',
            addressInputId: 'business-address',
            searchInputId: 'business-location-search',
            resultsId: 'business-location-results',
            locateBtnId: 'business-locate-btn',
            initialLat: {{ business_location.lat|default:center.lat }},
            initialLng: {{ business_location.lng|default:center.lng }},
            initialMarkerLat: {{ business_location.lat|default:"null" }},
            initialMarkerLng: {{ business_location.lng|default:"null" }},
            initialZoom: {% if business_location %}15{% else %}12{% endif %},
        });

        initLocationPicker({
            mapId: 'other-map',
            latInputId: 'other-lat',
            lngInputId: 'other-lng',
            addressInputId: 'other-address',
            searchInputId: 'other-location-search',
            resultsId: 'other-location-results',
            locateBtnId: 'other-locate-btn',
            initialLat: {{ other_location.lat|default:center.lat }},
            initialLng: {{ other_location.lng|default:center.lng }},
            initialMarkerLat: {{ other_location.lat|default:"null" }},
            initialMarkerLng: {{ other_location.lng|default:"null" }},
            initialZoom: {% if other_location %}15{% else %}12{% endif %},
        });
    });
</script>
{% endblock %}