Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
    switch (operator) {
        case '==':
            return (v1 == v2) ? options.fn(this) : options.inverse(this);
        case '===':
            return (v1 === v2) ? options.fn(this) : options.inverse(this);
        case '!=':
            return (v1 != v2) ? options.fn(this) : options.inverse(this);
        case '!==':
            return (v1 !== v2) ? options.fn(this) : options.inverse(this);
        case '<':
            return (v1 < v2) ? options.fn(this) : options.inverse(this);
        case '<=':
            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
        case '>':
            return (v1 > v2) ? options.fn(this) : options.inverse(this);
        case '>=':
            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
        default:
            return options.inverse(this);
    }
});

// Register the 'formatValue' helper to replace empty values with a dash
Handlebars.registerHelper('formatValue', function (value) {
    return value === undefined || value === null || value.trim() === '' ? '-' : value;
});

Handlebars.registerHelper('eq', function(a, b) {
    return a === b; // Return true or false
});

// Register the 'getStyle' helper for general border styles
Handlebars.registerHelper('getStyle', function (borderColor, borderWidth) {
    const safeBorderColor = borderColor || 'black'; // Default fallback color
    const safeBorderWidth = borderWidth || '1'; // Default fallback width
    return `style="border-color: ${safeBorderColor}; border-width: ${safeBorderWidth}px;"`;
});

// Register the 'getStyleHeader' helper for header-specific styles
Handlebars.registerHelper('getStyleHeader', function (borderColor, borderWidth, headerColor) {
    const safeBorderColor = borderColor || 'black'; // Default fallback color
    const safeBorderWidth = borderWidth || '1'; // Default fallback width
    const safeHeaderColor = headerColor || 'black'; // Default fallback text color
    return `style="border-color: ${safeBorderColor}; border-width: ${safeBorderWidth}px; color: ${safeHeaderColor};"`;
});

// Register the 'getStyleValue' helper for value-specific styles
Handlebars.registerHelper('getStyleValue', function (borderColor, borderWidth, valueColor) {
    const safeBorderColor = borderColor || 'black'; // Default fallback color
    const safeBorderWidth = borderWidth || '1'; // Default fallback width
    const safeValueColor = valueColor || 'black'; // Default fallback text color
    return `style="border-color: ${safeBorderColor}; border-width: ${safeBorderWidth}px; color: ${safeValueColor};"`;
});

jQuery(document).ready(function ($) {

    // Function to fetch and process Google Sheet data
    function fetchAndStoreSheetData() {
        const sheetUrl = $('#link').val(); // Get the URL from the input field
        const isTSV = sheetUrl.includes('output=tsv'); // Detect format (TSV or CSV)

        $.ajax({
            url: sheetUrl,
            type: 'GET',
            success: function (response) {
                const parsedData = parseSheetData(response, isTSV ? '\t' : ',');
                const headers = parsedData.shift().map(header => header.trim()); // Clean headers

                // Clean data rows and create an array of objects
                const cleanedData = parsedData.map(row => {
                    return row.reduce((obj, value, index) => {
                        obj[headers[index]] = value.trim(); // Clean each value
                        return obj;
                    }, {});
                });

                // Store headers and full data in localStorage
                localStorage.setItem('sheetHeaders', JSON.stringify(headers));
                localStorage.setItem('sheetData', JSON.stringify(cleanedData));

                // console.log('Headers:', headers); // For debugging
                // console.log('Complete Data:', cleanedData); // For debugging
            },
            error: function (error) {
                console.error('Error fetching data:', error);
            }
        });
    }

    // Function to parse raw data into an array using a delimiter
    function parseSheetData(data, delimiter) {
        return data.split('\n').map(row => row.split(delimiter));
    }

    $('#link').on('change', function(){
        if($(this).val() !== ''){
            $('tr.has-link').slideDown();
            $('#checker_preview.postbox').slideDown();
            $('#dummy').hide();
            fetchAndStoreSheetData();
        }else{
            $('tr.has-link').slideUp();
            $('#dummy').show();
            $('#checker_preview.postbox').slideUp();
        }
    });

    $('#link').trigger('change');

    function getStoredSheetData() {
        const data = JSON.parse(localStorage.getItem('sheetData'));

        if (data) {
            // console.log('Headers:', headers);
            return data;
        } else {
            console.error('No stored data found.');
            return null;
        }
    }

    function getStoredSheetHeaders() {
        const headers = JSON.parse(localStorage.getItem('sheetHeaders'));

        if (headers) {
            // console.log('Headers:', headers);
            return headers;
        } else {
            console.error('No stored data found.');
            return null;
        }
    }

    // Example call to retrieve stored sheet data
    const sheetData = getStoredSheetData();
    const sheetHeaders = getStoredSheetHeaders();

    $('.option-nav-menu').on('click', function(){
        var table = $(this).data('table');
        $('.option-nav-menu').removeClass('active');
        $(this).addClass('active');
        $('.table').hide();
        $(table).show();

        if(table == '#checker-result' && $.inArray($('.result-display-type').val(), ['standard-table', 'cards']) === -1){
            $('#dw-checker-form').hide();
            $('#dw-checker-result').show();
        }else{
            $('#dw-checker-form').show();
            $('#dw-checker-result').hide();
        }
        
    });

    function appendFieldsToPreview() {
        var form_card = $('.repeater-card');
        
        // Prepare data for fields
        var fieldsData = [];
        
        if (form_card.length > 0) {
            $.each(form_card, function (index, card) {
                var fieldType = $(card).find('.select-field-type').val();
                var fieldId = $(card).find('.field-id').val();
                var fieldLabel = $(card).find('.field-label').val();
                var fieldPlaceholder = $(card).find('.field-placeholder').val();
                var selectedKolom = $(card).find('.select-kolom').val(); // Get selected column
    
                // Determine if it's a text or select field
                if (fieldType === 'text') {
                    fieldsData.push({
                        fieldId: fieldId,
                        fieldLabel: fieldLabel,
                        fieldPlaceholder: fieldPlaceholder,
                        fieldLabelColor: $('.field-label-color').val(),
                        fieldDisplayLabel: $('.field-display-label').val(),
                        isTextField: true,
                    });
                } else if (fieldType === 'select') {
                    let uniqueValues = [];

                    if (sheetHeaders.includes(selectedKolom)) { // Check if selectedKolom exists in sheetHeaders
                        // Extract unique values from the selected column in sheetData
                        $.each(sheetData, function (rowIndex, row) {
                            const value = row[selectedKolom]; // Access the value using the column name as the key

                            // Check if value exists and is not empty
                            if (value !== undefined && value !== null && value.trim() !== '' && value !== selectedKolom) {
                                const trimmedValue = value.trim(); // Trim whitespace
                                // Add to uniqueValues if it doesn't already exist
                                if (!uniqueValues.includes(trimmedValue)) {
                                    uniqueValues.push(trimmedValue);
                                }
                            }
                        });
                    }
    
                    fieldsData.push({
                        fieldId: fieldId,
                        fieldLabel: fieldLabel,
                        fieldPlaceholder: fieldPlaceholder,
                        fieldLabelColor: $('.field-label-color').val(),
                        fieldDisplayLabel: $('.field-display-label').val(),
                        uniqueValues: uniqueValues,
                        isSelectField: true,
                    });
                }
            });
        }
    
        // Compile and render fields template
        var fieldsTemplateSource = $('#fields-template').html();
        var fieldsTemplate = Handlebars.compile(fieldsTemplateSource);
        $('.dw-checker-form-fields').html(fieldsTemplate({ fields: fieldsData }));
    
        // Handle styles and other elements
        setStyles();
        
        // Handle results display
        handleResultsDisplay();
    }    

    function setStyles() {
        $('.dw-checker-wrapper').attr('style', 'background-color:' + $('.card-background').val() + $('.card-bg-opacity').val() + '; padding: ' + $('.card-padding').val() + 'em; border-radius: ' + $('.card-border-radius').val() + 'em; width: ' + $('.card-width').val() + 'px; box-shadow: ' + $('.card-box-shadow').val() + ' ' + $('.card-box-shadow-color').val() + ';');
        
        $('.dw-checker-title')
            .attr('style', 'color: ' + $('.card-title').val() + '; text-align: ' + $('.card-title-align').val() + ';')
            .text($('#title').val());
        
        $('.dw-checker-description')
            .attr('style', 'color: ' + $('.card-description').val() + '; text-align: ' + $('.card-description-align').val() + ';')
            .html($('#description').val());
        
        $('.dw-checker-divider')
            .attr('style', 'opacity:.25; border-color:' + $('.card-divider').val() + '; border-width:' + $('.card-divider-width').val() + ';');

        // Button styles
        setButtonStyles();
    }

    function setButtonStyles() {
        $('.search-button')
            .text($('.search-btn-text').val())
            .attr('style', 'background-color:' + $('.search-btn-bg-color').val() + '; color:' + $('.search-btn-text-color').val() + ';');
        
        $('.dw-checker-form-button')
            .attr('style', 'justify-content:' + $('.search-btn-position').val());

        $('.back-button')
            .text($('.back-btn-text').val())
            .attr('style', 'background-color:' + $('.back-btn-bg-color').val() + '; color:' + $('.back-btn-text-color').val() + ';');
        
        $('.dw-checker-result-button')
            .attr('style', 'justify-content:' + $('.back-btn-position').val());
    }

    function getColumnSettings() {
        const columnSettings = {};
        $('.card').each(function () {
            const columnName = $(this).find('input[name*="[key]"]').val();
            columnSettings[columnName] = {
                hide: $(this).find('.output-value-visibility').is(':checked'),
                type: $(this).find('.output-type').val(),
                prefix: $(this).find('input[name*="[prefix]"]').val(),
                button_text: $(this).find('input[name*="[button_text]"]').val()
            };
        });
        return columnSettings;
    }
    
    // Preprocess sheetData based on column settings
    function preprocessSheetData(sheetData, columnSettings) {
        return sheetData.map(row => {
            const processedRow = {};
            for (const [key, value] of Object.entries(row)) {
                if (!columnSettings[key]?.hide) {
                    processedRow[key] = value;
                }
            }
            return processedRow;
        });
    }
    
    // Handlebars helpers
    Handlebars.registerHelper('getColumnSetting', function (columnName, settingKey, value) {
        // Check if the value is empty
        if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
            return ''; // Return a dash for empty values
        }

        // Get column settings
        const columnSettings = getColumnSettings();
        return columnSettings[columnName]?.[settingKey];
    });
    
    Handlebars.registerHelper('getValueWithPrefix', function (columnName) {
        const columnSettings = getColumnSettings();
        const prefix = columnSettings[columnName]?.prefix || '';
        return `${prefix}${this[columnName]}`;
    });
    
    function handleResultsDisplay() {
        if (sheetData.length > 0) {
            // Extract column settings
            const columnSettings = getColumnSettings();
    
            // Preprocess sheetData based on column settings
            const processedSheetData = preprocessSheetData(sheetData, columnSettings);
            const displayTypeSet = $('.result-display-type').val();
            const cardType = $('.result-display-card-type').val(); // Get card type

            $('div#dw-checker-form > .dw-checker-wrapper').removeClass('standard-table vertical-table cards div').addClass(displayTypeSet+'-output-type');

            console.log(cardType);
    
            // Set row limits based on display type
            let limitedData;
            if (displayTypeSet === 'standard-table') {
                limitedData = processedSheetData.slice(0, 30); // Show 30 rows for standard-table
            } else {
                if (displayTypeSet === 'cards' && cardType === 'row'){
                    limitedData = processedSheetData.slice(0, 10);
                }else{
                    limitedData = processedSheetData.slice(0, 3); // Show 3 rows for other outputs
                }
            }
    
            // Prepare data for Handlebars template
            const resultsData = {
                displayType: displayTypeSet,
                cardType: cardType, // Pass card type to the template
                columnHeaders: Object.keys(limitedData[0] || {}), // Column headers for standard table
                results: limitedData,
                resultDivider: $('.result-divider').val() || 'black', // Default fallback
                resultDividerWidth: $('.result-divider-width').val() || '1', // Default fallback
                headerColor: $('#result_header').val() || 'black', // Default fallback
                valueColor: $('#result_value').val() || 'black' // Default fallback
            };
    
            // Debugging logs to verify data
            console.log('Results Data:', resultsData);
    
            // Determine which container to render into
            let targetContainer;
            if (['standard-table', 'cards'].includes(displayTypeSet)) {
                targetContainer = $('#dw-checker-outside-results');
                targetContainer.show(); // Show the outside container
                $('.dw-checker-results').hide(); // Hide the standard results container
                targetContainer = targetContainer.find('.dw-checker-wrapper');
                // Do not hide the form
            } else {
                targetContainer = $('.dw-checker-results');
                targetContainer.show(); // Show the standard results container
                $('#dw-checker-outside-results').hide(); // Hide the outside container
                // Hide the form (if needed)
            }
    
            // Compile and render the appropriate template
            let renderedResults = '';
            switch (displayTypeSet) {
                case 'vertical-table':
                    const verticalTableTemplateSource = $('#vertical-table-template').html();
                    if (!verticalTableTemplateSource) {
                        console.error('Vertical table template is missing or undefined.');
                        return;
                    }
                    const verticalTableTemplate = Handlebars.compile(verticalTableTemplateSource);
                    renderedResults = verticalTableTemplate(resultsData);
                    break;
    
                case 'div':
                    const divTemplateSource = $('#div-template').html();
                    if (!divTemplateSource) {
                        console.error('Div template is missing or undefined.');
                        return;
                    }
                    const divTemplate = Handlebars.compile(divTemplateSource);
                    renderedResults = divTemplate(resultsData);
                    break;
    
                case 'standard-table':
                    const standardTableTemplateSource = $('#standard-table-template').html();
                    if (!standardTableTemplateSource) {
                        console.error('Standard table template is missing or undefined.');
                        return;
                    }
                    const standardTableTemplate = Handlebars.compile(standardTableTemplateSource);
                    renderedResults = standardTableTemplate(resultsData);
                    break;
    
                case 'cards':
                    const cardsTemplateSource = $('#cards-template').html();
                    if (!cardsTemplateSource) {
                        console.error('Cards template is missing or undefined.');
                        return;
                    }
                    const cardsTemplate = Handlebars.compile(cardsTemplateSource);
                    renderedResults = cardsTemplate(resultsData);
                    break;
    
                default:
                    console.error('Unknown display type:', displayTypeSet);
                    return;
            }
    
            // Insert rendered HTML into the target container
            targetContainer.html(renderedResults);
    
            // Initialize DataTables for standard table
            if (displayTypeSet === 'standard-table') {
                $('.dw-standard-table').DataTable({
                    paging: true,
                    pageLength: 10,
                    searching: false, // Hide search input
                    info: false, // Hide "Showing X of Y entries"
                    scrollX: true, // Enable horizontal scrolling
                    responsive: true
                });
                initializePagination(targetContainer);
            }else if(displayTypeSet === 'cards'){
                initializeCardPagination();
            }
        } else {
            console.log('No data available in sheetData.');
        }
    }

    // Pagination logic for cards
    function initializeCardPagination() {
        const pages = $('.result-page');
        let currentPage = 0;

        // Show the first page
        $(pages[currentPage]).show();

        // Update pagination controls
        $('.current-page').text(`Data ${currentPage + 1}`);

        // Previous button
        $('.prev-page').on('click', function () {
            if (currentPage > 0) {
                $(pages[currentPage]).hide();
                currentPage--;
                $(pages[currentPage]).show();
                $('.current-page').text(`Data ${currentPage + 1}`);
            }
        });

        // Next button
        $('.next-page').on('click', function () {
            if (currentPage < pages.length - 1) {
                $(pages[currentPage]).hide();
                currentPage++;
                $(pages[currentPage]).show();
                $('.current-page').text(`Data ${currentPage + 1}`);
            }
        });
    }
    
    function initializePagination(container) {
        let currentPage = 0;
        const pages = container;
        const totalPages = pages.length;
    
        // Show the first page initially
        pages.hide();
        $(pages[currentPage]).show();
    
        // Update pagination controls
        $('.current-page').text(`Data #${currentPage + 1}`);
        $('.prev-page').prop('disabled', currentPage === 0);
        $('.next-page').prop('disabled', currentPage === totalPages - 1);
    
        // Previous button click handler
        $('.prev-page').on('click', () => {
            if (currentPage > 0) {
                currentPage--;
                updatePage(pages, currentPage, totalPages);
            }
        });
    
        // Next button click handler
        $('.next-page').on('click', () => {
            if (currentPage < totalPages - 1) {
                currentPage++;
                updatePage(pages, currentPage, totalPages);
            }
        });
    }
    
    function updatePage(pages, currentPage, totalPages) {
        pages.hide();
        $(pages[currentPage]).show();
        $('.current-page').text(`Data ${currentPage + 1}`);
        $('.prev-page').prop('disabled', currentPage === 0);
        $('.next-page').prop('disabled', currentPage === totalPages - 1);
    }
    

    // Initial call to render preview
    appendFieldsToPreview();

    // Set an initial interval for updating the preview
    // let preview_interval = setInterval(() => {
    //     if ($('#link').val() !== '' && $('#link_data').val() !== '') {
    //         appendFieldsToPreview();
    //     }
    // }, $('#preview-interval').val() * 1000);

    // Change event for updating the interval
    $('#preview-interval').on('change', function () {
        // clearInterval(preview_interval); // Clear the existing interval

        // Set a new interval without redeclaring 'const'
        // preview_interval = setInterval(() => {
        //     if ($('#link').val() !== '' && $('#link_data').val() !== '') {
        //         appendFieldsToPreview();
        //     }
        // }, $('#preview-interval').val() * 1000);
    });

    // Click event for setting preview manually
    $('.set-preview').on('click', function (e) {
        e.preventDefault(); // Prevent default button behavior
        appendFieldsToPreview(); // Call to update preview
    });

    $(document).on('click', '.add-form-card', function (e) {
        e.preventDefault();
    
        // Create a new card element using the Handlebars template
        const cardTemplateSource = $('#repeater-template').html();
        const cardTemplate = Handlebars.compile(cardTemplateSource);
    
        // Prepare data for the new card
        const newCardData = {
            fields: {
                newField: {
                    kolom: sheetHeaders, // Populate the 'kolom' select options with headers
                    type: 'text', // Default type
                    label: '', // Empty label for a fresh card
                    placeholder: '', // Empty placeholder for a fresh card
                    match: 'match' // Default match type
                }
            }
        };
    
        // Render the new card using Handlebars
        const newCardHTML = cardTemplate(newCardData);
    
        // Append the new card to the repeater form field container
        $('.repeater-form-field').append(newCardHTML);
    
        // Trigger change event on select elements if necessary
        $('.select-kolom').trigger('change');
    });
    
    $(document).on('click', '.delete-form-card', function(e){
        e.preventDefault();
        $(this).parents('.card').remove();
    });

    $(document).on('change', '.select-kolom', function(){
        $(this).parents('.card').find('.field-id').val('_'+$(this).val().replace(' ', '_').replace('.', '_').toLowerCase()).trigger('change');
        $(this).parents('.card').find('.field-label').val($(this).val());
        $(this).parents('.card').find('.field-placeholder').val($(this).val());
    });

    $(document).on('change', '.field-id', function(){
        var value = $(this).val();
        var card = $(this).parents('.card');
        card.find('.select-kolom').attr('name', 'checker[fields]['+value+'][kolom]');
        card.find('.select-field-type').attr('name', 'checker[fields]['+value+'][type]');
        card.find('.field-label').attr('name', 'checker[fields]['+value+'][label]');
        card.find('.field-placeholder').attr('name', 'checker[fields]['+value+'][placeholder]');
        card.find('.select-match-type').attr('name', 'checker[fields]['+value+'][match]');
    });

    $(".repeater-form-field").sortable({
        // handle: '.move-card', // Use this class as the handle for sorting
        change: function(event, ui) {
            ui.placeholder.css({
                visibility: 'visible',
                border: '2px dashed #cccccc',
                borderRadius: '5px',
                height: '15rem' // Placeholder height
            });
        },
        placeholder: 'ui-state-highlight', // Optional: use a class for styling the placeholder
        start: function(event, ui) {
            ui.placeholder.height(ui.item.height()); // Match placeholder height to item being dragged
        }
    });

    $('#title').on('input', function(){
        $('.dw-checker-title').text($(this).val());
    });

    $('#description').on('input', function(){
        $('.dw-checker-description').html($(this).val());
    });

    $(document).on('click', '.output-value-visibility', function(){
        if($(this).is(':checked')){
            $(this).val('yes');
        }else{
            $(this).val('no');
        }
    });   

    function setfields() {
        // Check if sheetData is available
        if (sheetData.length > 0) {
            // Extract headers from sheetHeaders
            const headers = sheetHeaders;
    
            // Create options for kolom dropdown based on headers
            let options = '';
            $.each(headers, function (index, header) {
                options += `<option value="${header}">${header}</option>`;
            });
    
            // Check if there is no post ID
            if (!$('#post_id').val()) {
                // Append an empty template for the repeater form field
                $('.repeater-form-field').append($('#repeater-template-empty').html());
                $('.select-kolom, .field-placeholder').trigger('change');
                append_fields_to_preview();
            } else {
                // Load existing repeater field cards from post_meta
                setTimeout(() => {
                    $.ajax({
                        type: 'post',
                        url: '/wp-admin/admin-ajax.php',
                        data: {
                            action: 'load_repeater_field_card',
                            pid: $('#post_id').val(),
                            headers: sheetHeaders
                        },
                        success: function (response) {

                            const selectedColumns = Object.keys(response).map(key => {
                                return {
                                    id: key, // Set the id to the key (e.g., _telegram)
                                    kolom: response[key].label // Set kolom to the label property
                                };
                            });
                            
                            // Compile Handlebars template
                            const source = $("#repeater-template").html();
                            const template = Handlebars.compile(source);
                            
                            // Render template with server response data
                            const html = template({ fields: response });
                            
                            // Insert rendered HTML into DOM
                            $('.repeater-form-field').html(html);
                            appendFieldsToPreview(); // Call additional function after rendering

                            $.each(selectedColumns, function(i, data){
                                const card_id = data.id;
                                $(`[name="checker[fields][${card_id}][kolom]"]`).val(data.kolom).trigger('change');
                            });
                        }
                    });
                }, 2500);
            }
    
            $('.checker-preview > *').removeClass('d-none');
    
            // Load output settings after a delay
            setTimeout(() => {
                $.ajax({
                    type: 'post',
                    url: '/wp-admin/admin-ajax.php',
                    data: {
                        action: 'load_output_setting',
                        pid: $('#post_id').val(),
                        headers: sheetHeaders
                    },
                    success: function (response) {
                        if (response.success) {
                            // Compile output template using Handlebars
                            const source = $("#output-template").html();
                            const template = Handlebars.compile(source);
                            
                            // Pass data to the output template
                            const html = template(response.data);
                            
                            // Append rendered HTML to result value output
                            $('.result-value-output').html(html);
                            
                            // Call additional functions after rendering
                            appendFieldsToPreview();
                        } else {
                            console.log('Error:', response.data);
                        }
                    }
                });
            }, 2500);
        } else {
            console.log('No sheet data available to set fields.');
        }
    }

    setfields();

    $(document).on('change', '.output-type', function(){
        if($(this).val().includes('button')){
            $(this).closest('.row').siblings('.type-button-link').show();
        }else{
            $(this).closest('.row').siblings('.type-button-link').hide();
        }
    });

    $('.result-display-type').on('change', function(){
        $('tr.setting-card-column').hide();
        if($(this).val() == 'cards'){
            $('tr.setting-card-column').show();
        }
    });

    function set_card_output_style() {
        var check = $('#result-card-output-grid-style');
        if(check.length > 0){
            $('#result-card-output-grid-style').append(`
                :root {
                    --card-output-grid-column-desktop: repeat(${$('[name="checker[result][card_grid][desktop]"]').val()}, 1fr);
                    --card-output-grid-column-tablet: repeat(${$('[name="checker[result][card_grid][tablet]"]').val()}, 1fr);
                    --card-output-grid-column-mobile: repeat(${$('[name="checker[result][card_grid][mobile]"]').val()}, 1fr);
                }
            `);
        }else{
            $('head').append(`
                <style id="result-card-output-grid-style">
                    :root {
                        --card-output-grid-column-desktop: repeat(${$('[name="checker[result][card_grid][desktop]"]').val()}, 1fr);
                        --card-output-grid-column-tablet: repeat(${$('[name="checker[result][card_grid][tablet]"]').val()}, 1fr);
                        --card-output-grid-column-mobile: repeat(${$('[name="checker[result][card_grid][mobile]"]').val()}, 1fr);
                    }
                </style>
            `);
        }
    }

    $('.card-column-settings input').on('change blur', function(){
        set_card_output_style();
    });
    
    set_card_output_style();

});