<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>Контейнеры</title>
    <!-- Подключение CSS Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />

    <!-- Подключение Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">

    <!-- Подключение Font Awesome для иконок -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
            color: #212529;
        }

        .container {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        .controls {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 15px;
        }

        .switch {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #495057;
        }

        .switch input {
            margin-right: 8px;
            transform: scale(1.2);
        }

        #containerTable {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        }

        #containerTable thead {
            background-color: #343a40;
            color: #fff;
        }

        #containerTable th,
        #containerTable td {
            padding: 12px 15px;
            text-align: left;
            font-size: 14px;
            border-bottom: 1px solid #dee2e6;
        }

        #containerTable th {
            position: sticky;
            top: 0;
            z-index: 1;
            font-weight: 500;
        }

        #containerTable tbody tr:hover {
            background-color: #f1f3f5;
        }

        .container-group {
            background-color: #e9ecef;
            font-weight: 500;
        }

        .item-row {
            background-color: #fff;
        }

        /* Кнопки действий */
        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .action-buttons button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: #495057;
            transition: color 0.2s;
        }

        .action-buttons button:hover {
            color: #007bff;
        }

        /* Иконки */
        .icon {
            font-size: 18px;
            vertical-align: middle;
        }

        /* Стилизация ссылок */
        a {
            color: #007bff;
            text-decoration: none;
            transition: color 0.2s;
        }

        a:hover {
            color: #0056b3;
        }

        /* Стили для input и select */
        input,
        select {
            width: 100%;
            padding: 8px 10px;
            box-sizing: border-box;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 14px;
            background-color: #fff;
            transition: border-color 0.2s;
        }

        input:focus,
        select:focus {
            outline: none;
            border-color: #80bdff;
            box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
        }

        /* Контекстное меню */
        #contextMenu {
            display: none;
            position: absolute;
            z-index: 1000;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        #contextMenu ul {
            list-style: none;
            margin: 0;
            padding: 5px 0;
        }

        #contextMenu ul li {
            padding: 8px 20px;
            cursor: pointer;
            transition: background-color 0.2s;
            color: #212529;
        }

        #contextMenu ul li:hover {
            background-color: #f8f9fa;
        }

        /* Стиль для модального окна */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(33, 37, 41, 0.7);
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 30px;
            border: none;
            width: 400px;
            border-radius: 8px;
            text-align: center;
        }

        .modal-content p {
            font-size: 18px;
            margin-bottom: 30px;
            color: #495057;
        }

        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .modal-buttons button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .btn-confirm {
            background-color: #dc3545;
            color: #fff;
        }

        .btn-confirm:hover {
            background-color: #c82333;
        }

        .btn-cancel {
            background-color: #6c757d;
            color: #fff;
        }

        .btn-cancel:hover {
            background-color: #5a6268;
        }

        /* Адаптивность */
        @media (max-width: 768px) {

            #containerTable th,
            #containerTable td {
                padding: 10px 12px;
                font-size: 12px;
            }

            input,
            select {
                font-size: 12px;
            }

            .action-buttons button {
                font-size: 16px;
            }

            .modal-content {
                width: 90%;
                margin: 50% auto;
            }

            .modal-content p {
                font-size: 16px;
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="controls">
            <div class="switch">
                <label>
                    <input type="checkbox" id="groupBySupplier" checked>
                    Группировать по поставщику
                </label>
            </div>
            <!-- Дополнительные элементы управления могут быть добавлены здесь -->
        </div>

        <table id="containerTable">
            <thead>
                <tr>
                    <th></th>
                    <th>Вид транспорта</th>
                    <th>Ссылка</th>
                    <th>№ контейнера</th>
                    <th>Дата доставки в ТК</th>
                    <th>Получение САХ</th>
                    <th></th>
                    <th>РОД груза</th>
                    <th>Поставщик</th>
                    <th>Кол-во мест</th>
                    <th>Объём куб</th>
                    <th>Вес кг.</th>
                    <th>Комментарий</th>
                </tr>
            </thead>
            <tbody>
                <!-- Динамические строки будут добавлены здесь с помощью JavaScript -->
            </tbody>
        </table>
    </div>

    <!-- Контекстное меню -->
    <div id="contextMenu">
        <ul>
            <li id="addRow">Добавить контейнер</li>
            <li id="deleteRow">Удалить строку</li>
        </ul>
    </div>

    <!-- Модальное окно подтверждения удаления -->
    <div id="deleteModal" class="modal">
        <div class="modal-content">
            <p>Вы действительно хотите удалить эту строку?</p>
            <div class="modal-buttons">
                <button id="confirmDelete" class="btn-confirm">Удалить</button>
                <button id="cancelDelete" class="btn-cancel">Отмена</button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- Your JavaScript code -->
    <script>
        // Переменная для хранения состояния группировки по поставщику
        var isGroupedBySupplier = true;

        // Массив для хранения данных контейнеров
        var rowData = [];

        // Функция для получения данных с сервера
        function fetchData() {
            // Отправляем AJAX-запрос на сервер для получения списка контейнеров
            return fetch('controller/containers.php?action=getContainers')
                .then(response => response.json())
                .then(data => {
                    rowData = data;
                    generateTable(); // Генерируем таблицу с полученными данными
                })
                .catch(error => console.error('Ошибка при получении данных:', error));
        }

        // Функция для группировки элементов по поставщику внутри контейнера
        function groupItemsBySupplier(items, isEditing) {
            var groupedItems = {};
            items.forEach(function(item) {
                var supplierName = item.supplier.name || '';
                var key = supplierName;
                if (!groupedItems[key]) {
                    groupedItems[key] = {
                        supplier: item.supplier,
                        numberOfPlaces: 0,
                        volumeCubic: 0,
                        weight: 0,
                        comments: [],
                        isEditing: isEditing || item.isEditing,
                        items: []
                    };
                }
                groupedItems[key].numberOfPlaces += parseFloat(item.numberOfPlaces) || 0;
                groupedItems[key].volumeCubic += parseFloat(item.volumeCubic) || 0;
                groupedItems[key].weight += parseFloat(item.weight) || 0;
                if (item.comment) {
                    groupedItems[key].comments.push(item.comment);
                }
                groupedItems[key].items.push(item);
            });
            return Object.values(groupedItems);
        }

        // Функция для генерации таблицы
        function generateTable() {
            var tbody = document.querySelector('#containerTable tbody');
            tbody.innerHTML = ''; // Очищаем тело таблицы

            // Сортируем контейнеры по дате создания
            rowData.sort(function(a, b) {
                return new Date(b.containerInfo.createdAt) - new Date(a.containerInfo.createdAt);
            });

            rowData.forEach(function(group) {
                var container = group.containerInfo;
                var items = group.items;
                var isCollapsed = container.isCollapsed || false;

                // Если включена группировка, группируем элементы по поставщику
                var groupedItems = isGroupedBySupplier ? groupItemsBySupplier(items, container.isEditing) : items;

                // Создаем строку для контейнера
                var containerRow = document.createElement('tr');
                containerRow.classList.add('container-group');

                // Кнопка сворачивания/разворачивания
                var tdToggle = document.createElement('td');
                var toggleButton = document.createElement('button');
                toggleButton.classList.add('toggle-button');
                toggleButton.innerHTML = isCollapsed ? '<i class="fas fa-plus"></i>' : '<i class="fas fa-minus"></i>';
                toggleButton.addEventListener('click', function() {
                    container.isCollapsed = !container.isCollapsed;
                    generateTable();
                });
                tdToggle.appendChild(toggleButton);
                containerRow.appendChild(tdToggle);

                // Вид транспорта
                createTableCell(containerRow, container.transportType, container.isEditing, 'transportType', container, createTransportSelect);

                // Ссылка
                var linkCellContent = container.isEditing ? createTextInput(container.link) : createLink(container.link);
                createTableCell(containerRow, linkCellContent, container.isEditing, 'link', container, createTextInput);

                // Номер контейнера
                createTableCell(containerRow, container.containerNumber, container.isEditing, 'containerNumber', container, createTextInput);

                // Дата доставки в ТК
                createTableCell(containerRow, container.deliveryDateToCarrier, container.isEditing, 'deliveryDateToCarrier', container, createDateInput);

                // Дата получения САХ
                createTableCell(containerRow, container.receiptAtSAX, container.isEditing, 'receiptAtSAX', container, createDateInput);

                // Кнопки действий
                var tdActions = document.createElement('td');
                var actionButtons = document.createElement('div');
                actionButtons.className = 'action-buttons';

                if (container.isEditing) {
                    // Кнопка сохранения
                    var saveButton = document.createElement('button');
                    saveButton.innerHTML = '<i class="fas fa-save"></i>';
                    saveButton.title = 'Сохранить';
                    saveButton.addEventListener('click', function() {
                        // Сохраняем изменения через AJAX
                        saveContainer(group).then(() => {
                            container.isEditing = false;
                            items.forEach(function(item) {
                                item.isEditing = false;
                            });
                            generateTable();
                        });
                    });
                    actionButtons.appendChild(saveButton);
                } else {
                    // Кнопка редактирования
                    var editButton = document.createElement('button');
                    editButton.innerHTML = '<i class="fas fa-edit"></i>';
                    editButton.title = 'Редактировать';
                    editButton.addEventListener('click', function() {
                        container.isEditing = true;
                        items.forEach(function(item) {
                            item.isEditing = true;
                        });
                        generateTable();
                    });
                    actionButtons.appendChild(editButton);
                }

                // Кнопка добавления элемента
                var addItemButton = document.createElement('button');
                addItemButton.innerHTML = '<i class="fas fa-plus-circle"></i>';
                addItemButton.title = 'Добавить элемент';
                addItemButton.addEventListener('click', function() {
                    var newItem = {
                        id: null,
                        rod: {
                            id: null,
                            name: ''
                        },
                        supplier: {
                            id: null,
                            name: ''
                        },
                        numberOfPlaces: '',
                        volumeCubic: '',
                        weight: '',
                        comment: '',
                        isEditing: true
                    };
                    items.push(newItem);
                    container.isEditing = true;
                    generateTable();
                });
                actionButtons.appendChild(addItemButton);

                tdActions.appendChild(actionButtons);
                containerRow.appendChild(tdActions);

                // Пустые ячейки для выравнивания столбцов
                for (var i = 0; i < 6; i++) {
                    var emptyTd = document.createElement('td');
                    containerRow.appendChild(emptyTd);
                }

                tbody.appendChild(containerRow);

                // Если контейнер не свернут, отображаем элементы
                if (!isCollapsed) {
                    if (isGroupedBySupplier) {
                        // Отображаем элементы, сгруппированные по поставщику
                        groupedItems.forEach(function(groupedItem) {
                            groupedItem.items.forEach(function(item, index) {
                                var itemRow = document.createElement('tr');
                                itemRow.classList.add('item-row');

                                // Пустые ячейки для выравнивания
                                for (var i = 0; i < 7; i++) {
                                    var emptyTd = document.createElement('td');
                                    itemRow.appendChild(emptyTd);
                                }

                                // РОД груза
                                createTableCell(itemRow, item.rod.name, item.isEditing, 'rod', item, createSelect2Input);

                                // Поставщик
                                if (index === 0) {
                                    var tdSupplier = document.createElement('td');
                                    tdSupplier.rowSpan = groupedItem.items.length;
                                    if (groupedItem.isEditing) {
                                        var supplierInput = createSelect2Input(groupedItem.supplier, 'supplier');
                                        supplierInput.addEventListener('change', function() {
                                            var selectedData = $(this).select2('data')[0];
                                            groupedItem.supplier = {
                                                id: selectedData.id,
                                                name: selectedData.text
                                            };
                                            groupedItem.items.forEach(function(itm) {
                                                itm.supplier = groupedItem.supplier;
                                            });
                                        });
                                        tdSupplier.appendChild(supplierInput);
                                    } else {
                                        tdSupplier.textContent = groupedItem.supplier.name;
                                    }
                                    itemRow.appendChild(tdSupplier);
                                }

                                // Кол-во мест
                                if (index === 0) {
                                    var tdNumberOfPlaces = document.createElement('td');
                                    tdNumberOfPlaces.rowSpan = groupedItem.items.length;
                                    if (groupedItem.isEditing) {
                                        var inputNumberOfPlaces = createNumberInput(groupedItem.numberOfPlaces);
                                        inputNumberOfPlaces.addEventListener('change', function() {
                                            groupedItem.numberOfPlaces = parseFloat(this.value);
                                        });
                                        tdNumberOfPlaces.appendChild(inputNumberOfPlaces);
                                    } else {
                                        tdNumberOfPlaces.textContent = groupedItem.numberOfPlaces;
                                    }
                                    itemRow.appendChild(tdNumberOfPlaces);
                                }

                                // Объём куб
                                if (index === 0) {
                                    var tdVolumeCubic = document.createElement('td');
                                    tdVolumeCubic.rowSpan = groupedItem.items.length;
                                    if (groupedItem.isEditing) {
                                        var inputVolumeCubic = createNumberInput(groupedItem.volumeCubic);
                                        inputVolumeCubic.addEventListener('change', function() {
                                            groupedItem.volumeCubic = parseFloat(this.value);
                                        });
                                        tdVolumeCubic.appendChild(inputVolumeCubic);
                                    } else {
                                        tdVolumeCubic.textContent = groupedItem.volumeCubic.toFixed(2);
                                    }
                                    itemRow.appendChild(tdVolumeCubic);
                                }

                                // Вес кг.
                                if (index === 0) {
                                    var tdWeight = document.createElement('td');
                                    tdWeight.rowSpan = groupedItem.items.length;
                                    if (groupedItem.isEditing) {
                                        var inputWeight = createNumberInput(groupedItem.weight);
                                        inputWeight.addEventListener('change', function() {
                                            groupedItem.weight = parseFloat(this.value);
                                        });
                                        tdWeight.appendChild(inputWeight);
                                    } else {
                                        tdWeight.textContent = groupedItem.weight.toFixed(2);
                                    }
                                    itemRow.appendChild(tdWeight);
                                }

                                // Комментарий
                                createTableCell(itemRow, item.comment, item.isEditing, 'comment', item, createTextInput);

                                // Добавляем строку в таблицу
                                tbody.appendChild(itemRow);
                            });
                        });
                    } else {
                        // Отображаем элементы без группировки
                        items.forEach(function(item) {
                            var itemRow = document.createElement('tr');
                            itemRow.classList.add('item-row');

                            // Пустые ячейки для выравнивания
                            for (var i = 0; i < 7; i++) {
                                var emptyTd = document.createElement('td');
                                itemRow.appendChild(emptyTd);
                            }

                            // РОД груза
                            createTableCell(itemRow, item.rod.name, item.isEditing, 'rod', item, createSelect2Input);

                            // Поставщик
                            createTableCell(itemRow, item.supplier.name, item.isEditing, 'supplier', item, createSelect2Input);

                            // Кол-во мест
                            createTableCell(itemRow, item.numberOfPlaces, item.isEditing, 'numberOfPlaces', item, createNumberInput);

                            // Объём куб
                            createTableCell(itemRow, item.volumeCubic, item.isEditing, 'volumeCubic', item, createNumberInput);

                            // Вес кг.
                            createTableCell(itemRow, item.weight, item.isEditing, 'weight', item, createNumberInput);

                            // Комментарий
                            createTableCell(itemRow, item.comment, item.isEditing, 'comment', item, createTextInput);

                            // Добавляем строку в таблицу
                            tbody.appendChild(itemRow);
                        });
                    }
                }
            });
        }

        // Вспомогательные функции для создания ячеек таблицы и элементов ввода
        function createTableCell(row, content, isEditable, field, dataObj, inputCreator) {
            var td = document.createElement('td');
            if (isEditable && inputCreator) {
                var input = inputCreator(dataObj[field], field);
                input.addEventListener('change', function() {
                    if (field === 'rod' || field === 'supplier') {
                        var selectedData = $(this).select2('data')[0];
                        dataObj[field] = {
                            id: selectedData.id,
                            name: selectedData.text
                        };
                    } else {
                        dataObj[field] = this.value;
                    }
                });
                td.appendChild(input);
                row.appendChild(td);

                // Инициализируем Select2 после добавления в DOM
                if (field === 'rod' || field === 'supplier') {
                    $(input).select2({
                        ajax: {
                            url: 'controller/' + field + '.php',
                            dataType: 'json',
                            delay: 250,
                            data: function(params) {
                                return {
                                    q: params.term // поисковый запрос
                                };
                            },
                            processResults: function(data) {
                                return {
                                    results: data.items
                                };
                            },
                            cache: true
                        },
                        minimumInputLength: 1,
                        placeholder: 'Выберите ' + field,
                        theme: 'default',
                        width: 'resolve' // Исправляет проблему с шириной
                    });
                }
            } else if (content instanceof HTMLElement) {
                td.appendChild(content);
                row.appendChild(td);
            } else {
                td.textContent = content;
                row.appendChild(td);
            }
        }


        // Функции для создания элементов ввода
        function createTransportSelect(value) {
            var select = document.createElement('select');
            ['ЖД сборный', 'ЖД целый', 'Авиа', 'Южно-Сахалинск', 'Хабаровск', 'Владивосток'].forEach(function(optionText) {
                var option = document.createElement('option');
                option.value = optionText;
                option.textContent = optionText;
                if (optionText === value) option.selected = true;
                select.appendChild(option);
            });
            return select;
        }

        function createTextInput(value) {
            var input = document.createElement('input');
            input.type = 'text';
            input.value = value || '';
            return input;
        }

        function createNumberInput(value) {
            var input = document.createElement('input');
            input.type = 'number';
            input.value = value || '';
            input.step = 'any';
            return input;
        }

        function createDateInput(value) {
            var input = document.createElement('input');
            input.type = 'date';
            input.value = value || '';
            return input;
        }

        // Функция для создания поля Select2 для "Поставщик" и "РОД груза"
        function createSelect2Input(value, field) {
            var select = document.createElement('select');
            select.className = 'select2-field';

            // Если есть значение, добавляем его как выбранный вариант
            if (value && value.id && value.name) {
                var option = new Option(value.name, value.id, true, true);
                select.appendChild(option);
            }

            // Добавляем элемент в DOM перед инициализацией Select2
            document.body.appendChild(select); // Временно добавляем в DOM

            // Инициализируем Select2
            $(select).select2({
                ajax: {
                    url: 'controller/' + field + '.php',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term // поисковый запрос
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.items
                        };
                    },
                    cache: true
                },
                minimumInputLength: 1,
                placeholder: 'Выберите ' + field,
                theme: 'default',
                width: 'resolve' // Исправляет проблему с шириной
            });

            return select;
        }

        function createLink(url) {
            if (url) {
                var a = document.createElement('a');
                a.href = url;
                a.textContent = 'Ссылка';
                a.target = '_blank';
                return a;
            } else {
                return document.createTextNode('');
            }
        }

        // Функция для сохранения контейнера через AJAX
        function saveContainer(group) {
            // Всегда обновляем существующий контейнер
            var url = 'controller/containers.php?action=updateContainer';
            var method = 'POST';

            return fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        containerId: group.containerInfo.id,
                        containerData: group
                    }),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log('Контейнер обновлен успешно');
                    } else {
                        console.error('Ошибка при сохранении контейнера');
                    }
                })
                .catch((error) => {
                    console.error('Ошибка:', error);
                });
        }


        // Инициализация Select2 на динамически созданных элементах
        $(document).on('select2:open', () => {
            document.querySelector('.select2-search__field').focus();
        });

        // Получаем ссылку на контекстное меню
        var contextMenu = document.getElementById('contextMenu');
        var selectedData = null;

        // Обработчик события contextmenu для таблицы
        document.getElementById('containerTable').addEventListener('contextmenu', function(e) {
            e.preventDefault();

            // Определяем позицию клика
            var posX = e.pageX;
            var posY = e.pageY;

            // Показываем контекстное меню
            contextMenu.style.display = 'block';
            contextMenu.style.left = posX + 'px';
            contextMenu.style.top = posY + 'px';

            // Получаем данные выбранного элемента (если нужно)
            var targetRow = e.target.closest('tr');
            if (targetRow && targetRow.classList.contains('item-row')) {
                var containerIndex = Array.from(tbody.children).indexOf(targetRow.parentNode);
                var itemIndex = Array.from(targetRow.parentNode.children).indexOf(targetRow);
                selectedData = {
                    group: rowData[containerIndex],
                    item: rowData[containerIndex].items[itemIndex]
                };
            } else {
                selectedData = null;
            }
        });

        // Скрываем контекстное меню при клике вне его
        document.addEventListener('click', function(e) {
            if (!e.target.closest('#contextMenu')) {
                contextMenu.style.display = 'none';
            }
        });

        document.getElementById('addRow').addEventListener('click', function() {
            // Создаем новый контейнер
            var newContainer = {
                containerInfo: {
                    transportType: '',
                    link: '',
                    containerNumber: '',
                    deliveryDateToCarrier: '',
                    receiptAtSAX: '',
                    isEditing: true,
                    createdAt: new Date(),
                    isCollapsed: false
                },
                items: [{
                    rod: {
                        id: null,
                        name: ''
                    },
                    supplier: {
                        id: null,
                        name: ''
                    },
                    numberOfPlaces: '',
                    volumeCubic: '',
                    weight: '',
                    comment: '',
                    isEditing: true
                }]
            };

            // Сохраняем на сервере
            fetch('controller/containers.php?action=createContainer', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        containerData: newContainer
                    }),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.id) {
                        // Присваиваем ID новому контейнеру
                        newContainer.containerInfo.id = data.id;
                        rowData.unshift(newContainer);
                        generateTable();
                    } else {
                        console.error('Ошибка при создании контейнера');
                    }
                })
                .catch((error) => {
                    console.error('Ошибка:', error);
                });
            contextMenu.style.display = 'none';
        });


        document.getElementById('deleteRow').addEventListener('click', function() {
            if (selectedData) {
                showDeleteModal();
                contextMenu.style.display = 'none';
            }
        });

        // Модальное окно подтверждения удаления
        var deleteModal = document.getElementById('deleteModal');
        var confirmDelete = document.getElementById('confirmDelete');
        var cancelDelete = document.getElementById('cancelDelete');

        function showDeleteModal() {
            deleteModal.style.display = 'block';
        }

        confirmDelete.addEventListener('click', function() {
            var group = selectedData.group;
            var item = selectedData.item;
            var groupIndex = rowData.indexOf(group);
            if (groupIndex !== -1) {
                var itemIndex = group.items.indexOf(item);
                if (itemIndex !== -1) {
                    // Удаляем элемент через AJAX
                    fetch('controller/containers.php?action=deleteItem', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                itemId: item.id
                            }),
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                group.items.splice(itemIndex, 1);
                                if (group.items.length === 0) {
                                    rowData.splice(groupIndex, 1);
                                }
                                generateTable();
                            } else {
                                console.error('Ошибка при удалении элемента');
                            }
                        })
                        .catch((error) => {
                            console.error('Ошибка:', error);
                        });
                }
            }
            selectedData = null;
            deleteModal.style.display = 'none';
        });

        cancelDelete.addEventListener('click', function() {
            deleteModal.style.display = 'none';
        });

        window.onclick = function(event) {
            if (event.target == deleteModal) {
                deleteModal.style.display = 'none';
            }
        };

        // Обработчик переключателя группировки
        document.getElementById('groupBySupplier').addEventListener('change', function() {
            isGroupedBySupplier = this.checked;
            generateTable();
        });

        // Инициализация таблицы при загрузке страницы
        fetchData();
    </script>


</body>

</html>

select2 некорректно добавляется в ячейку. Исправь ошибку