const passwordIcon = document.getElementById('password-icon');

if(passwordIcon) {
    passwordIcon.addEventListener('click', () => {
        const passwordInput = document.getElementById('password');
    
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            passwordIcon.classList.remove('la-eye');
            passwordIcon.classList.add('la-eye-slash');
        } else {
            passwordInput.type = 'password';
            passwordIcon.classList.remove('la-eye-slash');
            passwordIcon.classList.add('la-eye');
        }
    });
}

// Modal configuration
const modalConfig = [
    { button: 'add-user', modal: 'add-user-modal', type: 'id' },
    { button: 'send-email', modal: 'send-email-modal', type: 'id' },
];

// Initialize all modals
function initializeModals() {
    modalConfig.forEach(({ button, modal, type }) => {
        const modalEl = document.getElementById(modal);
        
        if (modalEl) {
            if (type === 'id') {
                const buttonEl = document.getElementById(button);
                if (buttonEl) {
                    buttonEl.addEventListener('click', () => {
                        modalEl.classList.add('active');
                    });
                }
            } else if (type === 'class') {
                const buttonEls = document.querySelectorAll(`.${button}`);
                buttonEls.forEach(buttonEl => {
                    buttonEl.addEventListener('click', () => {
                        modalEl.classList.add('active');
                    });
                });
            }
        }
    });
}

// Setup close handlers
function setupCloseHandlers() {
    const closeButtons = document.querySelectorAll('.close-modal');
    closeButtons.forEach(button => {
        button.addEventListener('click', () => {
            document.querySelectorAll('.modal.active').forEach(modal => {
                modal.classList.remove('active');
            });
        });
    });
}

// Close modal if click outside
document.addEventListener('click', (event) => {
    if (event.target.classList.contains('modal')) {
        event.target.classList.remove('active');
    }
});

// Initialize everything
initializeModals();
setupCloseHandlers();

const inputColor = document.querySelectorAll('.input-color input');
const inputColorValue = document.querySelectorAll('.input-color-value');

inputColor.forEach(colorInput => {
    colorInput.addEventListener('input', () => {
        // Copy the selected color value to all color value inputs
        inputColorValue.forEach(valueInput => {
            valueInput.value = colorInput.value;
        });
    });
});

const hasDropdown = document.querySelectorAll('.has-dropdown');

hasDropdown.forEach(item => {
    item.addEventListener('click', (e) => {
        e.preventDefault();
        let parent = item.parentElement;
        let dropdown = parent.querySelector('.sidebar-dropdown');

        dropdown.classList.toggle('active');

    })
});

// sidebar responsive
const sidebar = document.querySelector('.sidebar');
const sidebarMenuIcon = document.querySelector('.sidebar-menu-icon');

sidebarMenuIcon.addEventListener('click', () => {
    sidebar.classList.toggle('open');

    // if clicked outside
    document.addEventListener('click', (e) => {
        if(!sidebar.contains(e.target) && !sidebarMenuIcon.contains(e.target)) {
            sidebar.classList.remove('open');
        }
    });
});

const headerHasDropdown = document.querySelectorAll('.header-has-dropdown');

headerHasDropdown.forEach(item => {
    item.addEventListener('click', (e) => {
        e.preventDefault();
        const parent = item.parentElement;
        const dropdown = parent.querySelector('.header-dropdown');
        
        // Close other dropdowns
        headerHasDropdown.forEach(otherItem => {
            if(otherItem !== item) {
                const otherDropdown = otherItem.parentElement.querySelector('.header-dropdown');
                otherDropdown.classList.remove('open');
            }
        });
        
        parent.classList.toggle('open');
        dropdown.classList.toggle('open');
    });
});

// if clicked outside
document.addEventListener('click', (e) => {
    if (!e.target.closest('.header-has-dropdown')) {
        headerHasDropdown.forEach(item => {
            const parent = item.parentElement;
            const dropdown = parent.querySelector('.header-dropdown');
            dropdown.classList.remove('open');
        });
    }
});

// ========== Product form: image preview ==========
(function productFormImagePreview() {
    const input = document.getElementById('product-image-input');
    const preview = document.getElementById('product-image-preview');
    const previewImg = document.getElementById('product-image-preview-img');
    const placeholder = document.getElementById('product-image-placeholder');

    if (!input || !preview) return;

    input.addEventListener('change', function () {
        const file = this.files && this.files[0];
        if (!file || !file.type.startsWith('image/')) {
            if (placeholder) placeholder.style.display = '';
            if (previewImg) {
                previewImg.src = '';
                previewImg.classList.add('product-form-image-preview-img--hidden');
            }
            var label = preview.querySelector('.product-form-image-label');
            if (label) label.style.display = '';
            return;
        }
        const reader = new FileReader();
        reader.onload = function (e) {
            if (previewImg) {
                previewImg.src = e.target.result;
                previewImg.classList.remove('product-form-image-preview-img--hidden');
            }
            if (placeholder) placeholder.style.display = 'none';
            var label = preview.querySelector('.product-form-image-label');
            if (label) label.style.display = 'none';
        };
        reader.readAsDataURL(file);
    });
})();

// ========== Product form: accounts file upload zone ==========
(function productFormAccountsZone() {
    const zone = document.getElementById('product-accounts-upload-zone');
    const input = document.getElementById('product-accounts-input');
    const filenameEl = document.getElementById('product-accounts-filename');

    if (!zone || !input) return;

    zone.addEventListener('click', function (e) {
        if (!e.target.closest('input[type="file"]')) {
            input.click();
        }
    });

    input.addEventListener('change', function () {
        const file = this.files && this.files[0];
        if (file) {
            zone.classList.add('product-form-upload-zone--has-file');
            if (filenameEl) filenameEl.textContent = file.name;
        } else {
            zone.classList.remove('product-form-upload-zone--has-file');
            if (filenameEl) filenameEl.textContent = '';
        }
    });
})();