$(document).ready(function() {
  // Function to update the iframe content
  function updateIframeContent() {
    var textareaContent = $("#html_content").val();
    $("#iframe_id").attr("srcdoc", textareaContent);
  }

  // Add a click event handler for the "Render" tab
  $("#pills-render-tab").on("click", function() {
    updateIframeContent();
  });

  // Initially update the iframe content
  updateIframeContent();
});


// Function to initialize the iframe resizing
function initResizableIframe() {
  const iframe = document.getElementById('iframe_id');

  // Function to update the iframe's height based on its content
  function updateIframeHeight() {
    const iframeDocument = iframe.contentWindow.document;
    const newHeight = iframeDocument.body.scrollHeight || 'auto';
    iframe.style.height = newHeight + 'px';
  }

  // Attach the update function to iframe's load event and window's resize event
  iframe.onload = updateIframeHeight;
  window.addEventListener('resize', updateIframeHeight);

  // Initialize the iframe height
  updateIframeHeight();
}

// Call the initialization function when the document is ready
document.addEventListener('DOMContentLoaded', initResizableIframe);


$(document).ready(function() {
  let headerCount = 1;

  // Add Header button click event
  $("#addHeaderButton").click(function() {
    // Create a new header/value/delete form
    var newRow = $('<div class="form-row align-items-center">' +
                   '<div class="col-md-5 mb-3">' +
                   '<label for="input_id_' + headerCount + '">Header</label>' +
                   '<input type="text" class="form-control form-control-sm" name="header_name_' + headerCount + '" id="header_id_' + headerCount + '" placeholder="CC, BCC, Reply-To">' +
                   '</div>' +
                   '<div class="col-md-5 mb-3">' +
                   '<label for="input_id_' + headerCount + '">Value</label>' +
                   '<input type="text" class="form-control form-control-sm" name="header_value_' + headerCount + '" id="header_id_' + headerCount + '" placeholder="person@place.com">' +
                   '</div>' +
                   '<div class="col-md-2 mb-3">' +
                   '<label for="input_id_' + headerCount + '"></label>' +
                   '<button type="button" class="btn btn-danger btn-sm delete-button">Delete</button>' +
                   '</div>' +
                   '</div>');

    // Append the new header/value/delete form to the form group
    $(".header-row").append(newRow);
    $("#headerCount").val(headerCount);
    // Increment the headerCount for the next set
    headerCount++;
  });

  // Delete button click event
  $(document).on("click", ".delete-button", function() {
    // Remove the parent row when the delete button is clicked
    $(this).closest(".form-row").remove();// Decrement the headerCount when a row is deleted
  });
});

// to display ile name when attachment is chosen
$(document).ready(function () {
  // Add an event listener to the file input
  $('#attachment').change(function () {
    // Get the name of the selected file
    var fileName = $(this).val().split('\\').pop();
    // Update the label text with the file name
    $('.custom-file-label').html(fileName);
  });
});


let lastSubmittedData = null;

function submitForm() {
  // Create a FormData object to easily handle form data, including file uploads
  const formData = new FormData(document.getElementById('emailForm'));

  // Get the headerCount value from the hidden input
  let headerCount = parseInt(document.getElementById('headerCount').value);

  // Convert dynamic header inputs into an array of objects
  const headers = [];
  let newHeaderCount = 0;

   for (let i = 1; i <= headerCount; i++) {
      const headerNameInput = document.querySelector(`[name="header_name_${i}"]`);
      const headerValueInput = document.querySelector(`[name="header_value_${i}"]`);

      // Check if both headerNameInput and headerValueInput exist
      if (headerNameInput && headerValueInput) {
          const headerName = headerNameInput.value;
          const headerValue = headerValueInput.value;

          // Check if both headerName and headerValue exist
          if (headerName && headerValue) {
              newHeaderCount++;

              // Rename the input fields to reflect new IDs
              headerNameInput.name = `header_name_${newHeaderCount}`;
              headerValueInput.name = `header_value_${newHeaderCount}`;

              headers.push({ name: headerNameInput.name, value: headerValueInput.name });
          }
      }
  }


  // Update the headerCount hidden input with the new count
  document.getElementById('headerCount').value = newHeaderCount;
  headerCount = parseInt(document.getElementById('headerCount').value);

  // Add the headers as a JSON string to the FormData
  formData.append('headers', JSON.stringify(headers));

  // Convert form data to a JSON string for comparison
  const currentData = JSON.stringify(Array.from(formData.entries()));

  // Check if the form data has changed
  if (currentData === lastSubmittedData) {
      const resultElement = document.getElementById('result');
      resultElement.textContent = "Already tried to send this data";
      resultElement.style.color = "red";
      return;
  }

  // Save the current form data for future comparison
  lastSubmittedData = currentData;

  // Send the form data to "submit.php"
  fetch('submit.php', {
      method: 'POST',
      body: formData,
  })
  .then(response => response.text()) // Read the response as plain text
  .then(data => {
      // Handle the response from the server here
      const resultElement = document.getElementById('result');
      resultElement.textContent = data;
      if (data === "Success") {
          resultElement.style.color = "lightgreen";
      } else {
          resultElement.style.color = "red";
      }
  })
  .catch(error => {
      // Handle errors here
      console.error('Error:', error);
  });
}