При обновлении страницы, раздел который был открыт, оставлять открытым

let lastActiveElement = null;
 
function activateItem(element, activeIcon, defaultIcon) {
    const items = document.querySelectorAll('.sidebar li');
 
    // Убираем класс 'active' у всех элементов и меняем иконки на дефолтные
    items.forEach(item => {
        if (item !== element) {
            item.classList.remove('active');
            const img = item.querySelector('img');
            img.src = img.dataset.default; // Возвращаем к исходному изображению
        } else {
            const img = item.querySelector('img');
            img.dataset.prev = img.src; // Сохраняем текущее изображение как предыдущее
            img.src = activeIcon; // Меняем иконку на активную
        }
    });
 
    // Активируем текущий элемент
    element.classList.add('active');
    const img = element.querySelector('img');
    img.dataset.default = defaultIcon; // Сохраняем дефолтную иконку
 
    // Очищаем блок main-content перед добавлением нового контента
    const mainContent = document.querySelector('.main-content');
    mainContent.innerHTML = '';
 
if (element.querySelector('span').textContent === 'Сотрудники')
{
                mainContent.innerHTML = `
                    <div class="staff-container">
                        <h2 class="staff-header">Сотрудники</h2>
                        <div class="search-panel">
                            <span>Поиск</span>
                            <div class="search-input">
                                <span id="clear-search">×</span>
                                <input type="text" id="search" placeholder="Поиск сотрудников">
                            </div>
                            <button id="search-button">Найти</button>
                            <button id="add-staff-button">Добавить</button>
                        </div>
                        <table class="staff-table">
                            <thead>
                                <tr>
                                    <th colspan="2">Всего сотрудников: <span id="total-items"></span></th>
                                </tr>
                                <tr>
                                    <th>№</th>
                                    <th>Ф.И.О.</th>
                                    <th>Серия и номер паспорта</th>
                                    <th>Должность</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Иванов Иван Иванович</td>
                                    <td>11111111AE</td>
                                    <td>Инженер</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Петров Петр Петрович</td>
                                    <td>22222222BE</td>
                                    <td>ИТР</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Сидоров Сидор Сидорович</td>
                                    <td>33333333CE</td>
                                    <td>Монтажник</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Кузнецов Николай Николаевич</td>
                                    <td>44444444DE</td>
                                    <td>Монтажник</td>
                                </tr>
                            </tbody>
                        </table>
 
 
<div class="add-employee-form" style="display: none;">
    <div class="form-header"> 
    <h3>Добавление нового сотрудника</h3> 
    <span id="close-employee-form" class="close-icon" style="cursor: pointer;">✖</span> 
</div>
    <div class="form-group">
        <label for="employee-lastname">Фамилия</label>
        <input type="text" id="employee-lastname" class="input-employee-lastname orange-input wide-input">
    </div>
    <div class="form-group">
        <label for="employee-firstname">Имя</label>
        <input type="text" id="employee-firstname" class="input-employee-firstname orange-input wide-input">
    </div>
    <div class="form-group">
        <label for="employee-middlename">Отчество</label>
        <input type="text" id="employee-middlename" class="input-employee-middlename orange-input wide-input">
    </div>
    <div class="form-group">
        <label>Паспорт</label>
    </div>
    <div class="form-group horizontal">
        <label for="employee-passport-series">Серия и номер</label>
        <input type="text" id="employee-passport-series" class="input-employee-passport-series orange-input">
    </div>
    <div class="form-group horizontal">
        <label for="employee-position">Должность</label>
        <input type="text" id="employee-position" class="input-employee-position orange-input">
    </div>
    <div class="form-group horizontal">
    <label>Документы</label>
    <button class="upload-button">Загрузить</button>
</div>
    <div class="form-group horizontal">
        <label for="employee-access">Пропуск</label>
        <input type="text" id="employee-access" class="input-employee-access orange-input">
    </div>
    <div class="form-group horizontal">
        <label for="employee-rate">Ставка за смену</label>
        <input type="text" id="employee-rate" class="input-employee-rate orange-input">
    </div>
    <div class="error-message" id="employee-error-message" style="display: none; color: red;">Заполните все обязательные поля</div>
    <button id="submit-employee" style="background-color: orange; color: black; padding: 10px 20px; border: none; border-radius: 1px; cursor: pointer; margin: 0 auto; display: block;">Сохранить</button>
</div>
<div id="custom-backdrop" class="custom-backdrop"></div>
<div id="custom-modal" class="custom-modal">
    <div class="custom-header">
        <h4>Предупреждение!</h4>
    </div>
    <div class="custom-body">
        <p>При закрытии данного окна, данные не будут сохранены.</p>
    </div>
    <div class="custom-footer">
        <button id="confirm-close" class="custom-btn">Закрыть</button>
        <button id="cancel-close" class="custom-btn">Отмена</button>
    </div>
</div>
 
                    </div>
 
 
 
                `;
 
// Открытие формы при нажатии на кнопку "Добавить"
document.getElementById('add-staff-button').addEventListener('click', () => {
    document.querySelector('.add-employee-form').style.display = 'block';
});
 
// Закрытие формы при нажатии на "✖"
document.getElementById('close-employee-form').addEventListener('click', handleCloseForm);
 
// Закрытие формы через модальное окно (если есть незаполненные поля)
document.getElementById('confirm-close').addEventListener('click', () => {
    document.querySelector('.add-employee-form').style.display = 'none';
    closeWarningModal();
});
 
// Продолжение работы с формой при нажатии на "Отмена" в модальном окне
document.getElementById('cancel-close').addEventListener('click', closeWarningModal);
 
// Проверка заполненных полей перед закрытием формы
function handleCloseForm() {
    const fields = getEmployeeFields();
    const hasFilledFields = fields.some(field => field.value.trim() !== '');
 
    if (hasFilledFields) {
        openWarningModal(); // Открыть предупреждение, если есть данные
    } else {
        document.querySelector('.add-employee-form').style.display = 'none'; // Закрыть форму
    }
}
 
// Получение полей формы
function getEmployeeFields() {
    return [
        document.getElementById('employee-lastname'),
        document.getElementById('employee-firstname'),
        document.getElementById('employee-middlename'),
        document.getElementById('employee-passport-series'),
        document.getElementById('employee-position'),
        document.getElementById('employee-access'),
        document.getElementById('employee-rate')
    ];
}
 
// Валидация полей сотрудника
function validateFields(fields) {
    let allFilled = true;
    fields.forEach(field => {
        if (field.value.trim() === '') {
            field.style.borderColor = 'red'; // Подсветить незаполненное поле
            allFilled = false;
        } else {
            field.style.borderColor = ''; // Сбросить цвет рамки
        }
    });
    document.getElementById('employee-error-message').style.display = allFilled ? 'none' : 'block';
    return allFilled;
}
 
// Обработчик нажатия на кнопку "Сохранить"
document.getElementById('submit-employee').addEventListener('click', () => {
    const fields = getEmployeeFields();
    const allValid = validateFields(fields);
 
    if (allValid) {
        addEmployeeToTable(fields);
        resetForm(fields);
        showSuccessMessage('Сотрудник успешно добавлен!');
        document.querySelector('.add-employee-form').style.display = 'none';
    }
});
getEmployeeFields().forEach(field => {
    field.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            event.preventDefault(); // Предотвращает стандартное поведение Enter
            document.getElementById('submit-employee').click(); // Триггер кнопки "Сохранить"
        }
    });
});
 
 
 
// Добавление сотрудника в таблицу
function addEmployeeToTable(fields) {
    const fullname = `${fields[0].value} ${fields[1].value} ${fields[2].value}`;
    const passport = fields[3].value;
    const position = fields[4].value;
 
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td>${document.querySelector('.staff-table tbody').getElementsByTagName('tr').length + 1}</td>
        <td>${fullname}</td>
        <td>${passport}</td>
        <td>${position}</td>
    `;
    document.querySelector('.staff-table tbody').appendChild(newRow);
    updateTotalItems();
}
 
// Обновление общего количества сотрудников
function updateTotalItems() {
    const totalItems = document.querySelector('.staff-table tbody').getElementsByTagName('tr').length;
    document.getElementById('total-items').textContent = totalItems;
}
 
 
 
// Показ сообщения об успехе
function showSuccessMessage(message) {
    const successMessage = document.createElement('div');
    successMessage.textContent = message;
    Object.assign(successMessage.style, {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        backgroundColor: 'green',
        color: 'white',
        padding: '10px',
        borderRadius: '5px',
        zIndex: '1000'
    });
    document.body.appendChild(successMessage);
 
    setTimeout(() => document.body.removeChild(successMessage), 3000);
}
 
// Очистка полей формы
function resetForm(fields) {
    fields.forEach(field => {
        field.value = '';
        field.style.borderColor = '';
    });
}
 
// Открытие предупреждающего окна
function openWarningModal() {
    document.getElementById('custom-backdrop').style.display = 'block';
    document.getElementById('custom-modal').style.display = 'block';
}
 
// Закрытие предупреждающего окна
function closeWarningModal() {
    document.getElementById('custom-backdrop').style.display = 'none';
    document.getElementById('custom-modal').style.display = 'none';
}
 
// Инициализация функциональности поиска
setupSearchFunctionality();
 
// Логика поиска сотрудников
setupSearchFunctionality();
 
// Инициализация функциональности поиска
setupSearchFunctionality();
 
function setupSearchFunctionality() {
    const searchInput = document.getElementById('search');
    const clearSearch = document.getElementById('clear-search');
    const searchButton = document.getElementById('search-button');
 
    // Обработчик события для кнопки поиска
    searchButton.addEventListener('click', () => {
        const searchValue = searchInput.value.toLowerCase().trim();
        filterTable(searchValue);
        clearSearch.style.display = searchValue ? 'inline' : 'none'; // Показать крестик, если есть текст
    });
 
    // Обработчик события для крестика
    clearSearch.addEventListener('click', () => {
        searchInput.value = ''; // Очистить поле ввода
        filterTable(''); // Очистить фильтрацию
        clearSearch.style.display = 'none'; // Скрыть крестик
    });
 
    // Обработчик события для ввода текста
    searchInput.addEventListener('input', () => {
        const searchValue = searchInput.value;
        clearSearch.style.display = searchValue ? 'inline' : 'none'; // Показать крестик, если есть текст
    });
 
    // Обновление общего количества элементов
    updateTotalItems();
}
 
// Фильтрация таблицы по значению поиска
function filterTable(searchValue) {
    const rows = document.querySelector('.staff-table tbody').getElementsByTagName('tr');
    let totalItems = 0;
 
    for (let row of rows) {
        const cells = row.getElementsByTagName('td');
        const fullName = cells[1].textContent.toLowerCase();
        const passport = cells[2].textContent.toLowerCase();
        const position = cells[3].textContent.toLowerCase();
 
        if (fullName.includes(searchValue) || passport.includes(searchValue) || position.includes(searchValue)) {
            row.style.display = '';
            totalItems++;
        } else {
            row.style.display = 'none';
        }
    }
    document.getElementById('total-items').textContent = totalItems; // Обновить общее количество элементов
}
 
 
function showSuccessMessage(message) {
    const successMessage = document.createElement('div');
    successMessage.textContent = message;
    Object.assign(successMessage.style, {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        backgroundColor: '#FFA500', // Orange color
        color: 'white',
        padding: '20px',
        borderRadius: '8px',
        fontSize: '18px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        zIndex: '1000',
        textAlign: 'center',
        opacity: '0',
        transition: 'opacity 0.5s ease-in-out'
    });
    document.body.appendChild(successMessage);
 
    // Fade in the message
    setTimeout(() => {
        successMessage.style.opacity = '1';
    }, 10); // Timeout allows the transition to trigger
 
    // Fade out and remove after 3 seconds
    setTimeout(() => {
        successMessage.style.opacity = '0';
        setTimeout(() => document.body.removeChild(successMessage), 500); // Remove after fade out
    }, 3000);
}
 
// Очистка полей формы
function resetForm(fields) {
    fields.forEach(field => {
        field.value = '';
        field.style.borderColor = '';
    });
}
 
// Логика поиска сотрудников
function setupSearchFunctionality() {
    const searchInput = document.getElementById('search');
    const clearSearch = document.getElementById('clear-search');
    const searchButton = document.getElementById('search-button');
    const tableBody = document.querySelector('.staff-table tbody');
 
    searchButton.addEventListener('click', () => {
        const searchValue = searchInput.value.toLowerCase().trim();
        filterTable(searchValue);
        clearSearch.style.display = searchValue ? 'inline' : 'none';
    });
 
    clearSearch.addEventListener('click', () => {
        searchInput.value = '';
        filterTable('');
        clearSearch.style.display = 'none';
    });
 
    searchInput.addEventListener('input', () => {
        clearSearch.style.display = searchInput.value ? 'inline' : 'none';
    });
 
    updateTotalItems();
}
 
// Фильтрация таблицы по значению поиска
function filterTable(searchValue) {
    const rows = document.querySelector('.staff-table tbody').getElementsByTagName('tr');
    let totalItems = 0;
 
    for (let row of rows) {
        const cells = row.getElementsByTagName('td');
        const fullName = cells[1].textContent.toLowerCase();
        const passport = cells[2].textContent.toLowerCase();
        const position = cells[3].textContent.toLowerCase();
 
        if (fullName.includes(searchValue) || passport.includes(searchValue) || position.includes(searchValue)) {
            row.style.display = '';
            totalItems++;
        } else {
            row.style.display = 'none';
        }
    }
    document.getElementById('total-items').textContent = totalItems;
}
 
const uploadButton = document.querySelector('.upload-button');
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.multiple = true;
fileInput.accept = 'image/jpeg, image/png';
 
uploadButton.addEventListener('click', () => fileInput.click());
 
fileInput.addEventListener('change', () => {
    const files = Array.from(fileInput.files);
    const maxFiles = 10;
    const maxFileSize = 3 * 1024 * 1024; // 3 MB
 
    if (files.length > maxFiles) {
        alert(`Можно загрузить не более ${maxFiles} файлов`);
        return;
    }
 
    for (let file of files) {
        if (file.size > maxFileSize) {
            alert(`Размер файла ${file.name} превышает 3 MB`);
            return;
        }
    }
 
    openUploadDialog(files);
});
 
// Открытие диалогового окна загрузки
function openUploadDialog(files) {
    const uploadDialog = document.createElement('div');
    Object.assign(uploadDialog.style, {
        position: 'absolute',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        zIndex: '1000'
    });
    document.body.appendChild(uploadDialog);
 
    const uploadDialogContent = document.createElement('div');
    Object.assign(uploadDialogContent.style, {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: '400px',
        height: '250px', // Увеличили высоту для размещения кнопки внизу
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '5px',
        boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)'
    });
    uploadDialog.appendChild(uploadDialogContent);
 
    const uploadTitle = document.createElement('h2');
    uploadTitle.textContent = 'Загрузка документов';
    uploadTitle.style.textAlign = 'center';
    uploadDialogContent.appendChild(uploadTitle);
 
const fileList = document.createElement('ul');
Object.assign(fileList.style, {
    marginTop: '15px', // Отступ между заголовком и списком документов
});
 
files.forEach(file => {
    const listItem = document.createElement('li');
    listItem.textContent = file.name;
 
    // Добавляем отступ между документами
    listItem.style.marginBottom = '10px';
 
    fileList.appendChild(listItem);
});
 
uploadDialogContent.appendChild(fileList);
 
    // Создаем контейнер для кнопки
    const closeButtonContainer = document.createElement('div');
    Object.assign(closeButtonContainer.style, {
        position: 'absolute',
        bottom: '20px',
        left: '50%',
        transform: 'translateX(-50%)',
        width: '100%',
        display: 'flex',
        justifyContent: 'center'
    });
 
    const closeButton = document.createElement('button');
    closeButton.textContent = 'Закрыть';
    closeButton.addEventListener('click', () => document.body.removeChild(uploadDialog));
 
    closeButtonContainer.appendChild(closeButton);
    uploadDialogContent.appendChild(closeButtonContainer);
}
 
 
// Инициализация функциональности поиска
setupSearchFunctionality();