Revise paste Eco Events

window.addEventListener("load", solve); // Изчаква зареждането на целия документ, преди да извика функцията solve

function solve() {
  // Вземане на елементите от формата
  let formElement = document.querySelector("form");  // Взема формата от документа
  let taskTitleInput = document.getElementById("email");  // Взема input полето за имейл (това ще бъде title)
  let taskCategoryInput = document.getElementById("event");  // Взема input полето за събитие (категория)
  let taskContentInput = document.getElementById("location");  // Взема input полето за местоположение

// Вземане на бутона за публикуване на събитието
  let publishBtn = document.getElementById("next-btn");  // Взема бутона за публикуване
  publishBtn.addEventListener("click", publish);  // Добавя слушател за събитие на бутона, който ще извика функцията publish при клик

// Основната функция, която ще се изпълни при натискане на бутона "Next"
  function publish() {
    // Проверка дали полетата не са празни
    if (
      taskTitleInput.value == "" ||
      taskCategoryInput.value == "" ||
      taskContentInput.value == ""
    ) {
      return;  // Ако някое поле е празно, спираме изпълнението на функцията
    }

// Вземане на списъците за предварителни и публикувани събития
    let reviewList = document.getElementById("preview-list");  // Списък за предварителни събития
    let publishedList = document.getElementById("event-list");  // Списък за публикувани събития

// Създаване на нов елемент <li> за събитието
    let taskLiElement = document.createElement("li");  // Създаваме нов <li> елемент
    taskLiElement.classList.add("application");  // Добавяме клас "application" към него

// Създаване на <article> елемент за събитието
    let taskArticleElement = document.createElement("article");  // Създаваме нов <article> елемент

// Създаване на заглавие <h4> с имейл
    let titleHeadingElement = document.createElement("h4");  // Създаваме нов <h4> елемент за заглавието
    titleHeadingElement.textContent = taskTitleInput.value;  // Задаваме текст за заглавието от полето "email"
    let taskTitle = taskTitleInput.value;  // Записваме стойността на имейл за по-късно (за редактиране)

// Създаване на параграф <p> за категория (събитие)
    let categoryPElement = document.createElement("p");  // Създаваме нов <p> елемент
    categoryPElement.innerHTML = `<strong>Event:</strong><br>${taskCategoryInput.value}`;  // Добавяме стойността на "event" в него
    let taskCategory = taskCategoryInput.value;  // Записваме стойността на събитие за по-късно (за редактиране)

// Създаване на параграф <p> за местоположение
    let contentPElement = document.createElement("p");  // Създаваме нов <p> елемент
    contentPElement.innerHTML = `<strong>Location:</strong><br>${taskContentInput.value}`;  // Добавяме стойността на "location" в него
    let taskContent = taskContentInput.value;  // Записваме стойността на местоположение за по-късно (за редактиране)

// Добавяме всички създадени елементи в <article>
    taskArticleElement.appendChild(titleHeadingElement);  // Добавяме заглавието в <article>
    taskArticleElement.appendChild(categoryPElement);  // Добавяме категорията (събитие) в <article>
    taskArticleElement.appendChild(contentPElement);  // Добавяме местоположението в <article>

// Създаване на бутон за редактиране
    let editBtn = document.createElement("button");  // Създаваме бутон за редактиране
    editBtn.classList.add("action-btn");  // Добавяме клас "action-btn"
    editBtn.classList.add("edit");  // Добавяме допълнителен клас "edit"
    editBtn.textContent = "edit";  // Задаваме текста на бутона "edit"
    editBtn.addEventListener("click", edit);  // Добавяме слушател за събитие при клик, който извиква функцията edit

// Създаване на бутон за публикуване
    let postBtn = document.createElement("button");  // Създаваме бутон за публикуване
    postBtn.classList.add("action-btn");  // Добавяме клас "action-btn"
    postBtn.classList.add("apply");  // Добавяме допълнителен клас "apply"
    postBtn.textContent = "apply";  // Задаваме текста на бутона "apply"
    postBtn.addEventListener("click", post);  // Добавяме слушател за събитие при клик, който извиква функцията post

// Добавяме всички елементи в <li>
    taskLiElement.appendChild(taskArticleElement);  // Добавяме <article> в <li>
    taskLiElement.appendChild(editBtn);  // Добавяме бутона за редактиране в <li>
    taskLiElement.appendChild(postBtn);  // Добавяме бутона за публикуване в <li>

// Добавяме новия <li> елемент в списъка за преглед
    reviewList.appendChild(taskLiElement);  // Добавяме <li> в списъка с предварителни събития

// Изчистваме формата
    formElement.reset();  // Изчистваме стойностите във формата

// Деактивираме бутона "Next"
    publishBtn.disabled = true;  // Бутонът "Next" е деактивиран, докато не се добави ново събитие

// Функция за редактиране на събитието
    function edit() {
      // Поставяме стойностите на събитието в input полетата за редактиране
      taskTitleInput.value = taskTitle;  // Връщаме имейла в полето
      taskCategoryInput.value = taskCategory;  // Връщаме събитието в полето
      taskContentInput.value = taskContent;  // Връщаме местоположението в полето

// Премахваме събитието от списъка за преглед
      reviewList.removeChild(taskLiElement);  // Премахваме <li> от списъка за преглед

// Активираме бутона "Next" отново
      publishBtn.disabled = false;  // Активираме бутона за добавяне на ново събитие
    }

// Функция за публикуване на събитието в списъка с одобрени
    function post() {
      // Премахваме събитието от списъка за преглед
      reviewList.removeChild(taskLiElement);  // Премахваме <li> от списъка за преглед

// Премахваме бутоните "edit" и "apply"
      taskLiElement.removeChild(postBtn);  // Премахваме бутона за публикуване
      taskLiElement.removeChild(editBtn);  // Премахваме бутона за редактиране

// Добавяме събитието в списъка с одобрени събития
      publishedList.appendChild(taskLiElement);  // Добавяме събитието в списъка с одобрени събития

// Активираме бутона "Next" отново
      publishBtn.disabled = false;  // Бутонът "Next" е активиран, за да може да се добавят нови събития
    }
  }
}