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");  // Списък за публикувани събития

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

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

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

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

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

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

    // Създаване на бутон за редактиране
    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

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

    taskLiElement.appendChild(postBtn);  // Добавяме бутона за публикуване в 


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

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

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

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

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

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

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

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

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

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