jQuery(document).ready(function($) {
    $('.tab-btn').on('click', function() {
        $('.tab-btn').removeClass('active');
        $('.tab-pane').removeClass('active');
        $(this).addClass('active');
        $('#' + $(this).data('tab')).addClass('active');
    });

    if ($.fn.wpColorPicker) {
        $('.color-picker').wpColorPicker();
    }

    $('.upload-image-btn').on('click', function(e) {
        e.preventDefault();
        var target = $(this).data('target');
        var frame = wp.media({
            title: 'Select Image',
            multiple: false,
            library: { type: 'image' }
        });
        frame.on('select', function() {
            var attachment = frame.state().get('selection').first().toJSON();
            $('#' + target).val(attachment.id);
            var preview = $('#' + target + '-preview');
            preview.html('<img src="' + attachment.sizes.thumbnail.url + '" style="max-width:200px;height:auto;" />');
        });
        frame.open();
    });

    $('.remove-image-btn').on('click', function(e) {
        e.preventDefault();
        var target = $(this).data('target');
        $('#' + target).val('');
        $('#' + target + '-preview').html('');
    });
});