{% extends "_layouts/base.html" %}
{% load static l10n %}

{% block title %}Корзина{% endblock %}

{% block add_css %}
    <link rel="stylesheet" href="{% static "css/cart.css" %}">
{% endblock %}

{% block content %}
    {% include "_fragments/header.html" %}

    {% include '_fragments/breadcrumbs.html' with url_1='/' text_1='Главная' url_2='/orders/cart/' text_2='Корзина' %}

    <main class="container cart-page">
        {% if cart_items %}
            <div class="checkout-layout">
                <section class="cart-products" aria-label="Товары в корзине">
                    <h1 class="cart-section-title">ТОВАРЫ</h1>

                    <div class="cart-items">
                        {% for cart_item in cart_items %}
                            {% with item=cart_item.item %}
                                <article class="cart-item" data-auth-cart-item data-current-quantity="{{ cart_item.quantity }}">
                                    <a class="cart-item__media" href="{% url 'detail' item.category.slug item.slug %}">
                                        {% with primary_image=item.primary_image %}
                                            {% if primary_image %}
                                                <img src="{{ primary_image.image.url }}" alt="{{ primary_image.alt|default:item.name }}">
                                            {% else %}
                                                <span class="cart-item__placeholder">Нет фото</span>
                                            {% endif %}
                                        {% endwith %}
                                    </a>

                                    <div class="cart-item__info">
                                        <a class="cart-item__title" href="{% url 'detail' item.category.slug item.slug %}">{{ item.name }}</a>
                                        {% if cart_item.selected_color %}
                                            <span class="cart-item__color">({{ cart_item.selected_color.name }})</span>
                                        {% endif %}
                                        <p class="cart-item__price">{{ item.price }} руб.</p>

                                        <div class="cart-item__controls">
                                            <div class="cart-quantity" aria-label="Количество товара">
                                                <button
                                                    class="cart-quantity__button"
                                                    type="button"
                                                    data-cart-decrement
                                                    data-remove-form-id="cart-remove-{{ cart_item.id }}"
                                                    data-update-form-id="cart-decrement-{{ cart_item.id }}"
                                                    data-current-quantity="{{ cart_item.quantity }}"
                                                    aria-label="Уменьшить количество"
                                                >
                                                    -
                                                </button>
                                                <span class="cart-quantity__value">{{ cart_item.quantity }}</span>
                                                <form id="cart-increment-{{ cart_item.id }}" method="post" action="{% url 'orders:update_quantity' %}">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="item_id" value="{{ item.id }}">
                                                    <input type="hidden" name="quantity" value="{{ cart_item.quantity|add:1 }}">
                                                    <input type="hidden" name="next" value="{% url 'orders:cart' %}">
                                                    <button class="cart-quantity__button" type="submit" aria-label="Увеличить количество">+</button>
                                                </form>
                                                <form id="cart-decrement-{{ cart_item.id }}" method="post" action="{% url 'orders:update_quantity' %}">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="item_id" value="{{ item.id }}">
                                                    <input type="hidden" name="quantity" value="{{ cart_item.quantity|add:-1 }}">
                                                    <input type="hidden" name="next" value="{% url 'orders:cart' %}">
                                                </form>
                                            </div>

                                            <form id="cart-remove-{{ cart_item.id }}" method="post" action="{% url 'orders:remove' %}">
                                                {% csrf_token %}
                                                <input type="hidden" name="item_id" value="{{ item.id }}">
                                                <input type="hidden" name="next" value="{% url 'orders:cart' %}">
                                                <button class="cart-item__remove" type="submit" aria-label="Удалить товар">Удалить</button>
                                            </form>
                                        </div>
                                    </div>
                                </article>
                            {% endwith %}
                        {% endfor %}
                    </div>

                    <div class="cart-products-summary">
                        <p><span>Товары, {{ total_quantity }} шт.</span><strong>{{ products_total }}</strong></p>
                        <p><span>Скидка</span><strong>{{ discount_total }}</strong></p>
                        <p><span>Итого к оплате</span><strong data-checkout-total-text>{{ total_amount }}</strong></p>
                    </div>
                </section>

                <section class="checkout-panel" aria-label="Оформление заказа">
                    <h2 class="cart-section-title">Оформление заказа</h2>

                    <form
                        class="checkout-form"
                        method="post"
                        action="{% url 'orders:checkout' %}"
                        data-checkout-form
                        data-products-total="{{ products_total_value|unlocalize }}"
                    >
                        {% csrf_token %}

                        {% if checkout_form.non_field_errors %}
                            <div class="checkout-errors">
                                {% for error in checkout_form.non_field_errors %}
                                    <p>{{ error }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}

                        <fieldset class="checkout-fieldset">
                            <legend>СПОСОБ ДОСТАВКИ</legend>
                            <div class="checkout-options checkout-options--two">
                                <label class="checkout-radio">
                                    <input type="radio" name="delivery_method" value="courier" {% if checkout_form.delivery_method.value == "courier" or not checkout_form.is_bound %}checked{% endif %}>
                                    <span>Курьерская доставка</span>
                                </label>
                                <label class="checkout-radio">
                                    <input type="radio" name="delivery_method" value="pickup" {% if checkout_form.delivery_method.value == "pickup" %}checked{% endif %}>
                                    <span>Самовывоз</span>
                                </label>
                            </div>
                            {% for error in checkout_form.delivery_method.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
                        </fieldset>

                        <fieldset class="checkout-fieldset">
                            <legend>АДРЕС ДОСТАВКИ</legend>
                            <div class="checkout-grid">
                                <label class="checkout-input checkout-input--short">
                                    <span>Регион*</span>
                                    <input type="text" name="region" value="{{ checkout_form.region.value|default:'' }}" placeholder="Регион*" autocomplete="address-level1">
                                </label>
                                <label class="checkout-input checkout-input--wide">
                                    <span>Улица, дом, квартира*</span>
                                    <input type="text" name="address" value="{{ checkout_form.address.value|default:'' }}" placeholder="Улица, дом, квартира*" autocomplete="street-address">
                                </label>
                            </div>
                            {% for error in checkout_form.region.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
                            {% for error in checkout_form.address.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
                        </fieldset>

                        <fieldset class="checkout-fieldset">
                            <legend>СПОСОБ ОПЛАТЫ</legend>
                            <div class="checkout-options checkout-options--three">
                                <label class="checkout-radio">
                                    <input type="radio" name="payment_method" value="card" {% if checkout_form.payment_method.value == "card" or not checkout_form.is_bound %}checked{% endif %}>
                                    <span>Банковская карта</span>
                                </label>
                                <label class="checkout-radio">
                                    <input type="radio" name="payment_method" value="credit" {% if checkout_form.payment_method.value == "credit" %}checked{% endif %}>
                                    <span>Кредит</span>
                                </label>
                                <label class="checkout-radio">
                                    <input type="radio" name="payment_method" value="installment" {% if checkout_form.payment_method.value == "installment" %}checked{% endif %}>
                                    <span>Рассрочка</span>
                                </label>
                            </div>
                            {% for error in checkout_form.payment_method.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
                        </fieldset>

                        <fieldset class="checkout-fieldset">
                            <legend>КОНТАКТЫ</legend>
                            <div class="checkout-grid checkout-grid--contacts">
                                <label class="checkout-input checkout-input--wide">
                                    <span>ФИО*</span>
                                    <input type="text" name="customer_name" value="{{ checkout_form.customer_name.value|default:'' }}" placeholder="ФИО*" autocomplete="name">
                                </label>
                                <label class="checkout-input">
                                    <span>Телефон*</span>
                                    <input type="tel" name="phone" value="{{ checkout_form.phone.value|default:'' }}" placeholder="Телефон*" autocomplete="tel">
                                </label>
                                <label class="checkout-input">
                                    <span>E-mail*</span>
                                    <input type="email" name="email" value="{{ checkout_form.email.value|default:'' }}" placeholder="E-mail*" autocomplete="email">
                                </label>
                            </div>
                            {% for error in checkout_form.customer_name.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
                            {% for error in checkout_form.phone.errors %}<p class="field-error">{{ error }}</p>{% endfor %}
                            {% for error in checkout_form.email.errors %}<p class="field-error">{{ error }}</p>{% endfor %}

                            <label class="checkout-checkbox">
                                <input type="checkbox" name="recipient_matches_customer" value="on" {% if checkout_form.recipient_matches_customer.value or not checkout_form.is_bound %}checked{% endif %}>
                                <span>ФИО получателя совпадает с ФИО покупателя</span>
                            </label>
                        </fieldset>

                        <div class="promo-row">
                            <label class="checkout-input">
                                <span>Промокод</span>
                                <input type="text" name="promo_code" value="{{ checkout_form.promo_code.value|default:'' }}" placeholder="Промокод">
                            </label>
                            <button type="button">ПРИМЕНИТЬ</button>
                        </div>

                        <div class="checkout-summary">
                            <p><strong>Товары, {{ total_quantity }} шт.</strong><span>{{ products_total }}</span></p>
                            <p><strong>Скидка</strong><span>{{ discount_total }}</span></p>
                            <p><strong>Итого к оплате</strong><span data-checkout-total-text>{{ total_amount }}</span></p>
                        </div>

                        <button class="checkout-submit" type="submit">ОФОРМИТЬ ЗАКАЗ</button>

                        <label class="checkout-checkbox checkout-checkbox--terms">
                            <input type="checkbox" name="terms_accepted" value="on" {% if checkout_form.terms_accepted.value %}checked{% endif %}>
                            <span>Согласен с условиями продажи, оплаты и возврата</span>
                        </label>
                        {% for error in checkout_form.terms_accepted.errors %}<p class="field-error">{{ error }}</p>{% endfor %}

                        <div class="checkout-services">
                            <h3>Услуги</h3>
                            <p><span>Доставка</span><strong data-delivery-total-text>{{ delivery_total }}</strong></p>
                            <p><span>Подъём на этаж</span><strong data-floor-lift-total-text>{{ floor_lift_total }}</strong></p>
                        </div>
                    </form>
                </section>
            </div>
        {% else %}
            <section class="cart-empty">
                <h1>Корзина пуста</h1>
                <p>Добавьте товары из каталога, чтобы оформить заказ.</p>
                <a href="/catalog/">Перейти в каталог</a>
            </section>
        {% endif %}
    </main>

    {% include "_fragments/footer.html" %}
{% endblock %}