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

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

    <section class="cart-head-section">
        <h1 class="cart-head-section__title">Корзина</h1>
        <button class="cart-head-section__clear-btn">
            <svg><use xlink:href="/sprite.svg#delete"></use></svg>
            <span>Очистить корзину</span>
        </button>
    </section>

    <section class="cart-grid-section">
        <div class="cart-grid-section__list">
            {% for item in range(1, 3) %}
                <div class="cart-grid-section__item">
                    <div class="cart-grid-section__item-cover">
                        <img src="/images/products/p-1.png" alt="" srcset="/images/products/p-1@2x.png 2x">
                    </div>
                    <span class="cart-grid-section__item-name">Delkor 75D23L 65Ач 550А, ОП, стандартные клеммы</span>
                    <div class="cart-grid-section__item-inf">
                        Ёмкость 75Ач, полярность обратная, 250х175х225, пусковой ток 710
                    </div>
                    <div class="cart-grid-section__item-price">
                        <span class="cart-grid-section__item-price-current">6 400 ₽</span>
                        <span class="cart-grid-section__item-price-discount">6 400 ₽</span>
                    </div>
                    <div class="cart-grid-section__item-swap">
                        <label class="input-tumbler">
                            <input type="checkbox" x-model="discount">
                            <div class="input-tumbler__box"></div>
                            <p class="input-tumbler__text">Обмен старого</p>
                        </label>
                    </div>
                    <div class="cart-grid-section__item-control" x-data="{ count: 1 }">
                        <div class="cart-grid-section__item-control-count">
                            <button class="cart-grid-section__item-control-count__btn" @click.prevent="count > 1 ? --count : null">
                                <svg><use xlink:href="/sprite.svg#minus"></use></svg>
                            </button>
                            <span class="cart-grid-section__item-control-count__value" x-text="count">1</span>
                            <button class="cart-grid-section__item-control-count__btn" @click.prevent="++count">
                                <svg><use xlink:href="/sprite.svg#plus"></use></svg>
                            </button>
                        </div>
                        <button class="cart-grid-section__item-control-delete-btn">
                            <svg><use xlink:href="/sprite.svg#delete"></use></svg>
                        </button>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div
            class="cart-grid-section__block"
            x-data="{
                promoApplied: false,
                promoApplyAttempted: false,
                promoValue: '',
                promoError: '',
                applyPromo() {
                    this.promoApplyAttempted = true
                    const value = this.promoValue.trim()
                    if (!value) {
                        this.promoError = 'Поле обязательно для заполнения'
                    } else if (!/^[A-Za-zА-Яа-я0-9_-]{4,20}$/.test(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="cart-grid-section__block__sum">
                <span>3 товара в корзине</span>
                <b>6 400 ₽</b>
            </div>

            <ul class="cart-grid-section__block__total">
                <li><span>Стоимость товаров</span><span>6 900 ₽</span></li>
                <li><span>Скидка</span><span>500 ₽</span></li>
                <li x-show="promoApplied"><span>Промокод</span><span>500 ₽</span></li>
            </ul>

            <div class="cart-grid-section__block__input" :class="{ applied: promoApplied, error: promoApplyAttempted && !!promoError }">
                <input type="text" placeholder="Промокод" :disabled="promoApplied" x-model.trim="promoValue" @input="promoApplyAttempted = false">
                <button class="cart-grid-section__block__input-apply-btn" @click.prevent="applyPromo" x-show="!!promoValue.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="promoApplyAttempted && !!promoError" x-text="promoError">Промокод недействителен</div>
            </div>

            <button class="cart-grid-section__block__submit-btn">К оформлению</button>
        </div>
    </section>

    {% include "components/products-slider-section.twig" with { 
        productsSliderTitle: "С этим товаром покупают",
        productsSliderMoreHide: true
    } %}
{% endblock %}