{% extends 'base.html' %}
{% load static %}
{% load l10n %}

{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<meta name="csrf-token" content="{{ csrf_token }}">
<link rel="stylesheet" href="{% static 'orders/css/delivery_datetime.css' %}">
<style>
    /* Скрываем DELETE checkbox */
    input[name$="-DELETE"] {
        display: none;
    }

    /* Визуально помечаем удаленные формы */
    .order-item-form.deleted {
        opacity: 0.5;
        pointer-events: none;
    }

    /* Стили для поиска клиента */
    .customer-option {
        padding: 5px 0;
    }

    .customer-create-option {
        color: #28a745;
        font-weight: 500;
        padding: 8px 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .customer-create-option:hover {
        background-color: #f0f8f5;
        color: #1e7e34;
    }

    .customer-create-option i {
        margin-right: 8px;
        font-size: 1.1em;
    }

    /* Стили для системного клиента */
    .system-customer-option {
        background-color: #fff3cd;
        padding: 8px 12px;
        border-radius: 4px;
        border-left: 3px solid #ffc107;
    }

    .system-customer-option:hover {
        background-color: #ffe69c;
    }

    .system-customer-option i {
        margin-right: 5px;
    }

    /* Select2 dropdown styling */
    .select2-results__option.customer-option-item {
        padding: 8px 8px;
        border-bottom: 1px solid #f1f1f1;
    }

    .select2-results__option.customer-option-item:last-child {
        border-bottom: none;
    }

    /* Компактные стили для результатов поиска клиентов */
    .customer-option {
        padding: 4px 0 !important;
        font-size: 13px;
        line-height: 1.3;
    }

    .customer-option small {
        font-size: 11px;
        line-height: 1.2;
    }

    .customer-create-option {
        padding: 6px 10px !important;
        font-size: 13px;
    }

    .system-customer-option {
        padding: 6px 10px !important;
        font-size: 13px;
        line-height: 1.3;
    }

    .system-customer-option small {
        font-size: 11px;
    }

    /* Input group с Select2 и кнопкой системного клиента */
    .customer-select-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
    }

    .customer-select-wrapper .select2-container {
        flex: 1;
        min-width: 0;
    }

    .customer-select-wrapper .btn {
        flex-shrink: 0;
        border-radius: 0 4px 4px 0;
    }

    /* ИСПРАВЛЕНИЕ: Убедимся что Select2 dropdown видим и поверх всех элементов */
    .select2-container--open {
        z-index: 9999 !important;
    }

    .select2-dropdown {
        z-index: 9999 !important;
        background-color: white;
        border: 1px solid #d3d3d3;
        border-radius: 4px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .select2-container--bootstrap-5 .select2-dropdown {
        border-color: #dee2e6;
    }

    /* Убедимся что поле ввода видимо */
    .select2-search__field {
        width: 100% !important;
        padding: 6px 8px !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 4px !important;
        font-size: 14px !important;
    }

    /* Результаты поиска */
    .select2-results {
        max-height: 400px;
        overflow-y: auto;
        font-size: 13px;
    }

    .select2-results__option {
        padding: 6px 8px;
        color: #212529;
    }

    .select2-results__option--highlighted {
        background-color: #0d6efd;
        color: white;
    }
    
    /* Пульсирующий бейдж для неоплаченных заказов */
    .unpaid-badge {
        animation: pulse-glow 2s ease-in-out infinite;
    }
    
    @keyframes pulse-glow {
        0%, 100% {
            box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
        }
        50% {
            box-shadow: 0 0 20px rgba(220, 53, 69, 0.8), 0 0 30px rgba(220, 53, 69, 0.4);
        }
    }

    /* Стили для текстовой области резюме заказа */
    textarea[name="summary"] {
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    textarea[name="summary"]:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid pt-5">
    <div class="row mb-4 align-items-center">
        <div class="col">
            <h1>{{ title }}</h1>
        </div>
        <div class="col-auto">
            <a href="{% url 'orders:order-list' %}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Назад к списку
            </a>
        </div>
    </div>

    <!-- Две колонки -->
    <div class="row">
        <!-- Левая колонка: Заказ -->
        <div class="col-lg-7">
            <form method="post" id="order-form">
                {% csrf_token %}
                <!-- Основная информация -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Основная информация</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-9">
                                <div class="mb-3">
                                    <label for="{{ form.customer.id_for_label }}" class="form-label">
                                        Клиент <span class="text-danger">*</span>
                                    </label>
                                    <div class="customer-select-wrapper">
                                        {% if preselected_customer %}
                                            <select name="customer"
                                                    class="form-select customer-select2-auto"
                                                    id="id_customer"
                                                    data-ajax-url="{% url 'customers:api-search-customers' %}"
                                                    data-create-url="{% url 'customers:api-create-customer' %}"
                                                    data-modal-id="createCustomerModal">
                                                <option value="{{ preselected_customer.pk }}" selected
                                                        data-name="{{ preselected_customer.name }}"
                                                        data-phone="{{ preselected_customer.phone|default:'' }}"
                                                        data-email="{{ preselected_customer.email|default:'' }}">
                                                    {{ preselected_customer.name }}{% if preselected_customer.phone %} ({{ preselected_customer.phone }}){% endif %}
                                                </option>
                                            </select>
                                        {% else %}
                                            <select name="customer"
                                                    class="form-select customer-select2-auto"
                                                    id="id_customer"
                                                    data-ajax-url="{% url 'customers:api-search-customers' %}"
                                                    data-create-url="{% url 'customers:api-create-customer' %}"
                                                    data-modal-id="createCustomerModal">
                                                {% if form.customer.value %}
                                                    <option value="{{ form.customer.value }}" selected
                                                            data-name="{{ form.instance.customer.name }}"
                                                            data-phone="{{ form.instance.customer.phone|default:'' }}"
                                                            data-email="{{ form.instance.customer.email|default:'' }}">
                                                        {{ form.instance.customer.name }}{% if form.instance.customer.phone %} ({{ form.instance.customer.phone }}){% endif %}
                                                    </option>
                                                {% endif %}
                                            </select>
                                        {% endif %}
                                        <button type="button" class="btn btn-outline-warning" id="select-system-customer-btn"
                                                title="Выбрать анонимного покупателя" data-system-url="{% url 'customers:api-get-system-customer' %}">
                                            <i class="bi bi-incognito"></i> Аноним
                                        </button>
                                    </div>
                                    {% if form.customer.errors %}
                                    <div class="text-danger">{{ form.customer.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="{{ form.status.id_for_label }}" class="form-label">
                                        Статус <span class="text-danger">*</span>
                                    </label>
                                    {{ form.status }}
                                    {% if form.status.errors %}
                                    <div class="text-danger">{{ form.status.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Резюме заказа -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Резюме заказа</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Краткое описание заказа</label>
                            <!-- Скрываем оригинальную textarea -->
                            <style>
                                textarea[name="summary"] {
                                    display: none;
                                }
                                #quill-editor-summary {
                                    min-height: 120px;
                                    background-color: #fff;
                                }
                                #quill-editor-summary .ql-toolbar {
                                    border-radius: 4px 4px 0 0;
                                }
                                #quill-editor-summary .ql-container {
                                    border-radius: 0 0 4px 4px;
                                    min-height: 80px;
                                    font-size: 1rem;
                                }
                                #quill-editor-summary .ql-picker.ql-color .ql-picker-label {
                                    width: 20px;
                                    height: 20px;
                                    border-radius: 3px;
                                }
                            </style>
                            <!-- Контейнер для Quill редактора -->
                            <div id="quill-editor-summary"></div>
                            {{ form.summary }}
                            <div class="form-text">Можно использовать <strong>жирный</strong>, <em>курсив</em>, <span style="color: #e31e23;">цвет</span>, <span style="font-size: 18px;">размер</span> и списки.</div>
                        </div>
                    </div>
                </div>

                <!-- Товары в заказе -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Товары в заказе</h5>
                    </div>
                    <div class="card-body">
                {{ formset.management_form }}
                <div id="order-items-container">
                    {% for item_form in formset %}
                    <div class="order-item-form border rounded p-3 mb-3" data-form-index="{{ forloop.counter0 }}">
                        {{ item_form.id }}
                        {{ item_form.product }}  <!-- Hidden field -->
                        {{ item_form.product_kit }}  <!-- Hidden field -->
                        {{ item_form.sales_unit }}  <!-- Hidden field -->
                        {{ item_form.is_custom_price }}  <!-- Hidden field -->

                        <div class="row align-items-end">
                            <div class="col-md-5">
                                <div class="mb-2">
                                    <label class="form-label">Товар или комплект</label>
                                    <select class="form-select select2-order-item"
                                            data-form-index="{{ forloop.counter0 }}"
                                            data-ajax-url="{% url 'products:api-search-products-variants' %}">
                                        <option value=""></option>
                                        {% if item_form.instance.product %}
                                            <option value="product_{{ item_form.instance.product.id }}" selected data-type="product" data-price="{{ item_form.instance.product.actual_price }}">
                                                {{ item_form.instance.product.name }}{% if item_form.instance.product.sku %} ({{ item_form.instance.product.sku }}){% endif %}
                                            </option>
                                        {% elif item_form.instance.product_kit %}
                                            <option value="kit_{{ item_form.instance.product_kit.id }}" selected data-type="kit" data-price="{{ item_form.instance.product_kit.actual_price }}">
                                                {{ item_form.instance.product_kit.name }}{% if item_form.instance.product_kit.sku %} ({{ item_form.instance.product_kit.sku }}){% endif %}
                                            </option>
                                        {% endif %}
                                    </select>
                                </div>

                                <!-- Контейнер для единиц продажи (управляется JS) -->
                                <div class="sales-unit-container mb-2" style="display: none;"></div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-2">
                                    <label class="form-label">Количество</label>
                                    {{ item_form.quantity }}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-2">
                                    <label class="form-label">Цена</label>
                                    <div class="position-relative">
                                        {% if item_form.instance.product %}
                                            <input type="text" name="{{ item_form.prefix }}-price" step="0.01" min="0" class="form-control" id="{{ item_form.price.id_for_label }}" value="{% if item_form.instance.price and item_form.instance.price != 0 %}{{ item_form.instance.price }}{% else %}{{ item_form.instance.product.actual_price }}{% endif %}" data-original-price="{{ item_form.instance.product.actual_price }}">
                                        {% elif item_form.instance.product_kit %}
                                            <input type="text" name="{{ item_form.prefix }}-price" step="0.01" min="0" class="form-control" id="{{ item_form.price.id_for_label }}" value="{% if item_form.instance.price and item_form.instance.price != 0 %}{{ item_form.instance.price }}{% else %}{{ item_form.instance.product_kit.actual_price }}{% endif %}" data-original-price="{{ item_form.instance.product_kit.actual_price }}">
                                        {% else %}
                                            <input type="text" name="{{ item_form.prefix }}-price" step="0.01" min="0" class="form-control" id="{{ item_form.price.id_for_label }}" value="{{ item_form.instance.price|default:'' }}" data-original-price="0">
                                        {% endif %}
                                        <span class="custom-price-badge badge bg-warning position-absolute top-0 end-0 mt-1 me-1" style="display: none;">
                                            Изменена
                                        </span>
                                        <small class="text-muted original-price-info position-absolute" style="display: none; top: calc(100% + 2px); left: 0; white-space: nowrap;">
                                            Оригинальная: <span class="original-price-value"></span>&nbsp;руб.
                                        </small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 text-end">
                                <div class="mb-2">
                                    <label class="form-label d-block">&nbsp;</label>
                                    {% if formset.can_delete %}
                                    {{ item_form.DELETE }}
                                    {% endif %}
                                    <button type="button" class="btn btn-danger btn-sm remove-item-btn">
                                        <i class="bi bi-trash"></i> Удалить
                                    </button>
                                </div>
                            </div>
                        </div>
                        {% if item_form.non_field_errors %}
                        <div class="alert alert-danger mt-2">
                            <strong>Ошибка валидации:</strong>
                            {{ item_form.non_field_errors }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>

                <!-- Итоговая сумма товаров -->
                <div id="order-items-total-section" class="border-top pt-3 mt-3 mb-3">
                    <div class="row align-items-center">
                        <div class="col">
                            <p class="mb-0 text-muted"><i class="bi bi-calculator"></i> Сумма товаров:</p>
                        </div>
                        <div class="col-auto">
                            <h5 class="mb-0 text-primary">
                                <span id="order-items-total-value">0.00</span> руб.
                            </h5>
                        </div>
                    </div>
                </div>

                <!-- Скрытый шаблон для новых форм -->
                <template id="empty-form-template">
                    <div class="order-item-form border rounded p-3 mb-3" data-form-index="__prefix__">
                        <input type="hidden" name="items-__prefix__-id" id="id_items-__prefix__-id">
                        <input type="hidden" name="items-__prefix__-product" id="id_items-__prefix__-product">
                        <input type="hidden" name="items-__prefix__-product_kit" id="id_items-__prefix__-product_kit">
                        <input type="hidden" name="items-__prefix__-sales_unit" id="id_items-__prefix__-sales_unit">
                        <input type="hidden" name="items-__prefix__-is_custom_price" id="id_items-__prefix__-is_custom_price" value="false">

                        <div class="row align-items-end">
                            <div class="col-md-5">
                                <div class="mb-2">
                                    <label class="form-label">Товар или комплект</label>
                                    <select class="form-select select2-order-item"
                                            data-form-index="__prefix__"
                                            data-ajax-url="{% url 'products:api-search-products-variants' %}"
                                            id="id_items-__prefix__-select">
                                        <option value=""></option>
                                    </select>
                                </div>

                                <!-- Контейнер для единиц продажи (управляется JS) -->
                                <div class="sales-unit-container mb-2" style="display: none;"></div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-2">
                                    <label class="form-label">Количество</label>
                                    <input type="number" name="items-__prefix__-quantity" step="1" min="1" class="form-control" id="id_items-__prefix__-quantity">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-2">
                                    <label class="form-label">Цена</label>
                                    <div class="position-relative">
                                        <input type="text" name="items-__prefix__-price" step="0.01" min="0" class="form-control" id="id_items-__prefix__-price">
                                        <span class="custom-price-badge badge bg-warning position-absolute top-0 end-0 mt-1 me-1" style="display: none;">
                                            Изменена
                                        </span>
                                        <small class="text-muted original-price-info position-absolute" style="display: none; top: calc(100% + 2px); left: 0; white-space: nowrap;">
                                            Оригинальная: <span class="original-price-value"></span>&nbsp;руб.
                                        </small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 text-end">
                                <div class="mb-2">
                                    <label class="form-label d-block">&nbsp;</label>
                                    <input type="checkbox" name="items-__prefix__-DELETE" id="id_items-__prefix__-DELETE">
                                    <button type="button" class="btn btn-danger btn-sm remove-item-btn">
                                        <i class="bi bi-trash"></i> Удалить
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                    <button type="button" class="btn btn-success" id="add-item-btn">
                        <i class="bi bi-plus-circle"></i> Добавить товар
                    </button>
                    <button type="button" class="btn btn-primary ms-2" id="create-temp-kit-btn" data-bs-toggle="modal" data-bs-target="#tempKitModal">
                        <i class="bi bi-flower1"></i> Создать и добавить комплект
                    </button>
                </div>
            </div>

                <!-- Доставка -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-truck"></i> Доставка</h5>
                    </div>
                    <div class="card-body">
                        <!-- Тип доставки -->
                        <div class="mb-4">
                            <label class="form-label d-block mb-2 fw-bold">Тип доставки</label>
                            <div class="btn-group w-100" role="group">
                                {% for value, label in form.delivery_type.field.choices %}
                                    <input type="radio" class="btn-check" name="{{ form.delivery_type.name }}" id="id_delivery_type_{{ forloop.counter0 }}" value="{{ value }}" {% if form.delivery_type.value == value %}checked{% endif %}>
                                    <label class="btn btn-outline-primary" for="id_delivery_type_{{ forloop.counter0 }}">
                                        {% if value == 'courier' %}
                                            <i class="bi bi-truck"></i> Доставка курьером
                                        {% elif value == 'pickup' %}
                                            <i class="bi bi-shop"></i> Самовывоз
                                        {% else %}
                                            <i class="bi bi-truck"></i> {{ label }}
                                        {% endif %}
                                    </label>
                                {% endfor %}
                            </div>
                            {% if form.delivery_type.errors %}
                            <div class="text-danger mt-2">{{ form.delivery_type.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- Дата и время доставки -->
                        <div class="mb-4">
                            <label class="form-label d-block mb-2 fw-bold">Дата и время доставки</label>
                            <div class="delivery-datetime-wrapper">
                                <div class="row g-3 mb-3">
                                    <div class="col-md-4">
                                        <label for="{{ form.delivery_date.id_for_label }}" class="form-label">
                                            Дата <span class="text-danger">*</span>
                                        </label>
                                        {{ form.delivery_date }}
                                        {% if form.delivery_date.errors %}
                                        <div class="text-danger">{{ form.delivery_date.errors }}</div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-4">
                                        <label for="{{ form.time_from.id_for_label }}" class="form-label">
                                            Время от
                                        </label>
                                        {{ form.time_from }}
                                        {% if form.time_from.errors %}
                                        <div class="text-danger">{{ form.time_from.errors }}</div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-4">
                                        <label for="{{ form.time_to.id_for_label }}" class="form-label">
                                            Время до
                                        </label>
                                        {{ form.time_to }}
                                        {% if form.time_to.errors %}
                                        <div class="text-danger">{{ form.time_to.errors }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <!-- Кнопки быстрого выбора -->
                                <div id="delivery-datetime-quick-buttons"></div>
                            </div>
                        </div>

                        <!-- Адрес доставки (только для курьера) -->
                        <div id="delivery-address-fields" class="mb-4" style="display: none;">
                            <label class="form-label d-block mb-2 fw-bold">Адрес доставки</label>
                            
                            <!-- Режим выбора адреса -->
                            <div class="mb-3">
                                <label class="form-label d-block mb-2">Способ указания адреса</label>
                                {% for choice in form.address_mode %}
                                <div class="form-check form-check-inline">
                                    {{ choice.tag }}
                                    <label class="form-check-label" for="{{ choice.id_for_label }}">
                                        {{ choice.choice_label }}
                                    </label>
                                </div>
                                {% endfor %}
                                {% if form.address_mode.errors %}
                                <div class="text-danger">{{ form.address_mode.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Выбор адреса из истории -->
                            <div class="mb-3" id="address-history-field" style="display: none;">
                                <label for="{{ form.address_from_history.id_for_label }}" class="form-label">
                                    Адрес из истории
                                </label>
                                {{ form.address_from_history }}
                                {% if form.address_from_history.errors %}
                                <div class="text-danger">{{ form.address_from_history.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Ввод нового адреса -->
                            <div id="address-new-fields" style="display: none;">
                                <!-- Основные поля -->
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label for="{{ form.address_street.id_for_label }}" class="form-label">
                                            Улица
                                        </label>
                                        {{ form.address_street }}
                                        {% if form.address_street.errors %}
                                        <div class="text-danger">{{ form.address_street.errors }}</div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-3">
                                        <label for="{{ form.address_building_number.id_for_label }}" class="form-label">
                                            Дом
                                        </label>
                                        {{ form.address_building_number }}
                                        {% if form.address_building_number.errors %}
                                        <div class="text-danger">{{ form.address_building_number.errors }}</div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-3">
                                        <label for="{{ form.address_apartment_number.id_for_label }}" class="form-label">
                                            Квартира/офис
                                        </label>
                                        {{ form.address_apartment_number }}
                                        {% if form.address_apartment_number.errors %}
                                        <div class="text-danger">{{ form.address_apartment_number.errors }}</div>
                                        {% endif %}
                                    </div>
                                </div>

                                <!-- Дополнительные поля (раскрывающийся блок) -->
                                <div class="mb-3">
                                    <button type="button" class="btn btn-link p-0 text-decoration-none" data-bs-toggle="collapse" data-bs-target="#address-extra-fields" aria-expanded="false">
                                        <i class="bi bi-chevron-down"></i> Дополнительно
                                    </button>
                                    <div class="collapse mt-2" id="address-extra-fields">
                                        <div class="row g-3">
                                            <div class="col-md-4">
                                                <label for="{{ form.address_entrance.id_for_label }}" class="form-label">
                                                    {{ form.address_entrance.label }}
                                                </label>
                                                {{ form.address_entrance }}
                                                {% if form.address_entrance.errors %}
                                                <div class="text-danger">{{ form.address_entrance.errors }}</div>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-4">
                                                <label for="{{ form.address_floor.id_for_label }}" class="form-label">
                                                    {{ form.address_floor.label }}
                                                </label>
                                                {{ form.address_floor }}
                                                {% if form.address_floor.errors %}
                                                <div class="text-danger">{{ form.address_floor.errors }}</div>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-4">
                                                <label for="{{ form.address_intercom_code.id_for_label }}" class="form-label">
                                                    {{ form.address_intercom_code.label }}
                                                </label>
                                                {{ form.address_intercom_code }}
                                                {% if form.address_intercom_code.errors %}
                                                <div class="text-danger">{{ form.address_intercom_code.errors }}</div>
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-12">
                                                <label for="{{ form.address_delivery_instructions.id_for_label }}" class="form-label">
                                                    {{ form.address_delivery_instructions.label }}
                                                </label>
                                                {{ form.address_delivery_instructions }}
                                                {% if form.address_delivery_instructions.errors %}
                                                <div class="text-danger">{{ form.address_delivery_instructions.errors }}</div>
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-12">
                                                <div class="form-check form-switch" style="padding-left: 3.5em;">
                                                    <input class="form-check-input" type="checkbox" role="switch"
                                                           id="{{ form.address_confirm_with_recipient.id_for_label }}"
                                                           name="{{ form.address_confirm_with_recipient.name }}"
                                                           {% if form.address_confirm_with_recipient.value %}checked{% endif %}
                                                           style="width: 3em; height: 1.5em; cursor: pointer;">
                                                    <label class="form-check-label" for="{{ form.address_confirm_with_recipient.id_for_label }}"
                                                           style="font-size: 1.1em; font-weight: 500; cursor: pointer; padding-left: 0.5em;">
                                                        <i class="bi bi-telephone-fill text-primary"></i>
                                                        {{ form.address_confirm_with_recipient.label }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Склад самовывоза (только для самовывоза) -->
                        <div id="pickup-fields" class="mb-4" style="display: none;">
                            <label class="form-label d-block mb-2 fw-bold">Склад самовывоза</label>
                            <div class="row">
                                <div class="col-md-6">
                                    {{ form.pickup_warehouse }}
                                    {% if form.pickup_warehouse.errors %}
                                    <div class="text-danger">{{ form.pickup_warehouse.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Стоимость доставки -->
                        <div class="mb-0">
                            <label for="{{ form.delivery_cost.id_for_label }}" class="form-label fw-bold">
                                {{ form.delivery_cost.label }}
                            </label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-group">
                                        {{ form.delivery_cost }}
                                        <span class="input-group-text">руб.</span>
                                    </div>
                                    {% if form.delivery_cost.errors %}
                                    <div class="text-danger">{{ form.delivery_cost.errors }}</div>
                                    {% endif %}
                                    <small class="text-muted d-block mt-1">
                                        <i class="bi bi-info-circle"></i>
                                        Оставьте пустым для автоматического расчета стоимости доставки
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Получатель -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-person"></i> Получатель</h5>
                    </div>
                    <div class="card-body">
                        <!-- Чекбокс "Другой получатель" -->
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input"
                                       id="{{ form.other_recipient.id_for_label }}"
                                       name="{{ form.other_recipient.html_name }}"
                                       {% if form.other_recipient.value or form.other_recipient.field.initial %}checked{% endif %}>
                                <label class="form-check-label" for="{{ form.other_recipient.id_for_label }}">
                                    {{ form.other_recipient.label }}
                                </label>
                                {% if form.other_recipient.help_text %}
                                <small class="form-text text-muted d-block">{{ form.other_recipient.help_text }}</small>
                                {% endif %}
                            </div>
                            {% if form.other_recipient.errors %}
                            <div class="text-danger">{{ form.other_recipient.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- Блок для другого получателя (показывается при включенном чекбоксе) -->
                        <div id="other-recipient-block" style="display: none;">
                            <!-- Режим выбора получателя (история или новый) -->
                            <div class="mb-3">
                                <label class="form-label d-block mb-2">{{ form.recipient_source.label }}</label>
                                {% for choice in form.recipient_source %}
                                <div class="form-check">
                                    {{ choice.tag }}
                                    <label class="form-check-label" for="{{ choice.id_for_label }}">
                                        {{ choice.choice_label }}
                                    </label>
                                </div>
                                {% endfor %}
                                {% if form.recipient_source.errors %}
                                <div class="text-danger">{{ form.recipient_source.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Выбор получателя из истории -->
                            <div class="mb-3" id="recipient-history-field" style="display: none;">
                                <label for="{{ form.recipient_from_history.id_for_label }}" class="form-label">
                                    {{ form.recipient_from_history.label }}
                                </label>
                                {{ form.recipient_from_history }}
                                {% if form.recipient_from_history.errors %}
                                <div class="text-danger">{{ form.recipient_from_history.errors }}</div>
                                {% endif %}
                            </div>

                            <!-- Поля нового получателя -->
                            <div class="row" id="recipient-new-fields" style="display: none;">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="{{ form.recipient_name.id_for_label }}" class="form-label">
                                            Имя получателя
                                        </label>
                                        {{ form.recipient_name }}
                                        {% if form.recipient_name.errors %}
                                        <div class="text-danger">{{ form.recipient_name.errors }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="{{ form.recipient_phone.id_for_label }}" class="form-label">
                                            Телефон получателя
                                        </label>
                                        {{ form.recipient_phone }}
                                        {% if form.recipient_phone.help_text %}
                                        <small class="form-text text-muted d-block">{{ form.recipient_phone.help_text }}</small>
                                        {% endif %}
                                        {% if form.recipient_phone.errors %}
                                        <div class="text-danger">{{ form.recipient_phone.errors }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="{{ form.recipient_notes.id_for_label }}" class="form-label">
                                            {{ form.recipient_notes.label }}
                                        </label>
                                        {{ form.recipient_notes }}
                                        {% if form.recipient_notes.help_text %}
                                        <small class="form-text text-muted d-block">{{ form.recipient_notes.help_text }}</small>
                                        {% endif %}
                                        {% if form.recipient_notes.errors %}
                                        <div class="text-danger">{{ form.recipient_notes.errors }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Дополнительно -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-three-dots"></i> Дополнительно</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3 form-check form-switch">
                            {{ form.is_anonymous }}
                            <label class="form-check-label" for="{{ form.is_anonymous.id_for_label }}">
                                Анонимная доставка
                            </label>
                        </div>
                        <div class="mb-3 form-check form-switch">
                            {{ form.needs_product_photo }}
                            <label class="form-check-label" for="{{ form.needs_product_photo.id_for_label }}">
                                Необходимо фото товара
                            </label>
                        </div>
                        <div class="mb-3 form-check form-switch">
                            {{ form.needs_delivery_photo }}
                            <label class="form-check-label" for="{{ form.needs_delivery_photo.id_for_label }}">
                                Необходимо фото вручения
                            </label>
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.special_instructions.id_for_label }}" class="form-label">Особые пожелания</label>
                            {{ form.special_instructions }}
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- Конец левой колонки -->

            <!-- Правая колонка: Оплата -->
            <div class="col-lg-5">
                <div class="card mb-3">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="bi bi-credit-card"></i> Оплата</h5>
                            {% if order.pk %}
                                {% if order.amount_due <= 0 %}
                                    <span class="badge bg-success fs-5">Оплачено</span>
                                {% elif order.amount_paid > 0 %}
                                    <span class="badge bg-warning text-dark fs-5">Частично оплачено</span>
                                {% else %}
                                    <span class="badge bg-danger text-white fs-5 unpaid-badge">
                                        <i class="bi bi-exclamation-triangle-fill"></i> НЕ ОПЛАЧЕНО
                                    </span>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>

                    <div class="card-body">
                        {% if order.pk %}
                        <!-- Предупреждение о переплате -->
                        {% if order.amount_paid > order.total_amount %}
                        <div class="alert alert-warning mb-3">
                            <i class="bi bi-exclamation-triangle-fill"></i> <strong>Обнаружена переплата!</strong><br>
                            <small>
                                Оплачено <strong>{{ order.amount_paid|floatformat:2 }} руб.</strong>, 
                                сумма заказа <strong>{{ order.total_amount|floatformat:2 }} руб.</strong><br>
                                Переплата: <strong class="text-danger">{{ order.overpayment|floatformat:2 }} руб.</strong><br>
                                Создайте возврат средств ниже.
                            </small>
                        </div>
                        {% endif %}

                        <!-- Сумма заказа и остаток -->
                        <div class="row g-2 mb-3">
                            <div class="col-4">
                                <div class="card h-100">
                                    <div class="card-body text-center p-2">
                                        <small class="text-muted d-block mb-1">Сумма заказа</small>
                                        <h4 class="text-primary mb-0">{{ order.total_amount|floatformat:2 }} руб.</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card h-100 border-{% if order.amount_due > 0 %}warning{% else %}success{% endif %} border-3 shadow-sm">
                                    <div class="card-body text-center p-2">
                                        <small class="text-muted d-block mb-1">Остаток к оплате</small>
                                        <h4 class="text-{% if order.amount_due > 0 %}warning{% else %}success{% endif %} mb-0 fw-bold">{{ order.amount_due|floatformat:2 }} руб.</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card h-100">
                                    <div class="card-body text-center p-2">
                                        <small class="text-muted d-block mb-1">Уже оплачено</small>
                                        <h4 class="text-success mb-0">{{ order.amount_paid|floatformat:2 }} руб.</h4>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Единая форма: Платёж / Возврат -->
                        <form method="post"
                              action="{% url 'orders:transaction-add-payment' order.order_number %}"
                              id="unified-transaction-form">
                            {% csrf_token %}

                            <!-- Переключатель режима -->
                            <div class="mb-3">
                                <label class="form-label fw-bold d-block">Режим</label>
                                <div class="btn-group w-100" role="group" id="mode-toggle">
                                    <button type="button" class="btn btn-outline-secondary" data-mode="payment">Платёж</button>
                                    <button type="button" class="btn btn-outline-secondary"
                                            data-mode="refund"
                                            {% if order.amount_paid <= 0 %}disabled{% endif %}>
                                        Возврат
                                    </button>
                                </div>
                            </div>

                            <!-- Способы (цикл по всем доступным) -->
                            <div class="mb-2">
                                <label class="form-label fw-bold d-block">Способ</label>
                                <div class="d-flex flex-wrap gap-2" id="unified-methods">
                                    {% load orders_tags %}
                                    {% get_payment_methods as payment_methods %}
                                    {% for pm in payment_methods %}
                                        <button type="button"
                                                class="btn btn-outline-primary method-btn flex-fill"
                                                data-id="{{ pm.id }}"
                                                data-code="{{ pm.code }}">
                                            {{ pm.name }}
                                            {% if pm.code == 'account_balance' and order.customer %}
                                                <span class="badge bg-info ms-1">
                                                    {{ order.customer.wallet_balance|floatformat:2 }} руб.
                                                </span>
                                            {% endif %}
                                        </button>
                                    {% endfor %}
                                </div>
                                <!-- Скрытое поле для способа оплаты -->
                                <input type="hidden" id="unified-method-id" name="payment_method" required>
                                <!-- Подсказка при пустом кошельке -->
                                <div class="alert alert-warning py-2 mt-2 mb-0" id="wallet-empty-hint" style="display:none;">
                                    <i class="bi bi-exclamation-triangle-fill"></i> На личном счете клиента нет остатка, используйте другой способ оплаты
                                </div>
                            </div>

                            <!-- Сумма (одно поле для обоих режимов) -->
                            <div class="mb-2">
                                <label class="form-label fw-bold">Сумма</label>
                                <div class="input-group">
                                    <input type="number"
                                           step="0.01"
                                           min="0.01"
                                           class="form-control"
                                           id="unified-amount"
                                           name="amount"
                                           value="{{ order.amount_due|default:0|unlocalize }}"
                                           required>
                                    <span class="input-group-text">руб.</span>
                                </div>
                                <small class="text-muted" id="amount-hint" style="display:none;">
                                    Макс: <span id="amount-max"></span> руб.
                                </small>
                            </div>

                            <!-- Причина (только для возврата) -->
                            <div class="mb-2" id="refund-reason-wrap" style="display:none;">
                                <label class="form-label fw-bold">Причина</label>
                                <input type="text" class="form-control" id="refund-reason" placeholder="Укажите причину возврата">
                            </div>

                            <!-- Примечание (одно поле для обоих режимов) -->
                            <div class="mb-3">
                                <label class="form-label fw-bold">Примечание</label>
                                <input type="text" class="form-control" id="unified-notes" name="notes" placeholder="Опционально">
                            </div>

                            <button type="submit" class="btn w-100" id="unified-submit">
                                <i class="bi bi-check-lg"></i> Оплатить
                            </button>
                        </form>

                        <!-- История транзакций -->
                        {% if order.transactions.exists %}
                        <div class="mt-4">
                            <h6 class="text-muted mb-2"><i class="bi bi-clock-history"></i> История транзакций</h6>
                            <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th width="25%">Дата</th>
                                    <th width="30%">Способ</th>
                                    <th width="25%" class="text-end">Сумма</th>
                                    <th width="20%">Кем</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for transaction in order.transactions.all|dictsortreversed:"transaction_date" %}
                                <tr>
                                    <td>
                                        <small class="text-muted">
                                            {{ transaction.transaction_date|date:"d.m.Y H:i" }}
                                        </small>
                                    </td>
                                    <td>
                                        {% if transaction.transaction_type == 'refund' and transaction.payment_method.code == 'account_balance' %}
                                            Возврат на баланс счёта
                                        {% else %}
                                            {{ transaction.payment_method.name }}
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <strong class="{% if transaction.transaction_type == 'payment' %}text-success{% else %}text-danger{% endif %}">
                                            {% if transaction.transaction_type == 'refund' %}−{% else %}+{% endif %}{{ transaction.amount|floatformat:2 }}
                                        </strong>
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {% if transaction.created_by %}
                                                {{ transaction.created_by.name|default:transaction.created_by.email }}
                                            {% else %}
                                                —
                                            {% endif %}
                                        </small>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                            </div>
                        </div>
                        {% else %}
                        <div class="alert alert-light mt-4">
                            <i class="bi bi-info-circle"></i> Транзакции по заказу отсутствуют
                        </div>
                        {% endif %}
                        {% else %}
                        <!-- Для новых заказов -->
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle"></i> Сохраните заказ, чтобы добавить платежи и возвраты.
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Конец правой колонки -->
        </div>
        <!-- Конец двух колонок -->
    </div>

    <!-- Кнопки -->
    <div class="row">
        <div class="col-lg-7">
            <div class="d-flex gap-2">
                {% if is_create_page %}
                    <!-- На странице создания показываем одну кнопку -->
                    <button type="submit" form="order-form" class="btn btn-primary btn-lg">
                        <i class="bi bi-check-circle"></i> Создать заказ
                    </button>
                {% else %}
                    <!-- Для любых заказов - только сохранение -->
                    <button type="submit" form="order-form" class="btn btn-primary btn-lg">
                        <i class="bi bi-save"></i> {{ button_text }}
                    </button>
                {% endif %}

                <a href="{% url 'orders:order-list' %}" class="btn btn-outline-secondary btn-lg">
                    <i class="bi bi-x-circle"></i> Отмена
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Order Form Cleanup -->
<script src="{% static 'orders/js/order_form_cleanup.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    window.initOrderFormCleanup('#order-form');
});
</script>

<!-- Delivery Date/Time Widget -->
<script src="{% static 'orders/js/delivery_datetime.js' %}"></script>
<script>
// Убеждаемся, что дата доставки правильно отображается п��и ред��ктировании
document.addEventListener('DOMContentLoaded', function() {
    const deliveryDateField = document.getElementById('{{ form.delivery_date.id_for_label }}');
    {% if form.delivery_date.initial %}
    if (deliveryDateField && !deliveryDateField.value) {
        // Если поле пустое, но есть initial значение, устанавливаем его
        const initialDate = '{{ form.delivery_date.initial|date:"Y-m-d" }}';
        if (initialDate && initialDate !== 'None') {
            deliveryDateField.value = initialDate;
            console.log('[Delivery Date] Установлена дата из initial:', initialDate);
        }
    }
    {% endif %}
});
</script>

<!-- Unified Transaction Form -->
<script src="{% static 'orders/js/unified_transaction_form.js' %}"></script>
{% if order.pk %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    window.initUnifiedTransactionForm('#unified-transaction-form', {
        paymentUrl: "{% url 'orders:transaction-add-payment' order.order_number %}",
        refundUrl: "{% url 'orders:transaction-add-refund' order.order_number %}",
        amountDue: {{ order.amount_due|default:0|unlocalize }},
        amountPaid: {{ order.amount_paid|default:0|unlocalize }},
        walletBalance: {% if order.customer %}{{ order.customer.wallet_balance|default:0|unlocalize }}{% else %}0{% endif %}
    });
});
</script>
{% endif %}


<!-- Customer Select2 Widget -->
<script src="{% static 'orders/js/customer_select2.js' %}" defer></script>

<!-- System Customer Button Script -->
<script>
(function() {
    'use strict';

    function initSystemCustomerButton() {
        const button = document.getElementById('select-system-customer-btn');
        if (!button) return;

        const systemUrl = button.dataset.systemUrl;
        const customerSelect = document.getElementById('id_customer');
        if (!customerSelect) return;

        button.addEventListener('click', function() {
            // Показываем индикатор загрузки
            const originalHTML = button.innerHTML;
            button.disabled = true;
            button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Загрузка...';

            fetch(systemUrl)
                .then(function(response) { return response.json(); })
                .then(function(data) {
                    if (data.success && data.customer) {
                        // Обновляем Select2
                        if (typeof $ !== 'undefined') {
                            const $select = $(customerSelect);
                            // Удаляем текущую опцию, если есть
                            $select.empty();
                            // Добавляем нового клиента
                            const newOption = new Option(
                                data.customer.name,
                                data.customer.id,
                                true,
                                true
                            );
                            // Добавляем data-атрибуты
                            $(newOption).attr({
                                'data-name': data.customer.name,
                                'data-phone': data.customer.phone,
                                'data-email': data.customer.email,
                                'data-is-system-customer': 'true'
                            });
                            $select.append(newOption).trigger('change');
                        }

                        // Показываем уведомление
                        if (window.showNotification) {
                            window.showNotification('Выбран анонимный покупатель', 'success');
                        }
                    }
                })
                .catch(function(error) {
                    console.error('Error loading system customer:', error);
                    if (window.showNotification) {
                        window.showNotification('Ошибка при загрузке системного клиента', 'error');
                    }
                })
                .finally(function() {
                    button.disabled = false;
                    button.innerHTML = originalHTML;
                });
        });
    }

    // Инициализация при загрузке DOM
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSystemCustomerButton);
    } else {
        initSystemCustomerButton();
    }
})();
</script>

<script>
// Инициализация Select2 для остальных полей (после jQuery загружен)
if (typeof $ !== 'undefined') {
    $(document).ready(function() {
        console.log('[INIT] jQuery document ready triggered');

        $('.select2:not(.select2-order-item)').select2({
            theme: 'bootstrap-5',
            width: '100%',
            language: 'ru'
        });
    });
}

// === УПРАВЛЕНИЕ ТИПОМ ДОСТАВКИ ===
document.addEventListener('DOMContentLoaded', function() {
    const deliveryTypeRadios = document.querySelectorAll('input[name="{{ form.delivery_type.name }}"]');
    const deliveryAddressFields = document.getElementById('delivery-address-fields');
    const pickupFields = document.getElementById('pickup-fields');
    const addressModeRadios = document.querySelectorAll('input[name="{{ form.address_mode.name }}"]');
    const addressHistoryField = document.getElementById('address-history-field');
    const addressNewFields = document.getElementById('address-new-fields');

    // Функция переключения между доставкой и самовывозом
    function toggleDeliveryType() {
        const selectedRadio = document.querySelector('input[name="{{ form.delivery_type.name }}"]:checked');
        if (!selectedRadio) return;
        
        const deliveryType = selectedRadio.value;

        if (deliveryType === 'courier') {
            // Показываем поля адреса, скрываем склад
            if (deliveryAddressFields) deliveryAddressFields.style.display = 'block';
            if (pickupFields) pickupFields.style.display = 'none';
        } else if (deliveryType === 'pickup') {
            // Скрываем поля адреса, показываем склад
            if (deliveryAddressFields) deliveryAddressFields.style.display = 'none';
            if (pickupFields) pickupFields.style.display = 'block';
            
            // Автоматически выбираем склад по умолчанию, если он еще не выбран
            const pickupWarehouseSelect = document.getElementById('{{ form.pickup_warehouse.id_for_label }}');
            if (pickupWarehouseSelect && !pickupWarehouseSelect.value) {
                // Ищем первый option со значением (склад по умолчанию должен быть первым в списке)
                const options = pickupWarehouseSelect.querySelectorAll('option[value]:not([value=""])');
                if (options.length > 0) {
                    // Первый option - это склад по умолчанию (благодаря сортировке -is_default)
                    pickupWarehouseSelect.value = options[0].value;
                    // Триггерим событие change для обновления UI
                    pickupWarehouseSelect.dispatchEvent(new Event('change', { bubbles: true }));
                }
            }
        }
    }

    // Функция переключения режима адреса
    function toggleAddressMode() {
        const selectedMode = document.querySelector('input[name="{{ form.address_mode.name }}"]:checked');
        if (!selectedMode) return;
        
        const mode = selectedMode.value;
        
        // Скрываем все поля
        if (addressHistoryField) addressHistoryField.style.display = 'none';
        if (addressNewFields) addressNewFields.style.display = 'none';
        
        // Показываем нужные поля
        if (mode === 'history') {
            if (addressHistoryField) addressHistoryField.style.display = 'block';
        } else if (mode === 'new') {
            if (addressNewFields) addressNewFields.style.display = 'block';
        }
    }

    // Обработчики для типа доставки
    if (deliveryTypeRadios && deliveryTypeRadios.length > 0) {
        deliveryTypeRadios.forEach(radio => {
            radio.addEventListener('change', toggleDeliveryType);
        });
    }

    // Обработчики для режима адреса
    if (addressModeRadios && addressModeRadios.length > 0) {
        addressModeRadios.forEach(radio => {
            radio.addEventListener('change', toggleAddressMode);
        });
    }

    // Инициализация при загрузке
    toggleDeliveryType();
    toggleAddressMode();
    
    // При загрузке страницы, если выбран самовывоз, но склад не выбран - выбираем по умолчанию
    const selectedDeliveryType = document.querySelector('input[name="{{ form.delivery_type.name }}"]:checked');
    if (selectedDeliveryType && selectedDeliveryType.value === 'pickup') {
        const pickupWarehouseSelect = document.getElementById('{{ form.pickup_warehouse.id_for_label }}');
        if (pickupWarehouseSelect && !pickupWarehouseSelect.value) {
            // Ищем первый option со значением (склад по умолчанию должен быть первым)
            const options = pickupWarehouseSelect.querySelectorAll('option[value]:not([value=""])');
            if (options.length > 0) {
                pickupWarehouseSelect.value = options[0].value;
            }
        }
    }

    // Показ/скрытие полей получателя
    const otherRecipientCheckbox = document.getElementById('{{ form.other_recipient.id_for_label }}');
    const otherRecipientBlock = document.getElementById('other-recipient-block');
    const recipientSourceRadios = document.querySelectorAll('input[name="recipient_source"]');
    const recipientHistoryField = document.getElementById('recipient-history-field');
    const recipientNewFields = document.getElementById('recipient-new-fields');

    function toggleOtherRecipientBlock() {
        if (otherRecipientCheckbox.checked) {
            otherRecipientBlock.style.display = 'block';
            toggleRecipientSourceFields();
        } else {
            otherRecipientBlock.style.display = 'none';
            recipientHistoryField.style.display = 'none';
            recipientNewFields.style.display = 'none';
        }
    }

    function toggleRecipientSourceFields() {
        const selectedSource = document.querySelector('input[name="recipient_source"]:checked');
        if (!selectedSource) return;

        const source = selectedSource.value;
        
        // Скрываем все поля
        recipientHistoryField.style.display = 'none';
        recipientNewFields.style.display = 'none';

        // Показываем нужные поля
        if (source === 'history') {
            recipientHistoryField.style.display = 'block';
        } else if (source === 'new') {
            recipientNewFields.style.display = 'block';
        }
    }

    // Обработчики событий
    if (otherRecipientCheckbox) {
        otherRecipientCheckbox.addEventListener('change', toggleOtherRecipientBlock);
        // Инициализация при загрузке - проверяем checked состояние
        // Используем DOMContentLoaded чтобы убедиться, что DOM полностью загружен
        // Но также проверяем сразу, если DOM уже загружен
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                toggleOtherRecipientBlock();
            });
        } else {
            // DOM уже загружен
            toggleOtherRecipientBlock();
        }
    }

    recipientSourceRadios.forEach(radio => {
        radio.addEventListener('change', toggleRecipientSourceFields);
    });

    // === РАСЧЁТ ИТОГОВОЙ СУММЫ ТОВАРОВ ===
    // Вычисление суммы по всем видимым позициям
    function calculateTotal() {
        const visibleForms = Array.from(document.querySelectorAll('.order-item-form'))
            .filter(form => !form.classList.contains('deleted'));

        let total = 0;

        visibleForms.forEach((form) => {
            const quantityField = form.querySelector('[name$="-quantity"]');
            const priceField = form.querySelector('[name$="-price"]');

            if (quantityField && priceField) {
                const quantity = parseFloat(quantityField.value) || 0;
                const priceValue = priceField.value.replace(',', '.');
                const price = parseFloat(priceValue) || 0;
                total += quantity * price;
            }
        });

        return total;
    }

    // Обновление отображения суммы в DOM
    function updateTotalDisplay() {
        const total = calculateTotal();
        const totalElement = document.getElementById('order-items-total-value');

        if (totalElement) {
            totalElement.textContent = total.toFixed(2);
        }
    }
    
    // Публичная функция для вызова из других скриптов (черновики, AJAX)
    window.updateOrderItemsTotal = function() {
        updateTotalDisplay();
    };

    // Функция для инициализации отслеживания изменения цены
    function initPriceTracking(form) {
        const priceField = form.querySelector('[name$="-price"]');
        const isCustomPriceField = form.querySelector('[name$="-is_custom_price"]');
        const badge = form.querySelector('.custom-price-badge');
        const priceInfo = form.querySelector('.original-price-info');
        const originalPriceValue = form.querySelector('.original-price-value');

        if (!priceField) return;

        // Отслеживание изменения цены вручную
        priceField.addEventListener('input', function() {
            const currentPrice = parseFloat(priceField.value) || 0;
            const originalPrice = parseFloat(priceField.dataset.originalPrice) || 0;

            // Если цена изменена и есть оригинальная цена
            if (originalPrice && currentPrice !== originalPrice) {
                isCustomPriceField.value = 'true';
                badge.style.display = '';
                priceInfo.style.display = '';
                originalPriceValue.textContent = originalPrice.toFixed(2);
            } else {
                isCustomPriceField.value = 'false';
                badge.style.display = 'none';
                priceInfo.style.display = 'none';
            }
        });

        // Проверка при загрузке формы (для редактирования)
        if (isCustomPriceField.value === 'True' || isCustomPriceField.value === 'true') {
            badge.style.display = '';
            priceInfo.style.display = '';
            const originalPrice = parseFloat(priceField.dataset.originalPrice) || 0;
            if (originalPrice) {
                originalPriceValue.textContent = originalPrice.toFixed(2);
            }
        }

        // Добавляем слушатели для обновления итоговой суммы
        priceField.addEventListener('input', updateTotalDisplay);

        const quantityField = form.querySelector('[name$="-quantity"]');
        if (quantityField) {
            quantityField.addEventListener('input', updateTotalDisplay);
        }
    }

    // Инициализация отслеживания цены для всех существующих форм
    document.querySelectorAll('.order-item-form').forEach(initPriceTracking);

    // Динамическое добавление позиций товаров
    const container = document.getElementById('order-items-container');
    const addButton = document.getElementById('add-item-btn');
    const totalFormsInput = document.querySelector('#id_items-TOTAL_FORMS');
    const emptyFormTemplate = document.getElementById('empty-form-template');

    /**
     * Безопасная инициализация Select2 для элемента формы заказа
     * Проверяет наличие всех зависимостей и повторяет попытки при необходимости
     * @param {Element} selectElement - DOM элемент select для инициализации
     * @param {number} retryCount - Количество оставшихся попыток (по умолчанию 10)
     * @param {number} delay - Задержка между попытками в миллисекундах (по умолчанию 100)
     */
    window.safeInitOrderItemSelect2 = function(selectElement, retryCount = 10, delay = 100) {
        if (!selectElement) {
            console.warn('[safeInitOrderItemSelect2] Элемент не найден');
            return false;
        }

        // Проверяем наличие всех зависимостей
        if (typeof $ === 'undefined') {
            console.log('[safeInitOrderItemSelect2] jQuery еще не загружен, ожидание...');
            if (retryCount > 0) {
                setTimeout(() => window.safeInitOrderItemSelect2(selectElement, retryCount - 1, delay), delay);
            }
            return false;
        }

        if (typeof window.initOrderItemSelect2 !== 'function') {
            console.log('[safeInitOrderItemSelect2] initOrderItemSelect2 еще не загружена, ожидание...');
            if (retryCount > 0) {
                setTimeout(() => window.safeInitOrderItemSelect2(selectElement, retryCount - 1, delay), delay);
            }
            return false;
        }

        // Проверяем, не инициализирован ли уже Select2
        if ($(selectElement).data('select2')) {
            console.log('[safeInitOrderItemSelect2] Select2 уже инициализирован для этого элемента');
            return true;
        }

        // Все зависимости готовы, инициализируем
        try {
            window.initOrderItemSelect2(selectElement);
            console.log('[safeInitOrderItemSelect2] Select2 успешно инициализирован');
            return true;
        } catch (error) {
            console.error('[safeInitOrderItemSelect2] Ошибка при инициализации Select2:', error);
            if (retryCount > 0) {
                setTimeout(() => window.safeInitOrderItemSelect2(selectElement, retryCount - 1, delay), delay);
            }
            return false;
        }
    };

    // Функция для добавления новой формы
    function addNewForm() {
        const formCount = parseInt(totalFormsInput.value);

        const templateContent = emptyFormTemplate.content || emptyFormTemplate;
        const formTemplate = templateContent.querySelector('.order-item-form');
        const newForm = formTemplate.cloneNode(true);

        newForm.innerHTML = newForm.innerHTML.replace(/__prefix__/g, formCount);
        newForm.dataset.formIndex = formCount;

        container.appendChild(newForm);

        totalFormsInput.value = formCount + 1;

        // Инициализируем Select2 для новой формы с безопасной проверкой
        const select2Element = newForm.querySelector('.select2-order-item');
        if (select2Element) {
            select2Element.dataset.formIndex = formCount;
            // Используем безопасную инициализацию с повторными попытками
            window.safeInitOrderItemSelect2(select2Element);
        } else {
            console.error('[addNewForm] Элемент .select2-order-item не найден в новой форме');
        }

        initPriceTracking(newForm);

        const removeBtn = newForm.querySelector('.remove-item-btn');
        if (removeBtn) {
            removeBtn.addEventListener('click', function() {
                removeForm(newForm);
            });
        }

        // Убедимся, что все поля имеют правильные имена и ID
        const fields = newForm.querySelectorAll('[name]');
        fields.forEach(field => {
            const name = field.getAttribute('name');
            if (name && name.includes('__prefix__')) {
                const newName = name.replace(/__prefix__/g, formCount);
                field.setAttribute('name', newName);
            }

            const id = field.getAttribute('id');
            if (id && id.includes('__prefix__')) {
                const newId = id.replace(/__prefix__/g, formCount);
                field.setAttribute('id', newId);
            }
        });

        updateTotalDisplay();

        return newForm;
    }

    // Функция для удаления формы
    function removeForm(form) {
        if (!confirm('Вы действительно хотите удалить этот товар из заказа?')) {
            return;
        }

        const deleteCheckbox = form.querySelector('input[name$="-DELETE"]');
        const idField = form.querySelector('input[name$="-id"]');

        if (idField && idField.value) {
            // Сохранённая форма - помечаем на удаление
            console.log('[removeForm] Помечаем сохранённую форму на удаление (ID:', idField.value, ')');
            deleteCheckbox.checked = true;
            // Также добавляем скрытое поле, чтобы гарантировать удаление
            if (!deleteCheckbox.value) {
                deleteCheckbox.value = 'on';
            }
            form.classList.add('deleted');
            form.style.display = 'none';
            updateTotalDisplay();
            if (typeof window.orderAutosave !== 'undefined' && window.orderAutosave.scheduleAutosave) {
                window.orderAutosave.scheduleAutosave();
            }
        } else {
            // Новая форма - удаляем из DOM
            console.log('[removeForm] Удаление новой формы из DOM');

            // Удаляем форму
            form.remove();

            // Обновляем TOTAL_FORMS
            const totalFormsInput = document.querySelector('[name="items-TOTAL_FORMS"]');
            if (totalFormsInput) {
                const oldTotal = parseInt(totalFormsInput.value);
                const newTotal = oldTotal - 1;
                console.log(`[removeForm] Обновление TOTAL_FORMS: ${oldTotal} → ${newTotal}`);
                totalFormsInput.value = newTotal;
            }

            // Пересчитываем индексы оставшихся форм
            const remainingForms = Array.from(document.querySelectorAll('.order-item-form:not(.deleted)'));
            console.log(`[removeForm] Пересчёт индексов для ${remainingForms.length} оставшихся форм...`);

            remainingForms.forEach((currentForm, newIndex) => {
                // Обновляем data-атрибут индекса формы
                currentForm.setAttribute('data-form-index', newIndex);

                // Находим все поля с name="items-N-..." и select элементы
                const fields = currentForm.querySelectorAll('[name^="items-"], select[name^="items-"]');
                fields.forEach(field => {
                    const name = field.getAttribute('name');
                    // Меняем индекс: items-СТАРЫЙ-поле → items-НОВЫЙ-поле
                    const newName = name.replace(/^items-\d+/, `items-${newIndex}`);
                    if (name !== newName) {
                        console.log(`[removeForm]   Переименование: ${name} → ${newName}`);
                        field.setAttribute('name', newName);

                        // Обновляем ID тоже (для связи с label)
                        if (field.id) {
                            const newId = field.id.replace(/^id_items-\d+/, `id_items-${newIndex}`);
                            field.setAttribute('id', newId);
                        }

                        // Обновляем for атрибут у label, если есть
                        const label = document.querySelector(`label[for="${field.id}"]`);
                        if (label) {
                            label.setAttribute('for', newId);
                        }
                    }

                    // Обновляем data-атрибут у select2 элементов
                    if (field.classList.contains('select2-order-item')) {
                        field.setAttribute('data-form-index', newIndex);
                    }
                });

                // Обновляем select элементы, если есть
                const selects = currentForm.querySelectorAll('select');
                selects.forEach(select => {
                    const name = select.getAttribute('name');
                    if (name && name.startsWith('items-')) {
                        const newName = name.replace(/^items-\d+/, `items-${newIndex}`);
                        if (name !== newName) {
                            select.setAttribute('name', newName);

                            // Обновляем ID тоже (для связи с label)
                            if (select.id) {
                                const newId = select.id.replace(/^id_items-\d+/, `id_items-${newIndex}`);
                                select.setAttribute('id', newId);

                                // Обновляем for атрибут у label, если есть
                                const label = document.querySelector(`label[for="${select.id}"]`);
                                if (label) {
                                    label.setAttribute('for', newId);
                                }
                            }
                        }
                    }
                });
            });

            updateTotalDisplay();
        }
    }

    // Обработчик кнопки добавления
    addButton.addEventListener('click', addNewForm);

    // Добавляем обработчики удаления для существующих форм
    container.querySelectorAll('.remove-item-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const form = btn.closest('.order-item-form');
            removeForm(form);
        });
    });

    // Если нет ни одной формы, добавляем одну автоматически
    // Убеждаемся, что это происходит после загрузки всех скриптов
    function ensureInitialForm() {
        const existingForms = container.querySelectorAll('.order-item-form:not(.deleted)');
        if (existingForms.length === 0) {
            console.log('[Order Items] Нет форм, добавляем первую автоматически...');
            const newForm = addNewForm();
            
            // Переинициализируем Select2 для добавленной формы после небольшой задержки
            // чтобы убедиться, что все скрипты загружены
            setTimeout(() => {
                const select2Element = newForm.querySelector('.select2-order-item');
                if (select2Element && (!window.$ || !$(select2Element).data('select2'))) {
                    console.log('[Order Items] Переинициализация Select2 для автоматически добавленной формы...');
                    if (window.safeInitOrderItemSelect2) {
                        window.safeInitOrderItemSelect2(select2Element);
                    } else if (window.initOrderItemSelect2 && typeof window.initOrderItemSelect2 === 'function') {
                        window.initOrderItemSelect2(select2Element);
                    }
                }
            }, 200);
        }
    }

    // Пытаемся добавить форму сразу, но также проверяем после загрузки всех скриптов
    ensureInitialForm();
    
    // Дополнительная проверка после небольшой задержки на случай, если скрипты загружаются асинхронно
    setTimeout(ensureInitialForm, 500);

    // Инициализируем итоговую сумму
    updateTotalDisplay();

    // Валидация перед отправкой
    document.getElementById('order-form').addEventListener('submit', function(e) {
        // Убедимся, что все удаленные формы действительно отмечены для удаления
        const deletedForms = document.querySelectorAll('.order-item-form.deleted');
        deletedForms.forEach(form => {
            const deleteCheckbox = form.querySelector('input[name$="-DELETE"]');
            if (deleteCheckbox) {
                deleteCheckbox.checked = true;
                // Убедимся, что значение установлено
                deleteCheckbox.value = 'on';
            }
        });

        // Заказ можно сохранить без товаров
    });

    // === ВРЕМЕННЫЕ КОМПЛЕКТЫ ===

    // Модальное окно для создания временного комплекта
    const tempKitModal = document.getElementById('tempKitModal');
    const tempKitForm = document.getElementById('temp-kit-form');
    const tempKitComponentsContainer = document.getElementById('temp-kit-components');
    let tempKitComponentIndex = 0;

    // Добавление компонента в временный комплект
    document.getElementById('add-temp-kit-component-btn').addEventListener('click', function() {
        addTempKitComponent();
    });

    function addTempKitComponent(productId = '', productName = '', quantity = '1') {
        const componentHtml = `
            <div class="temp-kit-component border rounded p-3 mb-3" data-component-index="${tempKitComponentIndex}">
                <div class="row align-items-end">
                    <div class="col-md-7">
                        <label class="form-label">Товар</label>
                        <select class="form-select select2-temp-kit-product" data-component-index="${tempKitComponentIndex}">
                            <option value=""></option>
                            ${productId ? `<option value="${productId}" selected>${productName}</option>` : ''}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Количество</label>
                        <input type="number" class="form-control temp-kit-quantity" value="${quantity}" min="0.001" step="1" data-component-index="${tempKitComponentIndex}">
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="button" class="btn btn-danger btn-sm remove-temp-kit-component">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;

        tempKitComponentsContainer.insertAdjacentHTML('beforeend', componentHtml);

        // Инициализация Select2 для нового компонента
        $(`.select2-temp-kit-product[data-component-index="${tempKitComponentIndex}"]`).select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: 'Выберите товар',
            language: 'ru',
            dropdownParent: $('#tempKitModal'),
            ajax: {
                url: '{% url "products:api-search-products-variants" %}',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                        type: 'product',  // Только товары, не комплекты
                        page: params.page || 1
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.results,
                        pagination: {
                            more: data.pagination.more
                        }
                    };
                },
                cache: true
            }
        });

        tempKitComponentIndex++;
    }

    // Удаление компонента
    tempKitComponentsContainer.addEventListener('click', function(e) {
        if (e.target.closest('.remove-temp-kit-component')) {
            e.target.closest('.temp-kit-component').remove();
        }
    });

    // Добавляем первый компонент при открытии модального окна
    tempKitModal.addEventListener('show.bs.modal', function() {
        // Очищаем форму
        document.getElementById('temp-kit-name').value = '';
        document.getElementById('temp-kit-description').value = '';
        tempKitComponentsContainer.innerHTML = '';
        tempKitComponentIndex = 0;

        // Добавляем первый пустой компонент
        addTempKitComponent();
    });

    // Создание временного комплекта
    document.getElementById('save-temp-kit-btn').addEventListener('click', function() {
        const name = document.getElementById('temp-kit-name').value.trim();
        const description = document.getElementById('temp-kit-description').value.trim();

        if (!name) {
            alert('Пожалуйста, укажите название комплекта');
            return;
        }

        // Собираем компоненты
        const components = [];
        document.querySelectorAll('.temp-kit-component').forEach(function(component) {
            const select = component.querySelector('.select2-temp-kit-product');
            const quantity = component.querySelector('.temp-kit-quantity').value;
            const productId = $(select).val();

            if (productId && quantity > 0) {
                // Убираем префикс "product_" если есть
                const cleanId = productId.replace('product_', '');
                components.push({
                    product_id: parseInt(cleanId),
                    quantity: quantity
                });
            }
        });

        if (components.length === 0) {
            alert('Добавьте хотя бы один товар в комплект');
            return;
        }

        // Отправляем AJAX запрос
        fetch('{% url "products:api-temporary-kit-create" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({
                name: name,
                description: description,
                order_id: {{ form.instance.pk|default:"null" }},
                components: components
            })
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);

            // Функция заполнения формы данными комплекта
            function fillFormWithKit(form, kitData) {
                if (!kitData || !kitData.kit_id || !kitData.kit_name || kitData.kit_price === undefined) {
                    console.error('Invalid kit data:', kitData);
                    alert('Ошибка: неверные данные комплекта');
                    return;
                }

                // Устанавливаем значения для комплекта
                const kitSelect = form.querySelector('.select2-order-item');
                const quantityInput = form.querySelector('[name$="-quantity"]');
                const priceInput = form.querySelector('[name$="-price"]');
                
                // ВАЖНО: Находим скрытые поля для product и product_kit
                const productField = form.querySelector('[name$="-product"]');
                const kitField = form.querySelector('[name$="-product_kit"]');
                const isCustomPriceField = form.querySelector('[name$="-is_custom_price"]');

                if (!kitSelect) {
                    console.error('Kit select not found in form');
                    return;
                }

                // Используем Select2 API для добавления опции
                const newOption = new Option(kitData.kit_name, `kit_${kitData.kit_id}`, true, true);
                $(kitSelect).append(newOption).trigger('change');

                // КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: Устанавливаем скрытые поля напрямую
                // Это комплект, поэтому очищаем product и устанавливаем product_kit
                if (productField) productField.value = '';
                if (kitField) kitField.value = kitData.kit_id;
                
                console.log('[fillFormWithKit] Установлены скрытые поля:', {
                    product: productField ? productField.value : 'not found',
                    product_kit: kitField ? kitField.value : 'not found'
                });

                // Устанавливаем количество и цену
                if (quantityInput) quantityInput.value = '1';
                if (priceInput) {
                    priceInput.value = kitData.kit_price;
                    priceInput.dataset.originalPrice = kitData.kit_price;
                }
                
                // Сбрасываем флаг кастомной цены
                if (isCustomPriceField) {
                    isCustomPriceField.value = 'false';
                }

                // Скрываем единицы продажи для комплектов (у комплектов их нет)
                const salesUnitContainer = form.querySelector('.sales-unit-container');
                if (salesUnitContainer) {
                    salesUnitContainer.style.display = 'none';
                }

                // Обновляем сумму товаров
                if (typeof window.updateOrderItemsTotal === 'function') {
                    window.updateOrderItemsTotal();
                }

                // Явно вызываем событие select2:select для запуска автосохранения
                $(kitSelect).trigger('select2:select', {
                    params: {
                        data: {
                            id: `kit_${kitData.kit_id}`,
                            text: kitData.kit_name
                        }
                    }
                });
            }

            if (data.success) {
                // Закрываем модальное окно
                const modal = bootstrap.Modal.getInstance(tempKitModal);
                modal.hide();

                // Ищем существующую пустую форму или создаем новую
                const forms = container.querySelectorAll('.order-item-form');
                let targetForm = null;

                // Ищем первую пустую форму
                for (const form of forms) {
                    const kitSelect = form.querySelector('.select2-order-item');
                    if (kitSelect && !kitSelect.value) {
                        targetForm = form;
                        break;
                    }
                }

                // Если пустой формы нет, добавляем новую
                if (!targetForm) {
                    const addButton = document.getElementById('add-item-btn');
                    addButton.click();

                    // Небольшая задержка для создания формы
                    setTimeout(function() {
                        const allForms = container.querySelectorAll('.order-item-form');
                        targetForm = allForms[allForms.length - 1];
                        fillFormWithKit(targetForm, data);
                    }, 100);
                } else {
                    fillFormWithKit(targetForm, data);
                }

                // Очищаем форму модального окна
                document.getElementById('temp-kit-name').value = '';
                document.getElementById('temp-kit-description').value = '';
                tempKitComponentsContainer.innerHTML = '';
                tempKitComponentIndex = 0;

                // Показываем успешное сообщение
                alert(`Комплект "${data.kit_name}" создан и добавлен в заказ!`);
            } else {
                alert(`Ошибка: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('Full error:', error);
            console.error('Error message:', error.message);
            alert('Произошла ошибка при создании комплекта: ' + error.message);
        });
    });

// Закрытие DOMContentLoaded
});
</script>

<!-- Модальное окно для создания нового клиента -->
<div class="modal fade" id="createCustomerModal" tabindex="-1" aria-labelledby="createCustomerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createCustomerModalLabel">
                    <i class="bi bi-person-plus"></i> Создать нового клиента
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="customer-form-errors" style="display: none;" class="alert alert-danger"></div>

                <div class="mb-3">
                    <label for="customer-name" class="form-label">
                        Имя клиента <span class="text-danger">*</span>
                    </label>
                    <input type="text" class="form-control" id="customer-name"
                           placeholder="Например: Иван Петров">
                </div>

                <div class="mb-3">
                    <label for="customer-phone" class="form-label">Телефон</label>
                    <input type="tel" class="form-control" id="customer-phone"
                           placeholder="+375291234567 или 8(029)1234567">
                    <small class="form-text text-muted">
                        Введите в любом формате, будет автоматически преобразован
                    </small>
                </div>

                <div class="mb-3">
                    <label for="customer-email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="customer-email"
                           placeholder="ivan@example.com">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Отмена
                </button>
                <button type="button" class="btn btn-success" id="save-customer-btn">
                    <i class="bi bi-check-circle"></i> Создать клиента
                </button>
            </div>
        </div>
    </div>
</div>


<!-- Модальное окно для создания временного комплекта -->
<div class="modal fade" id="tempKitModal" tabindex="-1" aria-labelledby="tempKitModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tempKitModalLabel">
                    <i class="bi bi-flower1"></i> Создать временный комплект
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="temp-kit-form">
                    <div class="mb-3">
                        <label for="temp-kit-name" class="form-label">
                            Название комплекта <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="temp-kit-name"
                               placeholder='Например: "Букет для Анны"' required>
                        <small class="form-text text-muted">
                            Этот комплект будет создан только для этого заказа и не появится в общем каталоге
                        </small>
                    </div>

                    <div class="mb-3">
                        <label for="temp-kit-description" class="form-label">Описание (опционально)</label>
                        <textarea class="form-control" id="temp-kit-description" rows="2"
                                  placeholder="Краткое описание комплекта"></textarea>
                    </div>

                    <hr>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label mb-0">
                                Товары в комплекте <span class="text-danger">*</span>
                            </label>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="add-temp-kit-component-btn">
                                <i class="bi bi-plus-circle"></i> Добавить товар
                            </button>
                        </div>
                        <div id="temp-kit-components">
                            <!-- Компоненты будут добавлены через JS -->
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Отмена
                </button>
                <button type="button" class="btn btn-success" id="save-temp-kit-btn">
                    <i class="bi bi-check-circle"></i> Создать и добавить в заказ
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Подключение модулей для работы с единицами продажи и поиском товаров -->
<script src="{% static 'products/js/sales-units.js' %}"></script>
<script src="{% static 'products/js/select2-product-search.js' %}"></script>

<script>
// Инициализируем все существующие Select2 для товаров после загрузки модуля
(function initExistingOrderItems() {
    console.log('[Order Items] Начало инициализации существующих элементов');
    console.log('[Order Items] jQuery доступен?', typeof $ !== 'undefined');
    console.log('[Order Items] initOrderItemSelect2 доступен?', typeof window.initOrderItemSelect2 === 'function');
    console.log('[Order Items] initProductSelect2 доступен?', typeof window.initProductSelect2 === 'function');

    // Проверяем все зависимости
    if (typeof $ === 'undefined') {
        console.log('[Order Items] Ожидание загрузки jQuery...');
        setTimeout(initExistingOrderItems, 100);
        return;
    }

    if (typeof window.initOrderItemSelect2 !== 'function') {
        console.log('[Order Items] Ожидание загрузки initOrderItemSelect2 из select2-product-search.js...');
        setTimeout(initExistingOrderItems, 100);
        return;
    }

    // Если есть черновик из POS, ждём пока его поля будут заполнены
    {% if draft_items_json %}
    if (!window._draftFieldsFilled) {
        console.log('[Order Items] ⏳ Ожидание заполнения полей черновика из POS...');
        setTimeout(initExistingOrderItems, 50);
        return;
    }
    console.log('[Order Items] ✅ Поля черновика заполнены, продолжаем инициализацию');
    {% endif %}

    // Все зависимости готовы
    console.log('[Order Items] Все зависимости готовы, запуск инициализации...');
    const items = document.querySelectorAll('.select2-order-item');
    console.log('[Order Items] Найдено элементов для инициализации:', items.length);
    
    // Функция для инициализации одного элемента
    function initOrderItemElement(selectElement, index) {
        console.log(`[Order Items] 📋 Инициализация элемента ${index + 1}`);
        
        // Используем безопасную инициализацию
        const initialized = window.safeInitOrderItemSelect2 ? 
            window.safeInitOrderItemSelect2(selectElement) : 
            (window.initOrderItemSelect2 ? (window.initOrderItemSelect2(selectElement), true) : false);
        
        if (initialized) {
            console.log(`[Order Items] ✅ Select2 инициализирован для элемента ${index}`);
        } else {
            console.warn(`[Order Items] ⚠️ Не удалось инициализировать Select2 для элемента ${index}, будет повторная попытка`);
            // Повторная попытка через небольшую задержку
            setTimeout(() => {
                if (window.initOrderItemSelect2 && typeof window.initOrderItemSelect2 === 'function') {
                    window.initOrderItemSelect2(selectElement);
                    console.log(`[Order Items] ✅ Select2 инициализирован для элемента ${index} (повторная попытка)`);
                }
            }, 300);
        }
    }
    
    items.forEach((selectElement, index) => {
        initOrderItemElement(selectElement, index);
        
        // Затем проверяем, есть ли предзаполненные данные в скрытых полях
        const form = selectElement.closest('.order-item-form');
        const productField = form.querySelector('[name$="-product"]');
        const kitField = form.querySelector('[name$="-product_kit"]');
        const priceField = form.querySelector('[name$="-price"]');

        const hasProduct = productField && productField.value;
        const hasKit = kitField && kitField.value;
        const selectValue = $(selectElement).val();

        if ((hasProduct || hasKit) && !selectValue) {
            // Определяем тип и ID
            const type = hasProduct ? 'product' : 'kit';
            const id = hasProduct ? productField.value : kitField.value;
            
            // Загружаем данные товара через API
            const apiUrl = '{% url "products:api-search-products-variants" %}';
            const requestId = `${type}_${id}`;
            
            $.ajax({
                url: apiUrl,
                type: 'GET',
                dataType: 'json',
                data: {
                    id: requestId
                },
                success: function(data) {
                    if (data.results && data.results.length > 0) {
                        const item = data.results[0];
                        const optionValue = `${type}_${id}`;
                        const optionText = item.text || item.name || 'Товар';
                        
                        // Добавляем option в select
                        const newOption = new Option(optionText, optionValue, true, true);
                        $(selectElement).append(newOption).trigger('change');
                        
                        // Сохраняем оригинальную цену
                        if (priceField && item.actual_price) {
                            priceField.dataset.originalPrice = item.actual_price;
                        }
                        
                        // Если это товар с единицами продажи, загружаем их UI
                        if (type === 'product' && typeof window.loadAndDisplaySalesUnitsFromHidden === 'function') {
                            const form = selectElement.closest('.order-item-form');
                            const salesUnitField = form.querySelector('[name$="-sales_unit"]');
                            const salesUnitId = salesUnitField ? salesUnitField.value : null;
                            
                            if (salesUnitId) {
                                window.loadAndDisplaySalesUnitsFromHidden(id, form, item, salesUnitId);
                            }
                        }
                        
                        // Пересчитываем сумму товаров
                        if (typeof window.updateOrderItemsTotal === 'function') {
                            window.updateOrderItemsTotal();
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error(`[Order Items] Ошибка загрузки товара ${requestId}:`, error);
                }
            });
        }
    });
    
    console.log('[Order Items] Инициализация всех существующих элементов завершена');
    
    /**
     * Загружает и отображает единицы продажи для товара из черновика
     * @param {string} productId - ID товара
     * @param {HTMLElement} form - Элемент формы
     * @param {Object} productData - Данные товара
     * @param {string} savedSalesUnitId - Сохранённый ID единицы продажи
     */
    window.loadAndDisplaySalesUnitsFromHidden = async function(productId, form, productData, savedSalesUnitId) {
        if (typeof window.SalesUnitsModule === 'undefined') return;
        
        var salesUnitContainer = form.querySelector('.sales-unit-container');
        if (!salesUnitContainer) return;
        
        salesUnitContainer.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Загрузка...</span></div>';
        salesUnitContainer.style.display = 'block';
        
        try {
            const result = await window.SalesUnitsModule.fetchSalesUnits(productId);
            if (!result.success || !result.sales_units || result.sales_units.length === 0) {
                salesUnitContainer.style.display = 'none';
                return;
            }
            
            const salesUnits = result.sales_units;
            
            // Создаем select с единицами
            var selectHtml = window.SalesUnitsModule.createSalesUnitSelect(salesUnits);
            salesUnitContainer.innerHTML = `
                <label class="form-label">Единица продажи</label>
                ${selectHtml}
                <div class="available-qty-display mt-1"></div>
            `;
            salesUnitContainer.style.display = 'block';
            
            // Находим созданный select и скрытое поле
            var salesUnitSelect = salesUnitContainer.querySelector('.sales-unit-selector');
            var hiddenSalesUnitField = form.querySelector('[name$="-sales_unit"]');
            
            if (salesUnitSelect && hiddenSalesUnitField) {
                // Синхронизируем visible select с hidden field
                salesUnitSelect.addEventListener('change', function() {
                    hiddenSalesUnitField.value = salesUnitSelect.value;
                });
                
                // Инициализируем обработчики
                window.SalesUnitsModule.initializeSalesUnitHandlers(form);
                
                // Устанавливаем сохранённую единицу
                if (savedSalesUnitId) {
                    salesUnitSelect.value = savedSalesUnitId;
                    hiddenSalesUnitField.value = savedSalesUnitId;
                    salesUnitSelect.dispatchEvent(new Event('change'));
                } else {
                    // Устанавливаем дефолтную единицу
                    const defaultUnit = salesUnits.find(u => u.is_default);
                    if (defaultUnit) {
                        salesUnitSelect.value = defaultUnit.id;
                        hiddenSalesUnitField.value = defaultUnit.id;
                        salesUnitSelect.dispatchEvent(new Event('change'));
                    }
                }
            }
        } catch (error) {
            console.error('[Sales Units] Ошибка загрузки:', error);
            salesUnitContainer.innerHTML = '<small class="text-danger">Ошибка загрузки единиц продажи</small>';
        }
    };
    
    // Переинициализация для форм, которые могут быть добавлены позже
    // Используем MutationObserver для отслеживания новых форм
    if (typeof MutationObserver !== 'undefined') {
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1 && node.classList && node.classList.contains('order-item-form')) {
                        const select2Element = node.querySelector('.select2-order-item');
                        if (select2Element && !$(select2Element).data('select2')) {
                            console.log('[Order Items] Обнаружена новая форма, инициализация Select2...');
                            setTimeout(() => {
                                if (window.initOrderItemSelect2 && typeof window.initOrderItemSelect2 === 'function') {
                                    window.initOrderItemSelect2(select2Element);
                                }
                            }, 100);
                        }
                    }
                });
            });
        });
        
        const container = document.getElementById('order-items-container');
        if (container) {
            observer.observe(container, { childList: true, subtree: true });
            console.log('[Order Items] MutationObserver установлен для отслеживания новых форм');
        }
    }
})();
</script>

<!-- Заполнение скрытых полей для товаров из черновика POS -->
{% if draft_items_json %}
<script>
(function() {
    'use strict';
    
    const draftItemsJson = '{{ draft_items_json|safe }}';
    const draftItems = JSON.parse(draftItemsJson);
    
    if (draftItems.length === 0) {
        console.log('[Draft Items] Пустой массив черновика, устанавливаем флаг и выходим');
        // ВАЖНО: Устанавливаем флаг, чтобы initExistingOrderItems мог продолжить!
        window._draftFieldsFilled = true;
        return;
    }
    
    console.log('[Draft Items] 📦 Найдены товары из черновика:', draftItems.length);
    console.log('[Draft Items] 📋 Данные товаров:', draftItems);
    
    // Функция для заполнения полей
    function fillDraftFields() {
        console.log('[Draft Items] 🔄 Попытка заполнить поля...');
        
        // Проверяем, есть ли формы в DOM
        const firstProductField = document.querySelector('[name="items-0-product"]');
        if (!firstProductField) {
            console.log('[Draft Items] ⏳ Формы ещё не отрендерены, ожидание...');
            setTimeout(fillDraftFields, 50); // Повтор через 50мс
            return;
        }
        
        console.log('[Draft Items] ✅ Формы найдены в DOM, заполнение...');
        
        // Заполняем скрытые поля для каждой формы
        draftItems.forEach((item, index) => {
            console.log(`[Draft Items] ⚙️ Обработка товара ${index}:`, item);
            
            // Находим форму по индексу
            const productField = document.querySelector(`[name="items-${index}-product"]`);
            const kitField = document.querySelector(`[name="items-${index}-product_kit"]`);
            const salesUnitField = document.querySelector(`[name="items-${index}-sales_unit"]`);
            const quantityField = document.querySelector(`[name="items-${index}-quantity"]`);
            const priceField = document.querySelector(`[name="items-${index}-price"]`);
            const isFromShowcaseField = document.querySelector(`[name="items-${index}-is_from_showcase"]`);
            
            if (!productField || !kitField) {
                console.warn(`[Draft Items] ⚠️ Форма ${index} не найдена`);
                return;
            }
            
            console.log(`[Draft Items] 🔍 Поля формы ${index}:`);
            console.log(`  - productField:`, productField);
            console.log(`  - kitField:`, kitField);
            console.log(`  - salesUnitField:`, salesUnitField);
            console.log(`  - isFromShowcaseField:`, isFromShowcaseField);
            
            // Устанавливаем значения
            if (item.type === 'product') {
                productField.value = item.id;
                kitField.value = '';
                if (isFromShowcaseField) {
                    isFromShowcaseField.value = 'false';
                }
                console.log(`[Draft Items] ✅ Установлен product ID: ${item.id}`);
                
                // Устанавливаем sales_unit если есть
                if (item.sales_unit_id && salesUnitField) {
                    salesUnitField.value = item.sales_unit_id;
                    console.log(`[Draft Items] ✅ Установлен sales_unit ID: ${item.sales_unit_id}`);
                } else if (salesUnitField) {
                    salesUnitField.value = '';
                }
            } else if (item.type === 'kit' || item.type === 'showcase_kit') {
                kitField.value = item.id;
                productField.value = '';
                if (salesUnitField) {
                    salesUnitField.value = '';
                }
                
                // КРИТИЧНО: Для showcase_kit устанавливаем is_from_showcase=true
                if (isFromShowcaseField) {
                    if (item.type === 'showcase_kit') {
                        isFromShowcaseField.value = 'true';
                        console.log(`[Draft Items] 🌺 Установлен флаг is_from_showcase=true для витринного комплекта`);
                    } else {
                        isFromShowcaseField.value = 'false';
                    }
                }
                
                console.log(`[Draft Items] ✅ Установлен kit ID: ${item.id} (type: ${item.type})`);
            }
            
            // Устанавливаем количество и цену
            if (quantityField) {
                quantityField.value = item.quantity;
                console.log(`[Draft Items] 🔢 Установлено количество: ${item.quantity}`);
            }
            if (priceField) {
                priceField.value = item.price;
                priceField.dataset.originalPrice = item.price;
                console.log(`[Draft Items] 💰 Установлена цена: ${item.price}`);
            }
        });
        
        console.log('[Draft Items] ✅ Все скрытые поля заполнены');

        // Устанавливаем флаг, что поля заполнены - initExistingOrderItems ждёт этот флаг
        window._draftFieldsFilled = true;
        console.log('[Draft Items] 🚀 Флаг _draftFieldsFilled установлен, initExistingOrderItems может продолжить');
    }
    
    // Запускаем заполнение сразу при загрузке DOM
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', fillDraftFields);
    } else {
        // DOM уже загружен
        fillDraftFields();
    }
})();
</script>
{% endif %}

<!-- Предупреждение о несохраненных данных -->
<script>
/**
 * Предупреждение при попытке покинуть страницу с несохраненными данными
 */
(function() {
    'use strict';

    let isSubmitting = false;

    // При отправке формы - отключаем предупреждение
    const form = document.getElementById('order-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            isSubmitting = true;
        });
    }

    // Показываем предупреждение при закрытии/переходе
    window.addEventListener('beforeunload', function(e) {
        if (isSubmitting) {
            return; // Не показываем предупреждение если форма отправляется
        }

        {% if is_create_page %}
        // Только для создания заказа
        e.preventDefault();
        e.returnValue = 'Несохраненные данные будут потеряны. Вы уверены?';
        return e.returnValue;
        {% endif %}
    });
})();
</script>

<!-- Quill WYSIWYG редактор для поля Резюме -->
<script>
(function() {
    'use strict';

    // Ждём загрузки DOM
    document.addEventListener('DOMContentLoaded', function() {
        const summaryTextarea = document.querySelector('textarea[name="summary"]');
        const quillContainer = document.getElementById('quill-editor-summary');

        if (!summaryTextarea || !quillContainer) {
            return;  // Поле не найдено, выходим
        }

        // Инициализация Quill
        const quill = new Quill('#quill-editor-summary', {
            theme: 'snow',
            placeholder: 'Кратко опишите заказ (например: 21 фридом 60 см в упаковке на наше усмотрение)...',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'size': ['small', false, 'large', 'huge'] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['clean']
                ]
            }
        });

        // Загружаем существующее значение в редактор
        const existingValue = summaryTextarea.value.trim();
        if (existingValue) {
            quill.root.innerHTML = existingValue;
        }

        // Синхронизируем содержимое редактора с textarea при изменениях
        quill.on('text-change', function() {
            const html = quill.root.innerHTML;
            // Если редактор пуст, сохраняем пустую строку
            summaryTextarea.value = html === '<p><br></p>' ? '' : html;
        });

        // При отправке формы убедимся, что значение синхронизировано
        const form = document.getElementById('order-form');
        if (form) {
            form.addEventListener('submit', function() {
                const html = quill.root.innerHTML;
                summaryTextarea.value = html === '<p><br></p>' ? '' : html;
            });
        }
    });
})();
</script>
{% endblock %}

