script.js

// JavaScript for Warehouse System Demo

document.addEventListener('DOMContentLoaded', function () {
    // Tab functionality for CRUD section
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');

    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // Remove active class from all buttons and contents
            tabBtns.forEach(b => b.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));

            // Add active class to clicked button
            btn.classList.add('active');

            // Show corresponding content
            const tabId = btn.getAttribute('data-tab');
            document.getElementById(`${tabId}-tab`).classList.add('active');
        });
    });

    // Form submission handling
    const productForm = document.getElementById('product-form');
    if (productForm) {
        productForm.addEventListener('submit', function (e) {
            e.preventDefault();

            // Get form values
            const productName = document.getElementById('product-name').value;
            const productCode = document.getElementById('product-code').value;
            const productCategory = document.getElementById('product-category').value;
            const productQuantity = document.getElementById('product-quantity').value;

            // In a real application, you would send this data to a server
            // For this demo, we'll just show an alert
            alert(`Товар добавлен:
Наименование: ${productName}
Артикул: ${productCode}
Категория: ${productCategory}
Количество: ${productQuantity}`);

            // Reset form
            productForm.reset();
        });
    }

    // Edit and delete button functionality
    document.addEventListener('click', function (e) {
        if (e.target.classList.contains('btn-edit')) {
            alert('Функция редактирования будет реализована в полной версии системы');
        }

        if (e.target.classList.contains('btn-delete')) {
            if (confirm('Вы уверены, что хотите удалить этот элемент?')) {
                alert('Элемент удален');
                // In a real app, you would remove the row from the table
            }
        }
    });

    // Global search functionality
    const searchInput = document.getElementById('global-search');
    if (searchInput) {
        searchInput.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                const searchTerm = this.value.trim();
                if (searchTerm) {
                    alert(`Поиск по запросу: "${searchTerm}"\nВ реальной системе здесь будут отображены результаты поиска.`);
                }
            }
        });
    }

    // Smooth scrolling for navigation links
    document.querySelectorAll('.main-nav a').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);

            if (targetSection) {
                window.scrollTo({
                    top: targetSection.offsetTop - 80,
                    behavior: 'smooth'
                });

                // Update active nav link
                document.querySelectorAll('.main-nav a').forEach(link => {
                    link.classList.remove('active');
                });
                this.classList.add('active');
            }
        });
    });

    // Set active nav link based on scroll position
    window.addEventListener('scroll', function () {
        const sections = document.querySelectorAll('section');
        const navLinks = document.querySelectorAll('.main-nav a');

        let current = '';

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;

            if (pageYOffset >= (sectionTop - 200)) {
                current = section.getAttribute('id');
            }
        });

        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href') === `#${current}`) {
                link.classList.add('active');
            }
        });
    });

    // Simulate real-time updates for dashboard stats
    function updateStats() {
        const statNumbers = document.querySelectorAll('.stat-number');
        statNumbers.forEach(stat => {
            const currentValue = parseInt(stat.textContent.replace(/\s/g, ''));
            const increment = Math.floor(Math.random() * 5);
            const newValue = currentValue + increment;
            stat.textContent = newValue.toLocaleString('ru-RU');
        });
    }

    // Update stats every 10 seconds
    setInterval(updateStats, 10000);

    // Add animation to stat cards on load
    const statCards = document.querySelectorAll('.stat-card');
    statCards.forEach((card, index) => {
        setTimeout(() => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';

            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 100);
        }, index * 200);
    });

    // Simulate order status updates
    function updateOrderStatus() {
        const orders = document.querySelectorAll('.order-card');
        orders.forEach(order => {
            const statusElement = order.querySelector('.order-status');
            if (statusElement && statusElement.classList.contains('processing')) {
                // Randomly change some processing orders to ready
                if (Math.random() > 0.7) {
                    statusElement.classList.remove('processing');
                    statusElement.classList.add('ready');
                    statusElement.textContent = 'Готов к отправке';
                }
            }
        });
    }

    // Update order statuses every 15 seconds
    setInterval(updateOrderStatus, 15000);

    // Add hover effect to process steps
    const steps = document.querySelectorAll('.step');
    steps.forEach(step => {
        step.addEventListener('mouseenter', function () {
            this.style.transform = 'scale(1.02)';
            this.style.transition = 'transform 0.3s ease';
        });

        step.addEventListener('mouseleave', function () {
            this.style.transform = 'scale(1)';
        });
    });

    // Simulate document signing
    function simulateDocumentSigning() {
        const documents = document.querySelectorAll('.document-item');
        documents.forEach(doc => {
            const statusElement = doc.querySelector('.doc-status');
            if (statusElement && statusElement.classList.contains('pending')) {
                // Randomly sign some pending documents
                if (Math.random() > 0.8) {
                    statusElement.classList.remove('pending');
                    statusElement.classList.add('signed');
                    statusElement.textContent = 'Подписана ЭЦП';
                }
            }
        });
    }

    // Sign documents every 20 seconds
    setInterval(simulateDocumentSigning, 20000);

    // Add click effect to interactive elements
    const interactiveElements = document.querySelectorAll('.stat-card, .order-card, .step-card, .zone');
    interactiveElements.forEach(element => {
        element.addEventListener('click', function () {
            this.style.transform = 'scale(0.98)';
            this.style.transition = 'transform 0.1s ease';

            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 100);
        });
    });

    // Initialize with some active steps in the receiving process
    const receivingSteps = document.querySelectorAll('#receiving .step');
    for (let i = 0; i < 3; i++) {
        if (receivingSteps[i]) {
            receivingSteps[i].classList.add('active');
        }
    }
});