document.addEventListener('DOMContentLoaded', function() {
    const langToggle = document.getElementById('langToggle');
    
    // Check for saved language
    const currentLang = localStorage.getItem('lang') || 'en';
    setLanguage(currentLang);

    if (langToggle) {
        langToggle.addEventListener('click', function() {
            const newLang = document.documentElement.lang === 'en' ? 'ar' : 'en';
            setLanguage(newLang);
        });
    }

    // Sidebar Toggle
    const sidebarToggle = document.getElementById('sidebarToggle');
    const sidebar = document.querySelector('.sidebar');
    const overlay = document.createElement('div');
    overlay.className = 'sidebar-overlay';
    document.body.appendChild(overlay);

    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', function() {
            sidebar.classList.toggle('show');
            overlay.classList.toggle('show');
        });
    }

    overlay.addEventListener('click', function() {
        sidebar.classList.remove('show');
        overlay.classList.remove('show');
    });
});

function setLanguage(lang) {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
    localStorage.setItem('lang', lang);
    
    // Update UI text
    document.querySelectorAll('[data-en]').forEach(el => {
        const text = el.getAttribute(`data-${lang}`);
        if (text) {
            // If it's a simple element with only text, update it
            // If it has children, we should only update the text node parts
            // But for simplicity in this app, we'll check if it has any children
            if (el.children.length === 0) {
                el.textContent = text;
            } else {
                // If it has children (like icons), we try to find a text node to update
                // or just update the first text node child
                let found = false;
                for (let node of el.childNodes) {
                    if (node.nodeType === 3) { // Text node
                        node.textContent = text;
                        found = true;
                        break;
                    }
                }
                if (!found) {
                    // Fallback: append text if no text node exists
                    el.appendChild(document.createTextNode(text));
                }
            }
        }
    });

    // Update buttons/inputs
    document.querySelectorAll('input[data-en-placeholder]').forEach(el => {
        el.placeholder = el.getAttribute(`data-${lang}-placeholder`);
    });
}