// Script to apply grid settings from database to dashboard
document.addEventListener("DOMContentLoaded", function() {
    // Function to apply database grid settings
    function applyDatabaseGridSettings() {
        // Fetch all grid elements on the page
        const gridElements = document.querySelectorAll('.grid');
        if (gridElements.length === 0) return;

        // Asynchronously fetch user's grid settings
        fetch('get_grid_settings.php')
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Get the columns setting
                    const columns = parseInt(data.columns) || 4; // Default to 4 if no setting
                    
                    // Apply the grid classes
                    gridElements.forEach(grid => {
                        // Remove any existing grid-X classes
                        grid.classList.remove('grid-3', 'grid-4', 'grid-5', 'grid-6');
                        
                        // Add the appropriate class
                        if (columns >= 3 && columns <= 6) {
                            grid.classList.add(`grid-${columns}`);
                        }
                    });
                    
                    // Also update any UI elements showing the current selection
                    const gridOptions = document.querySelectorAll('.grid-option');
                    gridOptions.forEach(option => {
                        const optionColumns = option.getAttribute('data-columns');
                        if (optionColumns == columns) {
                            option.classList.add('selected');
                        } else {
                            option.classList.remove('selected');
                        }
                    });
                    
                    console.log(`Applied grid columns setting: ${columns}`);
                } else {
                    console.error('Failed to get grid settings:', data.message);
                }
            })
            .catch(error => {
                console.error('Error fetching grid settings:', error);
            });
    }

    // Initialize grid dropdown functionality
    function initGridDropdown() {
        const gridOptions = document.querySelectorAll('.grid-option');
        const gridElements = document.querySelectorAll('.grid');
        
        // Add click event to each option
        gridOptions.forEach(option => {
            option.addEventListener('click', function() {
                // Get selected columns
                const columns = this.getAttribute('data-columns');
                
                // Update UI
                gridOptions.forEach(opt => opt.classList.remove('selected'));
                this.classList.add('selected');
                
                // Apply grid settings to all grid elements
                gridElements.forEach(grid => {
                    // Remove existing grid classes
                    grid.classList.remove('grid-3', 'grid-4', 'grid-5', 'grid-6');
                    
                    // Add the new class
                    grid.classList.add(`grid-${columns}`);
                });
                
                // Save setting to database
                fetch('save_grid_setting.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `grid_columns=${columns}`
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        console.log('Grid setting saved successfully');
                    } else {
                        console.error('Failed to save grid setting:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Error saving grid setting:', error);
                });
                
                // Hide dropdown after selection
                const gridDropdown = document.getElementById('gridDropdown');
                if (gridDropdown) {
                    gridDropdown.style.display = 'none';
                }
            });
        });
        
        // Add toggle functionality for grid selector
        const gridSelector = document.createElement('a');
        gridSelector.href = "#";
        gridSelector.className = "edit-mode-toggle grid-selector";
        gridSelector.title = "Change grid layout";
        gridSelector.innerHTML = '<i class="fas fa-th"></i>';
        gridSelector.style.color = "white";
        gridSelector.style.textDecoration = "none";
        
        // Add grid selector near edit mode button
        const siteLogoDiv = document.querySelector(".site-logo");
        if (siteLogoDiv) {
            // Insert after the sort icon
            const sortIcon = document.querySelector('a[href="manage_sections.php"]');
            if (sortIcon && sortIcon.nextSibling) {
                siteLogoDiv.insertBefore(gridSelector, sortIcon.nextSibling);
            } else {
                siteLogoDiv.appendChild(gridSelector);
            }
            
            // Toggle grid dropdown when clicking the selector
            gridSelector.addEventListener('click', function(e) {
                e.preventDefault();
                const gridDropdown = document.getElementById('gridDropdown');
                if (gridDropdown) {
                    gridDropdown.style.display = gridDropdown.style.display === 'block' ? 'none' : 'block';
                    
                    // Position the dropdown near the selector
                    const rect = gridSelector.getBoundingClientRect();
                    gridDropdown.style.top = (rect.bottom + window.scrollY) + 'px';
                    gridDropdown.style.left = (rect.left + window.scrollX) + 'px';
                }
            });
            
            // Close dropdown when clicking elsewhere
            document.addEventListener('click', function(e) {
                if (e.target !== gridSelector && !gridSelector.contains(e.target)) {
                    const gridDropdown = document.getElementById('gridDropdown');
                    if (gridDropdown && !gridDropdown.contains(e.target)) {
                        gridDropdown.style.display = 'none';
                    }
                }
            });
        }
    }
    
    // Run initialization functions
    applyDatabaseGridSettings();
    initGridDropdown();
});