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

{% block members_content %}

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

    <div class="membersContentWrap weightVerificationPage">

        <div class="membersAlerts">
            {% if success is not empty %}
                <div class="success"><p>{{ success }}</p></div>
            {% endif %}
            {% if error is not empty %}
                <div class="error"><p>{{ error }}</p></div>
            {% endif %}
        </div>

        {% if verifications is empty %}

            {% if latest and latest.is_approved %}

                <div class="weightVerificationStatus weightVerificationStatus--approved">
                    <h2>Verification complete</h2>
                    <p>Thank you. Your photos have been reviewed and approved. Your order will now be processed.</p>
                </div>

            {% elseif latest and latest.isSubmitted %}

                <div class="weightVerificationStatus weightVerificationStatus--submitted">
                    <h2>Photos submitted</h2>
                    <p>Your photos are being reviewed by our clinical team alongside your assessment. We'll be in touch through your Messages if we need anything else.</p>
                </div>

            {% else %}

                <p>You have no weight verification to complete at this time.</p>

            {% endif %}

        {% else %}

            {# One or more flagged orders awaiting the patient's photos #}
            <div class="weightVerificationBanner alert alertWarning">
                <h2>Photo verification required</h2>
                <p>
                    Before your prescription can be approved, we need <strong>2 full-length photos</strong> of you
                    &mdash; one from the <strong>front</strong> and one from the <strong>side</strong>.
                    {% if verifications|length > 1 %}
                        You have <strong>{{ verifications|length }}</strong> orders awaiting photos &mdash; please complete each below.
                    {% endif %}
                </p>
            </div>

            <div class="weightVerificationGuidance">
                <p>To help our clinicians, please make sure each photo shows:</p>
                <ul>
                    <li>Form-fitting clothing</li>
                    <li>A plain background</li>
                    <li>Your full body, head to toe</li>
                </ul>
                <p class="weightVerificationGuidance__privacy">
                    Your photos are reviewed only by our clinical team and are kept strictly confidential.
                </p>
            </div>

            {% for verification in verifications %}
                {% set order = verification.order %}

                <div class="weightVerificationItem">

                    {% if verification.is_resubmit_required %}
                        <p class="weightVerificationBanner__resubmit alert alertWarning">
                            Our clinical team was unable to verify your previous photos and has asked you to take new ones.
                            {% if verification.decline_reason %}
                                Their feedback: {{ verification.decline_reason }}
                            {% else %}
                                Please check your Messages for details, then submit two new photos below.
                            {% endif %}
                        </p>
                    {% endif %}

                    {% if order is not null %}
                        <details class="weightVerificationOrder">
                            <summary>Order details</summary>
                            <div class="weightVerificationOrder__body">
                                <p><strong>Order #{{ order.id }}</strong></p>
                                <ul>
                                    {% for item in order.items %}
                                        <li>{{ item.quantity }} &times; {{ item.item_name }}{% if item.size %} ({{ item.size }}){% endif %}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </details>
                    {% endif %}

                    <weight-verification-form
                        :verification-id="{{ verification.id }}"
                        submit-url="{{ route('members-weight-verification-store', [], false) }}">

                        <template v-slot:front-copy>
                            <h3>Step 1: Front photo</h3>
                            <p>Stand facing the camera so your whole body is visible from head to toe.</p>
                        </template>

                        <template v-slot:side-copy>
                            <h3>Step 2: Side photo</h3>
                            <p>Turn to your side so your whole body is visible from head to toe.</p>
                        </template>

                    </weight-verification-form>

                </div>
            {% endfor %}

        {% endif %}

    </div>

{% endblock %}
