{% extends 'base.html' %}
{% load static %}
{% block title %}Delivery Location — 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: 900px;">
        <div class="checkout-steps">
            <span class="checkout-step done">1. {{ t.checkout_step_cart }}</span>
            <span class="checkout-step active">2. {{ t.checkout_step_location }}</span>
            <span class="checkout-step">3. {{ t.checkout_step_schedule }}</span>
            <span class="checkout-step">4. {{ t.checkout_step_picker }}</span>
        </div>

        <h1>{{ t.location_title }}</h1>

        {% if saved_location %}
        <p style="color: var(--muted); font-size: 0.88rem; margin-top: -8px; margin-bottom: 14px;">{{ t.location_using_saved }}</p>
        {% endif %}

        <form method="post" class="auth-form">
            {% csrf_token %}

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

            <label style="margin-top: 22px;">{{ t.location_step2_label }}</label>
            <p style="color: var(--muted); font-size: 0.88rem; margin: -4px 0 6px;">{{ t.location_step2_help }}</p>
            <div id="delivery-map" class="map-container"></div>

            <label for="id_address_display">{{ t.location_address_label }}</label>
            <textarea id="id_address_display" name="address" rows="2" placeholder="Your address will appear here once you search or drop a pin">{% if saved_location %}{{ saved_location.address }}{% endif %}</textarea>

            <input type="hidden" id="id_lat" name="lat" value="{% if saved_location %}{{ saved_location.lat }}{% endif %}">
            <input type="hidden" id="id_lng" name="lng" value="{% if saved_location %}{{ saved_location.lng }}{% endif %}">

            <div class="location-confirm-box">
                <label style="display: flex; align-items: flex-start; gap: 10px; margin-top: 0; font-weight: 600;">
                    <input type="checkbox" id="confirm-location" name="location_confirmed" value="1" style="margin-top: 3px;">
                    <span>{{ t.location_step3_label }}</span>
                </label>
            </div>

            <button type="submit" class="btn-cta" id="continue-btn" disabled>{{ t.location_continue }} &rarr;</button>
        </form>
    </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: 'id_address_display',
            searchInputId: 'location-search',
            resultsId: 'location-results',
            locateBtnId: 'locate-me-btn',
            initialLat: {{ saved_location.lat|default:center.lat }},
            initialLng: {{ saved_location.lng|default:center.lng }},
            initialMarkerLat: {{ saved_location.lat|default:"null" }},
            initialMarkerLng: {{ saved_location.lng|default:"null" }},
            initialZoom: {% if saved_location %}15{% else %}12{% endif %},
        });

        var confirmBox = document.getElementById('confirm-location');
        var continueBtn = document.getElementById('continue-btn');
        var latInput = document.getElementById('id_lat');

        function refreshContinueState() {
            continueBtn.disabled = !(confirmBox.checked && latInput.value);
        }

        confirmBox.addEventListener('change', refreshContinueState);
        // Polls rather than listening for an input event, since the pin sets
        // latInput.value via JS property assignment (location-picker.js),
        // which doesn't fire a native 'input'/'change' event.
        setInterval(refreshContinueState, 400);
    });
</script>
{% endblock %}