{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.title_choose_picker }} — 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 done">2. {{ t.checkout_step_location }}</span>
            <span class="checkout-step done">3. {{ t.checkout_step_schedule }}</span>
            <span class="checkout-step active">4. {{ t.checkout_step_picker }}</span>
        </div>

        <h1>{{ t.picker_choose_title }}</h1>
        <p style="color: var(--muted); margin-bottom: 20px;">{{ t.picker_delivering_to }} {{ checkout.address|default:t.picker_selected_location_default }}</p>

        {% if selected_picker %}
        <div class="picker-select-card picker-suggested-card">
            <span class="surface-badge ok" style="display: inline-block; margin-bottom: 8px;">{{ t.picker_suggested_label }}</span>
            <h3>{{ selected_picker.name }}</h3>
            <span class="source-type-tag">
                {% if selected_picker.source_type == 'warehouse' %}{{ t.picker_source_warehouse }}{% elif selected_picker.source_type == 'shop' %}{{ t.picker_source_shop }}{% else %}{{ t.picker_source_market }}{% endif %}
            </span>
            <span class="source-type-tag">
                {% if selected_picker.vehicle_type == 'motorcycle' %}{{ t.vehicle_motorcycle }}{% elif selected_picker.vehicle_type == 'bicycle' %}{{ t.vehicle_bicycle }}{% else %}{{ t.vehicle_car }}{% endif %}
            </span>
            {% if selected_picker.rating_display %}
            <span class="picker-rating">&#9733; {{ selected_picker.rating_display }}</span>
            {% endif %}
            {% if selected_picker.same_route %}
            <span class="surface-badge ok" style="display: block; margin-top: 6px; width: fit-content;">{{ t.picker_already_delivering }}{{ selected_picker.same_route_distance_km }} {{ t.picker_km_from_here }}</span>
            {% endif %}
            <p style="color: var(--muted); font-size: 0.88rem; margin-top: 4px;">{{ selected_picker.market_location|default:t.picker_market_base_default }}</p>
            <span class="distance">{% if selected_picker.distance_tag == 'closest' %}{{ t.picker_distance_closest }}{% else %}{{ t.picker_distance_farther }}{% endif %}</span>
        </div>
        {% else %}
        <p>{{ t.picker_none_available }}</p>
        {% endif %}

        {% if selected_picker %}
        <div id="route-map" class="map-container"></div>
        <p id="amenities-status" style="color: var(--muted); font-size: 0.82rem;"></p>
        <div class="map-search-wrap" style="margin-bottom: 16px;">
            <input type="text" id="amenity-search" placeholder="{{ t.amenity_search_placeholder }}">
            <div class="geocode-results" id="amenity-search-results"></div>
        </div>

        <div class="cart-summary" style="margin-left: 0; max-width: 100%;">
            {% if pickup_distance_km != None %}
            <div class="cart-summary-row">
                <span>{{ t.picker_pickup_distance }}</span>
                <span>{{ pickup_distance_km }} km</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.picker_delivery_distance }}</span>
                <span>{{ delivery_distance_km }} km</span>
            </div>
            {% else %}
            <div class="cart-summary-row">
                <span>{{ t.picker_route_distance }}</span>
                <span>{{ route_distance }} km</span>
            </div>
            {% endif %}
            {% if eta_with_buffer %}
            <div class="cart-summary-row">
                <span>{{ t.picker_travel_time }} <small style="color: var(--muted);">(incl. time-of-day traffic estimate)</small></span>
                <span>~{{ eta_with_buffer }} min</span>
            </div>
            {% endif %}
            <div class="cart-summary-row">
                <span>{{ t.schedule_items_subtotal }}</span>
                <span>TSh {{ subtotal|floatformat:0 }}</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.schedule_delivery_fee }} ({% if selected_picker.vehicle_type == 'motorcycle' %}{{ t.vehicle_motorcycle }}{% elif selected_picker.vehicle_type == 'bicycle' %}{{ t.vehicle_bicycle }}{% else %}{{ t.vehicle_car }}{% endif %})</span>
                <span>TSh {{ delivery_fee|floatformat:0 }}</span>
            </div>
            {% if vendor.free_delivery_min_kg and total_weight_kg >= vendor.free_delivery_min_kg %}
            <p style="margin: -4px 0 6px;"><span class="surface-badge ok">{{ t.vendor_free_delivery_badge }}</span></p>
            {% endif %}
            <div class="cart-summary-row">
                <span>{{ t.schedule_picking_fee }}</span>
                <span>TSh {{ picking_fee|floatformat:0 }}</span>
            </div>
            {% if vendor.free_picking_min_kg and total_weight_kg >= vendor.free_picking_min_kg %}
            <p style="margin: -4px 0 6px;"><span class="surface-badge ok">{{ t.vendor_free_picking_badge }}</span></p>
            {% endif %}
            {% if package_fee > 0 %}
            <div class="cart-summary-row">
                <span>{{ t.schedule_package_fee }}</span>
                <span>TSh {{ package_fee|floatformat:0 }}</span>
            </div>
            {% endif %}
            <div class="cart-summary-row total">
                <span>{{ t.schedule_total }}</span>
                <span>TSh {{ total|floatformat:0 }}</span>
            </div>
        </div>
        <p style="color: var(--muted); font-size: 0.82rem; margin-top: 8px;">{% if package_fee > 0 %}{{ t.schedule_fee_breakdown_note }}{% else %}{{ t.schedule_fee_breakdown_note_2part }}{% endif %}</p>

        <form method="post" style="margin-top: 20px;">
            {% csrf_token %}
            <input type="hidden" name="picker_id" value="{{ selected_picker.user_id }}">
            <label for="picker-instructions">{{ t.picker_instructions_label }}</label>
            <textarea id="picker-instructions" name="picker_instructions" rows="2" maxlength="500" placeholder="{{ t.picker_instructions_placeholder }}"></textarea>
            <div style="text-align: right; margin-top: 12px;">
                <button type="submit" class="btn-cta">{{ t.schedule_confirm_order }}</button>
            </div>
        </form>
        {% endif %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Placing an order is a one-shot action — a double-click, a slow
        // connection, or an accidental double-tap here would otherwise
        // submit the same order twice (and, for a stock-tracked warehouse
        // item, double-deduct real stock). Once any of this page's forms
        // is submitted, every submit button on the page is disabled so a
        // second click can't fire a second request.
        document.querySelectorAll('form').forEach(function (form) {
            form.addEventListener('submit', function () {
                document.querySelectorAll('button[type="submit"]').forEach(function (btn) {
                    btn.disabled = true;
                });
            });
        });
    });
</script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/amenities.js' %}"></script>
<script src="{% static_v 'js/vehicle-icons.js' %}"></script>
<script src="{% static_v 'js/map-intelligence.js' %}"></script>
{% if selected_picker %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var map = L.map('route-map');
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors',
        }).addTo(map);
        addTrafficLayer(map);
        addWeatherBadge(map, {{ checkout.lat }}, {{ checkout.lng }});

        var pickerLatLng = [{{ selected_picker.lat }}, {{ selected_picker.lng }}];
        var customerLatLng = [{{ checkout.lat }}, {{ checkout.lng }}];

        var pickerIcon = vehicleMarkerIcon('{{ selected_picker.vehicle_type|escapejs }}', {
            size: 36,
            truckEmoji: {% if selected_picker.truck_icon %}'{{ selected_picker.truck_icon|escapejs }}'{% else %}null{% endif %},
            iconUrl: {% if selected_picker.truck_icon_url %}'{{ selected_picker.truck_icon_url|escapejs }}'{% else %}null{% endif %},
        });
        var pickerTag = pickerTagHtml('{{ selected_picker.name|escapejs }}', {
            availableLabel: '{{ t.picker_tag_available|escapejs }}',
            closeLabel: '{{ t.picker_tag_close_to_you|escapejs }}',
            isClose: {{ selected_picker.distance_km }} <= 2,
        });
        L.marker(pickerLatLng, { icon: pickerIcon }).addTo(map)
            .bindTooltip(pickerTag, { permanent: true, direction: 'top', offset: [0, -20], className: 'picker-tag' })
            .bindPopup('{{ selected_picker.name|escapejs }} {{ t.picker_popup_suffix|escapejs }}');
        L.marker(customerLatLng, { icon: circlePointIcon({}) }).addTo(map)
            .bindTooltip('{{ t.picker_popup_delivery_location|escapejs }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('{{ t.picker_popup_delivery_location|escapejs }}');

        {% if multi_stop_markets %}
        {% for m in multi_stop_markets %}
        L.marker([{{ m.lat }}, {{ m.lng }}], { icon: circlePointIcon({ color: '#e08a00' }) }).addTo(map)
            .bindTooltip('{{ forloop.counter }}. {{ m.name|escapejs }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('{{ t.picker_popup_pickup_stop|escapejs }} {{ m.name|escapejs }}');
        {% endfor %}
        {% endif %}

        {% if suggested_market %}
        L.marker([{{ suggested_market.lat }}, {{ suggested_market.lng }}], { icon: circlePointIcon({ color: '#1c7ed6' }) }).addTo(map)
            .bindTooltip('{{ suggested_market.name|escapejs }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('{{ t.picker_popup_suggested_stop|escapejs }} {{ suggested_market.name|escapejs }}');
        {% endif %}

        syncNearbyAmenities({{ checkout.lat }}, {{ checkout.lng }}, document.getElementById('amenities-status'));
        enableAmenitySearch(map, 'amenity-search', 'amenity-search-results', {{ checkout.lat }}, {{ checkout.lng }});

        var routeGeometry = null;
        {% if route_geometry_json %}
        routeGeometry = {{ route_geometry_json|safe }};
        var routeLine = L.geoJSON(routeGeometry, {
            style: { color: '#1c3fd6', weight: 5, opacity: 0.8 },
        }).addTo(map);
        map.fitBounds(routeLine.getBounds(), { padding: [30, 30] });
        {% else %}
        var bounds = L.latLngBounds([pickerLatLng, customerLatLng]);
        L.polyline([pickerLatLng, customerLatLng], { color: '#1c3fd6', weight: 3, dashArray: '6 8' }).addTo(map);
        map.fitBounds(bounds, { padding: [30, 30] });
        {% endif %}

    });
</script>
{% endif %}
{% endblock %}