{% extends 'layouts/members.twig' %}

{% block members_content %}

    {% include 'includes/elements/intro_block.twig' with {
        intro_title: 'Reorder Summary',
        intro_content: false,
        class: 'membersIntro',
        use_h1: true
    } %}

    <div class="membersContentWrap">
        <div class="membersSummary">
            <p>We have added every available item from your previous order to your basket.</p>

            {% if unavailable_items is not empty %}
                <p>The following items are currently unavailable:</p>
                <ul class="unavailableList">
                    {% for item in unavailable_items %}
                        <li>
                            <strong>{{ item.name|e }}</strong>
                            {% if item.size %}
                                <span class="muted">({{ item.size|e }})</span>
                            {% endif %}
                            {% if item.reason == 'no_longer_available' %}
                                <span class="muted">— no longer available</span>
                            {% elseif item.reason == 'out_of_stock' %}
                                <span class="muted">— currently out of stock</span>
                            {% endif %}
                            {% if item.alternatives is not empty %}
                                <a href="#alt-products-{{ loop.index }}" class="button buttonAlt mtcOverlay alternativeTrigger" data-no-ajax="true">Alternative products</a>
                            {% elseif item.url %}
                                <a class="button buttonLink" href="{{ item.url }}">View product</a>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
                <p class="muted">You can choose alternatives for the unavailable items, or continue with the items we have already added to your basket.</p>
            {% endif %}

            <div class="actionButtons">
                <a href="{{ proceed_url }}" class="button buttonAlt">{{ proceed_label }}</a>
                <a href="{{ route('members-orders') }}" class="button">Back to orders</a>
            </div>
        </div>
    </div>

    {% for item in unavailable_items %}
        {% if item.alternatives is not empty %}
            <div
                id="alt-products-{{ loop.index }}"
                class="alternativeOverlay"
                style="display:none;width:480px;max-width:90vw;padding:0 30px 30px;"
            >
                <div class="alternativeHeader" style="margin-bottom:20px;">
                    <h2>Alternative products</h2>
                    {% if item.ingredients is not empty %}
                        <p class="muted">Active substance(s): {{ item.ingredients|join(', ') }}</p>
                    {% endif %}
                </div>
                <div class="alternativeBody">
                    <ul class="alternativeList" style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;">
                        {% for alt in item.alternatives %}
                            <li class="alternativeItem" style="display:flex;align-items:center;gap:14px;border:1px solid #eee;padding:12px 15px;">
                                {% set image_src = alt.image ?: '/sites/default/images/placeholders/no-image.jpg' %}
                                <div class="alternativeItemImage" style="flex:0 0 64px;width:64px;height:64px;border-radius:6px;background:#f6f6f6;display:flex;align-items:center;justify-content:center;overflow:hidden;">
                                    <img
                                        src="{{ image_src }}"
                                        alt="{{ alt.name|e }}"
                                        loading="lazy"
                                        style="max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;display:block;"
                                    >
                                </div>
                                <strong
                                    class="alternativeTitle"
                                    style="flex:1 1 auto;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                                >
                                    {{ alt.name|e }}
                                </strong>
                                <div
                                    class="alternativeAddForm"
                                    data-item-id="{{ alt.id }}"
                                    data-redirect="{{ current_url }}"
                                    style="display:flex;flex-wrap:nowrap;align-items:center;gap:10px;flex:0 0 auto;"
                                >
                                    {% if alt.sizes is not empty %}
                                        <label class="sr-only" for="size-{{ alt.id }}-{{ loop.index }}">Pack size</label>
                                        <select
                                            class="js-alt-size"
                                            id="size-{{ alt.id }}-{{ loop.index }}"
                                            required
                                            style="min-width:110px;padding:6px 8px;"
                                        >
                                            <option value="">Choose…</option>
                                            {% for size in alt.sizes %}
                                                <option value="{{ size.id }}">{{ size.label }}</option>
                                            {% endfor %}
                                        </select>
                                    {% else %}
                                        <input type="hidden" class="js-alt-size" value="">
                                    {% endif %}
                                    <label class="sr-only" for="quantity-{{ alt.id }}-{{ loop.index }}">Quantity</label>
                                    <input
                                        type="number"
                                        id="quantity-{{ alt.id }}-{{ loop.index }}"
                                        class="js-alt-qty"
                                        value="1"
                                        min="1"
                                        style="width:48px;padding:6px 8px;text-align:center;"
                                    >
                                    <button
                                        type="button"
                                        class="button buttonAlt js-alt-add"
                                        style="margin:0;padding:6px 12px;font-size:13px;line-height:1.2;"
                                    >
                                        Add to basket
                                    </button>
                                    <a
                                        class="button buttonLink"
                                        href="{{ alt.url }}"
                                        style="margin:0;padding:6px 12px;font-size:13px;line-height:1.2;"
                                    >
                                        View details
                                    </a>
                                    <span class="js-alt-status" aria-live="polite"></span>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}
    {% endfor %}

{% endblock %}
