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

{% block main %}
    <form
        action=""
        method="post"
        style="display:flex;flex-flow:column;gap:20px;"
        x-data="formValidation({
            fields: {
                message: ['required'],
                link: ['required', 'url'],
                email: ['required', 'email'],
                phone: ['required', 'phone'],
                promo: ['required', 'promo'],
                terms: ['accepted'],
            },
            extra: {
                promoApplied: false,
                promoApplyAttempted: false,
                applyPromo() {
                    this.promoApplyAttempted = true
                    this.touchAndValidate('promo')
                    if (!this.errors.promo) {
                        this.promoApplied = true
                        this.promoApplyAttempted = false
                    }
                },
                clearPromo() {
                    this.fields.promo = ''
                    this.errors.promo = ''
                    this.touched.promo = false
                    this.hadError.promo = false
                    this.promoApplied = false
                    this.promoApplyAttempted = false
                },
            },
        })"
        @submit.prevent="onSubmit"
    >
        <div class="input-wrapper input-wrapper--textarea">
            <textarea
                placeholder="Текст сообщения"
                class="input-textarea"
                x-model="fields.message"
                @input="validateField('message')"
                @blur="touchAndValidate('message')"
            ></textarea>
            <svg
                class="input-ntf input-ntf--error"
                data-input-ntf-message="Поле обязательно для заполнения"
                data-input-ntf-role="error"
                x-show="touched.message && !!errors.message"
            ><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.message && hadError.message && !errors.message"
            ><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.link"
                @input="validateField('link')"
                @blur="touchAndValidate('link')"
            >
            <span class="input-placeholder">Ссылка</span>
            <svg
                class="input-ntf input-ntf--error"
                data-input-ntf-message="Поле обязательно для заполнения или ссылка введена в неверном формате"
                data-input-ntf-role="error"
                x-show="touched.link && !!errors.link"
            ><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.link && hadError.link && !errors.link"
            ><use xlink:href="/sprite.svg#input-success"></use></svg>
        </div>

        <div class="input-wrapper">
            <input
                type="email"
                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 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="cart-grid-section__block__input" :class="{ applied: promoApplied, error: touched.promo && !!errors.promo }">
            <input
                type="text"
                placeholder="Промокод"
                :disabled="promoApplied"
                x-model.trim="fields.promo"
                @input="promoApplyAttempted = false; validateField('promo')"
                @blur="touchAndValidate('promo')"
            >
            <button
                class="cart-grid-section__block__input-apply-btn"
                @click.prevent="applyPromo"
                x-show="!!fields.promo.length && !promoApplied"
            >Применить</button>
            <button class="cart-grid-section__block__input-clear-btn" x-show="promoApplied" @click.prevent="clearPromo">
                <svg><use xlink:href="/sprite.svg#close"></use></svg>
            </button>
            <div
                class="cart-grid-section__block__input-error"
                x-show="touched.promo && !!errors.promo"
                x-text="promoApplyAttempted ? 'Промокод недействителен' : errors.promo"
            ></div>
        </div>

        <label class="input-checkbox" :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>

        <button type="submit">Send</button>
    </form>
{% endblock %}