jQuery(document).ready(function($) {
    function changeColor(){
        var dataForm = $('.sports-plugin-settings-form.active').find('.input_data_bongdako');
        var dataArray = [];
        dataForm.each(function() {
            var inputValue = $(this).val();
            var inputId = $(this).attr('id');
            var inputData = $(this).attr('data');
            dataArray.push({
                'name': inputId,
                'label': inputData,
                'color': inputValue
            });
        });
        $('.class_style').empty();
        let cssString = ":root {\n";
        dataArray.forEach(item => {
            cssString += `    ${item.name}: ${item.color} !important;\n`;
        });
        cssString += "}";
        $('.class_style').html(cssString);    
    }
    
    changeColor();
    
    $(document).on('input change', '.input_data_bongdako', function() {
        var color = $(this).val();
        $(this).parent().find('.text-bg-color').val(color);
        changeColor();
    });
    $(document).on('input change', '.text-bg-color', function() {
        var color = $(this).val();
        $(this).parent().find('.input_data_bongdako').val(color);
        changeColor();
    });
    
    
    $('.open-settings').on('click',function(e){
        e.preventDefault();
        var styleID = $(this).attr('data-id');
        $.ajax({
            url: my_ajax_object.ajaxurl,
            method: 'GET',  // Sử dụng GET thay vì POST
            data: {
                action: 'get_template_bongdako',
                style_id: styleID
            },
            beforeSend: function() {
                $('.loading_html').addClass('active');
            },
            success: function(response) {
                $('.loading_html').removeClass('active');
                if (response.success) {
                    var renderColor = $('#' + styleID).find('.render_color');
                    if (renderColor.length) {
                        renderColor.html(response.data.data);
                        changeColor();
                    } else {
                        console.error('Không tìm thấy phần tử .render_color.');
                    }
                }
            },
            error: function() {
                $('.loading_html').removeClass('active');
                console.log('Đã có lỗi khi gửi yêu cầu.');
            }
        });
    });
    $('a.default_template_bongdako').on('click', function(e) {
        e.preventDefault();
        var styleID = $(this).closest('.form_submit_style').attr('id');
    
        $.ajax({
            url: my_ajax_object.ajaxurl,
            method: 'POST',
            data: {
                action: 'default_template_bongdako',
                style_id: styleID,
                security: my_ajax_object.default_nonce
            },
            beforeSend: function() {
                $('.loading_html').addClass('active');
            },
            success: function(response) {
                $('.loading_html').removeClass('active');
                if (response.success) {
                    alert('Dữ liệu đã được lưu thành công.');
                    var renderColor = $('#' + styleID).find('.render_color');
                    if (renderColor.length) {
                        renderColor.html(response.data.data);
                        changeColor();
                    }
                } else {
                    alert(response.message || 'Đã có lỗi xảy ra.');
                }
            },
            error: function() {
                $('.loading_html').removeClass('active');
                alert('Đã có lỗi khi gửi yêu cầu.');
            }
        });
    });

    $('a.save_template_bongdako').on('click', function(e) {
        e.preventDefault();
        
        var dataArray = [];
        var styleID = $(this).closest('.form_submit_style').attr('id');
        var dataForm = $(this).closest('.form_submit_style').find('.input_data_bongdako');
        
        dataForm.each(function() {
            var inputValue = $(this).val();
            var inputId = $(this).attr('id');
            var inputData = $(this).attr('data');
            dataArray.push({
                'name': inputId,
                'label': inputData,
                'color': inputValue
            });
        });
        var jsonData = JSON.stringify(dataArray);
        $.ajax({
            url: ajaxurl,
            method: 'POST',
            data: {
                action: 'save_template_bongdako',
                style_id: styleID,
                data: jsonData,
                security: my_ajax_object.save_nonce
            },
            beforeSend: function() {
                
                $('.loading_html').addClass('active');
            },
            success: function(response) {
                $('.loading_html').removeClass('active');
                if (response.success) {
                    alert('Dữ liệu đã được lưu thành công.');
                } else {
                    alert('Đã có lỗi xảy ra.');
                }
            },
            error: function() {
                $('.loading_html').removeClass('active');
                alert('Đã có lỗi khi gửi yêu cầu.');
            }
        });
    });
});
