jQuery(document).ready(function ($) {
    $('#upload_image_button').click(function (e) {
        e.preventDefault();
        var custom_logo_input = $('#dapper_admin_panel_custom_logo_path');
        var custom_logo_url = custom_logo_input.val();
        var custom_logo_preview = $('#custom_logo_preview');

        var image = wp.media({
            title: 'Upload Custom Logo',
            multiple: false,
        }).open()
            .on('select', function (e) {
                var uploaded_image = image.state().get('selection').first();
                var image_url = uploaded_image.toJSON().url;
                custom_logo_input.val(image_url);

                // Display the preview dynamically
                custom_logo_preview.html('<img src="' + image_url + '" alt="Custom Logo Preview" style="max-width: 100px; max-height: 100px;" />');
            });

        // If a custom logo URL is already set, pre-select it in the media uploader
        if (custom_logo_url !== '') {
            var selection = image.state().get('selection');
            var attachment = wp.media.attachment(custom_logo_url);
            attachment.fetch();
            selection.add(attachment ? [attachment] : []);

            // Display the preview for the initially set logo
            custom_logo_preview.html('<img src="' + custom_logo_url + '" alt="Custom Logo Preview" style="max-width: 100px; max-height: 100px;" />');
        }
    });
});