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

{% block main %}
    <div class="checkout-order-success-section">
        <div class="checkout-order-success-content">
            <div class="checkout-order-success-title">
                <svg class="checkout-order-success-title__icon"><use xlink:href="/sprite.svg#circle-check"></use></svg>
                <div class="checkout-order-success-title__main">
                    <span>Спасибо!</span>
                    <span>Ваш заказ #1234 оформлен</span>
                </div>
            </div>

            <p class="checkout-order-success-desc">Через несколько минут мы с вами свяжемся в Whatsapp для подтверждения заказа и уточнения деталей доставки</p>

            <div class="checkout-order-success-list-wrapper">
                <span class="checkout-order-success-list-title">Товары в заказе</span>

                <ul class="checkout-order-success-list">
                    {% for item in range(1, 3) %}
                        <li class="checkout-order-success-list-item">
                            <span>Delkor 75D23L 65Ач 550А, ОП, стандартные клеммы</span>
                            <span>6 400 ₽</span>
                        </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="checkout-order-success-inf-wrapper">
                <span class="checkout-order-success-inf-title">Адрес и способ оплаты</span>
                <p class="checkout-order-success-inf-text">Самовывоз, ул. Ленина, 5</p>
            </div>

            <div class="checkout-order-success-inf-wrapper">
                <span class="checkout-order-success-inf-title">Получатель</span>
                <p class="checkout-order-success-inf-text">Ибрагим Венедиктов, 8 915 173 32 00</p>
            </div>
        </div>

        <div
            class="checkout-order-success-block"
            x-data="formValidation({ fields: { email: ['required', 'email'] } })"
        >
            <span class="checkout-order-success-block__title">Выслать подробности заказа на ваш email?</span>
            <div class="input-wrapper input-wrapper--primary">
                <input type="text" placeholder="" class="input-default" x-model.trim="fields.email" @input="validateField('email')" @blur="touchAndValidate('email')">
                <span class="input-placeholder">Email</span>
                <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения или email введен в неверном формате" data-input-ntf-role="error" x-show="touched.email && !!errors.email"><use xlink:href="/sprite.svg#input-error"></use></svg>
                <svg class="input-ntf" data-input-ntf-message="Email корректный" data-input-ntf-role="success" x-show="touched.email && hadError.email && !errors.email"><use xlink:href="/sprite.svg#input-success"></use></svg>
            </div>
            <button class="checkout-order-success-block__submit-btn" @click.prevent="onSubmit">Отправить</button>
        </div>
    </div>
{% endblock %}