---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моделирование работы маркетплейса</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #333;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #eee;
        }
        .controls {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

    <h1>Список товаров</h1>

    <div class="controls">
        <!-- Поле ввода количества товаров -->
        <label>Сколько товаров вывести? 
            <input type="number" id="countInput" value="10" min="1" max="50">
        </label>
        <button onclick="startGeneration()">Получить товары</button>
        
        <br><br>

        <!-- Выпадающий список для сортировки -->
        <label>Сортировка (список): 
            <select id="sortSelect" onchange="sortFromSelect()">
                <option value="none">Без сортировки</option>
                <option value="name">По названию</option>
                <option value="quantity">По количеству</option>
            </select>
        </label>

        <!-- Кнопки для сортировки -->
        <button onclick="sortBy('name')">Сортировать по названию</button>
        <button onclick="sortBy('price')">Сортировать по цене</button>
        <button onclick="sortBy('quantity')">Сортировать по кол-ву</button>
    </div>

    <!-- Таблица для вывода -->
    <table>
        <thead>
            <tr>
                <th>Название</th>
                <th>Цена</th>
                <th>Кол-во</th>
                <th>Описание</th>
                <th>Бренд</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <!-- Сюда JS будет вставлять строки -->
        </tbody>
    </table>

    <script>
        // --- ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ (Массивы) ---
        
        // Массив продуктов (все данные хранятся здесь)
        let products = []; 

        // Массив брендов (5-7 современных брендов)
        const brands = ['Samsung', 'Apple', 'Xiaomi', 'Huawei', 'Sony', 'LG', 'Asus'];

        // Строки с буквами и цифрами для генерации названий
        const alphabetLower = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя';
        const alphabetUpper = 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ';
        const digits = '0123456789';

        // Массив слов для описания
        const words = ['крутой', 'удобный', 'стильный', 'качественный', 'дешевый', 'надежный', 'современный', 'быстрый', 'легкий', 'мощный', 'компактный'];


        // --- ФУНКЦИИ ГЕНЕРАЦИИ ---

        // Функция генерации названия (5-7 символов, 1-я заглавная)
        function generateName() {
            let name = '';
            
            // 1 буква заглавная
            let randomUpperIndex = Math.floor(Math.random() * alphabetUpper.length);
            name += alphabetUpper[randomUpperIndex];

            // Определяем длину от 5 до 7
            let length = Math.floor(Math.random() * 3) + 5; 

            // Цикл для генерации остальных символов
            for (let i = 1; i < length; i++) {
                // Через if прогоняем: буква или цифра
                if (Math.random() > 0.5) {
                    // Берем случайную букву
                    let randomLowerIndex = Math.floor(Math.random() * alphabetLower.length);
                    name += alphabetLower[randomLowerIndex];
                } else {
                    // Берем случайную цифру
                    let randomDigitIndex = Math.floor(Math.random() * digits.length);
                    name += digits[randomDigitIndex];
                }
            }
            return name;
        }

        // Функция для получения слов (описания)
        function generateDescription() {
            let description = '';
            let wordCount = 0;

            // Через if прогоняем: то 5, то 6, то 7 слов
            let randomValue = Math.random();
            if (randomValue < 0.33) {
                wordCount = 5;
            } else if (randomValue < 0.66) {
                wordCount = 6;
            } else {
                wordCount = 7;
            }

            // Циклом for забираем нужное количество слов
            for (let i = 0; i < wordCount; i++) {
                let randomWordIndex = Math.floor(Math.random() * words.length);
                description += words[randomWordIndex] + ' ';
            }

            return description.trim(); // Убираем пробел в конце
        }


        // --- ОСНОВНАЯ ЛОГИКА ---

        // Функция запуска генерации
        function startGeneration() {
            let countInput = document.getElementById('countInput');
            let count = parseInt(countInput.value);

            // Очищаем массив перед новой генерацией
            products = [];

            // Генерируем нужное количество товаров
            for (let i = 0; i < count; i++) {
                // Создаем объект (ассоциативный массив) для товара
                let product = {
                    name: generateName(),
                    price: Math.floor(Math.random() * 10000) + 100, // Цена от 100 до 10100
                    quantity: Math.floor(Math.random() * 50) + 1,    // Кол-во от 1 до 50
                    description: generateDescription(),
                    brand: brands[Math.floor(Math.random() * brands.length)]
                };

                // Добавляем товар в общий массив
                products.push(product);
            }

            // Отрисовываем таблицу
            renderTable();
        }

        // Функция отрисовки таблицы
        function renderTable() {
            let tbody = document.getElementById('tableBody');
            tbody.innerHTML = ''; // Очищаем старые данные

            // Пробегаемся циклом по массиву продуктов
            for (let i = 0; i < products.length; i++) {
                let tr = document.createElement('tr');
                
                tr.innerHTML = `
                    <td>${products[i].name}</td>
                    <td>${products[i].price} ₽</td>
                    <td>${products[i].quantity} шт.</td>
                    <td>${products[i].description}</td>
                    <td>${products[i].brand}</td>
                `;
                
                tbody.appendChild(tr);
            }
        }


        // --- СОРТИРОВКА ---

        // Сортировка через выпадающий список
        function sortFromSelect() {
            let select = document.getElementById('sortSelect');
            let sortValue = select.value;

            if (sortValue === 'name') {
                products.sort((a, b) => a.name.localeCompare(b.name));
            } else if (sortValue === 'quantity') {
                products.sort((a, b) => a.quantity - b.quantity);
            }

            renderTable();
        }

        // Сортировка через кнопки
        function sortBy(criteria) {
            if (criteria === 'name') {
                products.sort((a, b) => a.name.localeCompare(b.name));
            } else if (criteria === 'price') {
                products.sort((a, b) => a.price - b.price);
            } else if (criteria === 'quantity') {
                products.sort((a, b) => a.quantity - b.quantity);
            }

            renderTable();
        }

    </script>
</body>
</html>