octopus/myproject/pos/templates/pos/terminal.html

{% extends 'base.html' %}
{% load static %}
{% block title %}POS Terminal{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'pos/css/terminal.css' %}">
<link rel="stylesheet" href="{% static 'products/css/product-search-picker.css' %}">
{% endblock %}

{% block content %}
<!-- CSRF Token для AJAX запросов -->
{% csrf_token %}

<!-- Main POS Container -->
<div class="pos-main-container">
  <div class="pos-container">
  <div class="row g-3" style="height: 100%;">
    <!-- Products Grid (Left side - 8/12) -->
    <div class="col-12 col-md-7" style="display: flex; flex-direction: column; height: 100%;">
      <!-- Search Box -->
      <div class="mb-3">
        <div class="input-group">
          <input type="text" class="form-control" id="searchInput" placeholder="Поиск по товарам (мин. 3 символа)...">
          <button class="btn btn-outline-secondary" type="button" id="clearSearchBtn" style="display: none;">
            <i class="bi bi-x-lg"></i>
          </button>
        </div>
      </div>
      
      <!-- Categories -->
      <div class="mb-3 categories-wrapper" id="categoriesWrapper">
        <button class="categories-toggle w-100 d-flex align-items-center justify-content-between py-2 px-0 bg-transparent border-0" type="button" id="categoriesToggle">
          <span class="fw-semibold small">Категории</span>
          <i class="bi bi-chevron-down transition-transform" id="categoriesChevron"></i>
        </button>
        <div class="categories-content" id="categoriesContent">
          <div class="row g-2" id="categoryGrid"></div>
        </div>
      </div>
      
      <!-- Products Grid (Блок товаров) - Прокручиваемая область -->
      <div class="products-scrollable">
        <div class="row g-3" id="productGrid"></div>
      </div>
    </div>
    
    <!-- Right Panel (4/12) - Fixed -->
    <div class="col-12 col-md-5">
      <div class="right-panel-fixed d-flex flex-column">
        <!-- Информация о складе (всегда показываем блок для фиксированной позиции) -->
        <div class="card mb-2">
          <div class="card-body py-2 px-3 d-flex justify-content-between align-items-center">
            {% if current_warehouse %}
            <div>
              <small class="text-muted d-block" style="font-size: 0.75rem;">Склад:</small>
              <strong style="font-size: 0.95rem;">{{ current_warehouse.name }}</strong>
            </div>
            <button class="btn btn-sm btn-outline-secondary" id="changeWarehouseBtn" style="font-size: 0.75rem;">
              <i class="bi bi-arrow-left-right"></i> Сменить
            </button>
            {% else %}
            <div class="text-danger">
              <small class="d-block" style="font-size: 0.75rem;">Склад:</small>
              <strong style="font-size: 0.95rem;"><i class="bi bi-exclamation-triangle me-1"></i>Не выбран</strong>
            </div>
            {% endif %}
          </div>
        </div>
        
        <!-- Cart Panel -->
        <div class="card mb-2 flex-grow-1" style="min-height: 0;">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
          <h6 class="mb-0">Корзина</h6>
          <div class="d-flex gap-1 align-items-center">
            <button class="btn btn-outline-primary btn-sm d-flex align-items-center" id="customerSelectBtn">
              <i class="bi bi-person"></i>
              <span id="customerSelectBtnText">Выбрать клиента</span>
            </button>
            <a href="#" id="customerProfileLink" class="btn btn-sm btn-outline-secondary" title="Открыть анкету клиента" target="_blank" style="display: none;">
              <i class="bi bi-box-arrow-up-right"></i>
            </a>
            <button class="btn btn-sm btn-outline-danger" id="resetCustomerBtn" title="Сбросить на системного клиента" style="display: none;">
              <i class="bi bi-x-lg"></i>
            </button>
          </div>
        </div>
        <div class="card-body d-flex flex-column" style="min-height: 0;">
          <div id="cartList" class="flex-grow-1" style="overflow-y: auto;"></div>

          <div class="mt-auto">
            <div class="d-flex justify-content-between align-items-center py-1 border-top">
              <strong class="mb-0">Итого:</strong>
              <strong class="mb-0 text-primary fs-5" id="cartTotal">0.00</strong>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Action Buttons Panel -->
      <div class="card action-buttons-panel">
        <div class="card-body p-2">
          <div class="row g-2">
            <div class="col-4">
              <button class="btn btn-outline-warning rounded-3 w-100" id="addToShowcaseBtn" style="min-height: 44px;">
                <i class="bi bi-flower1"></i><br>На витрину
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-outline-primary rounded-3 w-100" id="scheduleLater" style="min-height: 44px;">
                <i class="bi bi-calendar2"></i><br>Отложенный заказ
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-outline-secondary rounded-3 w-100" id="clearCart" style="min-height: 44px;">
                <i class="bi bi-trash"></i><br>Очистить
              </button>
            </div>
            <div class="col-4 offset-4">
              <button class="btn btn-success rounded-3 w-100" id="checkoutNow" style="min-height: 44px;">
                <i class="bi bi-check2-circle"></i><br>Продать
              </button>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
  </div>
</div>

<!-- Мобильная плавающая корзина -->
<div class="mobile-cart-bar" id="mobileCartBar">
  <div class="mobile-cart-summary" id="mobileCartSummary">
    <span class="mobile-cart-count">0 товаров</span>
    <span class="mobile-cart-total">0.00 ₽</span>
  </div>
  <div class="mobile-cart-actions">
    <button class="btn btn-success btn-sm" id="mobileCheckoutBtn">
      <i class="bi bi-check2-circle"></i> <span>Продать</span>
    </button>
    <button class="btn btn-outline-secondary btn-sm" id="mobileClearCartBtn" title="Очистить корзину">
      <i class="bi bi-trash"></i>
    </button>

    <!-- Dropdown "Ещё" -->
    <div class="dropdown">
      <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button"
              id="mobileMoreBtn" data-bs-toggle="dropdown">
        <i class="bi bi-three-dots"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li>
          <button class="dropdown-item" id="mobileScheduleLaterBtn" type="button">
            <i class="bi bi-calendar2 me-2"></i>Отложенный заказ
          </button>
        </li>
        <li>
          <button class="dropdown-item" id="mobileAddToShowcaseBtn" type="button">
            <i class="bi bi-flower1 me-2"></i>На витрину
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

<!-- Мобильная корзина (overlay) -->
<div class="mobile-cart-overlay" id="mobileCartOverlay">
  <div class="mobile-cart-content">
    <div class="mobile-cart-header">
      <h6 class="mb-0">Корзина</h6>
      <button class="btn-close" id="mobileCartClose"></button>
    </div>
    <div class="mobile-cart-body" id="mobileCartBody">
      <!-- Содержимое корзины динамически -->
    </div>
  </div>
</div>

<!-- Modal: Создание временного комплекта на витрину -->
<div class="modal fade" id="createTempKitModal" tabindex="-1" aria-labelledby="createTempKitModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="createTempKitModalLabel">
          <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">
        <div class="row">
          <!-- Левая колонка: основные поля -->
          <div class="col-12 col-md-6">
            <!-- Название комплекта -->
            <div class="mb-3">
              <label for="tempKitName" class="form-label">Название комплекта *</label>
              <input type="text" class="form-control" id="tempKitName" placeholder="Введите название" required>
            </div>
            
            <!-- Выбор витрины -->
            <div class="mb-3">
              <label for="showcaseSelect" class="form-label">Витрина *</label>
              <select class="form-select" id="showcaseSelect" required>
                <option value="">Загрузка...</option>
              </select>
            </div>

            <!-- Количество букетов (только при создании) -->
            <div class="mb-3" id="showcaseKitQuantityBlock">
              <label for="showcaseKitQuantity" class="form-label">Сколько букетов создать</label>
              <input type="number" class="form-control" id="showcaseKitQuantity" value="1" min="1" max="99">
              <small class="text-muted">Будет создано указанное количество одинаковых букетов на витрину</small>
            </div>

            <!-- Описание -->
            <div class="mb-3">
              <label for="tempKitDescription" class="form-label">Описание (опционально)</label>
              <textarea class="form-control" id="tempKitDescription" rows="3" placeholder="Краткое описание комплекта"></textarea>
            </div>
            
            <!-- Загрузка фото -->
            <div class="mb-3">
              <label for="tempKitPhoto" class="form-label">Фото комплекта (опционально)</label>
              <input type="file" class="form-control" id="tempKitPhoto" accept="image/*">
              <div id="photoPreview" class="mt-2" style="display: none;">
                <img id="photoPreviewImg" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                <button type="button" class="btn btn-sm btn-danger ms-2" id="removePhoto">
                  <i class="bi bi-x"></i> Удалить
                </button>
              </div>
            </div>
          </div>
          
          <!-- Правая колонка: цены и состав -->
          <div class="col-12 col-md-6">
            <!-- Список товаров в корзине -->
            <div class="mb-3">
              <label class="form-label">Товары в комплекте</label>
              <div class="border rounded p-2" id="tempKitItemsList" style="max-height: 200px; overflow-y: auto; background: #f8f9fa;">
                <!-- Динамически заполняется через JS -->
              </div>
            </div>
            
            <!-- Добавление товаров в комплект (режим редактирования) -->
            <div class="mb-3" id="addProductBlock" style="display: none;">
              <button class="btn btn-sm btn-outline-primary w-100" type="button" data-bs-toggle="collapse" data-bs-target="#productSearchCollapse" aria-expanded="false">
                <i class="bi bi-plus-circle"></i> Добавить товар в комплект
              </button>
              
              <div class="collapse mt-2" id="productSearchCollapse">
                <div class="card card-body p-2">
                  {% load static %}
                  {% include 'products/components/product_search_picker.html' with container_id='temp-kit-product-picker' title='Поиск товара...' show_filters=False show_view_toggle=False add_button_text='Добавить' content_height='200px' %}
                </div>
              </div>
            </div>
            
            <!-- Блок ценообразования -->
            <div class="card">
              <div class="card-header bg-light">
                <strong>Ценообразование</strong>
              </div>
              <div class="card-body">
                <!-- Базовая цена -->
                <div class="mb-2">
                  <small class="text-muted">Базовая цена (сумма компонентов):</small>
                  <div class="fw-bold" id="tempKitBasePrice">0.00 руб.</div>
                </div>
                
                <!-- Корректировка цены -->
                <div class="mb-2">
                  <label for="priceAdjustmentType" class="form-label small">Корректировка цены</label>
                  <select class="form-select form-select-sm" id="priceAdjustmentType">
                    <option value="none">Без изменения</option>
                    <option value="increase_percent">Увеличить на %</option>
                    <option value="increase_amount">Увеличить на сумму</option>
                    <option value="decrease_percent">Уменьшить на %</option>
                    <option value="decrease_amount">Уменьшить на сумму</option>
                  </select>
                </div>
                
                <div class="mb-2" id="adjustmentValueBlock" style="display: none;">
                  <label for="priceAdjustmentValue" class="form-label small">Значение</label>
                  <input type="number" class="form-control form-control-sm" id="priceAdjustmentValue" 
                         min="0" step="0.01" value="0" placeholder="0.00">
                </div>
                
                <!-- Расчётная цена с корректировкой -->
                <div class="mb-2 pb-2 border-bottom">
                  <small class="text-muted">Расчётная цена:</small>
                  <div class="fw-bold text-primary" id="tempKitCalculatedPrice">0.00 руб.</div>
                </div>
                
                <!-- Ручная финальная цена (sale_price) -->
                <div class="mb-0">
                  <div class="form-check form-switch mb-2">
                    <input class="form-check-input" type="checkbox" id="useSalePrice">
                    <label class="form-check-label small" for="useSalePrice">
                      Установить свою цену (приоритет)
                    </label>
                  </div>
                  <div id="salePriceBlock" style="display: none;">
                    <input type="number" class="form-control form-control-sm" id="salePrice" 
                           min="0" step="0.01" placeholder="Введите цену">
                  </div>
                </div>
                
                <!-- Итоговая цена продажи -->
                <div class="alert alert-success mt-3 mb-0">
                  <strong>Итоговая цена продажи:</strong><br>
                  <span class="fs-4" id="tempKitFinalPrice">0.00</span> руб.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <!-- Кнопка "Разобрать" (отображается только в режиме редактирования) -->
        <button type="button" class="btn btn-danger me-auto" id="disassembleKitBtn" style="display: none;">
          <i class="bi bi-scissors"></i> Разобрать букет
        </button>

        <!-- Правая группа кнопок -->
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="button" class="btn btn-primary" id="confirmCreateTempKit">
          <i class="bi bi-check-circle"></i> Создать и зарезервировать
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Модалка: Продажа -->
<div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-md-down" style="max-width: 85vw;">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title" id="checkoutModalLabel">
          <i class="bi bi-cash-stack"></i> Продажа
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body py-2">
        <div class="row g-3">
          <!-- Левая колонка: состав заказа -->
          <div class="col-12 col-md-5">
            <!-- Информация о клиенте и баланс в одной строке -->
            <div class="row g-2 mb-2">
              <div class="col-auto">
                <label class="form-label fw-semibold small mb-1">Клиент</label>
                <div class="d-flex gap-1">
                  <button class="btn btn-outline-primary btn-sm" id="checkoutCustomerSelectBtn" style="font-size: 0.85rem; padding: 0.25rem 0.5rem;">
                    <i class="bi bi-person me-1"></i>
                    <span id="checkoutCustomerSelectBtnText">Выбрать</span>
                  </button>
                  <button class="btn btn-sm btn-outline-danger" id="checkoutResetCustomerBtn" title="Сброс" style="display: none; font-size: 0.85rem; padding: 0.25rem 0.5rem;">
                    <i class="bi bi-x-lg"></i>
                  </button>
                </div>
              </div>
              <div class="col" id="checkoutWalletBalance" style="display: none;">
                <label class="form-label fw-semibold small mb-1">Баланс кошелька</label>
                <div class="alert alert-info py-1 px-2 mb-0" style="font-size: 0.9rem;">
                  <i class="bi bi-wallet2"></i>
                  <span id="checkoutWalletBalanceAmount">0.00</span> руб.
                </div>
              </div>
            </div>

            <!-- Состав заказа -->
            <div class="mb-2">
              <strong class="small">Состав заказа</strong>
              <div class="border rounded p-2 mt-1" id="checkoutItems" style="background: #f8f9fa; font-size: 0.9rem;">
                <!-- Заполняется из JS -->
              </div>
            </div>

            <!-- Комментарий к заказу -->
            <div class="mb-2">
              <label for="orderNote" class="form-label small mb-1">Комментарий</label>
              <input type="text" class="form-control form-control-sm" id="orderNote" placeholder="Примечание к заказу">
            </div>
          </div>

          <!-- Правая колонка: оплата -->
          <div class="col-12 col-md-7">
            <div class="card mb-0">
              <div class="card-header bg-light py-2">
                <strong class="small">Оплата</strong>
              </div>
              <div class="card-body p-2">
                <!-- Итого к оплате -->
                <div class="mb-2 pb-2 border-bottom">
                  <small class="text-muted">Итого к оплате:</small>
                  <div class="fw-bold text-success fs-5" id="checkoutFinalPrice">0.00 руб.</div>
                </div>

                <!-- Скидки -->
                <div class="mb-2 pb-2 border-bottom">
                  <small class="text-muted d-block mb-1">Скидки</small>

                  <!-- Автоматические скидки -->
                  <div id="autoDiscountsContainer" class="mb-2" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center">
                      <div class="alert alert-success py-1 px-2 mb-0" style="font-size: 0.85rem; flex: 1;">
                        <i class="bi bi-magic me-1"></i>
                        <strong>Автоматически:</strong>
                        <div id="autoDiscountsList"></div>
                      </div>
                      <button type="button" class="btn btn-sm btn-link text-danger p-1 ms-2" id="skipAutoDiscountBtn" style="display: none; min-width: 40px; min-height: 40px;" title="Отменить скидку">
                        <i class="bi bi-x-lg fs-5"></i>
                      </button>
                    </div>
                  </div>

                  <!-- Выбранная скидка вручную -->
                  <div id="manualDiscountContainer" class="mb-2" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center">
                      <span class="badge bg-info text-dark">
                        <i class="bi bi-tag me-1"></i>
                        <span id="manualDiscountName"></span>
                        <span id="manualDiscountAmount" class="ms-1"></span>
                      </span>
                      <button type="button" class="btn btn-sm btn-link text-danger p-0" id="removeManualDiscountBtn">
                        <i class="bi bi-x-lg"></i>
                      </button>
                    </div>
                  </div>

                  <!-- Dropdown для выбора скидки -->
                  <div class="dropdown mb-2">
                    <button class="btn btn-sm btn-outline-primary w-100 dropdown-toggle" type="button"
                            id="selectDiscountBtn" data-bs-toggle="dropdown">
                      <i class="bi bi-plus-circle me-1"></i> Добавить скидку
                    </button>
                    <ul class="dropdown-menu w-100" id="discountsDropdownList">
                      <li><span class="dropdown-item-text small text-muted">Загрузка...</span></li>
                    </ul>
                  </div>

                  <!-- Произвольная скидка -->
                  <div class="input-group input-group-sm mb-2">
                    <span class="input-group-text"><i class="bi bi-percent"></i></span>
                    <input type="number" class="form-control" id="customDiscountInput"
                           placeholder="Сумма или %" min="0" step="0.01">
                    <button class="btn btn-outline-secondary" type="button" id="applyCustomDiscountBtn">
                      <i class="bi bi-check-lg"></i>
                    </button>
                    <button class="btn btn-outline-danger" type="button" id="removeCustomDiscountBtn" style="display: none;">
                      <i class="bi bi-x-lg"></i>
                    </button>
                  </div>
                  <div class="form-check form-check-sm mb-2">
                    <input class="form-check-input" type="checkbox" id="customDiscountIsPercent" checked>
                    <label class="form-check-label small" for="customDiscountIsPercent">
                      Процент (снимите галочку для фиксированной суммы в рублях)
                    </label>
                  </div>
                  <div id="customDiscountError" class="text-danger small mb-2" style="display: none;"></div>

                  <!-- Промокод -->
                  <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="bi bi-ticket-perforated"></i></span>
                    <input type="text" class="form-control" id="promoCodeInput"
                           placeholder="Промокод" style="text-transform: uppercase;">
                    <button class="btn btn-outline-secondary" type="button" id="applyPromoBtn">
                      <i class="bi bi-check-lg"></i>
                    </button>
                    <button class="btn btn-outline-danger" type="button" id="removePromoBtn" style="display: none;">
                      <i class="bi bi-x-lg"></i>
                    </button>
                  </div>
                  <div id="promoCodeError" class="text-danger small mt-1" style="display: none;"></div>
                  <div id="promoCodeSuccess" class="text-success small mt-1" style="display: none;"></div>

                  <!-- Итоговая информация по скидкам -->
                  <div id="discountsSummary" class="mt-2 pt-2 border-top" style="display: none;">
                    <div class="d-flex justify-content-between small text-muted">
                      <span>Подитог:</span>
                      <span id="discountsSubtotal">0.00 руб.</span>
                    </div>
                    <div class="d-flex justify-content-between small text-success">
                      <span>Общая скидка:</span>
                      <span id="discountsTotalDiscount">-0.00 руб.</span>
                    </div>
                    <div id="itemDiscountsBreakdown" class="mt-1 small text-muted">
                      <!-- Скидки на позиции -->
                    </div>
                  </div>
                </div>

                <!-- Переключатель режима -->
                <div class="mb-2">
                  <label class="form-label fw-semibold small mb-1">Режим оплаты</label>
                  <div class="btn-group w-100" role="group">
                    <button type="button"
                            class="btn btn-sm btn-outline-primary active"
                            id="singlePaymentMode">
                      Одним способом
                    </button>
                    <button type="button"
                            class="btn btn-sm btn-outline-primary"
                            id="mixedPaymentMode">
                      Смешанная
                    </button>
                  </div>
                </div>

                <!-- Контейнер для PaymentWidget -->
                <div id="paymentWidgetContainer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="button" class="btn btn-success" id="confirmCheckoutBtn">
          <i class="bi bi-check2-circle"></i> Подтвердить продажу
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Модалка: Выбор склада -->
<div class="modal fade" id="selectWarehouseModal" tabindex="-1" aria-labelledby="selectWarehouseModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="selectWarehouseModalLabel">
          <i class="bi bi-building"></i> Выбор склада
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="list-group" id="warehouseList">
          {% for warehouse in warehouses %}
          <button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center warehouse-item"
                  data-warehouse-id="{{ warehouse.id }}"
                  data-warehouse-name="{{ warehouse.name }}">
            <div>
              <strong>{{ warehouse.name }}</strong>
              {% if warehouse.is_default %}
              <span class="badge bg-warning text-dark ms-2">По умолчанию</span>
              {% endif %}
            </div>
            {% if warehouse.id == current_warehouse.id %}
            <i class="bi bi-check-circle-fill text-success"></i>
            {% endif %}
          </button>
          {% endfor %}
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
      </div>
    </div>
  </div>
</div>

<!-- Модалка: Выбор клиента -->
<div class="modal fade" id="selectCustomerModal" tabindex="-1" aria-labelledby="selectCustomerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="selectCustomerModalLabel">
          <i class="bi bi-person-search"></i> Выбор клиента
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="customerSearchInput" class="form-label">Поиск клиента</label>
          <input type="text" class="form-select" id="customerSearchInput"
                 placeholder="Начните вводить имя, телефон или email (минимум 3 символа)">
        </div>

        <div class="d-grid gap-2">
          <button type="button" class="btn btn-outline-success" id="createNewCustomerBtn">
            <i class="bi bi-person-plus"></i> Создать нового клиента
          </button>
          <button type="button" class="btn btn-outline-secondary" id="selectSystemCustomerBtn">
            <i class="bi bi-person"></i> Выбрать системного клиента (анонимный)
          </button>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
      </div>
    </div>
  </div>
</div>

<!-- Модалка: Создание нового клиента -->
<div class="modal fade" id="createCustomerModal" tabindex="-1" aria-labelledby="createCustomerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-sm-down">
    <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 class="mb-3">
          <label for="newCustomerName" class="form-label">Имя *</label>
          <input type="text" class="form-control" id="newCustomerName" placeholder="Введите имя клиента" required>
        </div>

        <div class="mb-3">
          <label for="newCustomerPhone" class="form-label">Телефон</label>
          <input type="text" class="form-control" id="newCustomerPhone" placeholder="+375XXXXXXXXX">
        </div>

        <div class="mb-3">
          <label for="newCustomerEmail" class="form-label">Email</label>
          <input type="email" class="form-control" id="newCustomerEmail" placeholder="email@example.com">
        </div>

        <div id="createCustomerError" class="alert alert-danger d-none"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="button" class="btn btn-primary" id="confirmCreateCustomerBtn">
          <i class="bi bi-check-circle"></i> Создать
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Модалка: Выбор единицы продажи товара -->
<div class="modal fade" id="selectProductUnitModal" tabindex="-1" aria-labelledby="selectProductUnitModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="selectProductUnitModalLabel">
          <i class="bi bi-box-seam"></i> <span id="unitModalProductName"></span>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <!-- Левая колонка: список единиц продажи -->
          <div class="col-12 col-md-6">
            <label class="form-label fw-semibold">Выберите единицу продажи</label>
            <div id="unitSelectionList" class="d-flex flex-column gap-2" style="max-height: 400px; overflow-y: auto;">
              <!-- Заполняется через JavaScript -->
            </div>
          </div>
          
          <!-- Правая колонка: параметры -->
          <div class="col-12 col-md-6">
            <div class="card">
              <div class="card-header bg-light">
                <strong>Параметры добавления</strong>
              </div>
              <div class="card-body">
                <!-- Выбранная единица -->
                <div class="mb-3">
                  <label class="form-label small">Выбрана единица</label>
                  <div id="selectedUnitDisplay" class="fw-semibold text-primary">—</div>
                </div>
                
                <!-- Количество -->
                <div class="mb-3">
                  <label for="unitModalQuantity" class="form-label">Количество</label>
                  <div class="input-group">
                    <button class="btn btn-outline-secondary" type="button" id="unitQtyDecrement">
                      <i class="bi bi-dash"></i>
                    </button>
                    <input type="number" class="form-control text-center" id="unitModalQuantity" 
                           value="1" min="0.001" step="1">
                    <button class="btn btn-outline-secondary" type="button" id="unitQtyIncrement">
                      <i class="bi bi-plus"></i>
                    </button>
                  </div>
                  <div id="unitQtyError" class="text-danger small mt-1" style="display: none;"></div>
                  <div id="unitQtyHint" class="text-muted small mt-1"></div>
                </div>
                
                <!-- Цена -->
                <div class="mb-3">
                  <label for="unitModalPrice" class="form-label">Цена за единицу</label>
                  <input type="number" class="form-control" id="unitModalPrice"
                           value="0" min="0" step="0.01">
                  <div id="priceOverrideIndicator" class="text-warning small mt-1" style="display: none;">
                    <i class="bi bi-exclamation-triangle"></i> Цена изменена
                  </div>
                </div>
                
                <!-- Итого -->
                <div class="alert alert-info mb-0">
                  <div class="d-flex justify-content-between align-items-center">
                    <strong>Итого:</strong>
                    <span class="fs-4" id="unitModalSubtotal">0.00 ₽</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="button" class="btn btn-success" id="confirmAddUnitToCart" disabled>
          <i class="bi bi-cart-plus"></i> Добавить в корзину
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Hidden data containers for JavaScript -->
<script id="categoriesData" type="application/json">{{ categories_json|safe }}</script>
<script id="itemsData" type="application/json">{{ items_json|safe }}</script>
<script id="showcaseKitsData" type="application/json">{{ showcase_kits_json|safe }}</script>
<script id="systemCustomerData" type="application/json">{{ system_customer_json|safe }}</script>
<script id="selectedCustomerData" type="application/json">{{ selected_customer_json|safe }}</script>
<script id="cartData" type="application/json">{{ cart_data|safe }}</script>
<script id="currentWarehouseData" type="application/json">
{
  "id": {% if current_warehouse %}{{ current_warehouse.id }}{% else %}null{% endif %},
  "name": "{% if current_warehouse %}{{ current_warehouse.name|escapejs }}{% else %}""{% endif %}"
}
</script>

<script src="{% static 'products/js/product-search-picker.js' %}"></script>
<script src="{% static 'pos/js/terminal.js' %}"></script>
{% endblock %}