acf.addAction('acfe/fields/button/before/name=category_maintenance_btn', function($el, data){        

    const form = document.getElementById("post");
    const notice = document.createElement("div");
    notice.setAttribute("id", "maintenance-sport-cat-notice");

    notice.innerHTML = `
    <div class="acf-admin-notice notice notice-success is-dismissible" data-persisted="false" data-persist-id="175309035a73fe39362540d67a497553">
      <p>Data extraction from the API has started. Visit the RDG-BLOCKS Sport Categories page</p>
      <button type="button" class="notice-dismiss">
        <span class="screen-reader-text">Dismiss this notice.</span>
      </button>
    </div>
    `;
    
    form.parentNode.insertBefore(notice, form);

    const button = document.getElementById("category_maintenance_btn_acf_proccess");
    button.disabled = true;
    button.textContent = "Procesing...";
});

acf.addAction('acfe/fields/button/success/name=category_maintenance_btn', function($el, data){        
    console.log("test002", data);    
});

acf.addAction('acfe/fields/button/complete/name=category_maintenance_btn', function(response, $el, data){
    
    const notice = document.getElementById("maintenance-sport-cat-notice");
    const form = document.getElementById("post");
    response = JSON.parse(response);

    notice.innerHTML = `
    <div class="acf-admin-notice notice notice-${response.type} is-dismissible" data-persisted="false" data-persist-id="175309035a73fe39362540d67a497553">
      <p>${response.message}</p>
      <button type="button" class="notice-dismiss">
        <span class="screen-reader-text">Dismiss this notice.</span>
      </button>
    </div>
    `;
    
    form.parentNode.insertBefore(notice, form);
    const button = document.getElementById("category_maintenance_btn_acf_proccess");
    button.disabled = false;
    button.textContent = "Process";
    
});
