<section 
    class="reviews-and-questions-section"
    x-data="{
        tabActive: 1,
        reviewsMore() {
            const list = $el.querySelectorAll('.reviews-and-questions-section__list')[0]
            const html = list.innerHTML
            this.$el.remove()
            list.innerHTML += html
        },
        qMore() {
            const list = $el.querySelectorAll('.reviews-and-questions-section__list')[1]
            const button = list.querySelector('.reviews-and-questions-section__load-more-btn')
            const items = list.querySelectorAll('.reviews-and-questions-section__item')

            for (const item of items) {
                button.insertAdjacentHTML('beforebegin', item.outerHTML)
            }
        }
    }"
>
    <div class="reviews-and-questions-section__tabs">
        {% for item in ["Отзывы", "Вопросы"] %}
            <button class="reviews-and-questions-section__tab-btn" :class="{ active: tabActive === {{ loop.index }} }" @click.prevent="tabActive = {{ loop.index }}" data-action-name="{{ item }}">{{ item }}</button>
        {% endfor %}
    </div>

    <div class="reviews-and-questions-section__container" x-show="tabActive === 1">
        <div class="reviews-and-questions-section__rating-block">
            <div class="reviews-and-questions-section__rating-block__grid">
                <div class="reviews-and-questions-section__rating-block__rating">
                    <span class="reviews-and-questions-section__rating-block__rating-current">4,9</span>
                    <p class="reviews-and-questions-section__rating-block__rating-desc">На основании 14 отзывов</p>
                    <div class="stars-rate stars-rate--small reviews-and-questions-section__rating-block__rating-stars" style="--rate: 4.9"></div>
                </div>
                <ul class="reviews-and-questions-section__rating-block__stats">
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>5</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 86%"></div>
                        <span>86%</span>
                    </li>
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>4</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 14%"></div>
                        <span>14%</span>
                    </li>
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>3</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 0%"></div>
                        <span>0%</span>
                    </li>
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>2</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 0%"></div>
                        <span>0%</span>
                    </li>
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>1</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 0%"></div>
                        <span>0%</span>
                    </li>
                </ul>
            </div>
            <button class="reviews-and-questions-section__rating-block__btn" data-modal-btn="e899cd98-3478-4ddf-9175-615732317672">Написать отзыв</button>
            <template data-modal-idx="e899cd98-3478-4ddf-9175-615732317672">
                {% include "modals/write-review.twig" %}
            </template>
        </div>

        {# <div class="reviews-and-questions-section__list-empty">
            <svg class="reviews-and-questions-section__list-empty__icon"><use xlink:href="/sprite.svg#reviews-empty"></use></svg>
            <div class="reviews-and-questions-section__list-empty__main">
                <span>Отзывов пока нет</span>
                <p>Ваш отзыв может стать первым</p>
            </div>
        </div> #}

        <div class="reviews-and-questions-section__list">
            <div class="reviews-and-questions-section__item">
                <div class="reviews-and-questions-section__item-head">
                    <div class="reviews-and-questions-section__item-head__avatar">
                        <span>АВ</span>
                    </div>
                    <div class="reviews-and-questions-section__item-head__main">
                        <span class="reviews-and-questions-section__item-head__name">Андрей Кульков</span>
                        <div class="stars-rate stars-rate--small" style="--rate: 5"></div>
                    </div>
                </div>
                <p class="reviews-and-questions-section__item-text">Отличный магазин! Огромный выбор новых и б/у аккумуляторов. Всё показали, рассказали, подобрали аккумулятор, проверили напряжение под нагрузкой 200А, а также другим прибором ёмкость и выдаваемый пусковой ток. Так же проверили и мой АКБ на машине. Скидка за сдачу старого АКБ. Доступна оплата картой. Гарантия на новые и б/у АКБ. Рекомендую сей магазин!</p>
                <div class="reviews-and-questions-section__item-photos">
                    <a href="" class="reviews-and-questions-section__item-photo">
                        <img src="/images/reviews/photos/1.png" alt="">
                    </a>
                    <a href="" class="reviews-and-questions-section__item-photo">
                        <img src="/images/reviews/photos/2.png" alt="">
                    </a>
                </div>
                <span class="reviews-and-questions-section__item-date">4 августа 2025</span>
            </div>
            <div class="reviews-and-questions-section__item">
                <div class="reviews-and-questions-section__item-head">
                    <div class="reviews-and-questions-section__item-head__avatar">
                        <span>КЗ</span>
                    </div>
                    <div class="reviews-and-questions-section__item-head__main">
                        <span class="reviews-and-questions-section__item-head__name">Кирилл 3.</span>
                        <div class="stars-rate stars-rate--small" style="--rate: 5"></div>
                    </div>
                </div>
                <p class="reviews-and-questions-section__item-text">Отличный магазин! Огромный выбор новых и б/у аккумуляторов. Всё показали, рассказали, подобрали аккумулятор, проверили напряжение под нагрузкой 200А, а также другим прибором ёмкость и выдаваемый пусковой ток. Так же проверили и мой АКБ на машине. Скидка за сдачу старого АКБ. Доступна оплата картой. Гарантия на новые и б/у АКБ. Рекомендую сей магазин!</p>
                <span class="reviews-and-questions-section__item-date">4 августа 2025</span>
            </div>
            <div class="reviews-and-questions-section__item">
                <div class="reviews-and-questions-section__item-head">
                    <div class="reviews-and-questions-section__item-head__avatar">
                        <span>АВ</span>
                    </div>
                    <div class="reviews-and-questions-section__item-head__main">
                        <span class="reviews-and-questions-section__item-head__name">Андрей Кульков</span>
                        <div class="stars-rate stars-rate--small" style="--rate: 5"></div>
                    </div>
                </div>
                <p class="reviews-and-questions-section__item-text">Отличный магазин! Огромный выбор новых и б/у аккумуляторов. Всё показали, рассказали, подобрали аккумулятор, проверили напряжение под нагрузкой 200А, а также другим прибором ёмкость и выдаваемый пусковой ток. Так же проверили и мой АКБ на машине. Скидка за сдачу старого АКБ. Доступна оплата картой. Гарантия на новые и б/у АКБ. Рекомендую сей магазин!</p>
                <span class="reviews-and-questions-section__item-date">4 августа 2025</span>
            </div>
            <button class="reviews-and-questions-section__load-more-btn" @click.prevent="reviewsMore">Показать ещё</button>
        </div>
    </div>
    
    <div class="reviews-and-questions-section__container" x-show="tabActive === 2">
        {# <div class="reviews-and-questions-section__list-empty">
            <svg class="reviews-and-questions-section__list-empty__icon"><use xlink:href="/sprite.svg#questions-empty"></use></svg>
            <div class="reviews-and-questions-section__list-empty__main">
                <span>Вопросов пока нет</span>
                <p>Задайте ваш вопрос, на который ответят наши специалисты</p>
            </div>
        </div> #}
        <div class="reviews-and-questions-section__list">
            <div class="reviews-and-questions-section__item">
                <div class="reviews-and-questions-section__item-head">
                    <div class="reviews-and-questions-section__item-head__avatar">
                        <span>АВ</span>
                    </div>
                    <div class="reviews-and-questions-section__item-head__main">
                        <span class="reviews-and-questions-section__item-head__name">Андрей Кульков</span>
                        <span class="reviews-and-questions-section__item-head__date">4 августа 2025</span>
                    </div>
                </div>
                <p class="reviews-and-questions-section__item-text">Посоветуйте аккумулятор для Renault Logan 2015 1,6? </p>
                <div class="reviews-and-questions-section__item-answer">
                    <div class="reviews-and-questions-section__item-answer__head">
                        <img src="/images/avatar.png" alt="" class="reviews-and-questions-section__item-answer__head__avatar">
                        <div class="reviews-and-questions-section__item-answer__head__main">
                            <div class="reviews-and-questions-section__item-answer__head__name">
                                <span>Иван Иванов</span>
                                <img src="/images/logo.svg" alt="">
                            </div>
                            <span class="reviews-and-questions-section__item-answer__head__date">4 августа 2025</span>
                        </div>
                    </div>
                    <p class="reviews-and-questions-section__item-answer__text">Мы подбираем, доставляем и устанавливаем АКБ по Москве и Подмосковью в день обращения. Любой формат — новый, б/у или премиум, под нужный бюджет и тип авто. Курьер может привезти несколько вариантов, проверить генератор и адаптировать АКБ на месте. Бесплатная доставка по Мытищам, честная гарантия и даже подменный аккумулятор — всё, чтобы вы всегда оставались на ходу</p>
                </div>
            </div>
            <div class="reviews-and-questions-section__item">
                <div class="reviews-and-questions-section__item-head">
                    <div class="reviews-and-questions-section__item-head__avatar">
                        <span>АВ</span>
                    </div>
                    <div class="reviews-and-questions-section__item-head__main">
                        <span class="reviews-and-questions-section__item-head__name">Андрей Кульков</span>
                        <span class="reviews-and-questions-section__item-head__date">4 августа 2025</span>
                    </div>
                </div>
                <p class="reviews-and-questions-section__item-text">Посоветуйте аккумулятор для Renault Logan 2015 1,6? </p>
                <div class="reviews-and-questions-section__item-answer">
                    <div class="reviews-and-questions-section__item-answer__head">
                        <img src="/images/avatar.png" alt="" class="reviews-and-questions-section__item-answer__head__avatar">
                        <div class="reviews-and-questions-section__item-answer__head__main">
                            <div class="reviews-and-questions-section__item-answer__head__name">
                                <span>Иван Иванов</span>
                                <img src="/images/logo.svg" alt="">
                            </div>
                            <span class="reviews-and-questions-section__item-answer__head__date">4 августа 2025</span>
                        </div>
                    </div>
                    <p class="reviews-and-questions-section__item-answer__text">Мы подбираем, доставляем и устанавливаем АКБ по Москве и Подмосковью в день обращения. Любой формат — новый, б/у или премиум, под нужный бюджет и тип авто. Курьер может привезти несколько вариантов, проверить генератор и адаптировать АКБ на месте. Бесплатная доставка по Мытищам, честная гарантия и даже подменный аккумулятор — всё, чтобы вы всегда оставались на ходу</p>
                </div>
            </div>
            <div class="reviews-and-questions-section__item">
                <div class="reviews-and-questions-section__item-head">
                    <div class="reviews-and-questions-section__item-head__avatar">
                        <span>АВ</span>
                    </div>
                    <div class="reviews-and-questions-section__item-head__main">
                        <span class="reviews-and-questions-section__item-head__name">Андрей Кульков</span>
                        <span class="reviews-and-questions-section__item-head__date">4 августа 2025</span>
                    </div>
                </div>
                <p class="reviews-and-questions-section__item-text">Посоветуйте аккумулятор для Renault Logan 2015 1,6? </p>
            </div>
            <button class="reviews-and-questions-section__load-more-btn" @click.prevent="qMore">Показать ещё</button>
            <form
                action=""
                class="reviews-and-questions-section__form"
                x-data="formValidation({ fields: { message: ['required'], phone: ['required', 'phone'], name: ['required'], terms: ['accepted'] } })"
                @submit.prevent="onSubmit"
            >
                <span class="reviews-and-questions-section__form-title">Задать вопрос</span>
                <div class="input-wrapper input-wrapper--textarea">
                    <textarea placeholder="Комментарий к заказу" class="input-textarea reviews-and-questions-section__form__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="reviews-and-questions-section__form__grid">
                    <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.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>
                    <button type="submit" class="reviews-and-questions-section__form__submit-btn">Отправить</button>
                    <label class="input-checkbox reviews-and-questions-section__form__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>
            </form>
        </div>
    </div>
</section>
