{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.title_checkout_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>{{ 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="location-quick-options">
                <button type="button" id="locate-me-btn" class="location-quick-card">
                    <svg width="22" height="22" 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>
                    <strong>{{ t.location_use_current }}</strong>
                </button>
                {% if home_location %}
                <button type="button" class="location-quick-card quick-location-btn" data-lat="{{ home_location.lat }}" data-lng="{{ home_location.lng }}" data-address="{{ home_location.address|escapejs }}">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                    <strong>{{ t.location_deliver_home }}</strong>
                    {% if home_location.address %}<small>{{ home_location.address }}</small>{% endif %}
                </button>
                {% endif %}
                {% if business_location %}
                <button type="button" class="location-quick-card quick-location-btn" data-lat="{{ business_location.lat }}" data-lng="{{ business_location.lng }}" data-address="{{ business_location.address|escapejs }}">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V7l8-4v18M13 21V11l6 4v6"/></svg>
                    <strong>{{ t.location_deliver_business }}</strong>
                    {% if business_location.address %}<small>{{ business_location.address }}</small>{% endif %}
                </button>
                {% endif %}
                {% if other_location %}
                <button type="button" class="location-quick-card quick-location-btn" data-lat="{{ other_location.lat }}" data-lng="{{ other_location.lng }}" data-address="{{ other_location.address|escapejs }}">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 2"/></svg>
                    <strong>{{ t.location_deliver_other }}</strong>
                    {% if other_location.address %}<small>{{ other_location.address }}</small>{% endif %}
                </button>
                {% endif %}
            </div>

            <button type="button" id="toggle-search-btn" class="location-toggle-search-btn">{{ t.location_choose_different }} &darr;</button>
            <div id="search-section" style="display: none;">
                <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>
                </div>
            </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>
            <p id="amenities-status" style="color: var(--muted); font-size: 0.82rem;"></p>
            <div class="map-search-wrap">
                <input type="text" id="amenity-search" placeholder="Find a petrol station, church, hotel, market…">
                <div class="geocode-results" id="amenity-search-results"></div>
            </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_v 'js/location-picker.js' %}"></script>
<script src="{% static_v 'js/amenities.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var map = initLocationPicker({
            mapId: 'delivery-map',
            latInputId: 'id_lat',
            lngInputId: 'id_lng',
            addressInputId: 'id_address_display',
            searchInputId: 'location-search',
            resultsId: 'location-results',
            locateBtnId: 'locate-me-btn',
            quickLocationSelector: '.quick-location-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 %},
        });

        // The manual search box is a fallback, tucked away by default —
        // the quick-select cards above (current location / Home / Business)
        // are the primary way to set a delivery location now.
        var toggleSearchBtn = document.getElementById('toggle-search-btn');
        var searchSection = document.getElementById('search-section');
        if (toggleSearchBtn && searchSection) {
            toggleSearchBtn.addEventListener('click', function () {
                var willOpen = searchSection.style.display === 'none';
                searchSection.style.display = willOpen ? 'block' : 'none';
                toggleSearchBtn.innerHTML = '{{ t.location_choose_different|escapejs }} ' + (willOpen ? '&uarr;' : '&darr;');
            });
        }

        // Nearby landmarks (petrol stations, places of worship, hotels,
        // etc.) are indexed in the background for search — not drawn on
        // the map until searched for, so the map itself stays uncluttered.
        var amenityLat = {{ saved_location.lat|default:center.lat }};
        var amenityLng = {{ saved_location.lng|default:center.lng }};
        syncNearbyAmenities(amenityLat, amenityLng, document.getElementById('amenities-status'));
        enableAmenitySearch(map, 'amenity-search', 'amenity-search-results', amenityLat, amenityLng);

        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 %}