$(function () {
  // ----------------------------------------------------------------------
  // draggble item
  // ----------------------------------------------------------------------
  function kanbanSortable() {
    $('[data-sortable="true"]').sortable({
      connectWith: ".connect-sorting-content",
      items: ".card",
      cursor: "move",
      placeholder: "ui-state-highlight",
      refreshPosition: true,
      stop: function (event, ui) {
        var parent_ui = ui.item.parent().attr("data-item");
      },
      update: function (event, ui) {
        console.log(ui);
        console.log(ui.item);
      },
    });
  }

  // ----------------------------------------------------------------------
  // clear all task on click
  // ----------------------------------------------------------------------
  function clearItem() {
    $(".list-clear-all")
      .off("click")
      .on("click", function (event) {
        event.preventDefault();
        $(this)
          .parents('[data-action="sorting"]')
          .find(".connect-sorting-content .card")
          .remove();
      });
  }

  // ----------------------------------------------------------------------
  // add task and open modal
  // ----------------------------------------------------------------------
  function addKanbanItem() {
    $(".addTask").on("click", function (event) {
      event.preventDefault();
      getParentElement = $(this)
        .parents('[data-action="sorting"]')
        .attr("data-item");
      $(".edit-task-title").hide();
      $(".add-task-title").show();
      $('[data-btn-action="addTask"]').show();
      $('[data-btn-action="editTask"]').hide();
      // $('.addTaskAccordion .collapse').collapse('hide');
      $("#addItemModal").modal("show");
      kanban_add(getParentElement);
    });
  }

  // ----------------------------------------------------------------------
  //   add default item
  // ----------------------------------------------------------------------
  function kanban_add(getParent) {
    $('[data-btn-action="addTask"]')
      .off("click")
      .on("click", function (event) {
        getAddBtnClass = $(this).attr("class").split(" ")[1];

        var today = new Date();
        var dd = String(today.getDate()).padStart(2, "0");
        var mm = String(today.getMonth());

        var monthNames = [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ];

        today = dd + " " + monthNames[mm];

        var $_getParent = getParent;

        var itemTitle = document.getElementById("kanban-title").value;
        var itemText = document.getElementById("kanban-text").value;

        item_html =
          '<div data-draggable="true" class="card task-text-progress" style="">' +
          '<div class="card-body">' +
          '<div class="task-header">' +
          '<div class="">' +
          '<h4 class="" data-item-title="' +
          itemTitle +
          '">' +
          itemTitle +
          "</h4>" +
          "</div>" +
          '<div class="">' +
          '<div class="dropdown">' +
          '<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
          '<i class="ti ti-dots-vertical text-dark"></i>' +
          "</a>" +
          '<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink-4">' +
          '<a class="dropdown-item kanban-item-edit cursor-pointer d-flex align-items-center gap-1" href="javascript:void(0);"><i class="ti ti-pencil fs-5"></i>Edit</a>' +
          '<a class="dropdown-item kanban-item-delete cursor-pointer d-flex align-items-center gap-1" href="javascript:void(0);"><i class="ti ti-trash fs-5"></i>Delete</a>' +
          "</div>" +
          "</div>" +
          "</div>" +
          "</div>" +
          '<div class="task-body">' +
          '<div class="task-content">' +
          '<p class="mb-0" data-item-text="' +
          itemText +
          '">' +
          itemText +
          "</p>" +
          "</div>" +
          '<div class="task-bottom">' +
          '<div class="tb-section-1">' +
          '<span class="hstack gap-2 fs-2" data-item-date="' +
          today +
          '"><i class="ti ti-calendar fs-5"></i> ' +
          today +
          "</span>" +
          "</div>" +
          '<div class="tb-section-2">' +
          '<span class="badge text-bg-success fs-1">Design</span>' +
          "</div>" +
          "</div>" +
          "</div>" +
          "</div>" +
          "</div>";

        $("[data-item='" + $_getParent + "'] .connect-sorting-content").append(
          item_html
        );

        $("#addItemModal").modal("hide");

        kanbanEdit();
        kanbanDelete();
      });
  }

  // ----------------------------------------------------------------------
  //   add item
  // ----------------------------------------------------------------------
  $("#add-list")
    .off("click")
    .on("click", function (event) {
      event.preventDefault();

      $(".add-list").show();
      $(".edit-list").hide();
      $(".edit-list-title").hide();
      $(".add-list-title").show();
      $("#addListModal").modal("show");
    });

  // ----------------------------------------------------------------------
  //   add list
  // ----------------------------------------------------------------------
  $(".add-list")
    .off("click")
    .on("click", function (event) {
      var today = new Date();
      var dd = String(today.getDate()).padStart(2, "0");
      var mm = String(today.getMonth() + 1).padStart(2, "0");

      today = mm + "." + dd;

      var itemTitle = document.getElementById("item-name").value;

      var itemNameLowercase = itemTitle.toLowerCase();
      var itemNameRemoveWhiteSpace = itemNameLowercase.split(" ").join("_");
      var itemDataAttr = itemNameRemoveWhiteSpace;

      item_html =
        '<div data-item="item-' +
        itemDataAttr +
        '" class="task-list-container  mb-4 " data-action="sorting">' +
        '<div class="connect-sorting">' +
        '<div class="task-container-header">' +
        '<h6 class="item-head mb-0 fs-4 fw-semibold" data-item-title="' +
        itemTitle +
        '">' +
        itemTitle +
        "</h6>" +
        '<div class="hstack gap-2">' +
        '<div class="dropdown">' +
        '<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
        '<i class="ti ti-dots-vertical text-dark"></i>' +
        "</a>" +
        '<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink-4">' +
        '<a class="dropdown-item list-edit" href="javascript:void(0);">Edit</a>' +
        '<a class="dropdown-item list-delete" href="javascript:void(0);">Delete</a>' +
        '<a class="dropdown-item list-clear-all" href="javascript:void(0);">Clear All</a>' +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>" +
        '<div class="connect-sorting-content" data-sortable="true">' +
        "</div>" +
        "</div>" +
        "</div>";

      $(".task-list-section").append(item_html);
      $("#addListModal").modal("hide");
      $("#item-name").val("");
      kanbanSortable();
      editItem();
      deleteItem();
      clearItem();
      addKanbanItem();
      kanbanEdit();
      kanbanDelete();

      // --------------------
      // Tooltip
      // --------------------
      var tooltipTriggerList = [].slice.call(
        document.querySelectorAll('[data-bs-toggle="tooltip"]')
      );
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
      });
    });

  // ----------------------------------------------------------------------
  // edit item
  // ----------------------------------------------------------------------
  function editItem() {
    $(".list-edit")
      .off("click")
      .on("click", function (event) {
        event.preventDefault();

        var parentItem = $(this);

        $(".add-list").hide();
        $(".edit-list").show();

        $(".add-list-title").hide();
        $(".edit-list-title").show();

        var itemTitle = parentItem
          .parents('[data-action="sorting"]')
          .find(".item-head")
          .attr("data-item-title");
        $("#item-name").val(itemTitle);

        $(".edit-list")
          .off("click")
          .on("click", function (event) {
            var $_innerThis = $(this);
            var $_getListTitle = document.getElementById("item-name").value;

            var $_editedListTitle = parentItem
              .parents('[data-action="sorting"]')
              .find(".item-head")
              .html($_getListTitle);
            var $_editedListTitleDataAttr = parentItem
              .parents('[data-action="sorting"]')
              .find(".item-head")
              .attr("data-item-title", $_getListTitle);

            $("#addListModal").modal("hide");
            $("#item-name").val("");
          });
        $("#addListModal").modal("show");
        $("#addListModal").on("hidden.bs.modal", function (e) {
          $("#item-name").val("");
        });
      });
  }

  // ----------------------------------------------------------------------
  // all list delete
  // ----------------------------------------------------------------------
  function deleteItem() {
    $(".list-delete")
      .off("click")
      .on("click", function (event) {
        event.preventDefault();
        $(this).parents("[data-action]").remove();
      });
  }

  // ----------------------------------------------------------------------
  // Delete item on click
  // ----------------------------------------------------------------------
  function kanbanDelete() {
    $(".card .kanban-item-delete")
      .off("click")
      .on("click", function (event) {
        event.preventDefault();

        get_card_parent = $(this).parents(".card");

        $("#deleteConformation").modal("show");

        $('[data-remove="task"]').on("click", function (event) {
          event.preventDefault();
          /* Act on the event */
          get_card_parent.remove();
          $("#deleteConformation").modal("hide");
        });
      });
  }

  // ----------------------------------------------------------------------
  // Edit item on click
  // ----------------------------------------------------------------------
  function kanbanEdit() {
    $(".card .kanban-item-edit")
      .off("click")
      .on("click", function (event) {
        event.preventDefault();

        var parentItem = $(this);

        $(".add-task-title").hide();
        $(".edit-task-title").show();

        $('[data-btn-action="addTask"]').hide();
        $('[data-btn-action="editTask"]').show();

        var itemKanbanTitle = parentItem
          .parents(".card")
          .find("h4")
          .attr("data-item-title");
        var get_kanban_title = $(".task-text-progress #kanban-title").val(
          itemKanbanTitle
        );

        var itemText = parentItem
          .parents(".card")
          .find('p:not(".progress-count")')
          .attr("data-item-text");
        var get_kanban_text = $(".task-text-progress #kanban-text").val(
          itemText
        );

        $('[data-btn-action="editTask"]')
          .off("click")
          .on("click", function (event) {
            var kanbanValueTitle =
              document.getElementById("kanban-title").value;
            var kanbanValueText = document.getElementById("kanban-text").value;

            var itemDataAttr = parentItem
              .parents(".card")
              .find("h4")
              .attr("data-item-title", kanbanValueTitle);
            var itemKanbanTitle = parentItem
              .parents(".card")
              .find("h4")
              .html(kanbanValueTitle);
            var itemTextDataAttr = parentItem
              .parents(".card")
              .find('p:not(".progress-count")')
              .attr("data-tasktext", kanbanValueText);
            var itemText = parentItem
              .parents(".card")
              .find('p:not(".progress-count")')
              .html(kanbanValueText);

            $("#addItemModal").modal("hide");
            var setDate = $(".taskDate").html("");
            $(".taskDate").hide();
          });
        $("#addItemModal").modal("show");
      });
  }

  editItem();
  deleteItem();
  clearItem();
  addKanbanItem();
  kanbanEdit();
  kanbanDelete();
  kanbanSortable();
});