jQuery(document).ready(function ($) {
    //START - NAV TABS FOR THE THEME OPTION AT BACKEND- NOT BY ACF 
    jQuery(document).on("click", 'ul.tabs li', function (e) {
        localStorage.setItem('current_tab', jQuery(e.target).attr('data-tab'));
        //alert(localStorage);
        //localStorage.setItem('current_usr', admin_ajaxObj.curr_user);
        var tab_id = jQuery(this).attr('data-tab');

        jQuery('ul.tabs li.tab-link').removeClass('current');
        jQuery('.tab-content').removeClass('current');

        jQuery(this).addClass('current');
        jQuery("#" + tab_id).addClass('current');
    });
    //END - NAV TABS FOR THE THEME OPTION AT BACKEND- NOT BY ACF 

    //START - ADD BUTTON IN BACKEND THEME SETTINGS(NOT ACF), UNDER SOCIAL MEDIA TAB.
    $( '#add-row' ).on('click', function(e) {
        e.preventDefault();
        var row = $( '.empty-row.custom-repeter-text' ).clone(true);
        row.removeClass( 'empty-row custom-repeter-text' ).css('display','table-row');
        row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
        return false;
    });
    //END - ADD BUTTON IN BACKEND THEME SETTINGS(NOT ACF), UNDER SOCIAL MEDIA TAB.

    //START - REMOVE BUTTON IN BACKEND THEME SETTINGS(NOT ACF), UNDER SOCIAL MEDIA TAB.
    $( '.remove-row' ).on('click', function() {
        $(this).parents('tr').remove();
        return false;
    });
    //END - REMOVE BUTTON IN BACKEND THEME SETTINGS(NOT ACF), UNDER SOCIAL MEDIA TAB.

    jQuery(document).find('.is_img:checked').parents('table').find('.upload_image_button').css('display', 'block');
    jQuery(document).find('.is_img:checked').parents('table').find('.image-wrap').css('display', 'block');
    jQuery(document).find('.is_img:checked').val('true');

    jQuery(document).on('change', '.is_img', function () {
        if (jQuery(this).prop("checked") === true) {
            jQuery(this).val('true');
            jQuery(this).parents('table').find('.upload_image_button').css('display', 'block');
        } else {
            jQuery(this).val('false');
        }
        jQuery(this).parents('table').find('.image-wrap').html('');
        jQuery(this).parents('table').find('.upload_image').val('');
    });
    var custom_uploader;

    jQuery(document).on('click', '.upload_image_button', function (e) {
        //IF THE UPLOADER OBJECT HAS ALREADY BEEN CREATED, REOPEN THE DIALOG
        var $this = jQuery(this);
        if (custom_uploader)
        {
            custom_uploader.open();
        }

        //EXTEND THE WP.MEDIA OBJECT
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //WHEN A FILE IS SELECTED, GRAB THE URL AND SET IT AS THE TEXT FIELD'S VALUE
        custom_uploader.on('select', function () {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            jQuery($this).parents('.input').find('.upload_image').val(attachment.url);
            jQuery($this).parents('.input').find('.image-wrap').html('<img id="thumb" src="' + attachment.url + '"/><a class="remove-image" style="display: inline;">&#215;</a>');
        });

        //OPEN THE UPLAODER DIALOG
        custom_uploader.open();
    });

    // START - REMOVE IMAGE FROM THEME SETTINGS WHEN CLICK ON 'X'
    jQuery(".remove-image").on("click", function (e) {
        e.preventDefault();
        let parentDiv = jQuery(this).closest(".input");
        
        // Remove the image and hide the button
        parentDiv.find("img").remove();
        jQuery(this).remove();
        
        // Clear the hidden input field
        parentDiv.find(".upload_image").val("");
    });
    // END - REMOVE IMAGE FROM THEME SETTINGS WHEN CLICK ON 'X'
});