{% extends 'inventory/base_inventory_minimal.html' %}
{% load inventory_filters %}

{% block inventory_title %}
    {% if form.instance.pk %}
        Редактирование продажи
    {% else %}
        Новая продажа
    {% endif %}
{% endblock %}
{% block breadcrumb_current %}Продажи{% endblock %}

{% block inventory_content %}
<div class="card">
    <div class="card-header">
        <h4 class="mb-0">
            {% if form.instance.pk %}
                Редактирование продажи
            {% else %}
                Регистрация новой продажи
            {% endif %}
        </h4>
    </div>

    <div class="card-body">
        <form method="post" class="form">
            {% csrf_token %}

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="{{ form.product.id_for_label }}" class="form-label">
                        {{ form.product.label }} <span class="text-danger">*</span>
                    </label>
                    {{ form.product }}
                    {% if form.product.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.product.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <div class="col-md-6 mb-3">
                    <label for="{{ form.warehouse.id_for_label }}" class="form-label">
                        {{ form.warehouse.label }} <span class="text-danger">*</span>
                    </label>
                    {{ form.warehouse }}
                    {% if form.warehouse.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.warehouse.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Единица продажи (отображается только для товаров с единицами) -->
            <div class="row" id="sales-unit-row" style="display: none;">
                <div class="col-md-12 mb-3">
                    <label for="{{ form.sales_unit.id_for_label }}" class="form-label">
                        {{ form.sales_unit.label }}
                    </label>
                    {{ form.sales_unit }}
                    <div class="available-qty-display mt-1"></div>
                    {% if form.sales_unit.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.sales_unit.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="{{ form.quantity.id_for_label }}" class="form-label">
                        {{ form.quantity.label }} <span class="text-danger">*</span>
                    </label>
                    {{ form.quantity|smart_quantity }}
                    {% if form.quantity.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.quantity.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <div class="col-md-6 mb-3">
                    <label for="{{ form.sale_price.id_for_label }}" class="form-label">
                        {{ form.sale_price.label }} <span class="text-danger">*</span>
                    </label>
                    {{ form.sale_price }}
                    {% if form.sale_price.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.sale_price.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="{{ form.order.id_for_label }}" class="form-label">
                        {{ form.order.label }}
                    </label>
                    {{ form.order }}
                    {% if form.order.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.order.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <div class="col-md-6 mb-3">
                    <label for="{{ form.document_number.id_for_label }}" class="form-label">
                        {{ form.document_number.label }}
                    </label>
                    {{ form.document_number }}
                    {% if form.document_number.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.document_number.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle"></i>
                    {% if form.instance.pk %}
                        Сохранить
                    {% else %}
                        Создать
                    {% endif %}
                </button>
                <a href="{% url 'inventory:sale-list' %}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Отменить
                </a>
            </div>
        </form>
    </div>
</div>

<style>
    select, textarea, input {
        width: 100%;
    }
</style>

{% load static %}
<script src="{% static 'products/js/sales-units.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const productField = document.querySelector('[name="product"]');
    const warehouseField = document.querySelector('[name="warehouse"]');
    const salesUnitField = document.querySelector('[name="sales_unit"]');
    const salePriceField = document.querySelector('[name="sale_price"]');
    const salesUnitRow = document.getElementById('sales-unit-row');
    const formElement = document.querySelector('form');

    // Функция загрузки единиц продажи
    async function loadSalesUnits() {
        const productId = productField.value;
        const warehouseId = warehouseField.value;

        // Если товар не выбран - скрываем единицы
        if (!productId) {
            salesUnitRow.style.display = 'none';
            salesUnitField.innerHTML = '<option value="">---------</option>';
            return;
        }

        try {
            // Загружаем единицы продажи
            const result = await window.SalesUnitsModule.fetchSalesUnits(productId, warehouseId);

            if (result.success && result.sales_units && result.sales_units.length > 0) {
                // Создаем options для select
                const selectHtml = window.SalesUnitsModule.createSalesUnitSelect(result.sales_units);

                // Извлекаем options из HTML
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = selectHtml;
                const newSelect = tempDiv.querySelector('select');

                // Очищаем существующий select и добавляем новые options
                salesUnitField.innerHTML = '';
                Array.from(newSelect.options).forEach(opt => {
                    salesUnitField.add(opt.cloneNode(true));
                });

                // Показываем блок с единицами
                salesUnitRow.style.display = 'block';

                // Выбираем дефолтную единицу если есть
                const defaultUnit = result.sales_units.find(u => u.is_default);
                if (defaultUnit) {
                    salesUnitField.value = defaultUnit.id;
                }

                // Инициализируем обработчики
                window.SalesUnitsModule.initializeSalesUnitHandlers(formElement);
            } else {
                // Нет единиц - скрываем блок
                salesUnitRow.style.display = 'none';
                salesUnitField.innerHTML = '<option value="">---------</option>';
            }
        } catch (error) {
            console.error('[Sale Form] Ошибка загрузки единиц продажи:', error);
            salesUnitRow.style.display = 'none';
        }
    }

    // Загружаем единицы при изменении товара или склада
    if (productField) {
        productField.addEventListener('change', loadSalesUnits);
    }
    if (warehouseField) {
        warehouseField.addEventListener('change', loadSalesUnits);
    }

    // Загружаем единицы при загрузке страницы (если товар уже выбран)
    if (productField && productField.value) {
        loadSalesUnits();
    }
});
</script>
{% endblock %}
