{% extends 'base.html' %}
{% block title %}Schedule Delivery — PickkerMarket{% 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_schedule }}</span>
            <span class="checkout-step">4. {{ t.checkout_step_picker }}</span>
        </div>

        <h1>{{ t.schedule_title }}</h1>

        <form method="post">
            {% csrf_token %}
            <h3 style="margin-bottom: 10px;">{{ t.schedule_delivery_day }}</h3>
            <p style="color: var(--muted); font-size: 0.88rem; margin-bottom: 10px;">{{ t.schedule_days_note }}</p>
            <div class="date-options">
                {% for d in dates %}
                <div class="date-option">
                    <input type="radio" name="delivery_date" value="{{ d|date:'Y-m-d' }}" id="date-{{ forloop.counter }}" {% if forloop.first %}checked{% endif %}>
                    <label for="date-{{ forloop.counter }}">{{ d|date:'l' }}<br><small>{{ d|date:'M j' }}</small></label>
                </div>
                {% endfor %}
            </div>

            <h3 style="margin-bottom: 10px;">{{ t.schedule_time_slot }}</h3>
            <div class="time-options">
                {% for slot in time_slots %}
                <div class="time-option">
                    <input type="radio" name="time_slot" value="{{ slot }}" id="slot-{{ forloop.counter }}" {% if forloop.first %}checked{% endif %}>
                    <label for="slot-{{ forloop.counter }}">{{ slot }}</label>
                </div>
                {% endfor %}
            </div>

            <h3 style="margin-bottom: 10px;">{{ t.schedule_order_summary }}</h3>
            <table class="cart-table">
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>{{ item.product.name }} &times; {{ item.quantity }}{% if item.measure_label %} <small style="color: var(--muted);">({{ item.measure_label }})</small>{% endif %}</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 total">
                    <span>{{ t.schedule_items_subtotal }}</span>
                    <span>TSh {{ subtotal|floatformat:0 }}</span>
                </div>
            </div>
            <p style="color: var(--muted); font-size: 0.85rem; margin-top: -6px;">{{ t.schedule_fee_next_step_note }}</p>

            <div style="text-align: right; margin-top: 24px;">
                <button type="submit" class="btn-cta">{{ t.schedule_continue }} &rarr;</button>
            </div>
        </form>
    </div>
</section>
{% endblock %}