function displayCv(inputCvId, inputAccessKey) {
    fetch(`check_auth.php?cvId=${inputCvId}`)
        .then(response => response.json())
        .then(data => {
            if (data){
                const visible = data.visible;
                const accessKey = data.accessKey;
                if (visible === 0) {
                    document.getElementById('tableSections').innerText = 'This cv is in private session.';
                }
                else if (visible === 1) {
                    displaySection(inputCvId);
                }
                else if (visible === 2) {
                    if (accessKey === inputAccessKey) {
                        displaySection(inputCvId);
                    }
                    else {
                        document.getElementById('tableSections').innerText = 'Missing accessKey.';
                    }
                }
                else {
                    document.getElementById('tableSections').innerText = 'Invalid cvId.';
                }
            }
            else {
                document.getElementById('tableSections').innerText = 'Invalid cvId.';
            }
        })
        .catch(error => {
            console.error('Error checking profile permission:', error);
        });
}

function displaySection(cvId) {
    const sections = ['profile', 'education', 'publication', 'project', 'other', 'volunteer', 'awards', 'skills'];
    sections.forEach(tableName => {
        const titleId = tableName + 'Title';
        const displayId = tableName + 'Data';
        const sectionHTML = `
                    <h2 id="${titleId}"></h2>
                    <ul id="${displayId}"></ul>
                `;
        document.getElementById('tableSections').innerHTML += sectionHTML;
        fetchTitle(cvId, tableName, titleId);
        fetchConfig(cvId, tableName, displayId, titleId);
    });
}

function fetchTitle(cvId, tableName, titleId) {
    fetch(`fetch_title.php?cvId=${cvId}&tableName=${tableName}`)
        .then(response => response.json())
        .then(fetchedTitleName => {
            const title = document.getElementById(titleId);
            title.innerHTML = fetchedTitleName;
        })
        .catch(error => {
            console.error('Error fetching title name:', error);
        });
}

function fetchConfig(cvId, tableName, displayId, titleId) {
    const configMapping = {
        "defaultProfileLayout": defaultProfileLayout,
        "defaultContentLayout": defaultContentLayout,
    };
    fetch(`fetch_config.php?cvId=${cvId}&tableName=${tableName}`)
        .then(response => response.json())
        .then(fetchedConfigName => {
            // Look up the corresponding configuration object
            const config = configMapping[fetchedConfigName];
            if (config) {
                applyConfig(config, displayId);
            }
            displayBlockData(cvId, tableName, displayId, titleId, config);
        })
        .catch(error => console.error('Error fetching config name:', error));
}

function applyConfig(config, displayId) {
    const sectionElement = document.getElementById(displayId);
    if (sectionElement && config) {
        for (const tableStyleKey in config.additionalBlockStyles) {
            if (config.additionalBlockStyles.hasOwnProperty(tableStyleKey)) {
                sectionElement.style[tableStyleKey] = config.additionalBlockStyles[tableStyleKey];
            }
        }
        const h2Element = sectionElement.querySelector('h2');
        if (h2Element) {
            for (const titleStyleKey in config.titleStyles) {
                if (config.titleStyles.hasOwnProperty(titleStyleKey)) {
                    h2Element.style[titleStyleKey] = config.titleStyles[titleStyleKey];
                }
            }
        }
    }
    else {
        console.error(`Section element with ID ${displayId} not found.`);
    }
}

function displayBlockData(cvId, tableName, displayId, titleId, sectionConfigs) {
    // Additional hidden columns
    let hiddenColumns = ['id', 'cid', 'uid', 'owner', 'visible', 'passwd', 'sequence', 'accessKey'];

    // Fetch column names from the specified table
    fetch(`fetch_block.php?cvId=${cvId}&tableName=${tableName}`)
        .then(response => response.json())
        .then(data => {
            const tableData = document.getElementById(displayId);
            const title = document.getElementById(titleId);
            if (data.length === 0) {
                tableData.style.display = 'none'; // Hide the display area if no data is retrieved
                title.style.display = 'none'; // Hide the title if no data is retrieved
                return;
            }
            tableData.innerHTML = ""; // Clear existing list

            const config = sectionConfigs && sectionConfigs[tableName] ? sectionConfigs[tableName] : {};
            let isFirstRow = true;

            data.forEach(row => {
                const tableRow = document.createElement('tr');
                const lineBreak = document.createElement("br");
                let cellData = "";

                // Populate the table row with table information based on configuration
                for (const key in row) {
                    if (row.hasOwnProperty(key) && !hiddenColumns.includes(key) && row[key] !== null && row[key] !== '') {
                        const tableCell = document.createElement('td');

                        // Retrieve configuration for the current key
                        const configKey = config[key];
                        const prefixStyle = configKey && configKey.prefixStyle ? `style='${configKey.prefixStyle}'` : '';
                        const dataStyle = configKey && configKey.dataStyle ? `style='${configKey.dataStyle}'` : '';
                        const dataSameLine = configKey && configKey.dataSameLine;
                        const dataTableStyle = configKey && configKey.dataTableStyle ? configKey.dataTableStyle : '';

                        // Display data without column name
                        if (config.invisiblePrefixes && config.invisiblePrefixes.includes(key)) {
                            cellData += `<span ${dataStyle}>${row[key]}</span>`;
                        }
                        else {
                            // Display data with column name
                            const prefixTag = prefixStyle ? `<span ${prefixStyle}>${key}:</span>` : `<strong>${key}:</strong>`;
                            cellData += `${prefixTag} <span ${dataStyle}>${row[key]}</span>`;
                        }

                        if (!dataSameLine){
                            tableCell.innerHTML = cellData; // Set the innerHTML of the table cell
                            tableRow.appendChild(tableCell); // Append the table cell to the table row
                            cellData = ""; // CLear cell data
                        }
                        // Apply dataTableStyle to the table cell
                        tableCell.setAttribute('style', dataTableStyle);
                    }
                }

                // Apply any additional styles to the table row
                for (const styleKey in blockStyles) {
                    if (blockStyles.hasOwnProperty(styleKey)) {
                        tableRow.style[styleKey] = blockStyles[styleKey];
                    }
                }

                // Append the table row to the tableData element
                if (!isFirstRow) {
                    tableData.appendChild(lineBreak);
                }
                else {
                    isFirstRow = false;
                }
                tableData.appendChild(tableRow);
            });
        })
        .catch(error => console.error('Error fetching table information:', error));
}