{% extends 'base.html' %}
{% block title %}{{ t.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>
            {% if provider_type %}
            <span class="checkout-step done">3. {{ t.checkout_step_picker }}</span>
            <span class="checkout-step active">4. {{ t.checkout_step_schedule }}</span>
            {% else %}
            <span class="checkout-step active">3. {{ t.checkout_step_schedule }}</span>
            <span class="checkout-step">4. {{ t.checkout_step_picker }}</span>
            {% endif %}
        </div>

        <h1>{{ t.schedule_title }}</h1>
        {% if provider_type %}
        <p style="color: var(--muted); margin: -12px 0 16px;">{{ t.schedule_delivering_via_prefix }} <strong>{{ checkout.picker_name }}</strong></p>
        {% endif %}

        <form method="post">
            {% csrf_token %}

            {% if quick_delivery_available %}
            <div class="order-card" style="margin-bottom: 20px;">
                <label style="display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer;">
                    <input type="checkbox" id="quick-delivery-toggle" name="quick_delivery" value="1">
                    {{ t.schedule_quick_delivery_label }}
                </label>
                {% if weather_delay_note %}
                <p style="color: var(--muted); font-size: 0.85rem; margin: 8px 0 0;">{{ weather_delay_note }}</p>
                {% endif %}
                <div id="quick-time-fields" style="display: none; margin-top: 12px;">
                    <div class="time-options">
                        <div class="time-option">
                            <input type="radio" name="quick_time" value="now" id="quick-time-now" checked>
                            <label for="quick-time-now">Now (ASAP)</label>
                        </div>
                        {% for slot in quick_time_slots %}
                        <div class="time-option">
                            <input type="radio" name="quick_time" value="{{ slot }}" id="quick-time-{{ forloop.counter }}">
                            <label for="quick-time-{{ forloop.counter }}">{{ slot }}</label>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% else %}
            <div class="order-card" style="margin-bottom: 20px; color: var(--muted); font-size: 0.9rem;">
                {{ t.schedule_quick_delivery_ended_note }}
            </div>
            {% endif %}

            <div id="scheduled-delivery-fields">
            <h3 style="margin-bottom: 10px;">{{ t.schedule_delivery_day }}</h3>
            {% if b2b_estimate_note %}
            <p class="order-card" style="color: var(--muted); font-size: 0.88rem; margin-bottom: 10px;">{{ b2b_estimate_note }}</p>
            {% endif %}
            <p style="color: var(--muted); font-size: 0.88rem; margin-bottom: 10px;">{{ days_note }}</p>
            <div class="date-options">
                {% for d in dates %}
                <div class="date-option">
                    <input type="radio" name="delivery_date" value="{{ d.value }}" id="date-{{ forloop.counter }}" {% if forloop.first %}checked{% endif %}>
                    <label for="date-{{ forloop.counter }}">{{ d.weekday_display }}<br><small>{{ d.month_day_display }}</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>
            </div>

            <h3 style="margin-bottom: 10px;">{{ t.schedule_order_summary }}</h3>
            <table class="cart-table">
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>
                            {{ item.product.display_name }} &times; {{ item.qty_unit_display }}
                            {% if item.product.market_name %}<br><small style="color: var(--muted);">{% if item.product.market_logo_url %}<img src="{{ item.product.market_logo_url }}" alt="{{ item.product.market_name }}" style="height: 14px; vertical-align: middle; border-radius: 3px;">{% else %}{{ item.product.market_name }}{% endif %}{% if item.product.quality_grade %} &middot; {{ item.product.quality_grade }}{% endif %}</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>
            {% if not provider_type %}
            <p style="color: var(--muted); font-size: 0.85rem; margin-top: -6px;">{{ t.schedule_fee_next_step_note }}</p>
            {% endif %}

            {% if vendor_eligibility %}
            <div class="order-card" style="margin: 16px 0;">
                {% if vendor_eligibility.zone == 'out_of_range' %}
                <p style="margin: 0;">{{ t.schedule_zone_out_of_range }}</p>
                {% else %}
                <p style="margin: 0 0 6px;">
                    {{ t.schedule_zone_current_prefix }}
                    {% if vendor_eligibility.zone == 'close' %}{{ t.schedule_zone_close_label }}{% else %}{{ t.schedule_zone_far_label }}{% endif %}
                    &middot; {{ vendor_eligibility.total_weight_kg|floatformat:1 }} kg
                    ({% if vendor_eligibility.eligible %}{{ t.schedule_zone_min_met }}{% else %}{{ t.schedule_zone_min_not_met }}{% endif %})
                </p>
                <p style="color: var(--muted); font-size: 0.85rem; margin: 0;">{{ vendor_eligibility.close_note }}<br>{{ vendor_eligibility.far_note }}</p>
                {% endif %}
            </div>
            {% endif %}

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

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var toggle = document.getElementById('quick-delivery-toggle');
        var scheduledFields = document.getElementById('scheduled-delivery-fields');
        var quickTimeFields = document.getElementById('quick-time-fields');
        if (!toggle || !scheduledFields) return;

        function applyState() {
            var isQuick = toggle.checked;
            scheduledFields.style.display = isQuick ? 'none' : '';
            scheduledFields.querySelectorAll('input').forEach(function (input) {
                input.disabled = isQuick;
            });
            if (quickTimeFields) {
                quickTimeFields.style.display = isQuick ? '' : 'none';
                quickTimeFields.querySelectorAll('input').forEach(function (input) {
                    input.disabled = !isQuick;
                });
            }
        }

        toggle.addEventListener('change', applyState);
        applyState();
    });
</script>
{% endblock %}