netgescon-master/public/js/netgescon-admin.js

/**
 * NetGescon Admin JavaScript
 * Interazioni e funzionalità dell'interfaccia admin
 */

document.addEventListener('DOMContentLoaded', function () {
    console.log('🏢 NetGescon Admin v2.1.0 Caricato');

    // Inizializza componenti
    initializeComponents();
    initializeMobileMenu();
    initializeTooltips();
    initializeCharts();
});

/**
 * Inizializza tutti i componenti
 */
function initializeComponents() {
    // Auto-hide alerts dopo 5 secondi
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            alert.style.opacity = '0';
            setTimeout(() => alert.remove(), 300);
        }, 5000);
    });

    // Smooth scroll per link interni
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
}

/**
 * Gestione menu mobile
 */
function initializeMobileMenu() {
    window.toggleMobileMenu = function () {
        const sidebar = document.querySelector('.netgescon-sidebar');
        const overlay = document.querySelector('.mobile-overlay') || createMobileOverlay();

        if (sidebar.classList.contains('open')) {
            sidebar.classList.remove('open');
            overlay.classList.remove('active');
        } else {
            sidebar.classList.add('open');
            overlay.classList.add('active');
        }
    };

    function createMobileOverlay() {
        const overlay = document.createElement('div');
        overlay.className = 'mobile-overlay fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden';
        overlay.style.display = 'none';
        overlay.addEventListener('click', toggleMobileMenu);
        document.body.appendChild(overlay);
        return overlay;
    }
}

/**
 * Inizializza tooltips
 */
function initializeTooltips() {
    const elements = document.querySelectorAll('[data-tooltip]');
    elements.forEach(element => {
        element.addEventListener('mouseenter', showTooltip);
        element.addEventListener('mouseleave', hideTooltip);
    });
}

function showTooltip(e) {
    const text = e.target.getAttribute('data-tooltip');
    const tooltip = document.createElement('div');
    tooltip.className = 'netgescon-tooltip';
    tooltip.textContent = text;
    tooltip.style.cssText = `
        position: absolute;
        background: #1e293b;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        z-index: 1000;
        pointer-events: none;
        white-space: nowrap;
    `;

    document.body.appendChild(tooltip);

    const rect = e.target.getBoundingClientRect();
    tooltip.style.left = rect.left + 'px';
    tooltip.style.top = (rect.top - tooltip.offsetHeight - 8) + 'px';

    e.target._tooltip = tooltip;
}

function hideTooltip(e) {
    if (e.target._tooltip) {
        e.target._tooltip.remove();
        e.target._tooltip = null;
    }
}

/**
 * Inizializza grafici dashboard
 */
function initializeCharts() {
    // Chart.js per i grafici della dashboard
    if (typeof Chart !== 'undefined') {
        const chartElements = document.querySelectorAll('.netgescon-chart');
        chartElements.forEach(element => {
            const type = element.getAttribute('data-chart-type');
            const data = JSON.parse(element.getAttribute('data-chart-data') || '{}');

            new Chart(element, {
                type: type,
                data: data,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    }
                }
            });
        });
    }
}

/**
 * Utility functions
 */
window.NetGescon = {
    // Mostra notifica
    notify: function (message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `netgescon-notification ${type}`;
        notification.innerHTML = `
            <div class="flex items-center p-4 bg-white border-l-4 shadow-md rounded-r-lg">
                <i class="fas fa-${getNotificationIcon(type)} mr-3"></i>
                <span>${message}</span>
                <button onclick="this.parentElement.parentElement.remove()" class="ml-auto">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;

        const container = document.querySelector('.notifications-container') || createNotificationsContainer();
        container.appendChild(notification);

        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 5000);
    },

    // Conferma azione
    confirm: function (message, callback) {
        if (confirm(message)) {
            callback();
        }
    },

    // Loader
    showLoader: function () {
        const loader = document.createElement('div');
        loader.className = 'netgescon-loader';
        loader.innerHTML = `
            <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                <div class="bg-white p-6 rounded-lg flex items-center space-x-3">
                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                    <span>Caricamento...</span>
                </div>
            </div>
        `;
        document.body.appendChild(loader);
        return loader;
    },

    hideLoader: function (loader) {
        if (loader) loader.remove();
    }
};

function getNotificationIcon(type) {
    const icons = {
        'success': 'check-circle',
        'error': 'exclamation-circle',
        'warning': 'exclamation-triangle',
        'info': 'info-circle'
    };
    return icons[type] || 'info-circle';
}

function createNotificationsContainer() {
    const container = document.createElement('div');
    container.className = 'notifications-container fixed top-4 right-4 z-50 space-y-2';
    document.body.appendChild(container);
    return container;
}

// Aggiungi stili CSS per le notifiche
const style = document.createElement('style');
style.textContent = `
    .netgescon-notification {
        animation: slideInRight 0.3s ease-out;
    }
    
    .netgescon-notification.success .border-l-4 { border-color: #10b981; }
    .netgescon-notification.error .border-l-4 { border-color: #ef4444; }
    .netgescon-notification.warning .border-l-4 { border-color: #f59e0b; }
    .netgescon-notification.info .border-l-4 { border-color: #06b6d4; }
    
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    .mobile-overlay.active {
        display: block !important;
    }
`;
document.head.appendChild(style);