{% extends 'base.html' %}
{% load static %}
{% block title %}{% if is_b2b %}Choose a Truck{% else %}Choose a Picker{% endif %} — 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>

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

        {% if truck_options %}
        <div class="truck-option-grid">
            {% for option in truck_options %}
            <form method="post" class="truck-option-card">
                {% csrf_token %}
                <input type="hidden" name="truck_type_id" value="{{ option.truck_type.id }}">
                <span class="truck-icon">{{ option.truck_type.icon }}</span>
                <h3>{{ option.truck_type.name }}</h3>
                <p class="truck-capacity">{{ option.truck_type.capacity_label }}</p>
                <p class="truck-distance">~{{ option.distance_km }} km away</p>
                <p class="truck-price">TSh {{ option.total|floatformat:0 }}</p>
                <button type="submit" class="btn-cta" style="width: 100%; margin-top: 10px;">{{ t.truck_book }}</button>
            </form>
            {% endfor %}
        </div>
        {% else %}
        <p>{{ t.truck_none_available }}</p>
        {% endif %}

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

        {% if pickers %}
        <div class="picker-select-grid">
            {% for p in pickers %}
            <a href="?picker_id={{ p.user_id }}" class="picker-select-card {% if selected_picker.user_id == p.user_id %}selected{% endif %}">
                <h3>{{ p.name }}</h3>
                <span class="source-type-tag">
                    {% if p.source_type == 'warehouse' %}{{ t.picker_source_warehouse }}{% elif p.source_type == 'shop' %}{{ t.picker_source_shop }}{% else %}{{ t.picker_source_market }}{% endif %}
                </span>
                <p style="color: var(--muted); font-size: 0.88rem; margin-top: 4px;">{{ p.market_location|default:"Market base" }}</p>
                <span class="distance">~{{ p.distance_km }} km away (straight-line)</span>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p>{{ t.picker_none_available }}</p>
        {% endif %}

        {% if selected_picker %}
        <div id="route-map" class="map-container"></div>

        <div class="cart-summary" style="margin-left: 0; max-width: 100%;">
            <div class="cart-summary-row">
                <span>{{ t.picker_route_distance }}</span>
                <span>{{ route_distance }} km</span>
            </div>
            {% 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 %}
            {% if surface_summary %}
            <div class="cart-summary-row">
                <span>{{ t.picker_road_condition }}</span>
                <span class="surface-badge {% if surface_summary.picker_ok == False %}warn{% elif surface_summary.picker_ok %}ok{% endif %}">
                    {{ surface_summary.label }}{% if surface_summary.paved_pct != None %} ({{ surface_summary.paved_pct }}% paved){% endif %}
                </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.picker_estimated_fee }}</span>
                <span>TSh {{ combined_fee|floatformat:0 }}</span>
            </div>
            <div class="cart-summary-row total">
                <span>{{ t.schedule_total }}</span>
                <span>TSh {{ total|floatformat:0 }}</span>
            </div>
        </div>

        <form method="post" style="text-align: right; margin-top: 20px;">
            {% csrf_token %}
            <input type="hidden" name="picker_id" value="{{ selected_picker.user_id }}">
            <button type="submit" class="btn-cta">{{ t.schedule_confirm_order }}</button>
        </form>
        {% endif %}
        {% endif %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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);

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

        L.marker(pickerLatLng).addTo(map).bindPopup('{{ selected_picker.name|escapejs }} (picker)');
        L.marker(customerLatLng).addTo(map).bindPopup('Delivery location');

        {% if route_geometry_json %}
        var routeLine = L.geoJSON({{ route_geometry_json|safe }}, {
            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 %}