<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Система учета товаров</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Бургер-меню для мобильных устройств -->
    <div class="burger-menu">
        <div class="burger-icon" onclick="toggleMenu()">☰</div>
        <div class="menu-items">
            <div onclick="showSection('inventory')">Инвентарь</div>
            <div onclick="showSection('cart')">Корзина</div>
            <div onclick="showSection('stats')">Отчеты</div>
        </div>
    </div>

    <div class="container">
        <!-- Колонка 1: Инвентарь -->
        <div class="column inventory active" id="inventory">
            <h2>Инвентарь</h2>
            <!-- Форма добавления товара -->
            <form id="productForm">
                <input type="text" id="productName" placeholder="Название товара" required>
                <input type="number" id="purchasePrice" placeholder="Приходная цена" required>
                <input type="number" id="wholesalePrice" placeholder="Оптовая цена">
                <input type="number" id="retailPrice" placeholder="Розничная цена">
                <input type="number" id="quantity" placeholder="Остаток (пачек)" required>
                <input type="number" id="itemsPerPack" placeholder="Количество штук в пачке" required>
                <button type="submit">Добавить товар</button>
            </form>

            <!-- Поиск по товарам -->
            <div class="search-container">
                <input type="text" id="searchInput" placeholder="Поиск по названию товара">
            </div>

            <!-- Таблица товаров -->
            <table id="productTable">
                <thead>
                    <tr>
                        <th>Название</th>
                        <th>Приходная цена</th>
                        <th>Оптовая цена</th>
                        <th>Розничная цена</th>
                        <th>Остаток (пачек)</th>
                        <th>Штук в пачке</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Строки с товарами будут добавляться сюда -->
                </tbody>
            </table>
        </div>

        <!-- Колонка 2: Корзина -->
        <div class="column cart" id="cart">
            <h2>Корзина</h2>
            <table id="cartTable">
                <thead>
                    <tr>
                        <th>Название</th>
                        <th>Количество</th>
                        <th>Цена за единицу</th>
                        <th>Тип продажи</th>
                        <th>Итого</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Товары в корзине будут добавляться сюда -->
                </tbody>
            </table>
            <div class="discount-container">
                <label for="discountInput">Скидка:</label>
                <input type="number" id="discountInput" placeholder="Введите сумму скидки">
            </div>
            <button id="sellCartBtn" onclick="sellCart()">Продать товары из корзины</button>
        </div>

        <!-- Колонка 3: Отчеты -->
        <div class="column stats" id="stats">
            <h2>Отчеты</h2>
            <div class="stats-content">
                <p>Общее количество проданных товаров: <span id="totalSold">0</span></p>
                <p>Общая выручка: <span id="totalRevenue">0</span></p>
                <p>Общая прибыль: <span id="totalProfit">0</span></p>
            </div>
            <div class="receipts-container">
                <h3>Чеки за месяц</h3>
                <!-- Поле ввода даты и кнопка фильтрации -->
                <div class="filter-container">
                    <input type="date" id="filterDateInput">
                    <button onclick="filterReceiptsByDate()">Фильтровать по дате</button>
                    <button onclick="clearDateFilter()">Сбросить фильтр</button>
                </div>
                <div id="receiptsList">
                    <!-- Список чеков будет добавляться сюда -->
                </div>
            </div>
        </div>
    </div>

    <!-- Модальное окно для чека -->
    <div id="receiptModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Чек продажи</h2>
            <p>Дата и время: <span id="receiptDateTime"></span></p>
            <table id="receiptTable">
                <thead>
                    <tr>
                        <th>Название</th>
                        <th>Количество</th>
                        <th>Цена за единицу</th>
                        <th>Итого</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Товары в чеке будут добавляться сюда -->
                </tbody>
            </table>
            <p>Общая сумма: <span id="receiptTotal"></span></p>
            <p>Скидка: <span id="receiptDiscount"></span></p>
            <p>Итого к оплате: <span id="receiptFinalTotal"></span></p>
            <button id="confirmSaleBtn">Подтвердить</button>
            <button id="cancelSaleBtn">Отмена</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>