// Image Upload
jQuery(document).ready(function($) {
    var mediaUploader;
    $('#upload_image_button').click(function(e) {
        e.preventDefault();
        if (mediaUploader) {
            mediaUploader.open();
            return;
        }
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Select or Upload Image',
            button: {
                text: 'Use this image'
            },
            multiple: false
        });
        mediaUploader.on('select', function() {
            var attachment = mediaUploader.state().get('selection').first().toJSON();
            $('#w_image_url').val(attachment.url);
        });
        mediaUploader.open();
    });
});

// For colorPicker
jQuery(document).ready(function($) {
    $('.color-picker').wpColorPicker();
    $('select.bwdcv-nice-select').niceSelect();
    $('#dataTablee').DataTable({
        responsive: true,
        paging: false,
        searching: false,
        info: false,
        ordering: false
    });
});

// For input range 
document.getElementById('w_text_rotation').addEventListener('input', function () {
    document.getElementById('watermark-text-rotation').textContent = this.value + '°';
});

document.getElementById('w_img_opacity_input_id').addEventListener('input', function() {
    document.getElementById('w_img_opacity_value_id').textContent = this.value;
});
document.getElementById('w_text_font_size_input_id').addEventListener('input', function() {
    document.getElementById('w_text_font_value_id').textContent = this.value;
});
document.getElementById('cv_download_text_font_input_id').addEventListener('input', function() {
    document.getElementById('cv_download_text_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_download_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_download_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_download_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_download_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_download_info_title_text_font_input_id').addEventListener('input', function() {
    document.getElementById('cv_download_info_title_text_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_download_info_title_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_download_info_title_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_download_info_title_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_download_info_title_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_anew_text_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_anew_text_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_anew_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_anew_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_anew_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_anew_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_product_img_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_product_img_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_product_img_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_product_img_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_title_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_title_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_title_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_title_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_title_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_title_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_dsc_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_dsc_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_dsc_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_dsc_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_dsc_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_dsc_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_mprice_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_mprice_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_mprice_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_mprice_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_mprice_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_mprice_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_plan_name_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_plan_name_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_plan_name_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_plan_name_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_plan_name_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_plan_name_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_sub_name_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_sub_name_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_sub_name_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_sub_name_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_sub_name_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_sub_name_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_buy_now_text_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_buy_now_text_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_buy_now_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_buy_now_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_buy_now_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_buy_now_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_product_wrap_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_product_wrap_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_sub_page_product_wrap_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_sub_page_product_wrap_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_dash_tab_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_dash_tab_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_dash_tab_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_dash_tab_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_dash_tab_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_dash_tab_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_dash_tab_content_font_size_input_id').addEventListener('input', function() {
    document.getElementById('cv_dash_tab_content_font_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_dash_tab_content_border_width_input_id').addEventListener('input', function() {
    document.getElementById('cv_dash_tab_content_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('cv_dash_tab_content_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('cv_dash_tab_content_border_radius_value_id').textContent = this.value + 'px';
});

document.getElementById('bwdcv_reg_tab_font_size_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_tab_font_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_tab_border_width_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_tab_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_tab_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_tab_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_label_font_size_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_label_font_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_label_border_width_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_label_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_label_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_label_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_btn_text_font_size_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_btn_text_font_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_btn_border_width_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_btn_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_btn_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_btn_border_radius_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_form_wrap_border_width_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_form_wrap_border_width_value_id').textContent = this.value + 'px';
});
document.getElementById('bwdcv_reg_form_wrap_border_radius_input_id').addEventListener('input', function() {
    document.getElementById('bwdcv_reg_form_wrap_border_radius_value_id').textContent = this.value + 'px';
});

// For Style Previews
const checkboxes = document.querySelectorAll('.settings-tab-styles input[type="checkbox"]');
const previewImage = document.getElementById('previewImage');
checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', () => {
        if (checkbox.checked) {
            const newImage = checkbox.dataset.image;
            previewImage.src = newImage;
        }
    });
});

document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
        const content = header.nextElementSibling;
        const icon = header.querySelector('.icon');
        if (content.style.display === 'block') {
            content.style.display = 'none';
            icon.classList.remove('rotate');
        } else {
            document.querySelectorAll('.cv-setting-content').forEach(item => {
                item.style.display = 'none';
            });
            document.querySelectorAll('.icon').forEach(icon => {
                icon.classList.remove('rotate');
            });
            content.style.display = 'block';
            icon.classList.add('rotate');
        }
    });
});
