jQuery(document).ready(function ($) {
  $(".toplevel_page_csv_importer_plus_for_acf #mapping-form").on(
    "submit",
    function (event) {
      event.preventDefault();

      // Hide mapping form and show status messages
      $(
        ".toplevel_page_csv_importer_plus_for_acf #importer-form-container"
      ).hide();
      $(".toplevel_page_csv_importer_plus_for_acf #status-messages").show();

      var statusContainer = $("#status-messages");
      var formData = $(this).serialize();

      function processChunk(currentChunk) {
        $.ajax({
          url: ajaxurl,
          type: "POST",
          data: formData + "&current_chunk=" + currentChunk,
          dataType: "json",
          success: function (response) {
            if (response.success) {
              var totalChunks = response.data.total_chunks;
              var percentage =
                (response.data.current_chunk / totalChunks) * 100;
              var percentageInt = parseInt(percentage, 10);
              var backLink =
                '<div class="flex mt-4 justify-end">' +
                '<a href="admin.php?page=csv_importer_plus_for_acf" title="Back to Import" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-blue-600 to-purple-600 hover:bg-indigo-600 focus:outline-none focus:ring-2">Back to Import</a>' +
                "</div>";
              // Update progress bar and text
              $(".toplevel_page_csv_importer_plus_for_acf #progress-bar").css(
                "width",
                percentageInt + "%"
              );
              $(".toplevel_page_csv_importer_plus_for_acf #progress-text").text(
                percentageInt + "%"
              );
              // Trigger custom event for additional handling
              $(document).trigger("cipfa_chunk_processed_ajax", [percentage]);

              // Process the next chunk
              if (response.data.current_chunk < totalChunks) {
                processChunk(response.data.current_chunk);
              } else {
                var logContent = "";
                if (response.data.logs && response.data.logs.length > 0) {
                  logContent =
                    '<strong class="block pt-4 pb-4 text-black text-lg">Log</strong>' +
                    '<div id="view-log-container" class="overflow-y-auto max-h-64 logbox">' +
                    response.data.logs +
                    "</div>";
                }
                var downloadLink = "";
                if (
                  response.data.log_download_url &&
                  response.data.log_count > 10
                ) {
                  downloadLink =
                    '<div class="cipfa mt-4">' +
                    '<a href="' +
                    response.data.log_download_url +
                    '" download class="inline-block text-blue-600 text-xs">' +
                    "View Full Log File (" +
                    response.data.log_count +
                    " entries)</a>" +
                    "</div>";
                }
                statusContainer.html(
                  '<div class="text-green-700 text-lg"><strong class="block mb-2">Success!</strong><p>' +
                    response.data.message +
                    "</p>" +
                    logContent +
                    downloadLink +
                    backLink +
                    "</div>"
                );
              }
            } else {
              // Handle error
              console.log("Error: ", response);
            }
          },
          error: function (xhr, status, error) {
            // Prevent undefined errors
            console.log(
              "AJAX Error (ignored):",
              xhr.responseText || xhr.statusText || error
            );

            // Parse server logs if available
            var serverLogs = [];
            var logDownloadUrl = null;
            var logCount = 0;
            var message =
              "Import completed with some errors. Some chunks were skipped or not fully imported.";

            if (xhr.responseJSON && xhr.responseJSON.data) {
              serverLogs = xhr.responseJSON.data.logs || [];
              logDownloadUrl = xhr.responseJSON.data.log_download_url || null;
              logCount = xhr.responseJSON.data.log_count || 0;
              message = xhr.responseJSON.data.message || message;
            }

            var logContent = "";
            if (serverLogs.length > 0) {
              logContent =
                '<strong class="block pt-4 pb-4 text-black text-lg">Log</strong>' +
                '<div id="view-log-container" class="overflow-y-auto max-h-64 logbox">' +
                serverLogs +
                "</div>";
            }

            var downloadLink = "";
            if (logDownloadUrl && logCount > 20) {
              downloadLink =
                '<div class="cippfa mt-4">' +
                '<a href="' +
                logDownloadUrl +
                '" download class="inline-block text-blue-600 text-xs">' +
                "View Full Log File (" +
                logCount +
                " entries)</a>" +
                "</div>";
            }

            $("#status-messages").html(
              '<div class="text-red-700 text-lg"><strong class="block mb-2">Finished with warnings</strong><p>' +
                message +
                "</p>" +
                logContent +
                downloadLink +
                "</div>"
            );

            // Hide spinner and update progress to 100%
            $(".toplevel_page_csv_importer_plus_for_acf #progress-bar").css(
              "width",
              "100%"
            );
            $(".toplevel_page_csv_importer_plus_for_acf #progress-text").text(
              "100%"
            );
            $(".toplevel_page_csv_importer_plus_for_acf #spinner").hide();
          },
        });
      }
      // Start processing chunks from the first one
      processChunk(0);
    }
  );
  $(document).on("cipfa_chunk_processed_ajax", function (event, percentageInt) {
    // Round to one decimal place
    var roundedPercentage = parseFloat(percentageInt).toFixed(1);
    // Update progress bar width
    $(".toplevel_page_csv_importer_plus_for_acf #progress-bar").css(
      "width",
      roundedPercentage + "%"
    );
    $(".toplevel_page_csv_importer_plus_for_acf #progress-text").text(
      roundedPercentage + "%"
    );
    // Hide spinner when progress is 100%
    if (parseFloat(roundedPercentage) >= 100) {
      $(".toplevel_page_csv_importer_plus_for_acf #spinner").hide();
    }
  });
  $(".toplevel_page_csv_importer_plus_for_acf #csv-upload-form").on(
    "submit",
    function (event) {
      var fileInput = $(".toplevel_page_csv_importer_plus_for_acf #csv-file");
      var file = fileInput.val();

      // Check if file input is empty
      if (file === "") {
        alert("Please upload a CSV file.");
        event.preventDefault(); // Prevent form submission
        return false;
      }

      // Additional check to ensure the file is a CSV
      var fileType = fileInput.prop("files")[0].type;
      if (fileType !== "text/csv" && !file.endsWith(".csv")) {
        alert("Please upload a valid CSV file.");
        event.preventDefault(); // Prevent form submission
        return false;
      }
    }
  );

  // Update the column id text based on the selected post_type
  $(".toplevel_page_csv_importer_plus_for_acf #post_type_select").on(
    "change",
    function () {
      // Get the selected value
      var selectedPostType = $(this).val();
      var idColumnText = $(
        ".toplevel_page_csv_importer_plus_for_acf #id_column_text"
      );

      if (selectedPostType === "product") {
        idColumnText.text(
          "Check only to update existing products. Must include product_id or product_sku column in CSV."
        );
      } else if (selectedPostType === "page") {
        idColumnText.text(
          "Check only to update existing pages. Must include page_id column in CSV."
        );
      } else {
        idColumnText.text(
          "Check only to update existing posts. Must include post_id column in CSV."
        );
      }
    }
  );

  // Check the input with name="post_type" and value="product"
  if ($('input[name="post_type"]').val() === "product") {
    $(".toplevel_page_csv_importer_plus_for_acf #id_map_text").text(
      "Map CSV Columns to Product Fields and ACF Fields"
    );
  }
  // Check the input with name="post_type" and value="page"
  if ($('input[name="post_type"]').val() === "page") {
    $(".toplevel_page_csv_importer_plus_for_acf #id_map_text").text(
      "Map CSV Columns to Page Fields and ACF Fields"
    );
  }

  // Function to update tooltip text
  function updateTooltip(selectElement) {
    var selectedValue = $(selectElement).val();
    var attributePattern = /^product_(\w+)_(attribute|visible|global)$/;
    var attributeValue = attributePattern.test(selectedValue)
      ? selectedValue.match(attributePattern)[1]
      : null;
    var tooltipId = $(selectElement).data("tooltip-target");
    var taxonomyOptionValues = [];
    $('optgroup[label="Custom Taxonomies"] option').each(function () {
      taxonomyOptionValues.push($(this).val());
    });
    var productTaxonomy = [
      "product_type",
      "product_visibility",
      "product_cat",
      "product_tag",
      "product_brand",
      "product_shipping_class",
    ];
    var postType = $(selectElement).find("option:selected").data("type");
    var keyType = $(selectElement).find("option:selected").data("keyType");
    var newText = "";

    switch (selectedValue) {
      case "product_id":
      case "post_id":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the <span class='font-semibold'>" +
          postType +
          "_id</span> in your CSV. <br><br> <span class='italic'>Example data: <span class='font-semibold'>123</span>. (find ID in the <span class='font-semibold'>" +
          postType +
          " ID</span> column in your " +
          postType +
          "'s table)" +
          (postType === "product"
            ? "<br><br> <span class='font-semibold'>Note:</span> To find the variation ID, edit the product and go to the variations tab. The variation ID for each option is shown in the left corner (e.g., '12345')."
            : "");
        break;
      case "product_name":
      case "post_title":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          (postType === "product" ? "_name" : "_title") +
          "</span> in your CSV. <br><br> <span class='italic'>Example data: " +
          (postType === "product" ? "Hoodie with Logo" : "Hello World") +
          "</span>";
        break;
      case "product_description":
      case "post_content":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          (postType === "product" ? "_description" : "_content") +
          "</span> in your CSV. <br><br> <span class='italic'>Example data with or without html: Lorem ipsum &lt;span class=&quot;class&quot;&gt; dolor&lt;/span&gt; sit amet.</span>";
        break;
      case "product_slug":
      case "page_slug":
      case "post_slug":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_slug</span> in your CSV. <br><br> <span class='italic'>Example data: <span class='font-semibold'>" +
          (postType === "product" ? "Hoodie with Logo" : "Hello World") +
          " </span> The " +
          postType +
          "'s slug will automatically become <span class='font-semibold'>" +
          (postType === "product" ? "hoodie-with-logo" : "hello-world") +
          " </span></span>";
        break;
      case "product_short_description":
      case "post_excerpt":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          (postType === "product" ? "_short_description" : "_excerpt") +
          "</span> in your CSV. <br><br> <span class='italic'>Example data with or without html: Lorem ipsum &lt;span class=&quot;class&quot;&gt; dolor&lt;/span&gt; sit amet.</span>";
        break;
      case "product_image_gallery":
      case "product_image":
      case "featured_image":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          (postType === "post" ? "post_" : postType === "page" ? "page_" : "") +
          selectedValue +
          "</span> in your CSV. <br><br> Example data: <code class='bg-gray-100 px-1 rounded'>" +
          (selectedValue === "product_image_gallery"
            ? "http://example.com/wp-content/uploads/2024/09/image1.jpg,http://example.com/wp-content/uploads/2023/09/1.jpg,http://example.com/photo/image100.jpg</code>)"
            : "http://example.com/wp-content/uploads/2024/09/image1.jpg </code><br> <span class='font-semibold'>OR</span> <br> <code class='bg-gray-100 px-1 rounded'> http://example.com/photo/image300.jpg</code>") +
          "<br><br> <span class='text-green-700 font-medium'>Supported:</span><br>Host images in your WordPress media library (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/wp-content/uploads/2024/09/image1.jpg</code>).<br> <span class='font-semibold'>OR</span><br> Host them somewhere within your domain (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/photo/image300.jpg</code>). The plugin will upload or register them into media library.<br><span class='text-red-700 font-medium'>Not supported:</span><br>Uploading images/files from external URLs is a Pro feature. The free version can only use files that are already in your Media Library or elsewhere on this WordPress site." +
          (selectedValue === "product_image_gallery"
            ? "<br><br> <span class='font-semibold'>Note:</span> Multiple image urls separated by commas."
            : "");
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "post_category":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_categories</span> in your CSV. <br><br> <span class='italic'>Example data:<br>Category 1 <br>OR<br> Category 1, Category 3, Category 6 <br>OR<br> Category 3 > Category 5 (where '>' shows Category 3 is parent of Category 5 <br>OR<br> Category 2, Category 3, Category 3 > Category 5 <br>OR<br> Category 5| Category 6| Category 7</span>";
        break;
      case "tags":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_tags</span> in your CSV. <br><br> <span class='italic'>Example data:<br>Tag 1 <br>OR<br> Tag 1, Tag 3, Tag 6 <br>OR<br> Tag3| Tag2 </span>";
        break;
      case "post_author":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_author_usernames</span> in your CSV. <br><br> To import data using the current author, leave these fields (<span class='font-semibold'>post_author_usernames</span>, <span class='font-semibold'>post_author_emails</span>, <span class='font-semibold'>post_author_passwords</span>) empty. To use a specific author, enter their existing username.<br><br> <span class='italic'> <span class='font-semibold'>Note:</span> If the author doesn’t exist, the plugin will automatically create an account using the provided username (<span class='font-semibold'>post_author_usernames</span>), email (<span class='font-semibold'>post_author_emails</span>) and password (<span class='font-semibold'>post_author_passwords</span>) fields </span>";
        break;
      case "post_author_email":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_author_emails</span> in your CSV. <br><br> This email will be used to create a new author account. Please ensure the email is not already associated with another account. <br><br> <span class='font-semibold'>Note:</span> You only need to provide an email if the account doesn’t exist and you’re using this username (<span class='font-semibold'>post_author_usernames</span>) in the CSV for the first time.<br><br> If you later import more posts under the same username (<span class='font-semibold'>post_author_usernames</span>), you do not need to provide the email every time. </span>";
        break;
      case "author_password":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_author_passwords</span> in your CSV. <br><br> This password will be used to create a new author account. Please provide a strong password. <br><br> <span class='font-semibold'>Note:</span> You only need to provide password if the account doesn’t exist and you’re using this username (<span class='font-semibold'>post_author_usernames</span>) in the CSV for the first time.<br><br> If you later import more posts under the same username (<span class='font-semibold'>post_author_usernames</span>), you do not need to provide the password every time. </span>";
        break;
      case "product_published":
      case "post_status":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          (postType === "product" ? "_published" : "_status") +
          "</span> in your CSV. <br><br> <span class='italic'>Example data:</span><br>Publish <span class='font-semibold'>/</span> Published <span class='font-semibold'>/</span> 1<br>Schedule <span class='font-semibold'>/</span> Scheduled <span class='font-semibold'>/</span> Future <span class='font-semibold'>/</span> 2<br>Draft <span class='font-semibold'>/</span> 0<br>Pending <span class='font-semibold'>/</span> -1<br>Private <span class='font-semibold'>/</span> 3<br>Trash <span class='font-semibold'>/</span> Trashed";
        break;
      case "post_password":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_password</span> in your CSV. <br><br> <span class='italic'>Example data: 123Abc.</span>";
        break;
      case "product_date":
      case "post_date":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_date</span> in your CSV. <br><br> <span class='italic'>Example data: <br> d/m/Y --> 18/07/2025 <br> d/m/Y --> 18/07/2025 07:45 PM <br> d/m/Y --> 18/07/2025 08:20:00 AM</span> <br><br> <span class='font-semibold'>Note:</span> if the post_date field is empty, the plugin will use the current date and time. If it contains only a date, the plugin will use that date with the current time. If both a date and time are provided, the plugin will use them exactly as given.";
        break;
      case "comments":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_comments</span> in your CSV. <br><br> <span class='italic'>Example data:<br>enable<br>disable</span>";
        break;
      case "pings":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_pings</span> in your CSV. <br><br> <span class='italic'>Example data:<br>enable<br>disable</span>";
        break;
      case "menu_order":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>menu_order</span> in your CSV. <br><br> <span class='italic'>Example data: <br> 1<br>2<br>3</span>";
        break;
      case "page_parent":
      case "post_parent":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_parent</span> in your CSV. <br><br> <span class='italic'>Example data: 123 (find ID in the <span class='font-semibold'>" +
          postType +
          " ID</span> column in your " +
          postType +
          "'s table).</span>";
        break;
      case "page_template":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          postType +
          "_template</span> in your CSV. <br><br> <span class='italic'>Example data:<br>Page Builder <br>OR<br> Default template</span>";
        break;
      case "yoast_seo_title":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_seo_title</span> in your CSV. <br><br> <span class='italic'>Example data: Hello World.</span>";
        break;
      case "yoast_focus_Keyword":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_focus_Keyword</span> in your CSV. <br><br> <span class='italic'>Example data: Hello</span>";
        break;
      case "yoast_meta_description":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_meta_description</span> in your CSV. <br><br> <span class='italic'>Example data: Consectetur adipiscing elit.</span>";
        break;
      case "yoast_meta_robots_advanced":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_meta_robots_advanced</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>noimageindex</span> --> Prevents images on the page from being indexed. <br><span class='font-semibold'>noarchive</span> --> Stops search engines from showing a cached version of the page. <br><span class='font-semibold'>nosnippet</span> --> Blocks search engines from displaying a snippet (meta description) in results. <br><span class='font-semibold'>noindex</span> --> Directs search engines not to index the page. <br><span class='font-semibold'>nofollow</span> --> Tells search engines not to follow links on the page. <br><span class='font-semibold'>none</span> --> Equivalent to noindex, nofollow. <br><span class='font-semibold'>index</span> --> Explicitly allows indexing (default if not specified). <br><span class='font-semibold'>follow</span> --> Allows search engines to follow links (default if not specified).</span>";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "yoast_show_content_in_search_results":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_show_content_in_search_results</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Content is included in search results.<br><span class='font-semibold'>1</span> --> Content is not included in search results.</span>";
        break;
      case "yoast_search_engines_follow_links":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_search_engines_follow_links</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Search engines will follow links on the page.<br><span class='font-semibold'>1</span> --> Search engines will not follow links on the page.</span>";
        break;
      case "yoast_breadcrumb_title":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_breadcrumb_title</span> in your CSV. <br><br> <span class='italic'>Example data: Breadcrumb title 1</span>";
        break;
      case "yoast_canonical_url":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_canonical_url</span> in your CSV. <br><br> <span class='italic'>Example data: https://example.com/sample-post-1</span>";
        break;
      case "yoast_schema_page_type":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_schema_page_type</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>WebPage</span> --> Generic page (default). <br><span class='font-semibold'>ItemPage</span> --> E-commerce product pages (WooCommerce). <br><span class='font-semibold'>AboutPage</span> --> An about us/company information page. <br><span class='font-semibold'>FAQPage </span> --> A frequently asked questions page. <br><span class='font-semibold'>QAPage</span> --> A question-and-answer page. <br><span class='font-semibold'>ContactPage</span> --> A contact information page. <br><span class='font-semibold'>MedicalWebPage</span> --> A medical/health-related webpage. <br><span class='font-semibold'>CollectionPage</span> -->  A collection of items (e.g., products, articles). <br><span class='font-semibold'>CheckoutPage</span> -->  A shopping checkout page. <br><span class='font-semibold'>RealEstateListing</span> -->  A property/real estate listing page. <br><span class='font-semibold'>ProfilePage</span> -->  A user profile page.<br><span class='font-semibold'>SearchResultsPage</span> -->  A search results page.</span>";
        break;
      case "yoast_schema_article_type":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_schema_article_type</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>Article</span> --> Default for most posts. <br><span class='font-semibold'>NewsArticle</span> --> For news content. <br><span class='font-semibold'>BlogPosting</span> --> For blog posts. <br><span class='font-semibold'>TechArticle </span> --> For technical articles. <br><span class='font-semibold'>ScholarlyArticle</span> --> An academic/research publication. <br><span class='font-semibold'>SocialMediaPosting</span> --> Content from social media platforms. <br><span class='font-semibold'>SatiricalArticle</span> --> Humorous/satire content piece. <br><span class='font-semibold'>AdvertiserContentArticle</span> -->   Sponsored/native advertising content. <br><span class='font-semibold'>Report</span> -->  An investigative or detailed report. <br><span class='font-semibold'>None</span> -->  No specific article type.</span>";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "yoast_cornerstone_content":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>yoast_cornerstone_content</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Content is not cornerstone by default.<br><span class='font-semibold'>1</span> --> Content is cornerstone.</span>";
        break;
      case "rank_math_title":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_title</span> in your CSV. <br><br> <span class='italic'>Example data: Hello World.</span>";
        break;
      case "rank_math_focus_keyword":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_focus_keyword</span> in your CSV. <br><br> <span class='italic'>Example data: <br> hello <br> hello world, sample </span>";
        break;
      case "rank_math_description":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_description</span> in your CSV. <br><br> <span class='italic'>Example data: Consectetur adipiscing elit.</span>";
        break;
      case "rank_math_robots":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_robots</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>index</span> --> Allows search engines to list this page in their results. <br><span class='font-semibold'>follow</span> --> Allows search engines to follow the links on this page. <br><span class='font-semibold'>noindex</span> --> Instructs search engines not to list this page in their results. <br><span class='font-semibold'>nofollow</span> --> Instructs search engines not to follow the links on this page. <br><span class='font-semibold'>none</span> --> A shorthand for simultaneously using 'noindex, nofollow'. <br><span class='font-semibold'>noarchive</span> --> Prevents search engines from showing a cached copy of the page. <br><span class='font-semibold'>nosnippet</span> --> Prevents search engines from showing a text snippet or video preview. <br><span class='font-semibold'>noimageindex</span> --> Asks search engines not to index images on this page.</span>";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "rank_math_canonical":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_canonical</span> in your CSV. <br><br> <span class='italic'>Example data: https://example.com/sample-post-1</span>";
        break;
      case "rank_math_advanced_robots":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_advanced_robots</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>max-snippet</span> --> Sets the maximum character length for the search result text snippet. <br><span class='font-semibold'>max-video-preview</span> --> Sets the maximum duration in seconds for a video preview in search results. <br><span class='font-semibold'>max-image-preview</span> --> Controls the maximum size of the image preview shown for this page. <br><span class='font-semibold'>unavailable_after</span> --> Specifies a date/time after which the page should no longer be indexed.</span>";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "rank_math_pillar_content":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_pillar_content</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Content is not pillar content by default.<br><span class='font-semibold'>1</span> --> Content is pillar content.</span>";
        break;
      case "rank_math_rich_snippet":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_rich_snippet</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>article</span> --> Standard written articles, blog posts, and news stories. <br><span class='font-semibold'>newsarticle</span> --> Factual news reports from a news organization. <br><span class='font-semibold'>blogposting</span> --> Informal blog posts and personal commentary. <br><span class='font-semibold'>product </span> --> A specific product available for purchase. <br><span class='font-semibold'>course</span> --> An educational course or training program. <br><span class='font-semibold'>event</span> --> A scheduled event like a concert, festival, or conference. <br><span class='font-semibold'>recipe</span> --> A cooking or baking recipe with ingredients and steps. <br><span class='font-semibold'>jobposting</span> --> A specific job opening for hiring. <br><span class='font-semibold'>book</span> --> A published book with an author and ISBN. <br><span class='font-semibold'>music</span> --> A specific music track or song.<br><span class='font-semibold'>video</span> --> A video file or movie with description and thumbnail.<br><span class='font-semibold'>service</span> --> A professional service offered by a business.<br><span class='font-semibold'>software</span> --> A software application or program.<br><span class='font-semibold'>faq</span> --> A page with a list of questions and their answers.<br><span class='font-semibold'>howto</span> --> A step-by-step guide to completing a task.<br><span class='font-semibold'>person</span> --> A specific, individual person.<br><span class='font-semibold'>organization</span> --> A company, institution, or association.<br><span class='font-semibold'>localbusiness</span> --> A physical business location like a store or restaurant.<br><span class='font-semibold'>webpage</span> --> A generic webpage for content that doesn't fit other types.</span>";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "rank_math_schema_json":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_schema_json</span> in your CSV. <br><br> <span class='italic'>Example data: {\"@type\": \"Article\", \"headline\": \"Hello World\"}.</span>";
        break;
      case "rank_math_facebook_title":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_facebook_title</span> in your CSV. <br><br> <span class='italic'>Example data: Hello World - Facebook.</span>";
        break;
      case "rank_math_facebook_description":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_facebook_description</span> in your CSV. <br><br> <span class='italic'>Example data: FB description for Hello World.</span>";
        break;
      case "rank_math_facebook_image":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_facebook_image</span> in your CSV. <br><br> <span class='italic'>Example data: <code class='bg-gray-100 px-1 rounded'> http://example.com/wp-content/uploads/2024/09/image1.jpg</code> <br> <span class='font-semibold'>OR</span> <br> <code class='bg-gray-100 px-1 rounded'> http://example.com/photo/image300.jpg </code> <br><br> <span class='text-green-700 font-medium'>Supported:</span><br>Host images in your WordPress media library (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/wp-content/uploads/2024/09/image1.jpg</code>).<br> <span class='font-semibold'>OR</span><br> Host them somewhere within your domain (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/photo/image300.jpg</code>). The plugin will upload or register them into media library.<br><span class='text-red-700 font-medium'>Not supported:</span><br>Uploading images/files from external URLs is a Pro feature. The free version can only use files that are already in your Media Library or elsewhere on this WordPress site. </span>";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "rank_math_twitter_title":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_twitter_title</span> in your CSV. <br><br> <span class='italic'>Example data: Hello World - Facebook.</span>";
        break;
      case "rank_math_twitter_description":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_twitter_description</span> in your CSV. <br><br> <span class='italic'>Example data: FB description for Hello World.</span>";
        break;
      case "rank_math_twitter_image":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_twitter_image</span> in your CSV. <br><br> <span class='italic'>Example data: <code class='bg-gray-100 px-1 rounded'> http://example.com/wp-content/uploads/2024/09/image1.jpg</code> <br> <span class='font-semibold'>OR</span> <br> <code class='bg-gray-100 px-1 rounded'> http://example.com/photo/image300.jpg </code> <br><br> <span class='text-green-700 font-medium'>Supported:</span><br>Host images in your WordPress media library (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/wp-content/uploads/2024/09/image1.jpg</code>).<br> <span class='font-semibold'>OR</span><br> Host them somewhere within your domain (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/photo/image300.jpg</code>). The plugin will upload or register them into media library.<br><span class='text-red-700 font-medium'>Not supported:</span><br>Uploading images/files from external URLs is a Pro feature. The free version can only use files that are already in your Media Library or elsewhere on this WordPress site. </span>";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "rank_math_primary_category_id":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>rank_math_primary_category_id</span> in your CSV. <br><br> <span class='italic'>Example data: 14117. <br><br> <span class='font-semibold'>Note:</span> To find the category ID, edit the category and look at the URL. You will see a parameter like tag_ID=14117; the number (e.g., 14117) is your category ID.</span>";
        break;
      case "product_type":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_type</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>simple</span> --> Basic standalone product. <br><span class='font-semibold'>variable</span> --> Multi-option variable product. <br><span class='font-semibold'>variation</span> --> Individual product variant.<br><span class='font-semibold'>grouped </span> --> Product collection bundle. <br><span class='font-semibold'>external</span> -->  Affiliate-linked external product. </span>";
        break;
      case "product_virtual":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_virtual</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Product is not virtual.<br><span class='font-semibold'>1</span> --> Product is virtual.</span>";
        break;
      case "product_downloadable":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_downloadable</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Product is not downloadable.<br><span class='font-semibold'>1</span> --> Product is downloadable.</span>";
        break;
      case "product_sku":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_sku</span> in your CSV. <br><br> <span class='italic'>Example data: <br>woo-hoodie-with-logo <br><span class='font-semibold'>OR</span><br> 123456 <br><span class='font-semibold'>OR</span><br> 123ABC </span>";
        break;
      case "product_barcode":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_barcode</span> in your CSV. <br><br> <span class='italic'>Example data: 123456</span>";
        break;
      case "product_visibility":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_visibility</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>visible</span> --> product appears in shop, search, and categories. <br><span class='font-semibold'>exclude from catalog / exclude-from-catalog</span> --> Product is hidden from the main shop but accessible via direct link. <br><span class='font-semibold'>featured / feature</span> --> Product is marked as featured and can be highlighted in special sections.<br><span class='font-semibold'>exclude from search / exclude-from-search </span> --> Product appears in the shop but not in search results. </span>";
        break;
      case "product_sale_date_price_end":
      case "product_sale_date_price_start":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>" +
          selectedValue +
          "</span> in your CSV. <br><br> <span class='italic'>Example data: <br> d/m/Y --> 18/07/2025</span> <br><br> <span class='font-semibold'>Note:</span> The discounted price that applies during the sale period ( product_sale_date_price_start & product_sale_date_price_end). </span>";
        break;
      case "product_tax_status":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_tax_status</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>taxable</span> --> Standard tax rules apply (default for most products). <br><span class='font-semibold'>shipping</span> --> Only shipping is taxable (product price is tax-free). <br><span class='font-semibold'>none</span> --> No tax is applied (fully tax-exempt).</span>";
        break;
      case "product_tax_class":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_tax_class</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>standard</span> --> Default tax rate. <br><span class='font-semibold'>reduced-rate</span> --> Lower tax rate. <br><span class='font-semibold'>zero-rate</span> --> 0% tax.</span>";
        break;
      case "product_stock_status":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_stock_status</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>instock</span> --> Product is available for purchase (default). <br><span class='font-semibold'>outofstock</span> --> Product cannot be purchased (unless backorders are allowed). <br><span class='font-semibold'>onbackorder</span> --> Product is temporarily out of stock but can still be ordered.</span>";
        break;
      case "product_manage_stock":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_manage_stock</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Disables stock management.<br><span class='font-semibold'>1</span> --> Enables stock management. </span>";
        break;
      case "product_stock":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_stock</span> in your CSV. <br><br> <span class='italic'>Example data: 10 <br><br> <span class='font-semibold'>Note:</span> product_manage_stock must be set to 1 (enabled). product_stock_status automatically updates when product_stock reaches 0. </span>";
        break;
      case "product_allow_backorders":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_allow_backorders</span> in your CSV. <br><br> <span class='italic'> Example data: <br><span class='font-semibold'>no</span> --> Backorders disabled. Customers cannot purchase if stock ≤ 0 <br><span class='font-semibold'>notify</span> --> Backorders allowed, but admin gets a notification. <br><span class='font-semibold'>yes</span> --> Backorders silently allowed (no notifications).</span>";
        break;
      case "product_low_stock_amount":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_low_stock_amount</span> in your CSV. <br><br> <span class='italic'>Example data: 3 <br><br> <span class='font-semibold'>Note:</span> Defines the minimum stock threshold at which WooCommerce triggers a 'Low Stock' notification for the product. </span>";
        break;
      case "product_sold_individually":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_sold_individually</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Customers can purchase any quantity of a product per order. <br><span class='font-semibold'>1</span> --> Customers can purchase only one unit of a product per order. </span>";
        break;
      case "product_weight":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_weight</span> in your CSV. <br><br> <span class='italic'>Example data: 1.2</span>";
        break;
      case "product_length":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_length</span> in your CSV. <br><br> <span class='italic'>Example data: 10</span>";
        break;
      case "product_width":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_width</span> in your CSV. <br><br> <span class='italic'>Example data: 6</span>";
        break;
      case "product_height":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_height</span> in your CSV. <br><br> <span class='italic'>Example data: 3</span>";
        break;
      case "product_enable_reviews":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_enable_reviews</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> The review tab is hidden, and no new reviews can be posted. <br><span class='font-semibold'>1</span> --> Customers can submit ratings + reviews on the product page. </span>";
        break;
      case "product_purchase_note":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_purchase_note</span> in your CSV. <br><br> <span class='italic'>Example data: Download instructions <br><br> <span class='font-semibold'>Note:</span> A customizable message displayed to customers after they purchase. </span>";
        break;
      case "product_sale_price":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_sale_price</span> in your CSV. <br><br> <span class='italic'>Example data: 80 <br><br> <span class='font-semibold'>Note:</span> The discounted price works alongside the regular price (product_regular_price) to display savings to customers.</span>";
        break;
      case "product_regular_price":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_regular_price</span> in your CSV. <br><br> <span class='italic'>Example data: 100 </span>";
        break;
      case "product_cat":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'> product_cat </span> in your CSV. <br><br> <span class='italic'>Example data:<br>Category 1 <br>OR<br> Category 1, Category 3, Category 6 <br>OR<br> Category 3 > Category 5 (where '>' shows Category 3 is parent of Category 5 <br>OR<br> Category 2, Category 3, Category 3 > Category 5 </span>";
        break;
      case "product_tag":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'> product_tag </span> in your CSV. <br><br> <span class='italic'>Example data:<br>Tag 1 <br>OR<br> Tag1, Tag2, Tag3 </span>";
        break;
      case "product_shipping_class":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'> product_shipping_class </span> in your CSV. <br><br> <span class='italic'>Example data: fragile <br><br> <span class='font-semibold'>Note:</span> A customizable class assigned to products to apply specific shipping rules (e.g., rates, methods) based on shared characteristics like size, fragility, or delivery urgency. </span>";
        break;
      case "product_upsell_ids":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_upsell_ids</span> in your CSV. <br><br> <span class='italic'>Example data: <span class='font-semibold'>123, 89, 50</span> product IDs (find IDs in the <span class='font-semibold'>Product ID</span> column in your Product table).<br><br> <span class='font-semibold'>Note:</span> Multiple product IDs separated by commas.</span>";
        break;
      case "product_crosssell_ids":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_crosssell_ids</span> in your CSV. <br><br> <span class='italic'>Example data: <span class='font-semibold'>123, 89, 50</span> product IDs (find IDs in the <span class='font-semibold'>Product ID</span> column in your Product's table).<br><br> <span class='font-semibold'>Note:</span> Multiple product IDs separated by commas.</span>";
        break;
      case "product_position":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'> product_position </span> in your CSV. <br><br> <span class='italic'>Example data: <span class='font-semibold'>3</span>. </span>";
        break;
      case "product_wpcom_is_markdown":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_wpcom_is_markdown</span> in your CSV. <br><br> <span class='italic'>Example data: <br><span class='font-semibold'>0</span> --> Markdown is enabled for the product. <br><span class='font-semibold'>1</span> --> Markdown is disabled. </span>";
        break;
      case "product_download_file_name":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_download_file_name</span> in your CSV. <br><br> <span class='italic'>Example data: <br>Sample File<br> OR <br> Book 1, Book 2, Book 3 <br><br> <span class='font-semibold'>Note:</span> Multiple download file names separated by commas.</span>";
        break;
      case "product_download_file_url":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'> product_download_file_url </span> in your CSV. <br><br> Example data: <br> <code class='bg-gray-100 px-1 rounded'>http://example.com/wp-content/uploads/2024/09/data.pdf</code> <br> <span class='font-semibold'>OR</span> <br> <code class='bg-gray-100 px-1 rounded'>http://example.com/wp-content/uploads/2024/09/data.pdf, http://example.com/file/sample_file.pdf</code> <br><br> <span class='text-green-700 font-medium'>Supported:</span><br>Host files in your WordPress media library (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/wp-content/uploads/2024/09/data.pdf</code>).<br> <span class='font-semibold'>OR</span><br>Host them somewhere within your domain (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/file/sample_file.pdf</code>). The plugin will upload or register them into media library.<br><span class='text-red-700 font-medium'>Not supported:</span><br>Uploading images/files from external URLs is a Pro feature. The free version can only use files that are already in your Media Library or elsewhere on this WordPress site. <br><br> <span class='font-semibold'>Note:</span> Multiple file urls separated by commas.";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      case "product_download_limit":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_download_limit</span> in your CSV. <br><br> <span class='italic'>Example data: <br> 1 <br> OR <br> -1 (unlimited downloads) <br><br> <span class='font-semibold'>Note:</span> It controls how many times a customer can download a file after purchasing a downloadable product. </span>";
        break;
      case "product_download_expiry":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_download_expiry</span> in your CSV. <br><br> <span class='italic'>Example data: <br> 0 (no access) <br> OR <br> -1 (lifetime access) <br> OR <br> 30 (30-day access)<br><br> <span class='font-semibold'>Note:</span> It determines the number of days a download link remains accessible after purchase. This applies only to downloadable products. </span>";
        break;
      case "product_brand":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_brand</span> in your CSV. <br><br> <span class='italic'>Example data: <br> A <br> OR <br> A,B,C <br><br> <span class='font-semibold'>Note:</span> It used to categorize products by brand. Multiple values separated by commas. </span>";
        break;
      case "product_attribute":
        newText =
          "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, use the column name <span class='font-semibold'>product_attribute</span> in your CSV. <br><br> <span class='italic'>Example data: <br> Color: Blue, Red, Pink <br> OR <br> Color: Blue, Red, Pink; Size: Small, Medium, Large; Blood Type: A, B, AB+, O <br> OR <br> Color*!: Blue, Red, Pink; Size*: Small, Medium, Large; <br><br> <span class='font-semibold'>Note:</span> Attributes separated by <span class='font-semibold'>;  (semicolon)</span> and multiple values of attribute separated by <span class='font-semibold'>,(comma)</span> By default the attribute is visible and global. But you can make attributes not visible using * like <br><br>Size*: Small, Medium, Large; <br><br> To make attribute non global you can use ! like <br><br>Blood Type!: A, B, AB+, O <br><br> You can also make attribute non visible and non global using <br><br> Blood Type*!: A, B, AB+, O </span>";
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
        break;
      default:
        newText =
          "First, select a mapping option, then hover again for more help.";
    }
    if ($.inArray(selectedValue, productTaxonomy) === -1) {
      switch (true) {
        case taxonomyOptionValues.includes(selectedValue):
          newText =
            "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, Use a custom taxonomy slug like <span class='font-semibold'>'car_color'</span> in your CSV (The taxonomy slug (e.g., 'car_color') appears in the URL (post_type=car_color) when you open the Car Color taxonomy). <br><br> <span class='italic'>Example data:<br>Red <br>OR<br> Red, Green, Blue <br>OR<br> Orange > Black (where '>' shows Orange is parent of Black <br>OR<br> Yellow, Orange > Black > White <br>OR<br> Red| Green| Blue<br><br> <span class='font-semibold'>Note:</span> The parent-child relationship only works if you enable the <span class='font-semibold'>Hierarchical</span> option in the custom taxonomy settings. </span>";
          break;
      }
    }
    if (postType === "acf") {
      const baseText =
        "For <span class='text-green-700 font-medium'>auto-mapping</span> and a <span class='font-semibold'>successful import</span>, name your CSV column exactly like your <span class='font-semibold'>ACF field name</span> (<span class='font-semibold'>WP Admin Dashboard --> ACF --> Field Group --> Field</span> (use the <span class='font-semibold'>Field Name</span>, not the label, usually lowercase with underscore like <span class='font-semibold'>First Name	--> first_name </span>).";

      let exampleData = "";
      let isLargeTooltip = false;

      switch (keyType) {
        case "text":
          exampleData =
            "<br><br> <span class='italic'>Example data: Hello World </span>";
          break;
        case "number":
          exampleData =
            "<br><br> <span class='italic'>Example data: 123 </span>";
          break;
        case "textarea":
          exampleData =
            "<br><br> <span class='italic'>Example data: Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>";
          break;
        case "url":
          exampleData =
            "<br><br> <span class='italic'>Example data: https://www.example.com </span>";
          break;
        case "range":
          exampleData =
            "<br><br> <span class='italic'>Example data: 80 </span>";
          break;
        case "email":
          exampleData =
            "<br><br> <span class='italic'>Example data: info@example.com </span>";
          break;
        case "password":
          exampleData =
            "<br><br> <span class='italic'>Example data: 123Abc </span>";
          break;
        case "image":
          exampleData =
            "<br><br> <span class='italic'>Example data: <code class='bg-gray-100 px-1 rounded'> http://example.com/wp-content/uploads/2024/09/image1.jpg</code> <br> <span class='font-semibold'>OR</span> <br> <code class='bg-gray-100 px-1 rounded'> http://example.com/photo/image300.jpg </code> <br><br> <span class='text-green-700 font-medium'>Supported:</span><br>Host images in your WordPress media library (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/wp-content/uploads/2024/09/image1.jpg</code>).<br> <span class='font-semibold'>OR</span><br> Host them somewhere within your domain (e.g., <code class='bg-gray-100 px-1 rounded'>http://example.com/photo/image300.jpg</code>). The plugin will upload or register them into media library.<br><span class='text-red-700 font-medium'>Not supported:</span><br>Uploading images/files from external URLs is a Pro feature. The free version can only use files that are already in your Media Library or elsewhere on this WordPress site. </span>";
          isLargeTooltip = true;
          break;
        case "select":
          exampleData =
            "<br><br> <span class='italic'>Example data: <br> red <br> red,green<br><br> <span class='font-semibold'>Note:</span> Use the exact choice as defined in your ACF select field. Choices are <span class='font-semibold'>case-sensitive </span> for example, 'Red' and 'red' are treated differently. If the select field has 'Red', entering 'red' will not import. <br><br> If you define the value and label in the ACF select field settings as <span class='font-semibold'>red:Red</span> (where red is the value and Red is the label), then use the exact same format (red:Red) in the CSV file. <br><br> Multiple values separated by commas. Make sure to enable the <span class='font-semibold'>multi-select</span> setting in your ACF select field. </span>";
          break;
        case "true_false":
          exampleData =
            "<br><br> <span class='italic'>Example data: <br> <span class='font-semibold'> 0 </span> unchecked <br> <span class='font-semibold'> 1 </span> checked </span>";
          break;
        case "date_picker":
          exampleData =
            "<br><br> <span class='italic'>Example data: <br> d/m/Y --> 18/07/2025</span>";
          break;
      }

      newText = baseText + exampleData;

      if (isLargeTooltip) {
        $("#" + tooltipId + " .cipfa-popper").addClass("large");
      }
    }

    $("#" + tooltipId)
      .find(".cipfa-popper")
      .html('<div class="cipfa-popper-arrow"></div>' + newText);
  }

  // Trigger on page load for all matching selects
  $('.toplevel_page_csv_importer_plus_for_acf select[name^="mapping"]').each(
    function () {
      updateTooltip(this);
    }
  );

  // Trigger on change
  $('.toplevel_page_csv_importer_plus_for_acf select[name^="mapping"]').change(
    function () {
      updateTooltip(this);
    }
  );

  // Copy ID
  $(document).on("click", ".cipfa-copy-id", function () {
    var id = $(this).data("id");
    if (!id) return;

    var $el = $(this);

    function showTooltip(message) {
      var $tooltip = $('<span class="cipfa-copy-tooltip"></span>').text(
        message
      );
      $tooltip.css({
        position: "absolute",
        background: "#000",
        color: "#fff",
        padding: "4px 8px",
        borderRadius: "4px",
        fontSize: "12px",
        zIndex: 9999,
        whiteSpace: "nowrap",
      });
      $("body").append($tooltip);

      // Position above element
      var offset = $el.offset();
      $tooltip.css({
        top: offset.top - $tooltip.outerHeight() - 6,
        left: offset.left + ($el.outerWidth() - $tooltip.outerWidth()) / 2,
      });

      $tooltip
        .fadeIn(200)
        .delay(1200)
        .fadeOut(400, function () {
          $(this).remove();
        });
    }

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard
        .writeText(id)
        .then(function () {
          showTooltip("Copied ID: " + id);
        })
        .catch(function (err) {
          console.error("Failed to copy: ", err);
        });
    } else {
      // Fallback for older browsers
      var $temp = $("<textarea>");
      $("body").append($temp);
      $temp.val(id).select();
      try {
        document.execCommand("copy");
        showTooltip("Copied ID: " + id);
      } catch (err) {
        console.error("Fallback: Copy failed", err);
      }
      $temp.remove();
    }
  });

  // Run on page load
  toggleEditCheckbox();
  // Run when user changes post type
  $(".cipfa #post_type_select").on("change", function () {
    toggleEditCheckbox();
  });

  function toggleEditCheckbox() {
    var postType = $(".cipfa #post_type_select").val();

    if (postType && postType.indexOf("acf_option_") === 0) {
      $(".cipfa #edit_existing").prop("disabled", true);
    } else {
      $(".cipfa #edit_existing").prop("disabled", false);
    }
  }
});
