01. SoftUni Administration

function solve() {
  //Add бутон
  document.querySelector("button").addEventListener("click", add);

  function add(element) {
    element.preventDefault();
    //Име на лекцията
    let nameLecture = document.querySelector('[name="lecture-name"]');
    //Дата и час - неформатирано
    let dateLecture = document.querySelector('[name="lecture-date"]');
    //Модул на лекцията
    let moduleLecture = document.querySelector('[name="lecture-module"]');
    //Дата и час - форматиране
    let dateAndTime = dateLecture.value.split("T");
    let dateArray = dateAndTime[0].split("-");
    //Форматирана дата
    let date = dateArray.join("/");
    //Форматирано време
    let time = dateAndTime[1];

    //Ако input-ите са валидни
    if (
      nameLecture.value != "" &&
      dateLecture.value != "" &&
      moduleLecture.value != "Select module"
    ) {
      //Взимаме div елемента, който държи всички модули
      let modulesElement = document.querySelector(".modules");
      //Взимаме всички имена на модулите
      let allModules = Array.from(modulesElement.querySelectorAll("h3"));

      let foundOne;
      //Проверяваме дали имаме такъв модул вече
      allModules.forEach((element) => {
        if (
          element.innerHTML == `${moduleLecture.value.toUpperCase()}-MODULE`
        ) {
          //Ако имаме, я запазваме
          foundOne = element;
        }
      });
      //Ако сме намерили модула:
      if (foundOne) {
        //Взимаме div елемента на този модул
        let parentDiv = foundOne.parentNode;
        //И неговият unordered list
        let ul = parentDiv.querySelector("ul");
        //Създаваме нов li елемент
        let liElement = document.createElement("li");
        //Със правилния клас flex
        liElement.className = "flex";
        //Слагаме вътре във правилния формат Името на лекцията, датата и времето (заедно с Del бутона);
        liElement.innerHTML += `<h4>${nameLecture.value.toUpperCase()} - ${date} - ${time}</h4>
        <button class ='red'>Del</button>`;
        //Намираме новосъздадения del бутон и му слагаме event listener
        liElement.querySelector("button").addEventListener("click", deleteFun);
        //Взимаме всички li елементи в текущия модул
        let arrayOfLists = Array.from(ul.querySelectorAll("li"));
        //Слагаме default стойност (дължината на масива), в случай че не открием по-ранна дата
        let indexChild = arrayOfLists.length;
        //Брояч
        let counter = 0;
        //Като Breaker на foreach-a
        let tr = false;
        //Сравняваме всички дати в този модул
        arrayOfLists.forEach((liElement) => {
          let string = liElement.querySelector("h4");
          let arrayDate = string.innerHTML.split(" - ");
          //Датата от текущия елемент в листа
          let dateCurrent = Date.parse(arrayDate[1]);
          //Датата на новия елемент
          let newDate = Date.parse(date);
          //Ако датата на новия елемент е по-ранна от текущата:
          if (newDate < dateCurrent) {
            //Запази index-а и блокирай брояча
            indexChild = counter;
            tr = true;
          }
          //Тук контролираме брояча
          if (!tr) {
            counter++;
          }
        });

        //Ако indexChild е останал със Default стойността си:
        if (indexChild == arrayOfLists.length) {
          //Добавяме накрая нашия нов елемент
          ul.appendChild(liElement);
        } else {
          //В противен случай, използваме (запазения индекс + 1) и го добавяме преди този елемент
          ul.insertBefore(liElement, ul.childNodes[indexChild + 1]);
        }

        //Ако не намерим такъв модул
      } else {
        //Създаваме нов div елемент
        let newDivElement = document.createElement("div");
        //С правилния клас
        newDivElement.className = "module";
        //В който слагаме името на нашия нов модул + лекцията (със съответните ѝ данни)
        newDivElement.innerHTML = `<h3>${moduleLecture.value.toUpperCase()}-MODULE</h3>
          <ul>
              <li class='flex'>
                  <h4>${nameLecture.value} - ${date} - ${time}</h4>
                  <button class ='red'>Del</button>
              </li>
          </ul>`;
        //Намираме новосъдадения бутон Del и му слагаме Event Listener
        newDivElement
          .querySelector("button")
          .addEventListener("click", deleteFun);
        //Намираме div-a, който държи всички модули
        let parentDiv = document.querySelector(".modules");
        //И го закачаме там
        parentDiv.appendChild(newDivElement);
      }

      //Изчистваме Input полетата след операциите
      nameLecture.value = "";
      dateLecture.value = "";
      moduleLecture.value = "Select module";
    }
  }
  //Функция за премахване на елементи
  function deleteFun(element) {
    let liParent = element.target.parentNode;
    let ulParent = liParent.parentNode;
    liParent.remove();
    //В случай че няма повече лекции от дадения модул
    if (!ulParent.querySelector("li")) {
      let module = ulParent.parentNode;
      //Изтриваме и модула
      module.remove();
    }
  }
}