{% extends 'base.html' %}
{% load static %}
{% block title %}Order #{{ order.id }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <h1>Order #{{ order.id }}</h1>
        <p style="color: var(--muted); margin-bottom: 24px;">
            {{ 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;">Send payment to one of the numbers below, then share your proof.</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;">
                Please make payment and send a screenshot via WhatsApp. Your picker will be notified as soon as our team confirms your payment.
            </p>
            {% endif %}

            <a href="{{ whatsapp_link }}" target="_blank" rel="noopener" class="whatsapp-btn">Send Payment Proof via WhatsApp</a>
        </div>
        {% elif order.status == 'cancelled' %}
        <div class="order-card" style="text-align: center;">
            <span class="status-badge status-cancelled">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 == 'delivered' %}
        <div class="order-card" style="text-align: center; margin-top: 20px;">
            {% if existing_rating %}
            <strong>You rated this delivery:</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="Optional comment about your delivery"></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_name }} &times; {{ item.quantity }}</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 {{ combined_fee|floatformat:0 }}</span>
            </div>
            <div class="cart-summary-row total">
                <span>{{ t.schedule_total }}</span>
                <span>TSh {{ order.total_amount|floatformat:0 }}</span>
            </div>
        </div>

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

        {% if picker_name %}
        <h3 style="margin: 30px 0 10px;">{{ t.order_messages_with }} {{ picker_name }}</h3>
        <div id="order-chat-thread" class="order-chat-thread" data-poll-url="{% url 'market:order_messages_poll' order.id %}" data-my-user-id="{{ my_user_id }}" data-initial-status="{{ order.status }}">
            {% for msg in messages_thread %}
            <div class="order-chat-msg {% if msg.sender_id == my_user_id %}mine{% endif %}">
                <p>{{ msg.message }}</p>
                <span class="order-chat-time">{{ msg.created_at|slice:":10" }} {{ msg.created_at|slice:"11:16" }}</span>
            </div>
            {% empty %}
            <p style="color: var(--muted); font-size: 0.88rem;">No messages yet.</p>
            {% endfor %}
        </div>
        <form id="order-chat-form" method="post" action="{% url 'market:order_send_message' order.id %}" class="order-chat-form">
            {% csrf_token %}
            <input type="text" name="message" placeholder="{{ t.order_message_placeholder }}" required>
            <button type="submit" class="btn-small">{{ t.order_send }}</button>
        </form>
        {% 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 picker_name %}<script src="{% static 'js/order-chat.js' %}"></script>{% endif %}
{% endblock %}