{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.title_order_hash }}{{ order.id }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <h1>{{ t.order_hash_prefix }}{{ order.id }}</h1>
        <p style="color: var(--muted); margin-bottom: 24px;">
            {% if order.is_quick %}<span class="surface-badge warn">{{ t.badge_quick_delivery }}</span> &middot; {% endif %}
            {{ t.order_delivery_on }} {{ order.delivery_date }} &middot; {{ order.delivery_time_slot }}
            {% if picker_name %} &middot; {{ t.order_picker_label }} {{ picker_name }}{% endif %}
        </p>

        {% if order.status == 'pending_payment' %}
        <div class="order-card" style="text-align: center;">
            <span class="status-badge status-pending_payment">{{ t.order_awaiting_payment }}</span>
            <h3 style="margin: 14px 0 8px;">{{ t.order_total_due }} TSh {{ order.total_amount|floatformat:0 }}</h3>

            {% if payment_methods %}
            <p style="color: var(--muted); margin-bottom: 14px;">{{ t.payment_send_to_one }}</p>
            <div class="payment-methods-list">
                {% for m in payment_methods %}
                <div class="payment-method-row">
                    <span class="provider-badge" style="background: {{ m.provider_color }};">{{ m.provider_label }}</span>
                    <strong>{{ m.lipa_number }}</strong>
                    {% if m.account_name %}<span style="color: var(--muted); font-size: 0.88rem;">{{ m.account_name }}</span>{% endif %}
                    {% if m.instructions %}<span style="color: var(--muted); font-size: 0.82rem;">{{ m.instructions }}</span>{% endif %}
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p style="color: var(--muted); margin-bottom: 14px;">{{ t.payment_no_methods }}</p>
            {% endif %}

            <ol class="payment-proof-steps">
                <li>{{ t.payment_step_pay }}</li>
                <li>{{ t.payment_step_screenshot }}</li>
                <li>{{ t.payment_step_send }}</li>
            </ol>

            <a href="{{ whatsapp_link }}" target="_blank" rel="noopener" class="whatsapp-btn">{{ t.payment_send_proof_btn }}</a>
        </div>
        {% elif order.status == 'cancelled' %}
        <div class="order-card" style="text-align: center;">
            <span class="status-badge status-cancelled">{{ t.status_cancelled }}</span>
        </div>
        {% else %}
        <div class="order-tracker">
            {% for step in tracker_steps %}
            <div class="tracker-step {% if forloop.counter0 < current_step_index %}completed{% elif forloop.counter0 == current_step_index %}active{% endif %}">
                <div class="tracker-dot">{{ forloop.counter }}</div>
                <div class="tracker-label">
                    {% if step.key == 'confirmed' %}{{ t.tracker_confirmed }}{% elif step.key == 'picking' %}{{ t.tracker_picking }}{% elif step.key == 'in_transit' %}{{ t.tracker_in_transit }}{% elif step.key == 'delivered' %}{{ t.tracker_delivered }}{% endif %}
                </div>
            </div>
            {% endfor %}
        </div>

        {% if order.status == 'in_transit' %}
        <div class="order-card" style="margin-top: 20px;">
            <strong>{{ t.order_track_delivery }}</strong>
            <div id="track-map" class="map-container" style="height: 300px; margin-top: 10px;"></div>
            <div class="cart-summary-row" id="live-distance-row" style="display: none; margin-top: 8px;">
                <span>{{ t.picker_route_distance }}</span>
                <span id="live-distance">—</span>
            </div>
            <div class="cart-summary-row" id="live-eta-row" style="display: none;">
                <span>{{ t.picker_travel_time }}</span>
                <span id="live-eta">—</span>
            </div>
            <p id="track-status" style="color: var(--muted); font-size: 0.85rem; margin-top: 8px;">{{ t.order_waiting_picker_location }}</p>
        </div>
        {% endif %}

        {% if order.status == 'delivered' %}
        <div class="order-card" style="text-align: center; margin-top: 20px;">
            {% if existing_rating %}
            <strong>{{ t.order_you_rated }}</strong>
            <p style="font-size: 1.3rem; margin-top: 6px;">
                {% for i in "12345" %}{% if forloop.counter <= existing_rating.rating %}&#9733;{% else %}&#9734;{% endif %}{% endfor %}
            </p>
            {% if existing_rating.comment %}<p style="color: var(--muted); font-size: 0.9rem;">"{{ existing_rating.comment }}"</p>{% endif %}
            {% else %}
            <strong>{{ t.order_rate_picker }}</strong>
            <form method="post" action="{% url 'market:order_submit_rating' order.id %}" class="rating-form">
                {% csrf_token %}
                <div class="rating-stars">
                    {% for i in "54321" %}
                    <input type="radio" name="rating" id="star{{ i }}" value="{{ i }}" required>
                    <label for="star{{ i }}">&#9733;</label>
                    {% endfor %}
                </div>
                <textarea name="comment" rows="2" placeholder="{{ t.order_comment_placeholder }}"></textarea>
                <button type="submit" class="btn-cta">{{ t.order_submit_rating }}</button>
            </form>
            {% endif %}
        </div>
        {% endif %}
        {% endif %}

        <h3 style="margin: 30px 0 10px;">{{ t.order_items }}</h3>
        <table class="cart-table">
            <tbody>
                {% for item in items %}
                <tr>
                    <td>
                        {{ item.product_display_name }} &times; {{ item.qty_unit_display }}
                        <br><small style="color: var(--muted);">TSh {{ item.unit_price|floatformat:0 }} {{ item.per_unit_text }}</small>
                    </td>
                    <td>TSh {{ item.line_total|floatformat:0 }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="cart-summary" style="margin-left: 0; max-width: 100%;">
            <div class="cart-summary-row">
                <span>{{ t.schedule_items_subtotal }}</span>
                <span>TSh {{ order.items_subtotal|floatformat:0 }}</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.schedule_delivery_fee }} ({{ order.distance_km }} km)</span>
                <span>TSh {{ order.delivery_fee|floatformat:0 }}</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.schedule_picking_fee }}</span>
                <span>TSh {{ order.picking_fee|floatformat:0 }}</span>
            </div>
            {% if order.package_fee > 0 %}
            <div class="cart-summary-row">
                <span>{{ t.schedule_package_fee }}</span>
                <span>TSh {{ order.package_fee|floatformat:0 }}</span>
            </div>
            {% endif %}
            <div class="cart-summary-row total">
                <span>{{ t.schedule_total }}</span>
                <span>TSh {{ order.total_amount|floatformat:0 }}</span>
            </div>
        </div>
        <p style="color: var(--muted); font-size: 0.82rem; margin-top: 8px;">{% if order.package_fee > 0 %}{{ t.schedule_fee_breakdown_note }}{% else %}{{ t.schedule_fee_breakdown_note_2part }}{% endif %}</p>

        <p style="margin-top: 20px; color: var(--muted); font-size: 0.9rem;">{{ t.order_delivering_to }} {{ order.delivery_address }}</p>

        {% if picker_name %}
        {% url 'market:order_messages_poll' order.id as poll_url %}
        {% url 'market:order_send_message' order.id as send_url %}
        {% include 'market/_order_chat_widget.html' with order_chat_title=t.order_messages_with|add:" "|add:picker_name poll_url=poll_url send_url=send_url no_messages_text=t.order_no_messages message_placeholder=t.order_message_placeholder send_label=t.order_send %}
        {% endif %}

        <p class="auth-switch"><a href="{% url 'market:order_list' %}">&larr; {{ t.order_back_to_orders }}</a></p>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
{% if order.status == 'in_transit' %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/vehicle-icons.js' %}"></script>
<script src="{% static_v 'js/map-intelligence.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var map = L.map('track-map');
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors',
        }).addTo(map);
        addTrafficLayer(map);
        addWeatherBadge(map, {{ order.delivery_lat }}, {{ order.delivery_lng }});

        var destLatLng = [{{ order.delivery_lat }}, {{ order.delivery_lng }}];
        L.marker(destLatLng, { icon: circlePointIcon({}) }).addTo(map)
            .bindTooltip('{{ t.order_your_delivery_location_popup|escapejs }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('{{ t.order_your_delivery_location_popup|escapejs }}');
        map.setView(destLatLng, 14);

        var truckEmoji = {% if picker_truck_icon %}'{{ picker_truck_icon|escapejs }}'{% else %}null{% endif %};
        var vehicleType = '{{ picker_vehicle_type|default:"car"|escapejs }}';
        var pickerTag = pickerTagHtml('{{ picker_name|default:t.picker_popup_delivery_location|escapejs }}', {});
        var currentBearing = 0;

        var pickerMarker = null;
        var routeLine = null;
        var statusEl = document.getElementById('track-status');
        var distanceRow = document.getElementById('live-distance-row');
        var etaRow = document.getElementById('live-eta-row');
        var distanceEl = document.getElementById('live-distance');
        var etaEl = document.getElementById('live-eta');
        var trackUrl = '{% url "market:order_track_location" order.id %}';

        function drawRoute(geometry, pickerLatLng) {
            if (routeLine) {
                map.removeLayer(routeLine);
                routeLine = null;
            }
            if (geometry) {
                routeLine = L.geoJSON(geometry, { style: { color: '#243D91', weight: 5, opacity: 0.8 } }).addTo(map);
            } else if (pickerLatLng) {
                routeLine = L.polyline([pickerLatLng, destLatLng], { color: '#243D91', weight: 3, dashArray: '6 8' }).addTo(map);
            }
        }

        function poll() {
            fetch(trackUrl)
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (data.location) {
                        var pos = [data.location.lat, data.location.lng];
                        if (pickerMarker) {
                            var prev = pickerMarker.getLatLng();
                            if (prev.lat !== pos[0] || prev.lng !== pos[1]) {
                                var toRad = function (d) { return d * Math.PI / 180; };
                                var toDeg = function (r) { return r * 180 / Math.PI; };
                                var y = Math.sin(toRad(pos[1] - prev.lng)) * Math.cos(toRad(pos[0]));
                                var x = Math.cos(toRad(prev.lat)) * Math.sin(toRad(pos[0])) -
                                    Math.sin(toRad(prev.lat)) * Math.cos(toRad(pos[0])) * Math.cos(toRad(pos[1] - prev.lng));
                                currentBearing = (toDeg(Math.atan2(y, x)) + 360) % 360;
                                pickerMarker.setIcon(vehicleMarkerIcon(vehicleType, { bearingDeg: currentBearing, truckEmoji: truckEmoji }));
                            }
                            pickerMarker.setLatLng(pos);
                        } else {
                            pickerMarker = L.marker(pos, { icon: vehicleMarkerIcon(vehicleType, { truckEmoji: truckEmoji }) }).addTo(map)
                                .bindTooltip(pickerTag, { permanent: true, direction: 'top', offset: [0, -20], className: 'picker-tag' })
                                .bindPopup('{{ t.order_your_picker_popup|escapejs }}');
                        }
                        drawRoute(data.route ? data.route.geometry : null, pos);
                        if (routeLine) {
                            map.fitBounds(routeLine.getBounds ? routeLine.getBounds() : L.latLngBounds([pos, destLatLng]), { padding: [30, 30] });
                        } else {
                            map.fitBounds(L.latLngBounds([pos, destLatLng]), { padding: [30, 30] });
                        }
                        if (data.route) {
                            distanceRow.style.display = 'flex';
                            etaRow.style.display = 'flex';
                            distanceEl.textContent = data.route.distance_km + ' km';
                            etaEl.textContent = data.route.duration_min ? ('~' + Math.round(data.route.duration_min) + ' min') : '—';
                        }
                        statusEl.textContent = '{{ t.order_live_updates|escapejs }}';
                    }
                })
                .catch(function () {});
        }

        poll();
        setInterval(poll, 8000);
    });
</script>
{% endif %}
{% endblock %}