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

{% block main %}
    <div class="page-back-btn-container">
        <button class="page-back-btn" data-mobile-text="Назад">
            <span>Назад в корзину</span>
        </button>
    </div>

    <h1 class="checkout-order-title">Оформление заказа</h1>

    <section
        class="checkout-order-section"
        x-data="formValidation({
            fields: { name: ['required'], phone: ['required', 'phone'], email: ['required', 'email'], terms: ['accepted'] },
            extra: {
                deliveryMethod: 'delivery',
                mapType: '1',
                addressSelected: null,
                promoApplied: false,
                promoApplyAttempted: false,
                promoValue: '',
                promoError: '',
                isPromoValid(value) {
                    return /^[A-Za-zА-Яа-я0-9_-]{4,20}$/.test(value.trim())
                },
                applyPromo() {
                    this.promoApplyAttempted = true
                    const value = this.promoValue.trim()
                    if (!value) {
                        this.promoError = 'Поле обязательно для заполнения'
                    } else if (!this.isPromoValid(value)) {
                        this.promoError = 'Промокод недействителен'
                    } else {
                        this.promoError = ''
                        this.promoApplied = true
                        this.promoApplyAttempted = false
                    }
                },
                clearPromo() {
                    this.promoValue = ''
                    this.promoError = ''
                    this.promoApplied = false
                    this.promoApplyAttempted = false
                },
            },
        })"
    >
        <div class="checkout-order-section__container">
            <div class="checkout-order-section__inf-for-mobile">
                <button class="checkout-order-section__select-btn" data-transfer-to-body-btn="244df391-86ff-46b5-ba04-6303c93e4946">
                    <div class="checkout-order-section__select-btn__main">
                        <b>Адрес и способ доставки</b>
                        <p>Выберите адрес доставки</p>
                    </div>
                    <svg class="checkout-order-section__select-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
                <button class="checkout-order-section__select-btn" data-transfer-to-body-btn="310936aa-0d84-4829-ab82-cb40c15d5add">
                    <div class="checkout-order-section__select-btn__main">
                        <b>Получатель</b>
                        <p>Укажите контактные данные</p>
                    </div>
                    <svg class="checkout-order-section__select-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
            </div>

            <template data-transfer-to-body="244df391-86ff-46b5-ba04-6303c93e4946" data-transfer-to-body-scroll-disabled>
                <div class="delivery-method-popup" x-data="{ deliveryMethod: 'delivery', mapType: '1', addressSelected: null }">
                    <div class="delivery-method-popup__header">
                        <button class="delivery-method-popup__header__btn" data-transfer-to-body-remove-btn>
                            <svg><use xlink:href="/sprite.svg#angle-left"></use></svg>
                        </button>
                        <span class="delivery-method-popup__header__title">Адрес и способ доставки</span>
                        <button class="delivery-method-popup__header__btn" data-transfer-to-body-remove-btn>
                            <svg><use xlink:href="/sprite.svg#close"></use></svg>
                        </button>
                    </div>

                    <div class="delivery-method-popup__content">
                        <div class="checkout-order-section__inf-block__group">
                            <label class="checkout-order-section__inf-block__type-select">
                                <input type="radio" name="delivery-type" value="delivery" x-model="deliveryMethod">
                                <div class="checkout-order-section__inf-block__type-select__wrapper">
                                    <div class="checkout-order-section__inf-block__type-select__icon">
                                        <svg><use xlink:href="/sprite.svg#delivered"></use></svg>
                                    </div>
                                    <div class="checkout-order-section__inf-block__type-select__main">
                                        <div class="checkout-order-section__inf-block__type-select__type">
                                            <b>Доставка</b>
                                            <span>от 300 ₽</span>
                                        </div>
                                        <p class="checkout-order-section__inf-block__type-select__desc">Сроки доставки уточнит курьер</p>
                                    </div>
                                    <div class="checkout-order-section__inf-block__type-select__box"></div>
                                </div>
                            </label>
                            <label class="checkout-order-section__inf-block__type-select">
                                <input type="radio" name="delivery-type" value="pickup" x-model="deliveryMethod">
                                <div class="checkout-order-section__inf-block__type-select__wrapper">
                                    <div class="checkout-order-section__inf-block__type-select__icon">
                                        <svg><use xlink:href="/sprite.svg#package"></use></svg>
                                    </div>
                                    <div class="checkout-order-section__inf-block__type-select__main">
                                        <div class="checkout-order-section__inf-block__type-select__type">
                                            <b>Самовывоз</b>
                                            <span>Бесплатно</span>
                                        </div>
                                        <p class="checkout-order-section__inf-block__type-select__desc">Можно забрать через 3 часа</p>
                                    </div>
                                    <div class="checkout-order-section__inf-block__type-select__box"></div>
                                </div>
                            </label>
                        </div>

                        <div class="checkout-order-section__inf-block" x-show="deliveryMethod === 'delivery'">
                            <span class="checkout-order-section__inf-block__title">Адрес доставки</span>
                            <div class="checkout-order-section__inf-block__address-input" x-data="{ value: null }">
                                <input type="text" placeholder="Введите адрес доставки" x-model="value">
                                <button class="checkout-order-section__inf-block__address-input__clear-btn" x-show="!!value.length" @click.prevent="value = null">
                                    <svg><use xlink:href="/sprite.svg#close"></use></svg>
                                </button>
                            </div>
                            <textarea placeholder="Комментарий к заказу" class="input-textarea"></textarea>
                        </div>

                        <div class="checkout-order-section__inf-block" x-show="deliveryMethod === 'pickup'">
                            <span class="checkout-order-section__inf-block__title">Пункт выдачи заказа</span>
                            <div class="segmented-control">
                                {% for item in ["Списком", "На карте"] %}
                                    <label class="segmented-control-item">
                                        <input type="radio" name="map-type" value="{{ loop.index }}" x-model="mapType">
                                        <div>{{ item }}</div>
                                    </label>
                                {% endfor %}
                            </div>
                            <div class="checkout-order-section__inf-block__addresses" x-show="mapType === '1'">
                                {% for item in range(1, 3) %}
                                    <label class="checkout-order-section__inf-block__address-item">
                                        <input type="radio" name="pickup-address">
                                        <div class="checkout-order-section__inf-block__address-item__wrapper">
                                            <div class="checkout-order-section__inf-block__address-item__main">
                                                <span class="checkout-order-section__inf-block__address-item__address-label">Carakb Мытищи</span>
                                                <p class="checkout-order-section__inf-block__address-item__address-full">Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи</p>
                                                <ul class="checkout-order-section__inf-block__address-item__contacts">
                                                    <li>
                                                        <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                                        <span>09:00 до 21:00</span>
                                                    </li>
                                                    <li>
                                                        <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                                        <span>+7 (495) 118-43-17</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="checkout-order-section__inf-block__address-item__box"></div>
                                        </div>
                                    </label>
                                {% endfor %}
                            </div>
                            <div class="checkout-order-section__inf-block__map-addresses" x-show="mapType === '2'">
                                <div class="checkout-order-section__inf-block__map-address-item">
                                    <div class="checkout-order-section__inf-block__map-address-item__main">
                                        <span class="checkout-order-section__inf-block__map-address-item__address-label">Carakb Мытищи</span>
                                        <p class="checkout-order-section__inf-block__map-address-item__address-full">Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи</p>
                                        <div class="checkout-order-section__inf-block__map-address-item__footer">
                                            <span class="checkout-order-section__inf-block__map-address-item__footer__title">Доступно сегодня в 15:00</span>
                                            <ul class="checkout-order-section__inf-block__map-address-item__contacts">
                                                <li>
                                                    <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                                    <span>09:00 до 21:00</span>
                                                </li>
                                                <li>
                                                    <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                                    <span>+7 (495) 118-43-17</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <button 
                                        class="checkout-order-section__inf-block__map-address-item__select-btn" 
                                        :class="{ selected: !!addressSelected }" 
                                        @click.prevent="addressSelected = !addressSelected" 
                                        x-text="addressSelected ? 'Изменить' : 'Заберу отсюда'"
                                    >Заберу отсюда</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button class="delivery-method-popup__submit-btn" x-text="deliveryMethod === 'delivery' ? 'Привезти сюда' : 'Заберу отсюда'" data-transfer-to-body-remove-btn>Привезти сюда</button>
                </div>
            </template>

            <template data-transfer-to-body="310936aa-0d84-4829-ab82-cb40c15d5add" data-transfer-to-body-scroll-disabled>
                <div class="delivery-method-popup" x-data="{ deliveryMethod: 'delivery', mapType: '1', addressSelected: null }">
                    <div class="delivery-method-popup__header">
                        <button class="delivery-method-popup__header__btn" data-transfer-to-body-remove-btn>
                            <svg><use xlink:href="/sprite.svg#angle-left"></use></svg>
                        </button>
                        <span class="delivery-method-popup__header__title">Получатель</span>
                        <button class="delivery-method-popup__header__btn" data-transfer-to-body-remove-btn>
                            <svg><use xlink:href="/sprite.svg#close"></use></svg>
                        </button>
                    </div>

                    <div class="delivery-method-popup__content">
                        <div class="checkout-order-section__inf-block">
                            <span class="checkout-order-section__inf-block__title">Ваши данные</span>
                            <span class="checkout-order-section__inf-block__desc">Мы отправим туда детали заказа</span>
                            <div class="checkout-order-section__inf-block__content checkout-order-section__inf-block__content--gap8">
                                <div class="input-wrapper">
                                    <input type="text" placeholder="" class="input-default" x-model.trim="fields.name" @input="validateField('name')" @blur="touchAndValidate('name')">
                                    <span class="input-placeholder">Имя получателя</span>
                                    <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения" data-input-ntf-role="error" x-show="touched.name && !!errors.name"><use xlink:href="/sprite.svg#input-error"></use></svg>
                                    <svg class="input-ntf" data-input-ntf-message="Поле заполнено" data-input-ntf-role="success" x-show="touched.name && hadError.name && !errors.name"><use xlink:href="/sprite.svg#input-success"></use></svg>
                                </div>
                                <div class="input-wrapper">
                                    <input type="text" placeholder="" class="input-default" x-model="fields.phone" x-mask="+7 999 999-99-99" @input="validateField('phone')" @blur="touchAndValidate('phone')">
                                    <span class="input-placeholder">Телефон</span>
                                    <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения или телефон введен в неверном формате" data-input-ntf-role="error" x-show="touched.phone && !!errors.phone"><use xlink:href="/sprite.svg#input-error"></use></svg>
                                    <svg class="input-ntf" data-input-ntf-message="Телефон корректный" data-input-ntf-role="success" x-show="touched.phone && hadError.phone && !errors.phone"><use xlink:href="/sprite.svg#input-success"></use></svg>
                                </div>
                                <div class="input-wrapper">
                                    <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>
                            </div>
                            <label class="input-tumbler">
                                <input type="checkbox" checked>
                                <div class="input-tumbler__box"></div>
                                <p class="input-tumbler__text">Связаться со мной в Whatsapp</p>
                            </label>
                        </div>
                    </div>

                    <button class="delivery-method-popup__submit-btn" x-text="deliveryMethod === 'delivery' ? 'Привезти сюда' : 'Заберу отсюда'" data-transfer-to-body-remove-btn>Привезти сюда</button>
                </div>
            </template>

            <div class="checkout-order-section__inf-for-desktop">
                <div class="checkout-order-section__inf-block">
                    <span class="checkout-order-section__inf-block__title">Способ доставки</span>
                    <div class="checkout-order-section__inf-block__group">
                        <label class="checkout-order-section__inf-block__type-select">
                            <input type="radio" name="delivery-type" value="delivery" x-model="deliveryMethod">
                            <div class="checkout-order-section__inf-block__type-select__wrapper">
                                <div class="checkout-order-section__inf-block__type-select__icon">
                                    <svg><use xlink:href="/sprite.svg#delivered"></use></svg>
                                </div>
                                <div class="checkout-order-section__inf-block__type-select__main">
                                    <div class="checkout-order-section__inf-block__type-select__type">
                                        <b>Доставка</b>
                                        <span>от 300 ₽</span>
                                    </div>
                                    <p class="checkout-order-section__inf-block__type-select__desc">Сроки доставки уточнит курьер</p>
                                </div>
                                <div class="checkout-order-section__inf-block__type-select__box"></div>
                            </div>
                        </label>
                        <label class="checkout-order-section__inf-block__type-select">
                            <input type="radio" name="delivery-type" value="pickup" x-model="deliveryMethod">
                            <div class="checkout-order-section__inf-block__type-select__wrapper">
                                <div class="checkout-order-section__inf-block__type-select__icon">
                                    <svg><use xlink:href="/sprite.svg#package"></use></svg>
                                </div>
                                <div class="checkout-order-section__inf-block__type-select__main">
                                    <div class="checkout-order-section__inf-block__type-select__type">
                                        <b>Самовывоз</b>
                                        <span>Бесплатно</span>
                                    </div>
                                    <p class="checkout-order-section__inf-block__type-select__desc">Можно забрать через 3 часа</p>
                                </div>
                                <div class="checkout-order-section__inf-block__type-select__box"></div>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="checkout-order-section__inf-block" x-show="deliveryMethod === 'delivery'">
                    <span class="checkout-order-section__inf-block__title">Адрес доставки</span>
                    <div class="checkout-order-section__inf-block__address-input" x-data="{ value: null }">
                        <input type="text" placeholder="Введите адрес доставки" x-model="value">
                        <button class="checkout-order-section__inf-block__address-input__clear-btn" x-show="!!value.length" @click.prevent="value = null">
                            <svg><use xlink:href="/sprite.svg#close"></use></svg>
                        </button>
                    </div>
                </div>
                <div class="checkout-order-section__inf-block" x-show="deliveryMethod === 'pickup'">
                    <span class="checkout-order-section__inf-block__title">Пункт выдачи заказа</span>
                    <div class="segmented-control">
                        {% for item in ["Списком", "На карте"] %}
                            <label class="segmented-control-item">
                                <input type="radio" name="map-type" value="{{ loop.index }}" x-model="mapType">
                                <div>{{ item }}</div>
                            </label>
                        {% endfor %}
                    </div>
                    <div class="checkout-order-section__inf-block__addresses" x-show="mapType === '1'">
                        {% for item in range(1, 3) %}
                            <label class="checkout-order-section__inf-block__address-item">
                                <input type="radio" name="pickup-address">
                                <div class="checkout-order-section__inf-block__address-item__wrapper">
                                    <div class="checkout-order-section__inf-block__address-item__main">
                                        <span class="checkout-order-section__inf-block__address-item__address-label">Carakb Мытищи</span>
                                        <p class="checkout-order-section__inf-block__address-item__address-full">Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи</p>
                                        <ul class="checkout-order-section__inf-block__address-item__contacts">
                                            <li>
                                                <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                                <span>09:00 до 21:00</span>
                                            </li>
                                            <li>
                                                <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                                <span>+7 (495) 118-43-17</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="checkout-order-section__inf-block__address-item__box"></div>
                                </div>
                            </label>
                        {% endfor %}
                    </div>
                    <div class="checkout-order-section__inf-block__map-addresses" x-show="mapType === '2'">
                        <div class="checkout-order-section__inf-block__map-address-item">
                            <div class="checkout-order-section__inf-block__map-address-item__main">
                                <span class="checkout-order-section__inf-block__map-address-item__address-label">Carakb Мытищи</span>
                                <p class="checkout-order-section__inf-block__map-address-item__address-full">Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи</p>
                                <div class="checkout-order-section__inf-block__map-address-item__footer">
                                    <span class="checkout-order-section__inf-block__map-address-item__footer__title">Доступно сегодня в 15:00</span>
                                    <ul class="checkout-order-section__inf-block__map-address-item__contacts">
                                        <li>
                                            <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                            <span>09:00 до 21:00</span>
                                        </li>
                                        <li>
                                            <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                            <span>+7 (495) 118-43-17</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button 
                                class="checkout-order-section__inf-block__map-address-item__select-btn" 
                                :class="{ selected: !!addressSelected }" 
                                @click.prevent="addressSelected = !addressSelected" 
                                x-text="addressSelected ? 'Изменить' : 'Заберу отсюда'"
                            >Заберу отсюда</button>
                        </div>
                    </div>
                </div>
                <div class="checkout-order-section__inf-block">
                    <span class="checkout-order-section__inf-block__title">Получатель</span>
                    <div class="checkout-order-section__inf-block__content">
                        <div class="input-wrapper">
                            <input type="text" placeholder="" class="input-default" x-model.trim="fields.name" @input="validateField('name')" @blur="touchAndValidate('name')">
                            <span class="input-placeholder">Имя получателя</span>
                            <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения" data-input-ntf-role="error" x-show="touched.name && !!errors.name"><use xlink:href="/sprite.svg#input-error"></use></svg>
                            <svg class="input-ntf" data-input-ntf-message="Поле заполнено" data-input-ntf-role="success" x-show="touched.name && hadError.name && !errors.name"><use xlink:href="/sprite.svg#input-success"></use></svg>
                        </div>
                        <div class="input-wrapper">
                            <input type="text" placeholder="" class="input-default" x-model="fields.phone" x-mask="+7 999 999-99-99" @input="validateField('phone')" @blur="touchAndValidate('phone')">
                            <span class="input-placeholder">Телефон</span>
                            <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения или телефон введен в неверном формате" data-input-ntf-role="error" x-show="touched.phone && !!errors.phone"><use xlink:href="/sprite.svg#input-error"></use></svg>
                            <svg class="input-ntf" data-input-ntf-message="Телефон корректный" data-input-ntf-role="success" x-show="touched.phone && hadError.phone && !errors.phone"><use xlink:href="/sprite.svg#input-success"></use></svg>
                        </div>
                        <div class="input-wrapper">
                            <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>
                        <label class="input-tumbler">
                            <input type="checkbox" checked>
                            <div class="input-tumbler__box"></div>
                            <p class="input-tumbler__text">Связаться со мной в Whatsapp</p>
                        </label>
                    </div>
                </div>
                <textarea placeholder="Комментарий к заказу" class="input-textarea"></textarea>
            </div>

            <div class="checkout-order-section__products-wrapper">
                <span class="checkout-order-section__products-title">Товары в заказе</span>
                <div class="checkout-order-section__products-list">
                    {% for item in range(1, 3) %}
                        <div class="checkout-order-section__product-item">
                            <div class="checkout-order-section__product-item__cover">
                                <img src="/images/products/p-1.png" alt="" srcset="/images/products/p-1@2x.png 2x">
                            </div>
                            <p class="checkout-order-section__product-item__name">Delkor 75D23L 65Ач 550А, ОП, стандартные клеммы</p>
                            <span class="checkout-order-section__product-item__price">6 400 ₽</span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="checkout-order-section__block">
            <div class="checkout-order-section__block__total">
                <span>Итого</span>
                <b>6 400 ₽</b>
            </div>

            <ul class="checkout-order-section__block__list">
                <li><span>Стоимость товаров</span><span>6 900 ₽</span></li>
                <li><span>Скидка</span><span>500 ₽</span></li>
                <li><span>Доставка</span><span>500 ₽</span></li>
            </ul>

            <div class="checkout-order-section__block__input" :class="{ applied: promoApplied, error: promoApplyAttempted && !!promoError }">
                <input type="text" placeholder="Промокод" :disabled="promoApplied" x-model.trim="promoValue" @input="promoApplyAttempted = false">
                <button class="checkout-order-section__block__input-apply-btn" @click.prevent="applyPromo" x-show="!!promoValue.length && !promoApplied">Применить</button>
                <button class="checkout-order-section__block__input-clear-btn" x-show="promoApplied" @click.prevent="clearPromo">
                    <svg><use xlink:href="/sprite.svg#close"></use></svg>
                </button>
                <div class="checkout-order-section__block__input-error" x-show="promoApplyAttempted && !!promoError" x-text="promoError">Промокод недействителен</div>
            </div>

            <button class="checkout-order-section__block__submit-btn" @click.prevent="onSubmit">Оформить заказ</button>

            <label class="input-checkbox input-checkbox--primary checkout-order-section__block__terms" :class="{ error: touched.terms && !!errors.terms }">
                <input type="checkbox" x-model="fields.terms" @change="touchAndValidate('terms')">
                <div class="input-checkbox__box"></div>
                <p class="input-checkbox__text">Нажимая кнопку «Отправить», вы соглашаетесь с Политикой конфиденциальности </p>
            </label>
        </div>
    </section>
{% endblock %}