{% include 'AdminTemplates/xlsx_dash.html' %} {% load static %}
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<style>
  /* New Folder Styles */
  .folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  .folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e0e0e0;
  }

  .folder-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .folder-item.selected {
    background: #e3f2fd;
    border-color: #2196f3;
  }

  .folder-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    color: #ffd54f;
  }

  .folder-icon i {
    font-size: 48px;
  }

  .folder-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
    word-break: break-word;
  }

  .folder-stats {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
  }

  /* Section Headers */
  .section-header {
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
  }

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  /* Keep existing image container styles */
  .image-container {
    margin-top: 30px;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .folders-grid {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 15px;
      padding: 15px;
    }

    .folder-icon {
      width: 48px;
      height: 48px;
    }

    .folder-icon i {
      font-size: 36px;
    }
  }
</style>

<div class="page-wrapper">
  <div class="content">
    <div class="page-header">
      <div class="page-title">
        <h4>Media Library</h4>
        <h6>Manage your files and folders</h6>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <!-- Folders Section -->
        <div class="section-header">
          <h5 class="section-title">Folders</h5>
        </div>

        <div class="folders-grid">
          <!-- Root Folder -->
          <div class="folder-item" id="root-folder">
            <div class="folder-icon">
              <i class="fa fa-folder"></i>
            </div>
            <div class="folder-name">All Files</div>
            <div class="folder-stats">{{ total_files }} items</div>
          </div>

          <!-- Dynamic Folders -->
          {% for folder in folders %}
          <div class="folder-item" data-folder-name="{{ folder.folder_name }}">
            <div class="folder-icon">
              <i class="fa fa-folder"></i>
            </div>
            <div class="folder-name">{{ folder.folder_name }}</div>
            <div class="folder-stats">{{ folder.file_count }} items</div>
          </div>
          {% endfor %}
        </div>

        <div class="image-container" id="image-container">
          {% for image in images %}
          <div class="card mb-3">
            <div class="image" data-id="{{ image.url }}">
              <a data-fancybox="gallery" href="{{ image.url }}">
                <img src="{{ image.url }}" alt="Uploaded Image" />
              </a>
              <div class="image-name">{{ image.filename }}</div>
              <button
                type="button"
                class="delete-btn btn btn-danger btn-sm"
                data-id="{{ image.url }}"
              >
                Delete
              </button>
            </div>
          </div>
          {% endfor %}
        </div>

        <div id="load-more-container"></div>
      </div>
    </div>
  </div>
</div>

<script>
  var loading = false;
  var nextPage = 2;
  var currentFolder = "";
  var searchQuery = "";
  var totalPages = 1;

  function loadImagesForFolder(folderName, searchQuery = "", page = 1) {
    if (loading) return;
    loading = true;
    $.ajax({
      url: "{% url 'uploaded_images' %}",
      data: { folder: folderName, q: searchQuery, page: page },
      success: function (response) {
        var container = $("#image-container");
        if (page === 1) {
          container.empty();
        }
        $(".folder").removeClass("selected");
        if (folderName) {
          $('.folder[data-folder-name="' + folderName + '"]').addClass(
            "selected"
          );
        } else {
          $("#root-folder").addClass("selected");
        }
        $.each(response.images, function (i, image) {
          var cardDiv = $('<div class="card mb-3">').append(
            $('<div class="image" data-id="' + image.url + '">').append(
              $('<a data-fancybox="gallery" href="' + image.url + '">').append(
                $('<img src="' + image.url + '" alt="Uploaded Image">')
              ),
              $('<div class="image-name">').text(image.filename),
              $(
                '<button type="button" class="delete-btn btn btn-danger btn-sm" data-id="' +
                  image.url +
                  '">'
              ).text("Delete")
            )
          );
          container.append(cardDiv);
        });

        setupDeleteButtonListener(
          container.find(".delete-btn:not(.listener-attached)")
        );

        loading = false;
        nextPage = response.has_next ? page + 1 : null;
        totalPages = response.total_pages;

        updateLoadMoreContainer();

        if (nextPage) {
          $(window).off("scroll", scrollHandler).on("scroll", scrollHandler);
        } else {
          $(window).off("scroll", scrollHandler);
        }
      },
      error: function (error) {
        console.error("Error loading images:", error);
        loading = false;
      },
    });
  }
  function updateLoadMoreContainer() {
    var loadMoreContainer = $("#load-more-container");
    if (nextPage && nextPage <= totalPages) {
      loadMoreContainer.html("<p>Loading more items...</p>");
    } else {
      loadMoreContainer.html("<p>No more items to load.</p>");
    }
  }

  function scrollHandler() {
    if (
      $(window).scrollTop() + $(window).height() >
      $(document).height() - 100
    ) {
      if (nextPage && nextPage <= totalPages) {
        loadImagesForFolder(currentFolder, searchQuery, nextPage);
      }
    }
  }
  $(document).ready(function () {
    // Folder selection handling
    $(".folder-item").on("click", function () {
      $(".folder-item").removeClass("selected");
      $(this).addClass("selected");

      const folderName = $(this).data("folder-name") || "";
      currentFolder = folderName;
      nextPage = 1;
      loadImagesForFolder(folderName, searchQuery, 1);
    });

    // Initialize with root folder selected
    $("#root-folder").addClass("selected");
  });
  $(document).ready(function () {
    $("#root-folder").addClass("selected");
    loadImagesForFolder(currentFolder, searchQuery, 1);

    $(".folder").on("click", function () {
      // Remove 'selected' class from all folders
      $(".folder").removeClass("selected");
      $("#root-folder").removeClass("selected");
      // Add 'selected' class to the clicked folder
      $(this).addClass("selected");

      currentFolder = $(this).data("folder-name");
      nextPage = 1;
      loadImagesForFolder(currentFolder, searchQuery, 1);
    });

    $("#root-folder").on("click", function () {
      $(".folder").removeClass("selected");
      $(this).addClass("selected");

      currentFolder = "";
      nextPage = 1;
      loadImagesForFolder(currentFolder, searchQuery, 1);
    });

    $("#search-input").on("input", function () {
      searchQuery = $(this).val().trim().toLowerCase();
      nextPage = 1;
      loadImagesForFolder(currentFolder, searchQuery, 1);
    });

    loadImagesForFolder(currentFolder, searchQuery, 1);

    $(window).on("scroll", scrollHandler);

    $(document).on("keydown", function (e) {
      if (e.key === "Escape") {
        $("#search-input").focus();
        if ($("#search-input").val().trim() !== "") {
          $("#search-input").val("");
          $("#search-input").trigger("input");
        }
      }
    });
  });

  function setupDeleteButtonListener(deleteBtn) {
    deleteBtn.addClass("listener-attached").on("click", function () {
      var cardDiv = $(this).closest(".card");
      var imageId = $(this).attr("data-id");
      var imageName = cardDiv.find(".image-name").text();

      swal({
        title: "Are you sure?",
        text:
          "Once deleted, you will not be able to recover '" + imageName + "'!",
        icon: "warning",
        buttons: ["Cancel", "Delete"],
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          let formData = new FormData();
          formData.append("image_path", imageId);

          fetch("{% url 'delete_uploaded_image' %}", {
            method: "POST",
            headers: {
              "X-CSRFToken": "{{ csrf_token }}",
            },
            body: formData,
          })
            .then((response) => response.json())
            .then((data) => {
              if (data.success) {
                cardDiv.remove();
                swal("Poof! '" + imageName + "' has been deleted!", {
                  icon: "success",
                });
              } else {
                swal("Oops! Something went wrong.", {
                  icon: "error",
                });
              }
            })
            .catch((error) => console.error("Error:", error));
        } else {
          swal("Your image is safe!");
        }
      });
    });
  }
</script>

{% endblock %}