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

  function addOption(type, container) {
    // let optionIndex = container.children().length + 1;
    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>' : ''}
                    <input type="text" class="form-control untitled-question" placeholder="Untitled Question" rows="1">                    <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>'
        )
    }
  })

  $(document).on('click', '.add-option-btn', function () {
    let type = $(this).closest('.form-section').find('.custom-select').val()
    let container = $(this).closest('.form-section').find('.options-container')
    addOption(type, container)
  })

  $(document).on('click', '.delete-section-icon', function () {
    let section = $(this).closest('.form-section')
    let prevSection = section.prev('.form-section')
    let nextSection = section.next('.form-section')
    section.remove()
    if (section.hasClass('active')) {
      activeSection = null
    }
    if (prevSection.length > 0) {
      prevSection
        .find('.delete-section-icon')
        .appendTo(prevSection.find('.form-section'))
      activeSection = prevSection
      row
    } else if (nextSection.length > 0) {
      nextSection
        .find('.delete-section-icon')
        .appendTo(nextSection.find('.form-header'))
      activeSection = nextSection
    }
    positionAddSectionButton()
  })

  $(document).on('click', '.delete-option-icon', function () {
    let option = $(this).closest('.option')
    let container = option.closest('.options-container')
    option.remove()
  })

  $(document).on('click', '.required-toggle', function () {
    $(this).closest('.form-section').toggleClass('required')
  })

  $('#preview-btn').on('click', function () {
    let previewWindow = window.open('', '_blank')
    let previewContent = `
            <html>
            <head>
                <title>Form Preview</title>
                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
                <style>
                    body { background-color: rgb(240, 235, 248); }
                    .container { margin-top: 30px; }
                    .form-section {background-color: white;width: 56%;margin-bottom: 30px;margin-left: 240px;padding: 20px;position: relative;align-items: center;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
                    .form-header {background-color: white;padding: 20px;margin-bottom: 10px;margin-left: 240px;border-radius: 10px 10px 0 0;display: flex;justify-content: space-between;align-items: center; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-top: 10px solid rgb(103, 58, 183);width: 56%; }
                    .form-section h2 { text-align: center; margin-bottom: 30px; }
                    .form-section .question-section { margin-bottom: 20px; } /* Add margin-bottom to the question section */
                </style>
            </head>
            <body>
                <div class="container">
                    <div class="form-header">
                        <h3>Form Preview</h3>
                    </div>
        `
    $('.form-section').each(function () {
      previewContent += '<div class="form-section">'
      previewContent += '<div class="question-section">'
      previewContent +=
        '<div class="question-label">' +
        $(this).find('.untitled-question').val() +
        '</div>'
      previewContent += '</div>'
      let type = $(this).find('.custom-select').val()
      let optionsContainer = $(this).find('.options-container')

      if (type === 'multiple-choice') {
        optionsContainer.find('.option').each(function () {
          previewContent += `
                        <div class="option">
                            <input type="radio" name="option-${index}">
                            <label>${$(this).find('.option-label').val()}</label>
                        </div>
                    `
        })
      } else if (type === 'checkboxes') {
        optionsContainer.find('.option').each(function () {
          previewContent += `
                        <div class="option">
                            <input type="checkbox">
                            <label>${$(this).find('.option-label').val()}</label>
                        </div>
                    `
        })
      } else if (type === 'short-answer') {
        previewContent +=
          '<input type="text" class="form-control" placeholder="Short answer text">'
      } else if (type === 'paragraph') {
        previewContent +=
          '<textarea class="form-control" placeholder="Paragraph text"></textarea>'
      } else if (type === 'dropdown') {
        let dropdownHtml = '<select class="form-control">'
        optionsContainer.find('.option .option-label').each(function () {
          dropdownHtml += `<option>${$(this).val()}</option>`
        })
        dropdownHtml += '</select>'
        previewContent += dropdownHtml
      }
      previewContent += '</div>'
    })
    previewContent += `
                </div>
            </body>
            </html>
        `
    previewWindow.document.write(previewContent)
    previewWindow.document.close()
  })

  $(document).on('click', '.form-section', function () {
    $('.form-section').removeClass('active')
    $(this).addClass('active')
    activeSection = $(this)
    positionAddSectionButton()
  })

  $('#form-container').sortable({
    placeholder: 'ui-state-highlight',
    start: function (event, ui) {
      ui.placeholder.height(ui.item.height())
    },
    stop: function (event, ui) {
      positionAddSectionButton()
    },
  })

  function collectFormData() {
    var formData = {
      questions: [],
    }

    $('.form-section').each(function () {
      var questionType = $(this).find('.custom-select').val()
      var questionData = {
        text: $(this).find('.untitled-question').val(),
        type: questionType,
        is_required: $(this).find('.required-toggle').is(':checked'),
        options: [],
      }

      // Only add options if the question type supports them
      if (
        questionType === 'multiple-choice' ||
        questionType === 'checkboxes' ||
        questionType === 'dropdown'
      ) {
        $(this)
          .find('.option-label')
          .each(function () {
            questionData.options.push($(this).val())
          })
      }

      formData.questions.push(questionData)
    })

    console.log(formData)
    return formData
  }

  function validateFormData(formData) {
    for (let question of formData.questions) {
      if (!question.text.trim()) {
        return { isValid: false, message: 'All questions must have text.' }
      }
      if (
        (question.type === 'multiple-choice' ||
          question.type === 'checkboxes' ||
          question.type === 'dropdown') &&
        question.options.length === 0
      ) {
        return {
          isValid: false,
          message: 'All options-based questions must have at least one option.',
        }
      }
      for (let option of question.options) {
        if (!option.trim()) {
          return { isValid: false, message: 'All options must have text.' }
        }
      }
    }
    return { isValid: true }
  }
  $('#submit-btn').on('click', function () {
    let formData = collectFormData()
    console.log(formData)

    let validation = validateFormData(formData)
    if (!validation.isValid) {
      alert(validation.message)
      return
    }

    $.ajax({
      url: base_url + 'New_form_controller/submit_form',
      type: 'POST',
      data: { formData: formData },
      dataType: 'JSON',
      success: function (response) {
        if (response.status === 'success') {
          Swal.fire({
            title: 'Success!',
            text: 'Form submitted successfully!',
            icon: 'success',
            confirmButtonText: 'OK',
          }).then((result) => {
            window.location.href = base_url
          })
        } else {
          Swal.fire({
            title: 'Error!',
            text: response.message,
            icon: 'error',
            confirmButtonText: 'OK',
          })
          console.log(response)
        }
      },
      error: function (error) {
        Swal.fire({
          title: 'Error!',
          text: 'Error submitting form!',
          icon: 'error',
          confirmButtonText: 'OK',
          width: '400px',
          height: '300px',
          padding: 'auto',
        }).then((result) => {
          if (result.isConfirmed) {
            window.location.href = home
          }
        })
        console.log(error)
      },
    })
  })

  $('#form-container').disableSelection()
})