$(document).ready(function () {
  // Reset the game
  $('#reset').click(function () {
    window.location.reload();
  });

  // Make all draggable elements draggable
  function initializeDraggable() {
    $(".dragdrop").draggable({
      cursor: "move",
      revert: "invalid",
      helper: "original",
      start: function () {
        $(this).css("transform", "");
      }
    });
  }

  initializeDraggable(); // Apply initially

  // Make the rows and left list droppable
  $(".drop, .draggables").droppable({
    accept: ".dragdrop",
    drop: function (event, ui) {
      const $this = $(this);

      // If the drop area already has a component, move it back to the left list
      if ($this.hasClass("drop") && $this.children().length >= 2) {
        const removedElement = $this.find('.img-container .dragdrop');
        removedElement.removeClass('dropped');
        $('.draggables').append(removedElement);
        $this.find('.img-container').remove();
      }

      // Remove the original from its previous container
      ui.helper.removeClass('ui-draggable-dragging dropped');
      if (ui.helper.parent('.img-container').length) {
        ui.helper.parent('.img-container').remove();
      }

      // Reset position and reinitialize draggable
      ui.helper.css({ top: 0, left: 0 });

      // Append the dragged element to the new drop area
      if ($this.hasClass("drop")) {
        const containerDiv = $('<div class="img-container">').append(ui.helper);
        $this.append(containerDiv);
      } else {
        // Append directly to the left list
        $this.append(ui.helper);
      }

      ui.helper.addClass('dropped');
      initializeDraggable(); // Reapply draggable to maintain functionality
    }
  });
});

  // Check results
  function checkResult() {
    let allCorrect = true;
    $('.pair').each(function () {
      const pair = $(this);
      const droppedItem = pair.find('.dropped');
      const isMatch = droppedItem.length > 0 && droppedItem.data('match') === pair.data('match');
      pair.removeClass('correct incorrect'); // Remove existing classes
      if (isMatch) {
        pair.addClass('correct');
      } else {
        pair.addClass('incorrect');
        allCorrect = false;
      }
    });

    // Display result
    if (allCorrect) {
      showResult(true, "Συγχαρητήρια!");
    } else {
      showResult(false, "Δοκίμασε ξανά!");
    }
  }

  function showResult(correct, message) {
    const resultElement = document.getElementById("result-message");
    const image = correct
      ? "<div class='image'><i class='bi bi-emoji-smile' style='color: #0C4700;'></i></div>"
      : "<div class='image'><i class='bi bi-emoji-frown' style='color: #940000;'></i></div>";
    resultElement.innerHTML = message + image;
  }

  // Allow removing a component by clicking on it
  $('.droppable').on('click', '.img-container', function () {
    const removedElement = $(this).children('.dragdrop');
    removedElement.removeClass('dropped');
    $('.draggables').append(removedElement);
    $(this).remove();
    initializeDraggable(); // Reapply draggable
  });

