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' %}">
{% endblock %}

{% block content %}
<!-- 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-md-8" style="display: flex; flex-direction: column; height: 100%;">
      <!-- Search Box -->
      <div class="mb-3">
        <input type="text" class="form-control" id="searchInput" placeholder="Поиск по товарам...">
      </div>
      
      <!-- Categories -->
      <div class="mb-3">
        <div class="row g-3" id="categoryGrid"></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-md-4">
      <div class="right-panel-fixed d-flex flex-column">
        <!-- 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>
          <button class="btn btn-outline-primary btn-sm" id="customerSelectBtn">
            <i class="bi bi-person"></i> Выбрать клиента
          </button>
        </div>
        <div class="card-body d-flex flex-column" style="min-height: 0;">
          <div id="cartList" class="flex-grow-1 mb-3" style="overflow-y: auto;"></div>
          
          <div class="mt-auto">
            <div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-top pt-3">
              <h5 class="mb-0">Итого:</h5>
              <h5 class="mb-0 text-primary" id="cartTotal">0.00</h5>
            </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="height: 60px;">
                <i class="bi bi-flower1"></i><br>На витрину
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-outline-primary rounded-3 w-100" id="scheduleLater" style="height: 60px;">
                <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="height: 60px;">
                <i class="bi bi-trash"></i><br>Очистить
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-outline-secondary rounded-3 w-100" style="height: 60px;">
              </button>
            </div>
            <div class="col-4">
              <button class="btn btn-success rounded-3 w-100" id="checkoutNow" style="height: 60px;">
                <i class="bi bi-check2-circle"></i><br>Продать
              </button>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
  </div>
</div>

<!-- Modal: Создание временного комплекта на витрину -->
<div class="modal fade" id="createTempKitModal" tabindex="-1" aria-labelledby="createTempKitModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <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="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">
          <label class="form-label">Товары в комплекте</label>
          <div class="border rounded p-3" id="tempKitItemsList" style="max-height: 300px; overflow-y: auto;">
            <!-- Динамически заполняется через JS -->
          </div>
        </div>
        
        <!-- Итоговая цена (расчётная) -->
        <div class="alert alert-info mb-0">
          <strong>Расчётная цена:</strong> <span id="tempKitEstimatedPrice">0.00</span> руб.
          <small class="d-block text-muted">Цена будет пересчитана автоматически после создания</small>
        </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="confirmCreateTempKit">
          <i class="bi bi-check-circle"></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 src="{% static 'pos/js/terminal.js' %}"></script>
{% endblock %}