// source --> https://sofaree.com/wp-content/plugins/listeo-core/assets/js/submit-listing.js?ver=1.9.40 
jQuery(document).ready(function ($) {
  // prevent multiple


  // get custom fields from the term
  $(".add-listing-section #listing_category,.add-listing-section #tax-listing_category").on("change", function (e) {
    
    if ($(this).prop("multiple")) {
      var cat_ids;
      cat_ids = $(this).val();
    } else {
      var cat_ids = [];
      cat_ids.push($(this).val());
    }
    var term = $(this).data('taxonomy');

    $.ajax({
      type: "POST",
      dataType: "json",
      url: listeo.ajaxurl,
      data: {
        action: "listeo_get_custom_fields_from_term",
        cat_ids: cat_ids,
        term: term,
        panel: false,
        //'nonce': nonce
      },
      success: function (data) {
        $(
          ".listeo_core-term-checklist-listing_feature,.listeo_core-term-checklist-tax-listing_feature"
        ).removeClass("loading");
        $(".custom-term-features-content")
          .html(data["output"])
          .removeClass("loading");
      },
    });
  });

   $(document).on(
    "drilldown-updated",
    ".submit-page .drilldown-menu",
    function (e) {
  
      var cat_ids = [];
      $(".drilldown-generated").each(function () {
        cat_ids.push($(this).val());
      });
      var term = $(this).data('taxonomy');

      $.ajax({
        type: "POST",
        dataType: "json",
        url: listeo.ajaxurl,
        data: {
          action: "listeo_get_custom_fields_from_term",
          cat_ids: cat_ids,
          term: term,
          panel: false,
          //'nonce': nonce
        },
        success: function (data) {
          $(
            ".listeo_core-term-checklist-listing_feature,.listeo_core-term-checklist-tax-listing_feature"
          ).removeClass("loading");
          $(".custom-term-features-content")
            .html(data["output"])
            .removeClass("loading");
        },
      });
    }
  );


  // Target the form on the preview page
  var $previewForm = $("form#listing_preview");

  if ($previewForm.length) {
    $previewForm.on("submit", function () {
      
      // Find the continue button (adjust the selector if needed)
      var $continueButton = $(this).find('input[name="continue"]');
      var $editButton = $(this).find('input[name="edit_listing"]');

      // If the continue button was clicked
      if ($continueButton.is(":focus")) {
        // Disable it to prevent multiple submissions
        $continueButton
          .prop("disabled", true)
          .css("opacity", "0.5")
          .val("Processing...");
      } else if ($editButton.is(":focus")) {
        // If edit button was clicked, disable that instead
        $editButton
          .prop("disabled", true)
          .css("opacity", "0.5")
          .val("Processing...");
      }

      // The form continues submission normally
      return true;
    });
  }

  // Also add similar protection to the main submit listing form
  var $submitForm = $("form#submit-listing-form");

  if ($submitForm.length) {
    $submitForm.on("submit", function () {
      var $submitButton = $(this).find('input[type="submit"]');

      // Disable the button
      $submitButton
        .prop("disabled", true)
        .css("opacity", "0.5")
        .val("Processing...");

      // The form continues submission normally
      return true;
    });
  }


  // Create buttons for each time input but hide them initially
  $(".listeo-flatpickr").each(function () {
    var copyButton = $("<button>", {
      text: listeo_core.copytoalldays,
      class: "copy-time-button",
      css: {
        marginTop: "5px",
        display: "none", // Hide buttons by default
      },
    });

    $(this).after(copyButton);
  });

  // Handle hover events on day rows
  $(".opening-day").each(function () {
    $(this).hover(
      function () {
        // On hover in - show only this day's buttons
        $(this).find(".copy-time-button").show();
      },
      function () {
        // On hover out - hide this day's buttons
        $(this).find(".copy-time-button").hide();
      }
    );
  });

  // Handle button clicks
  $(".copy-time-button").on("click", function (e) {
    e.preventDefault();

    var input = $(this).prev(".listeo-flatpickr");
    var timeValue = input.val();

    if (!timeValue) {
      alert(listeo_core.selectimefirst);
      return;
    }

    // Determine if this is an opening or closing time input
    var isOpeningTime = input.attr("name").includes("opening");
    var currentDay = input.attr("name").split("_")[1]; // Get the current day name

    // Get all time inputs of the same type (opening or closing)
    var selector =
      '.listeo-flatpickr[name*="' +
      (isOpeningTime ? "opening" : "closing") +
      '_hour"]';
    var allInputs = $(selector);

    // Copy the time to all other days
    allInputs.each(function () {
      var targetInput = $(this);
      var targetDay = targetInput.attr("name").split("_")[1];

      if (targetDay !== currentDay) {
        targetInput.val(timeValue);

        // Trigger change event to ensure any linked functionality updates
        targetInput.trigger("change");

        // If using flatpickr, update its instance
        if (targetInput[0]._flatpickr) {
          targetInput[0]._flatpickr.setDate(timeValue, true);
        }
      }
    });
  });

  // FullCalendar Initialization for Availability Calendar
  if ($("#fullcalendar").length) {
    var calendarEl = document.getElementById("fullcalendar");

    // Parse existing blocked dates (format: DD-MM-YYYY|DD-MM-YYYY|...)
    var blockedDatesInput = $("#fullcalendar-blocked-dates").val();
    var blockedDates = [];

    if (blockedDatesInput) {
      blockedDatesInput.split("|").forEach(function (dateStr) {
        if (dateStr.trim() !== "") {
          // Convert from DD-MM-YYYY to YYYY-MM-DD for FullCalendar
          var parts = dateStr.split("-");
          if (parts.length === 3) {
            blockedDates.push(parts[2] + "-" + parts[1] + "-" + parts[0]);
          }
        }
      });
    }

    // Parse existing price data (format: {"DD-MM-YYYY":"price",...})
    var priceDataInput = $("#fullcalendar-price-data").val();
    var priceData = {};

    if (priceDataInput) {
      try {
        var parsedPrices = JSON.parse(priceDataInput);
        // Convert keys from DD-MM-YYYY to YYYY-MM-DD for FullCalendar
        Object.keys(parsedPrices).forEach(function (dateStr) {
          if (dateStr.match(/^\d{2}-\d{2}-\d{4}$/)) {
            var parts = dateStr.split("-");
            priceData[parts[2] + "-" + parts[1] + "-" + parts[0]] =
              parsedPrices[dateStr];
          }
        });
      } catch (e) {
        console.error("Error parsing price data:", e);
      }
    }

    // Track currently selected dates
    var selectedDates = [];

    // Track clicks for double-click detection
    var lastClickTime = 0;
    var lastClickDate = null;

    // Track the tooltip position and state
    var tooltipVisible = false;
    var lastSelectionEnd = null;

    // Tooltip positioned near the clicked date with smart positioning
    function showTooltipForDate(dateStr) {
      // Remove any existing tooltips first
      $("#selection-tooltip, #single-date-tooltip").remove();
      $("body").removeClass("has-date-tooltip");

      if (!dateStr) {
        tooltipVisible = false;
        return;
      }

      // Find the cell for the clicked date
      var dayCell = $(
        ".fc-day[data-date='" +
          dateStr +
          "'], .fc-daygrid-day[data-date='" +
          dateStr +
          "']"
      );

      if (!dayCell.length) {
        console.error("Could not find calendar cell for date:", dateStr);
        return;
      }

      // Get position of the calendar and day cell
      var calendar = $("#fullcalendar");
      var calendarOffset = calendar.offset();
      var cellOffset = dayCell.offset();

      // Add class to body
      $("body").addClass("has-date-tooltip");

      // Create tooltip - CSS is now in the theme's style.css file
      var tooltip = $("<div>", {
        id: "single-date-tooltip",
        class: "selection-tooltip",
      });

      // Add count of selected dates (just 1 in this case)
      var selectionText = $("<div>", {
        text: listeo_core.one_date_selected,
        css: {
          marginRight: "10px",
          alignSelf: "center",
          fontWeight: "bold",
        },
      });

      // Add buttons - styles are now in the theme's style.css file
      var blockBtn = $("<button>", {
        text: listeo_core.block,
        type: "button",
        class: "tooltip-btn block-btn",
      }).on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();

        // Add to selection then trigger block
        selectedDates = [dateStr];
        $("#block-dates-btn").trigger("click");

        return false;
      });

      var priceBtn = $("<button>", {
        text: listeo_core.setprice,
        type: "button",
        class: "tooltip-btn price-btn",
      }).on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();

        // Add to selection then trigger set price
        selectedDates = [dateStr];
        $("#set-price-btn").trigger("click");

        return false;
      });

      var clearBtn = $("<button>", {
        text: listeo_core.unblock,
        type: "button",
        class: "tooltip-btn clear-btn",
      }).on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();

        // Add to selection then trigger unblock
        selectedDates = [dateStr];
        $("#clear-selection-btn").trigger("click");

        return false;
      });

      // Add buttons directly to tooltip for horizontal layout
      tooltip.append(selectionText, blockBtn, priceBtn, clearBtn);

      // Add tooltip to the calendar
      $("#fullcalendar").append(tooltip);
      tooltipVisible = true;

      // Position the tooltip - smart positioning to avoid window edge
      positionTooltip(tooltip, dayCell);

      // Prevent clicks on the tooltip from bubbling to document
      tooltip.on("click", function (e) {
        e.stopPropagation();
      });
    }

    // Original tooltip function (still used for multi-select)
    function showSelectionTooltip() {
      // Skip if there are no selected dates
      if (selectedDates.length === 0) {
        tooltipVisible = false;
        return;
      }

      // If it's a single date selection, use the standalone tooltip
      if (selectedDates.length === 1) {
        showTooltipForDate(selectedDates[0]);
        return;
      }

      // For multiple dates, use the original tooltip
      // Remove any existing tooltips
      $("#selection-tooltip, #single-date-tooltip").remove();
      $("body").removeClass("has-date-tooltip");

      // Mark document body with tooltip-active class
      $("body").addClass("has-date-tooltip");

      // Create tooltip element - using CSS from style.css
      var tooltip = $("<div>", {
        id: "selection-tooltip",
        class: "selection-tooltip",
      });

      // Add buttons - using CSS from style.css
      var blockBtn = $("<button>", {
        text: listeo_core.block,
        type: "button",
        class: "tooltip-btn block-btn",
      }).on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        $("#block-dates-btn").trigger("click");
        return false;
      });

      var priceBtn = $("<button>", {
        text: listeo_core.setprice,
        type: "button",
        class: "tooltip-btn price-btn",
      }).on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        $("#set-price-btn").trigger("click");
        return false;
      });

      var clearBtn = $("<button>", {
        text: listeo_core.unblock,
        type: "button",
        class: "tooltip-btn clear-btn",
      }).on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        $("#clear-selection-btn").trigger("click");
        return false;
      });

      // Add count of selected dates
      var selectionText = $("<div>", {
        text: selectedDates.length + listeo_core.dates_selected,
        css: {
          marginRight: "10px",
          alignSelf: "center",
          fontWeight: "bold",
        },
      });

      // Add buttons to tooltip
      tooltip.append(selectionText, blockBtn, priceBtn, clearBtn);

      // Add to calendar container first (needed for width calculation)
      $("#fullcalendar").after(tooltip);
      tooltipVisible = true;

      // Find the last selected date's cell for smart positioning
      if (lastSelectionEnd) {
        var dateCell = $(
          `.fc-day[data-date="${lastSelectionEnd}"], .fc-daygrid-day[data-date="${lastSelectionEnd}"]`
        );
        if (dateCell.length) {
          // We have a valid cell, use smart positioning
          positionTooltip(tooltip, dateCell);
        } else {
          // Fallback to old positioning
          var position = getTooltipPosition();
          tooltip.css({
            top: position.top + "px",
            left: position.left + "px",
          });
        }
      } else {
        // Fallback to old positioning
        var position = getTooltipPosition();
        tooltip.css({
          top: position.top + "px",
          left: position.left + "px",
        });
      }
    }

    // Position tooltip with smart boundary detection
    function positionTooltip(tooltip, targetCell) {
      // Get the necessary dimensions and positions
      var calendar = $("#fullcalendar");
      var calendarOffset = calendar.offset();
      var cellOffset = targetCell.offset();
      var windowWidth = $(window).width();

      // First position the tooltip for measurement
      tooltip.css({
        top:
          cellOffset.top -
          calendarOffset.top +
          targetCell.outerHeight() +
          5 +
          "px",
        left: cellOffset.left - calendarOffset.left + "px",
      });

      // Now check if it would overflow the right edge of the window
      var tooltipWidth = tooltip.outerWidth();
      var tooltipRight = cellOffset.left + tooltipWidth;
      var isOverflowing = tooltipRight > windowWidth - 20; // 20px margin

      if (isOverflowing) {
        // Position to the left side of the cell instead
        var newLeft = Math.max(0, cellOffset.left - tooltipWidth);
        tooltip.css({
          left: newLeft - calendarOffset.left + "px",
        });
      }
    }

    // Get position for the tooltip (used by multi-select tooltip)
    function getTooltipPosition() {
      var position = { top: 0, left: 0 };

      // If we have a selection end date, try to position near it
      if (lastSelectionEnd) {
        var dateCell = $(`.fc-day[data-date="${lastSelectionEnd}"]`);
        if (dateCell.length) {
          var rect = dateCell[0].getBoundingClientRect();
          var calendarRect = $("#fullcalendar")[0].getBoundingClientRect();

          position.top = rect.bottom - calendarRect.top + 10; // 10px below the cell
          position.left = rect.left - calendarRect.left + rect.width / 2; // Center horizontally

          // Check for right edge overflow
          var tooltipWidth = 300; // Approximate width of tooltip
          var rightEdge = position.left + tooltipWidth;
          var calendarWidth = calendar.width();

          if (rightEdge > calendarWidth) {
            // Move tooltip to left of cell instead
            position.left = rect.left - calendarRect.left - tooltipWidth;
            if (position.left < 0) {
              // If that would be off-screen left, position at left edge
              position.left = 10;
            }
          }
        } else {
          // Fallback to calendar position
          position.top = $("#fullcalendar").height() / 2;
          position.left = $("#fullcalendar").width() / 2;
        }
      } else {
        // Fallback to calendar position
        position.top = $("#fullcalendar").height() / 2;
        position.left = $("#fullcalendar").width() / 2;
      }

      return position;
    }

    // Create events for blocked dates and price data
    function generateEvents() {
      var events = [];

      // Add blocked dates
      blockedDates.forEach(function (dateStr) {
        events.push({
          start: dateStr,
          display: "background",
          backgroundColor: "rgba(255, 0, 0, 0.2)",
          className: "blocked-date",
          allDay: true,
        });
      });

      // Add price data
      Object.keys(priceData).forEach(function (dateStr) {
        events.push({
          start: dateStr,
          title: (listeo_core.currency_symbol || "$") + priceData[dateStr],
          className: "has-price",
          allDay: true,
        });
      });

      // Add selected dates
      selectedDates.forEach(function (dateStr) {
        events.push({
          start: dateStr,
          display: "background",
          backgroundColor: "rgba(0, 120, 215, 0.2)",
          className: "selected-date",
          allDay: true,
        });
      });

      return events;
    }

    // Initialize calendar
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: "dayGridMonth",
      locale: listeoCal.language,
      headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth",
      },
      selectable: true,
      selectMirror: true,
      unselectAuto: false, // Prevent automatic unselection
      unselect: function (info) {
        // Prevent unselect behavior if tooltip is visible
        if (tooltipVisible) {
          return false;
        }
      },
      unselectCancel: ".selection-tooltip", // Prevent unselection when clicking tooltip
      events: generateEvents(),

      // Handle range selection (drag)
      select: function (info) {
        // Clear previous selection
        selectedDates = [];

        // Log selection info for debugging
        console.log("Selection info:", {
          start: info.start,
          end: info.end,
          startStr: info.startStr,
          endStr: info.endStr,
        });

        // Note: FullCalendar's end date is exclusive (the day after the last selected day)
        // So we need to adjust it to match what's visually highlighted

        // For a single day selection
        if (
          info.startStr === info.endStr ||
          new Date(info.endStr) - new Date(info.startStr) === 86400000
        ) {
          // 1 day in ms
          // This is a single day selection
          // Add regardless of whether it's blocked or not - we want to select everything
          selectedDates.push(info.startStr);
        } else {
          // This is a multi-day selection
          var start = new Date(info.startStr);
          var end = new Date(info.endStr);

          // Loop through each day from start to end-1 (since end is exclusive)
          var current = new Date(start);
          while (current < end) {
            var dateStr = current.toISOString().split("T")[0];
            console.log("Processing date:", dateStr);

            // Add all dates to selection, even if blocked
            selectedDates.push(dateStr);

            // Move to next day
            current.setDate(current.getDate() + 1);
          }
        }

        console.log("Final selected dates:", selectedDates);

        // Always store the last selected date for tooltip positioning
        lastSelectionEnd =
          selectedDates.length > 0
            ? selectedDates[selectedDates.length - 1]
            : info.startStr;

        // Highlight the selected dates
        calendar.removeAllEvents();
        calendar.addEventSource(generateEvents());

        // Show the tooltip with action buttons
        showSelectionTooltip();
      },

      // Handle clicking on dates
      dateClick: function (info) {
        var dateStr = info.dateStr;
        var now = new Date().getTime();

        // Check for double-click (within 300ms on the same date)
        if (lastClickDate === dateStr && now - lastClickTime < 300) {
          // This is a double-click - toggle blocked status

          // If already blocked, unblock it
          var blockedIndex = blockedDates.indexOf(dateStr);
          if (blockedIndex !== -1) {
            blockedDates.splice(blockedIndex, 1);
          } else {
            // Not blocked, so block it
            blockedDates.push(dateStr);
          }

          // Update hidden input
          updateBlockedDatesInput();

          // Refresh display
          calendar.removeAllEvents();
          calendar.addEventSource(generateEvents());

          // Reset tracking variables to prevent triple-click issues
          lastClickTime = 0;
          lastClickDate = null;

          // Hide any tooltip
          $("#selection-tooltip, #single-date-tooltip").remove();
          $("body").removeClass("has-date-tooltip");
          tooltipVisible = false;

          return;
        }

        // Not a double-click, update tracking variables
        lastClickTime = now;
        lastClickDate = dateStr;

        // Store in selection array
        selectedDates = [dateStr];

        // Prevent default calendar click behavior
        if (info.jsEvent) {
          info.jsEvent.preventDefault();
          info.jsEvent.stopPropagation();
        }

        // Show the standalone tooltip directly - completely bypass FullCalendar selection
        showTooltipForDate(dateStr);

        // Refresh calendar display
        calendar.removeAllEvents();
        calendar.addEventSource(generateEvents());
      },

      // Handle clicking on events
      eventClick: function (info) {
        var dateStr = info.event.startStr;
        console.log("Event clicked on date:", dateStr, "Event:", info.event);

        // Handle blocked dates
        if (info.event.classNames.includes("blocked-date")) {
          console.log("Clicked on blocked date:", dateStr);

          // Confirm unblocking
          if (confirm("Unblock this date?")) {
            var blockedIndex = blockedDates.indexOf(dateStr);
            if (blockedIndex !== -1) {
              blockedDates.splice(blockedIndex, 1);

              // Update hidden input
              updateBlockedDatesInput();

              // Refresh display
              calendar.removeAllEvents();
              calendar.addEventSource(generateEvents());
            }
          }
          return;
        }

        // Handle price events
        if (info.event.classNames.includes("has-price")) {
          var currentPrice = priceData[dateStr] || "";

          var price = prompt(
            listeo_core.enterPrice +
              " " +
              dateStr +
              "\n" +
              listeo_core.leaveBlank,
            currentPrice
          );

          if (price !== null) {
            if (price === "" || isNaN(parseFloat(price))) {
              delete priceData[dateStr];
            } else {
              priceData[dateStr] = parseFloat(price).toFixed(2);
            }

            // Update hidden input
            updatePriceDataInput();

            // Refresh display
            calendar.removeAllEvents();
            calendar.addEventSource(generateEvents());
          }
        }
      },

      locale: listeoCal.language,
      firstDay: parseInt(listeo_core.firstDay || "1"),
    });

    // Convert YYYY-MM-DD to DD-MM-YYYY
    function formatDateForStorage(dateStr) {
      var parts = dateStr.split("-");
      return parts[2] + "-" + parts[1] + "-" + parts[0];
    }

    // Update the hidden inputs
    function updateBlockedDatesInput() {
      var formattedDates = blockedDates.map(formatDateForStorage);
      $("#fullcalendar-blocked-dates").val(formattedDates.join("|") + "|");
    }

    function updatePriceDataInput() {
      var formattedPrices = {};
      Object.keys(priceData).forEach(function (dateStr) {
        formattedPrices[formatDateForStorage(dateStr)] = priceData[dateStr];
      });
      $("#fullcalendar-price-data").val(JSON.stringify(formattedPrices));
    }

    // Reset properties of currently selected dates
    function clearSelection() {
      if (selectedDates.length === 0) {
        alert("Please select dates to modify first");
        return;
      }

      // Confirm action
      if (
        !confirm(
          "This will unblock selected dates and remove any custom prices. Continue?"
        )
      ) {
        return;
      }

      console.log("Clearing properties for these dates:", selectedDates);

      // Create a new array with dates to keep blocked (those not in selectedDates)
      var newBlockedDates = [];
      blockedDates.forEach(function (dateStr) {
        if (!selectedDates.includes(dateStr)) {
          newBlockedDates.push(dateStr);
        } else {
          console.log("Unblocking date:", dateStr);
        }
      });

      // Replace blocked dates with filtered list
      blockedDates = newBlockedDates;

      // Remove prices for selected dates
      selectedDates.forEach(function (dateStr) {
        if (dateStr in priceData) {
          console.log("Removing price for date:", dateStr);
          delete priceData[dateStr];
        }
      });

      // Update hidden inputs
      updateBlockedDatesInput();
      updatePriceDataInput();

      // Clear selection
      selectedDates = [];

      // Visually unselect any selected dates in the calendar
      calendar.unselect();

      // Refresh the calendar display
      calendar.removeAllEvents();
      calendar.addEventSource(generateEvents());

      // Hide the tooltip
      $("#selection-tooltip").remove();
      tooltipVisible = false;
    }

    // Handle Block Dates button
    $("#block-dates-btn").on("click", function (e) {
      e.preventDefault();

      if (selectedDates.length === 0) {
        alert("Please select dates to block first");
        return;
      }

      // Add selected dates to blocked dates
      selectedDates.forEach(function (dateStr) {
        if (!blockedDates.includes(dateStr)) {
          blockedDates.push(dateStr);
        }
      });

      // Update hidden input
      updateBlockedDatesInput();

      // Just clear the selection array and refresh calendar without running clearSelection()
      var tempSelection = selectedDates;
      selectedDates = [];

      // Visually unselect any selected dates in the calendar
      calendar.unselect();

      // Refresh display
      calendar.removeAllEvents();
      calendar.addEventSource(generateEvents());

      // Hide the tooltip
      $("#selection-tooltip").remove();
      tooltipVisible = false;

      //alert(tempSelection.length + " date(s) have been blocked");
    });

    // Set up price dialog handlers once, outside the click event
    // Handle price confirmation
    $("#price-confirm")
      .off("click")
      .on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        var price = $("#price-input").val();

        if (price === "" || isNaN(parseFloat(price))) {
          alert("Please enter a valid price");
          return false;
        }

        // Format price
        price = parseFloat(price).toFixed(2);

        // Set price for all selected dates
        selectedDates.forEach(function (dateStr) {
          priceData[dateStr] = price;
        });

        // Update hidden input
        updatePriceDataInput();

        // Hide dialog
        $("#price-dialog").hide();
        $("#price-input").val("");

        // Just clear the selection array and refresh calendar without running clearSelection()
        var tempSelection = selectedDates;
        selectedDates = [];

        // Visually unselect any selected dates in the calendar
        calendar.unselect();

        // Refresh display
        calendar.removeAllEvents();
        calendar.addEventSource(generateEvents());

        // Hide the tooltip
        $("#selection-tooltip").remove();
        tooltipVisible = false;

        return false;
      });

    // Handle price cancellation
    $("#price-cancel")
      .off("click")
      .on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        $("#price-dialog").hide();
        $("#price-input").val("");
        return false;
      });

    // Handle Set Price button
    $("#set-price-btn").on("click", function (e) {
      e.preventDefault();
      e.stopPropagation(); // Stop event bubbling

      if (selectedDates.length === 0) {
        alert("Please select dates to set price for first");
        return false;
      }

      // Show price dialog
      $("#price-dialog").show();
      return false; // Ensure no form submission
    });

    // Handle Clear/Unblock Selection button
    $("#clear-selection-btn").on("click", function (e) {
      e.preventDefault();
      clearSelection();
    });

    // Update button label to be clearer
    $("#clear-selection-btn").text("Unblock/Clear Selected Dates");

    // Handle the booking status checkbox state change to refresh calendar when it becomes visible
    $('input[name="_booking_status"]').on("change", function () {
      
      // Check if the checkbox is checked (calendar section is visible)
      if ($(this).is(":checked")) {
        // Small delay to ensure the container is fully visible before refreshing
        setTimeout(function () {
          if (window.listeoCalendar) {
            // Trigger window resize to make FullCalendar recalculate dimensions
            window.dispatchEvent(new Event("resize"));

            // For more stubborn cases, explicitly call the calendar's render method again
            window.listeoCalendar.render();

            console.log("Calendar refreshed after becoming visible");
          }
        }, 100); // 100ms delay
      }
    });

    // Add document click handler to help manage tooltip
    $(document).on("click", function (e) {
      // Only handle clicks outside the tooltips and calendar
      if (
        tooltipVisible &&
        !$(e.target).closest(".selection-tooltip, #single-date-tooltip")
          .length &&
        !$(e.target).closest(".fc-day, .fc-daygrid-day").length
      ) {
        // Hide tooltips when clicking elsewhere
        $("#selection-tooltip, #single-date-tooltip").remove();
        $("body").removeClass("has-date-tooltip");
        tooltipVisible = false;
      }
    });

    // Render calendar
    calendar.render();

    // Expose calendar for debugging
    window.listeoCalendar = calendar;

    // if it's admin page (body has class wp-admin) try to refresh the calendar on load
    if ($("body").hasClass("wp-admin")) {
      setTimeout(function () {
        if (window.listeoCalendar) {
          window.dispatchEvent(new Event("resize"));
          window.listeoCalendar.render();
          console.log("Admin calendar refreshed on load");
        }
      }, 1000); // 1 second delay to ensure everything is loaded
    }
  }
});
// source --> https://sofaree.com/wp-content/plugins/listeo-core/assets/js/submit-listing.steps.js?ver=1.9.40 
document.addEventListener("DOMContentLoaded", function () {

  function showLoader() {
    const loader = document.createElement("div");
    loader.className = "msf-loader-overlay";

    loader.innerHTML = `
    <svg class="msf-loader-spinner" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20"></circle>
    </svg>
  `;

    document.body.appendChild(loader);
  }



  const form = document.querySelector(".listing-manager-form");
  if (!form) return;

  const allSections = Array.from(form.querySelectorAll(".add-listing-section"));

const submitPageDiv = document.querySelector(".submit-page");

if (!submitPageDiv || !submitPageDiv.classList.contains("multi-step-form")) {
  return; // or throw new Error('Required class not found');
}

  
  const submitButton = form.querySelector('button[name="submit_listing"]');

  if (!submitButton || allSections.length <= 1) {
    return;
  }

  // --- Start of Your Custom Configuration ---
  let stepConfiguration = [];

  try {
    const rawStepsEncoded = document.getElementById(
      "listeo_form_steps_json"
    )?.value;

    if (rawStepsEncoded) {
      const textarea = document.createElement("textarea");
      textarea.innerHTML = rawStepsEncoded;
      const rawSteps = textarea.value;

      stepConfiguration = JSON.parse(rawSteps);
    }
  } catch (e) {
    console.error("Failed to parse step configuration", e);
  }

  // if stepConfiguration is empty or not an array, disable multi-step
  if (!Array.isArray(stepConfiguration) || stepConfiguration.length === 0) {
    return;
  }

  allSections.forEach((section) => {
    section.removeAttribute("style");
  });
  // const stepConfiguration = [
  //   {
  //     title: "Listing Essentials",
  //     selectors: [".basic_info", ".location", ".gallery", ".details"],
  //   },
  //   {
  //     title: "Offerings & Schedule",
  //     selectors: [
  //       ".opening_hours",
  //       ".menu",
  //       ".booking",
  //       ".slots",
  //       ".basic_prices",
  //       ".availability_calendar",
  //     ],
  //   },
  //   {
  //     title: "Final Details",
  //     selectors: [".faq", ".my_listings_section"],
  //   },
  // ];
  // --- End of Your Custom Configuration ---

  let currentStep = 0;
  let highestStepReached = 0;
  const steps = [];

  // Reworked Step Creation Logic
  stepConfiguration.forEach((groupInfo) => {
    const groupSections = [];
    groupInfo.selectors.forEach((selector) => {
      const foundSections = form.querySelectorAll(selector);
      foundSections.forEach((section) => {
        // Ensure we only add sections that actually exist in the form
        if (allSections.includes(section)) {
          groupSections.push(section);
        }
      });
    });
    if (groupSections.length > 0) {
      steps.push(groupSections);
    }
  });

  const progressContainer = document.createElement("div");
  progressContainer.className = "form-progress-container";
  const navContainer = document.createElement("div");
  navContainer.className = "form-navigation";
  const prevButton = document.createElement("button");
  prevButton.type = "button";
  prevButton.className = "btn-prev button";
  prevButton.textContent = "Prev";
  const nextButton = document.createElement("button");
  nextButton.type = "button";
  nextButton.className = "btn-next button";
  nextButton.textContent = "Next";
  form.insertBefore(progressContainer, form.firstChild);
  const lastSection = allSections[allSections.length - 1];
  lastSection.parentNode.insertBefore(navContainer, lastSection.nextSibling);
  navContainer.appendChild(prevButton);
  navContainer.appendChild(nextButton);
  navContainer.appendChild(submitButton);
  if (submitButton.parentElement.nodeName === "P") {
    submitButton.parentElement.style.display = "block";
    submitButton.parentElement.style.margin = "0";
    submitButton.parentElement.classList.add("form-navigation-submit");
  }

  // Reworked Progress Bar Creation
  steps.forEach((stepSections, index) => {
    const stepElement = document.createElement("div");
    stepElement.className = "form-progress-step";
    const icon = document.createElement("div");
    icon.className = "progress-step-icon";
    const titleElement = document.createElement("div");
    titleElement.className = "progress-step-title";

    // Use the title from the new configuration
    titleElement.textContent =
      stepConfiguration[index].title || `Step ${index + 1}`;

    stepElement.appendChild(icon);
    stepElement.appendChild(titleElement);
    progressContainer.appendChild(stepElement);
  });
  const progressSteps = progressContainer.querySelectorAll(
    ".form-progress-step"
  );

  function smoothScrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  function isFieldRequired(label) {
    if (!label) return false;
    const iTags = label.querySelectorAll("i");
    for (const iTag of iTags) {
      if (iTag.textContent.trim() === "*") return true;
    }
    return false;
  }

  function validateStep(stepIndex) {
    let isStepValid = true;
    const sectionsToValidate = steps[stepIndex];
    for (const section of sectionsToValidate) {
      const standardFields = section.querySelectorAll(
        'input[required]:not([type="hidden"]), select[required], textarea[required]'
      );
      for (const field of standardFields) {
        if (!field.checkValidity()) {
          isStepValid = false;
          field.classList.add("msf-input-error");
        } else {
          field.classList.remove("msf-input-error");
        }
      }
      const drilldownMenus = section.querySelectorAll("div.drilldown-menu");
      for (const menu of drilldownMenus) {
        const name = menu.getAttribute("data-name");
        if (!name) continue;
        const label = section.querySelector(
          `label[for="${name}"], .label-${name}`
        );
        if (!isFieldRequired(label)) continue;
        const hasValue =
          menu.querySelector("input.drilldown-generated") !== null;
        const menuToggle = menu.querySelector(".menu-toggle");
        if (menuToggle) {
          if (!hasValue) {
            isStepValid = false;
            menuToggle.classList.add("msf-input-error");
          } else {
            menuToggle.classList.remove("msf-input-error");
          }
        }
      }
      const galleryUploader = section.querySelector("#media-uploader");
      if (
        galleryUploader &&
        galleryUploader.getAttribute("data-required") === "required"
      ) {
        const hasImages =
          galleryUploader.querySelector(".dz-image-preview") !== null;
        const existingError = galleryUploader.nextElementSibling;
        if (!hasImages) {
          isStepValid = false;
          if (
            !existingError ||
            !existingError.classList.contains("msf-gallery-error-message")
          ) {
            const errorDiv = document.querySelector(
              ".msf-gallery-error-message"
            );
            if (errorDiv) {
              errorDiv.style.display = "block";
            }
          }
        } else {
          if (
            existingError &&
            existingError.classList.contains("msf-gallery-error-message")
          ) {
            existingError.remove();
          }
        }
      }
      if (typeof tinymce !== "undefined") {
        const textareas = section.querySelectorAll("textarea");
        for (const textarea of textareas) {
          const editorId = textarea.id;
          if (!editorId) continue;
          const editor = tinymce.get(editorId);
          if (!editor) continue;
          const label = section.querySelector(`label[for="${editorId}"]`);
          if (!isFieldRequired(label)) continue;
          const content = editor.getContent({ format: "text" }).trim();
          const editorContainer = editor.getContainer();
          if (content === "") {
            isStepValid = false;
            if (editorContainer)
              editorContainer.classList.add("msf-input-error");
          } else {
            if (editorContainer)
              editorContainer.classList.remove("msf-input-error");
          }
        }
      }
      const fileInputs = section.querySelectorAll('input[type="file"]');
      for (const fileInput of fileInputs) {
        const inputId = fileInput.id;
        if (!inputId) continue;
        const label = section.querySelector(`label[for="${inputId}"]`);
        if (!isFieldRequired(label)) continue;
        const fieldContainer = fileInput.closest(
          ".form-field-container-type-file"
        );
        const uploadWrapper = fileInput.closest(".uploadButton");
        if (uploadWrapper && fieldContainer) {
          const uploadButtonLabel = uploadWrapper.querySelector(
            ".uploadButton-button"
          );
          const hasExistingPreview =
            fieldContainer.querySelector(".listeo-uploaded-file-preview") !==
            null;
          const hasNewFile = fileInput.files.length > 0;
          const isFieldValid = hasNewFile || hasExistingPreview;
          if (uploadButtonLabel) {
            if (!isFieldValid) {
              isStepValid = false;
              uploadButtonLabel.classList.add("msf-input-error");
            } else {
              uploadButtonLabel.classList.remove("msf-input-error");
            }
          }
        }
      }
    }
    return isStepValid;
  }

  function updateStepStatus(stepIndex) {
    const isStepValid = validateStep(stepIndex);
    const stepElement = progressSteps[stepIndex];
    if (isStepValid) {
      stepElement.classList.remove("step-warning");
    } else {
      stepElement.classList.add("step-warning");
    }
  }

  function updateBookingDependencies() {
    const bookingInput = form.querySelector(
      '.booking input[name*="booking_status"], .booking select[name*="booking_status"]'
    );
    if (!bookingInput) return;

    let isEnabled = false;

    if (bookingInput.type === "checkbox" || bookingInput.type === "radio") {
      isEnabled = bookingInput.checked || bookingInput.value === "enabled";
    } else if (bookingInput.tagName === "SELECT") {
      isEnabled = bookingInput.value === "enabled";
    }

    const dependentSelectors = [
      ".basic_prices",
      ".slots",
      ".availability_calendar",
    ];
    dependentSelectors.forEach((selector) => {
      const section = form.querySelector(selector);
      if (!section) return;

      if (isEnabled) {
        section.classList.add("manual-visible");
        section.classList.add("active");
        section.style.display = "";
      } else {
        section.classList.remove("manual-visible");
        section.classList.remove("active");
        section.style.display = "none";
      }
    });
  }

  // Set up initial state and watch for changes
  updateBookingDependencies();
  const bookingInput = form.querySelector(
    '.booking input[name*="booking_status"]'
  );
  if (bookingInput) {
    bookingInput.addEventListener("change", updateBookingDependencies);
  }

  function updateFormUI() {
    allSections.forEach((section) => {
      if (!section.classList.contains("manual-visible")) {
        section.classList.remove("active");
        section.style.display = "none";
      }
    });
    if (steps[currentStep]) {
      const activeSections = steps[currentStep];
      let needsResize = false;

      const isBookingEnabled = form
        .querySelector(".booking")
        ?.classList.contains("switcher-on");

      activeSections.forEach((section) => {
        const sectionClass = [...section.classList].find((cls) =>
          [".basic_prices", ".slots", ".availability_calendar"].includes(
            "." + cls
          )
        );

        const isDependentSection = !!sectionClass;

        if (isDependentSection && !isBookingEnabled) {
          section.classList.remove("active");
          section.style.display = "none";
          return;
        }

        section.classList.add("active");
        section.style.display = "";

        if (
          section.querySelector("#submit_map") ||
          section.querySelector(".fullCalendar, .fc")
        ) {
          needsResize = true;
        }
      });

      if (needsResize) {
        setTimeout(() => {
          window.dispatchEvent(new Event("resize"));
        }, 50);
      }
    }

    progressSteps.forEach((step, index) => {
      const icon = step.querySelector(".progress-step-icon");
      step.classList.remove("active", "completed");
      if (
        index <= highestStepReached &&
        !step.classList.contains("step-warning")
      ) {
        step.classList.add("completed");
      }
      if (index === currentStep) {
        step.classList.add("active");
        step.classList.remove("completed");
      }
      if (
        step.classList.contains("completed") &&
        !step.classList.contains("active")
      ) {
        icon.textContent = "";
      } else {
        icon.textContent = index + 1;
      }
    });
    prevButton.style.display = currentStep === 0 ? "none" : "inline-block";
    nextButton.style.display =
      currentStep === steps.length - 1 ? "none" : "inline-block";
    submitButton.style.display =
      currentStep === steps.length - 1 ? "inline-block" : "none";
  }

  progressSteps.forEach((step, index) => {
    step.addEventListener("click", () => {
      if (index === currentStep) return;
      if (index > currentStep) {
        for (let i = currentStep; i < index; i++) {
          updateStepStatus(i);
        }
      } else {
        updateStepStatus(currentStep);
      }
      currentStep = index;
      highestStepReached = Math.max(highestStepReached, currentStep);
      updateFormUI();
      smoothScrollToTop();
    });
  });

  nextButton.addEventListener("click", () => {
    updateStepStatus(currentStep);
    if (currentStep < steps.length - 1) {
      currentStep++;
      highestStepReached = Math.max(highestStepReached, currentStep);
      updateFormUI();
      smoothScrollToTop();
    }
  });

  prevButton.addEventListener("click", () => {
    updateStepStatus(currentStep);
    if (currentStep > 0) {
      currentStep--;
      updateFormUI();
      smoothScrollToTop();
    }
  });

  submitButton.addEventListener("click", (e) => {
    const isPreview =
      e.target.name === "preview_listing" ||
      e.target.value.toLowerCase().includes("preview") ||
      e.target.textContent.toLowerCase().includes("preview");

    // Always validate steps
    for (let i = 0; i < steps.length; i++) {
      updateStepStatus(i);
    }

    let firstInvalidStep = -1;
    progressSteps.forEach((step, index) => {
      if (step.classList.contains("step-warning") && firstInvalidStep === -1) {
        firstInvalidStep = index;
      }
    });

    if (firstInvalidStep !== -1) {
      e.preventDefault(); // prevent even preview from submitting
      currentStep = firstInvalidStep;
      highestStepReached = Math.max(highestStepReached, currentStep);
      updateFormUI();
      smoothScrollToTop();

      const firstInvalidField = steps[firstInvalidStep][0].querySelector(
        ".msf-input-error, .msf-gallery-error-message"
      );
      if (firstInvalidField) firstInvalidField.focus({ preventScroll: true });
      // alert(
      //   "Please correct the errors on the highlighted step before continuing."
      // );
      return;
    }

    // If valid
    if (isPreview) {
       showLoader();
       allSections.forEach((section) => {
         section.classList.add("active", "msf-preview-hidden");
       });

       progressContainer.style.display = "none";
       navContainer.style.display = "none";
        
      console.log("Preview button clicked - showing all sections");
      return;
    }

    e.preventDefault();
    console.log("Form is valid. Submitting...");
    form.submit();
  });


  const previewButton = form.querySelector(
    'button[name="preview_listing"], input[name="preview_listing"]'
  );
  if (previewButton) {
    previewButton.addEventListener("click", (e) => {
      // Don't prevent default - let preview work normally

      // Temporarily show all sections for preview
      allSections.forEach((section) => {
        section.classList.add("active");
        section.style.display = "block";
      });

      // Let the preview submission proceed without validation
      console.log("Preview button clicked - showing all sections");
    });
  }

  // Alternative: If preview button is identified differently, try this selector
  const previewButtons = form.querySelectorAll(
    'button[value*="preview"], input[value*="preview"], [name*="preview"]'
  );
  previewButtons.forEach((button) => {
    button.addEventListener("click", (e) => {
      allSections.forEach((section) => {
        section.classList.add("active");
        section.style.display = "block";
      });
      console.log("Preview button clicked - showing all sections");
    });
  });

  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get("action") === "edit") {
    console.log("Edit mode detected. All steps will be marked as completed.");
    highestStepReached = steps.length - 1;
  }
  updateBookingDependencies();
  updateFormUI();
});