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

{% block main %}
    {% include "components/bread-crumbs.twig" %}

    <section class="payment-and-delivery-section" x-data="{ tabActive: 1 }">
        <h1 class="payment-and-delivery-section__title">Оплата и доставка</h1>

        <ul class="payment-and-delivery-section__tabs">
            {% for item in ["Доставка", "Оплата"] %}
                <li 
                    class="payment-and-delivery-section__tab-item" 
                    @click="tabActive = {{ loop.index }}"
                    :class="{ active: tabActive === {{ loop.index }} }"
                >{{ item }}</li>
            {% endfor %}
        </ul>

        <div class="payment-and-delivery-section__tab-delivery">
            <div class="payment-and-delivery-section__delivery-block">
                <span class="payment-and-delivery-section__delivery-block__title" x-text="tabActive === 1 ? 'Доставка' : 'Оплата'">Доставка</span>
                <p class="payment-and-delivery-section__delivery-block__text">Доставка аккумуляторов по Москве и за МКАД осуществляется ежедневно.<br><br>Осуществляем доставка товар собственной курьерской службой с 8 утра и до самой поздней ночи. Все курьеры обучены и имеют при себе необходимый инструмент для замены аккумулятора. Также мы можем отправить ваш заказ в регионы любой транспортной компанией на ваш выбор.</p>
                <ul class="payment-and-delivery-section__delivery-block__grid">
                    <li class="payment-and-delivery-section__delivery-block__item">
                        <b>При заказе до 14:00</b>
                        <p>доставка осуществляется день в день</p>
                    </li>
                    <li class="payment-and-delivery-section__delivery-block__item">
                        <b>При заказе после 14:00</b>
                        <p>на следующий день</p>
                    </li>
                    <li class="payment-and-delivery-section__delivery-block__item">
                        <b>Срочная доставка</b>
                        <p>Оплачивается отдельно, привезем в течение 2-3 часов</p>
                    </li>
                </ul>
            </div>

            <div class="payment-and-delivery-section__terms-block">
                <span class="payment-and-delivery-section__terms-block__title">Условия доставки</span>
                <ul class="payment-and-delivery-section__terms-block__ul">
                    <li class="payment-and-delivery-section__terms-block__li"><p>Курьер заранее предупреждает о времени своего прибытия по адресу (за 30-40 минут).</p></li>
                    <li class="payment-and-delivery-section__terms-block__li"><p>Время ожидания клиента по указанному адресу не более 15 минут.</p></li>
                    <li class="payment-and-delivery-section__terms-block__li"><p>Гарантийный талон курьер передает при получении заказа покупателем. Другие документы предоставляются по отдельному запросу покупателя. Сдать старый аккумулятор можно курьеру на месте или позже, самостоятельно в любом магазине CARAKB.RU</p></li>
                    <li class="payment-and-delivery-section__terms-block__li"><p>Доставка осуществляется до подъезда, автомобиля, шлагбаума и т.д.</p></li>
                    <li class="payment-and-delivery-section__terms-block__li"><p>Подъем на этаж с лифтом, подъем на этаж без лифта, спуск в подвал и т.д. оплачивается отдельно.</p></li>
                    <li class="payment-and-delivery-section__terms-block__li"><p>Расстояние рассчитывается за МКАД с помощью сервиса «Яндекс Карты».</p></li>
                    <li class="payment-and-delivery-section__terms-block__li"><p>Доставка осуществляется ежедневно, без выходных.</p></li>
                </ul>
                <div class="payment-and-delivery-section__warning-block payment-and-delivery-section__terms-block__warning">
                    <div class="payment-and-delivery-section__warning-block__head">
                        <svg><use xlink:href="/sprite.svg#warning"></use></svg>
                        <b>Внимание!</b>
                    </div>
                    <p class="payment-and-delivery-section__warning-block__text">Доставка осуществляется без привязки к конкретному времени. Это означает, что вы не можете ограничить время прибытия курьера, внутри подтвержденного интервала доставки.</p>
                    <p class="payment-and-delivery-section__warning-block__text payment-and-delivery-section__warning-block__text--gray">В случае отказа от всех доставленных товаров по причинам, не связанным с качеством продукции, получатель оплачивает стоимость доставки (на основании п.3 ст. 497 ГК РФ).</p>
                </div>
            </div>

            <div class="payment-and-delivery-section__table-block">
                <span class="payment-and-delivery-section__table-block__title">Стоимость доставки</span>
                <div class="table-custom">
                    <table style="grid-template-columns: repeat(5, 1fr)">
                        <thead>
                            <tr>
                                <th>Доставка</th>
                                <th>Авто АКБ</th>
                                <th>Другие товары</th>
                                <th>Интервал доставки</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>По Москве в пределах МКАД</td>
                                <td>300  ₽</td>
                                <td>300  ₽</td>
                                <td>с 09.00 до 18.00	и c 18.00 до 01.00</td>
                            </tr>
                            <tr>
                                <td>За МКАД</td>
                                <td>300  ₽ + 30  ₽/км</td>
                                <td>300  ₽ + 30  ₽/км</td>
                                <td>с 09.00 до 18.00	и c 18.00 до 01.00</td>
                            </tr>
                            <tr>
                                <td>Экспресс доставка в пределах МКАД</td>
                                <td>1 000  ₽</td>
                                <td>1 000  ₽</td>
                                <td>2-3 часа</td>
                            </tr>
                            <tr>
                                <td>Экспресс доставка за МКАД</td>
                                <td>1 000  ₽ + 30  ₽/км</td>
                                <td>1 000  ₽ + 30  ₽/км</td>
                                <td>2-3 часа</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="payment-and-delivery-section__table-block__dd">
                    <b>Доставка до ТК</b>
                    <p>от 300 ₽, уточняйте у менеджера, услуги транспортной компании оплачиваются отдельно при получении груза, по тарифам вашей ТК</p>
                </div>
            </div>
        </div>

        <div class="payment-and-delivery-section__order-pay-block">
            <span class="payment-and-delivery-section__order-pay-block__title">Оплата заказов по Москве и Московской области</span>
            <div class="payment-and-delivery-section__order-pay-block__group">
                <div class="payment-and-delivery-section__order-pay-block__item">
                    <b>При доставке</b>
                    <p>наличными курьеру</p>
                </div>
                <div class="payment-and-delivery-section__order-pay-block__item">
                    <b>При самовывозе из магазина</b>
                    <div class="payment-and-delivery-section__order-pay-block__item__cards">
                        <svg><use xlink:href="/sprite.svg#pay-card"></use></svg>
                        <svg><use xlink:href="/sprite.svg#pay-sbp"></use></svg>
                        <svg><use xlink:href="/sprite.svg#pay-mir"></use></svg>
                    </div>
                    <p>наличными или банковской картой</p>
                </div>
            </div>
            <div class="payment-and-delivery-section__warning-block payment-and-delivery-section__order-pay-block__warning">
                <div class="payment-and-delivery-section__warning-block__head">
                    <svg><use xlink:href="/sprite.svg#warning"></use></svg>
                    <b>Статья 497 ГК РФ. Продажа товаров по образцам</b>
                </div>
                <p class="payment-and-delivery-section__warning-block__text">Договор розничной купли-продажи может быть заключен на основании ознакомления покупателя с образцом товара (его описанием, каталогом товаров и т.п.), предложенным продавцом.<br><br>Если иное не предусмотрено законом, иными правовыми актами или договором, договор розничной купли-продажи товара по образцу считается исполненным с момента доставки товара в место, указанное в договоре, а если место передачи товара договором не определено, с момента доставки товара покупателю по месту жительства гражданина или месту нахождения юридического лица.<br><br>Покупатель до передачи товара вправе отказаться от исполнения договора розничной купли-продажи при условии возмещения продавцу необходимых расходов, понесенных в связи с совершением действий по выполнению договора.</p>
            </div>
        </div>

        <div 
            class="payment-and-delivery-section__delivery-akb-block" 
            x-data="{
                more() {
                    const list = $el.querySelector('.payment-and-delivery-section__delivery-akb-block__list')
                    list.innerHTML += list.innerHTML
                }
            }"
        >
            <span class="payment-and-delivery-section__delivery-akb-block__title">Доставляем аккумуляторы по всей Москве и МО</span>
            <div class="payment-and-delivery-section__delivery-akb-block__main">
                <div class="payment-and-delivery-section__delivery-akb-block__list">
                    {% for item in ["Борисово", "Варшавское шоссе", "Жулебино", "Коммунарка", "Королеве", "Ленинградское шоссе", "Лианозово", "метро Авиамоторная", "метро Автозаводская", "метро Академика Янгеля", "метро Академическая", "метро Алтуфьево", "метро Алтуфьевское шоссе", "метро Аннино", "метро Аэропорт", "метро Бабушкинская", "метро Багратионовская", "метро Бауманская", "метро Беговая", "метро Беляево", "метро Бибирево", "метро Библиотека ленина", "метро Братиславская", "метро Бульвар рокоссовского", "метро Бутырская", "метро Вднх", "метро Верхние Лихоборы", "метро Владыкино", "метро Водный стадион", "метро Войковская", "метро Волгоградскийпроспект", "метро Выхино", "метро Дмитровская", "метро Дмитровское шоссе", "метро Домодедовская", "метро Дубровка"] %}
                        <a href="" class="payment-and-delivery-section__delivery-akb-block__link">{{ item }}</a>
                    {% endfor %}
                </div>
                <button class="payment-and-delivery-section__delivery-akb-block__btn" @click.prevent="more">Показать ещё</button>
            </div>
        </div>
    </section>

    {% include "components/selection-help-section.twig" %}

    <ul class="company-pluses-section branch-company-section__company-pluses">
        <li class="company-pluses-section__li">
            <div class="company-pluses-section__li__icon">
                <svg><use xlink:href="/sprite.svg#coins"></use></svg>
            </div>
            <div class="company-pluses-section__li__main">
                <span>Выгодные цены</span>
                <p>Официальные представители и представляем лучшие цены</p>
            </div>
        </li>
        <li class="company-pluses-section__li">
            <div class="company-pluses-section__li__icon">
                <svg><use xlink:href="/sprite.svg#mortarboard"></use></svg>
            </div>
            <div class="company-pluses-section__li__main">
                <span>Профессионализм</span>
                <p>Над вашими заказами работают квалицифированные сотрудники</p>
            </div>
        </li>
        <li class="company-pluses-section__li">
            <div class="company-pluses-section__li__icon">
                <svg><use xlink:href="/sprite.svg#delivery-box"></use></svg>
            </div>
            <div class="company-pluses-section__li__main">
                <span>Собственный склад</span>
                <p>На складе находятся все автомобильные аккумуляторы, представленные в каталоге.</p>
            </div>
        </li>
        <li class="company-pluses-section__li">
            <div class="company-pluses-section__li__icon">
                <svg><use xlink:href="/sprite.svg#security"></use></svg>
            </div>
            <div class="company-pluses-section__li__main">
                <span>Гарантия</span>
                <p>На все аккумуляторы гарантия от производителя от 1 года до 4 лет</p>
            </div>
        </li>
    </ul>
{% endblock %}