$(document).ready(function () {
  let index = 1;
  let activeSection = null;

  function addOption(type, container) {
    let optionHtml;

    if (type === "multiple-choice" || type === "checkboxes") {
      optionHtml = `
                                                                              
                                                                  <div class="option">
                                                                  <input type="${type === "multiple-choice" ? "radio" : "checkbox"}" disabled>
                                            <input type="text" class="form-control option-label">

                                            <span class="delete-option-icon">&times;</span>
                                            </div>
                                                  `;
    } else if (type === "dropdown") {
      optionHtml = `
                                                                      <div class="option">
                                                  <input type="text" class="form-control option-label">
                                                  <span class="delete-option-icon">&times;</span>
                                                  </div>
                                                                                          `;
    }
    container.append(optionHtml);
  }

  function createFormSection() {
    let newSection = `
                                      <div class="form-section" data-index="${index}">
                          <div class="header-row">
     ${index === 1 ? '<div class="violet-border"></div>' : ""}
 <textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
                    <select class="custom-select">
                        <option value="short-answer">Short Answer</option>
                        <option value="paragraph">Paragraph</option>
                        <option value="multiple-choice">Multiple Choice</option>
                        <option value="checkboxes">Checkboxes</option>
                        <option value="dropdown">Dropdown</option>
                    </select>
                    <label class="toggle-switch">
                        <input type="checkbox" class="required-toggle">
                        <span class="slider"></span>
                    </label>
                    <span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
                </div>
                <div class="options-container"></div>
            </div>
        `;
    $("#form-container").append(newSection);
    index++;

    positionAddSectionButton();
  }

  function positionAddSectionButton() {
    if (activeSection) {
      let position = activeSection.position();
      let buttonWidth = $("#add-section-btn").outerWidth();
      let buttonHeight = $("#add-section-btn").outerHeight();

      $("#add-section-btn").css({
        position: "absolute",
        left: position.left - buttonWidth - 47 + "px",
        top:
          position.top + activeSection.height() / 2 - buttonHeight / 2 + "px",
      });
    }
  }

  $("#add-section-btn").on("click", function () {
    createFormSection();
    $(".form-section").removeClass("active");
    activeSection = $(".form-section").last();
    activeSection.addClass("active");
    positionAddSectionButton();
  });

  $(document).on("change", ".custom-select", function () {
    let type = $(this).val();
    let container = $(this).closest(".form-section").find(".options-container");
    container.empty();

    $(this).closest(".form-section").find(".add-option-btn").remove();

    if (type === "short-answer") {
      container.append(
        '<input type="text" class="form-control" disabled placeholder="Short answer text">',
      );
    } else if (type === "paragraph") {
      container.append(
        '<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>',
      );
    } else {
      addOption(type, container);
      $(this)
        .closest(".form-section")
        .append(
          '<button class="btn btn-secondary add-option-btn">Add Option</button>',
        );
    }
  });
});