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

        <h1>{{ t.truck_choose_title }}</h1>
        <p style="color: var(--muted); margin-bottom: 20px;">
            {{ t.picker_delivering_to }} {{ checkout.address|default:t.picker_selected_location_default }}
            {% if is_vendor_fleet %}&middot; {{ total_weight_kg|floatformat:0 }} kg{% endif %}
        </p>

        {% if options %}
        <label for="picker-instructions-shared">{{ t.picker_instructions_label }}</label>
        <textarea id="picker-instructions-shared" rows="2" maxlength="500" placeholder="{{ t.picker_instructions_placeholder }}" style="margin-bottom: 16px;"></textarea>

        <div class="truck-option-grid">
            {% for option in options %}
            <form method="post" class="truck-option-card" data-picker-instructions-form>
                {% csrf_token %}
                <input type="hidden" name="provider_key" value="{{ option.key }}">
                <h3 style="margin-bottom: 2px;">
                    {{ option.name }}
                    {% if option.is_company %}<span class="surface-badge" style="font-size: 0.7rem; vertical-align: middle;">{{ t.fleet_provider_company_badge }}</span>{% endif %}
                </h3>
                {% if option.rating_display %}<p style="margin: 0 0 4px; color: var(--muted);">&#9733; {{ option.rating_display }}</p>{% endif %}
                <p class="truck-capacity">
                    {% if option.truck_type.icon_url %}<img src="{{ option.truck_type.icon_url }}" alt="" style="width: 18px; height: 18px; vertical-align: middle; object-fit: contain;">{% else %}{{ option.truck_type.icon }}{% endif %}
                    {{ option.truck_type.name }} &middot; {{ option.truck_type.capacity_label }}
                </p>
                {% if option.same_region %}
                <span class="surface-badge ok" style="display: inline-block; margin: 4px 0;">{{ t.fleet_provider_same_region_badge }}</span>
                {% endif %}
                <p class="truck-distance">~{{ option.distance_km }} {{ t.picker_km_away }}</p>
                {% if option.estimated_total != None %}
                <p class="truck-price">{{ t.fleet_provider_estimated_prefix }} TSh {{ option.estimated_total|floatformat:0 }}</p>
                {% endif %}
                <button type="submit" class="btn-cta" style="width: 100%; margin-top: 10px;">{{ t.truck_book }}</button>
            </form>
            {% endfor %}
        </div>
        <p style="color: var(--muted); font-size: 0.82rem; margin-top: 8px;">{{ t.fleet_provider_estimate_note }}</p>

        {% if top_option %}
        <h3 style="margin: 20px 0 8px;">{{ t.fleet_provider_route_map_heading }}</h3>
        <div id="route-map" class="map-container"></div>
        {% endif %}
        {% else %}
        <p>{{ t.truck_none_available }}</p>
        {% endif %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // One shared instructions box above the cards — copied into whichever
        // provider's own form is the one actually submitted, since each
        // option is its own form (no single "confirm" step to attach it to).
        var sharedInstructions = document.getElementById('picker-instructions-shared');
        if (sharedInstructions) {
            document.querySelectorAll('[data-picker-instructions-form]').forEach(function (form) {
                form.addEventListener('submit', function () {
                    var hidden = document.createElement('input');
                    hidden.type = 'hidden';
                    hidden.name = 'picker_instructions';
                    hidden.value = sharedInstructions.value;
                    form.appendChild(hidden);
                });
            });
        }

        document.querySelectorAll('form').forEach(function (form) {
            form.addEventListener('submit', function () {
                document.querySelectorAll('button[type="submit"]').forEach(function (btn) {
                    btn.disabled = true;
                });
            });
        });
    });
</script>
{% if top_option %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/map-intelligence.js' %}"></script>
<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);
        addWeatherBadge(map, {{ checkout.lat }}, {{ checkout.lng }});

        var originLatLng = [{{ top_option.lat }}, {{ top_option.lng }}];
        var customerLatLng = [{{ checkout.lat }}, {{ checkout.lng }}];

        L.marker(originLatLng).addTo(map)
            .bindTooltip('{{ top_option.name|escapejs }}', { permanent: true, direction: 'top', offset: [0, -20], className: 'picker-tag' })
            .bindPopup('{{ top_option.name|escapejs }}');
        L.marker(customerLatLng).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 vendor %}
        L.marker([{{ vendor.lat }}, {{ vendor.lng }}], { icon: L.divIcon({ className: '', html: '<span style="background:#e08a00;border-radius:50%;width:14px;height:14px;display:block;border:2px solid #fff;"></span>', iconSize: [14, 14] }) }).addTo(map)
            .bindTooltip('{{ vendor.name|escapejs }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('{{ t.picker_popup_pickup_stop|escapejs }} {{ vendor.name|escapejs }}');
        {% endif %}

        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([originLatLng, customerLatLng]);
        L.polyline([originLatLng, customerLatLng], { color: '#1c3fd6', weight: 3, dashArray: '6 8' }).addTo(map);
        map.fitBounds(bounds, { padding: [30, 30] });
        {% endif %}
    });
</script>
{% endif %}
{% endblock %}