website/admin/media-library.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Library - Sky Art Shop</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
    <link rel="stylesheet" href="/admin/css/admin-style.css" />
    <style>
      .media-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .toolbar {
        background: #fff;
        padding: 15px 20px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
      }

      .toolbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .toolbar-right {
        display: flex;
        gap: 10px;
      }

      .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0;
        font-size: 14px;
      }

      .breadcrumb-item a {
        color: #7c3aed;
        text-decoration: none;
      }

      .breadcrumb-item a:hover {
        text-decoration: underline;
      }

      .selected-count {
        background: #7c3aed;
        color: white;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
      }

      .media-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
        padding: 20px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        min-height: 400px;
      }

      .media-item {
        position: relative;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
        background: #fff;
      }

      .media-item:hover {
        border-color: #7c3aed;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
      }

      .media-item.selected {
        border-color: #7c3aed;
        border-width: 3px;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
      }

      .media-checkbox {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 10;
        width: 24px;
        height: 24px;
        cursor: pointer;
      }

      .folder-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        height: 150px;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      }

      .folder-item i {
        font-size: 48px;
        color: #7c3aed;
        margin-bottom: 10px;
      }

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

      .file-item img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        display: block;
      }

      .file-name {
        padding: 8px;
        background: #f9fafb;
        font-size: 11px;
        text-align: center;
        word-break: break-all;
        color: #6b7280;
        border-top: 1px solid #e5e7eb;
      }

      .upload-zone {
        border: 3px dashed #d1d5db;
        border-radius: 10px;
        padding: 40px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        background: #f9fafb;
        margin-bottom: 20px;
      }

      .upload-zone:hover,
      .upload-zone.dragover {
        border-color: #7c3aed;
        background: #f3f0ff;
      }

      .upload-zone i {
        font-size: 48px;
        color: #7c3aed;
        margin-bottom: 15px;
      }

      .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #9ca3af;
      }

      .empty-state i {
        font-size: 64px;
        margin-bottom: 20px;
        opacity: 0.5;
      }

      .progress-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 350px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        padding: 20px;
        z-index: 1000;
      }

      .modal-content {
        border-radius: 12px;
      }
    </style>
  </head>
  <body>
    <!-- Sidebar -->
    <div class="sidebar">
      <div class="sidebar-brand">🛍️ Sky Art Shop</div>
      <ul class="sidebar-menu">
        <li>
          <a href="/admin/dashboard.html"
            ><i class="bi bi-speedometer2"></i> Dashboard</a
          >
        </li>
        <li>
          <a href="/admin/homepage.html"
            ><i class="bi bi-house"></i> Homepage Editor</a
          >
        </li>
        <li>
          <a href="/admin/products.html"><i class="bi bi-box"></i> Products</a>
        </li>
        <li>
          <a href="/admin/portfolio.html"
            ><i class="bi bi-easel"></i> Portfolio</a
          >
        </li>
        <li>
          <a href="/admin/blog.html"><i class="bi bi-newspaper"></i> Blog</a>
        </li>
        <li>
          <a href="/admin/pages.html"
            ><i class="bi bi-file-text"></i> Custom Pages</a
          >
        </li>
        <li>
          <a href="/admin/media-library.html" class="active"
            ><i class="bi bi-images"></i> Media Library</a
          >
        </li>
        <li>
          <a href="/admin/menu.html"><i class="bi bi-list"></i> Menu</a>
        </li>
        <li>
          <a href="/admin/settings.html"><i class="bi bi-gear"></i> Settings</a>
        </li>
        <li>
          <a href="/admin/users.html"><i class="bi bi-people"></i> Users</a>
        </li>
      </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Top Bar -->
      <div class="top-bar">
        <div>
          <h3>Media Library</h3>
          <p class="mb-0 text-muted">Manage your images and media files</p>
        </div>
        <div>
          <button class="btn-logout" onclick="logout()">
            <i class="bi bi-box-arrow-right"></i> Logout
          </button>
        </div>
      </div>

      <div class="container-fluid">
        <!-- Toolbar -->
        <div class="toolbar">
          <div class="toolbar-left">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb" id="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="#" onclick="navigateToFolder(null); return false;"
                    ><i class="bi bi-house-door"></i> Root</a
                  >
                </li>
              </ol>
            </nav>
            <span
              class="selected-count"
              id="selectedCount"
              style="display: none"
              >0 selected</span
            >
          </div>
          <div class="toolbar-right">
            <button
              class="btn btn-sm btn-success"
              onclick="showCreateFolderModal()"
            >
              <i class="bi bi-folder-plus"></i> New Folder
            </button>
            <button class="btn btn-sm btn-primary" onclick="showUploadZone()">
              <i class="bi bi-cloud-upload"></i> Upload Files
            </button>
            <button
              class="btn btn-sm btn-danger"
              id="deleteSelectedBtn"
              style="display: none"
              onclick="handleDeleteSelected()"
            >
              <i class="bi bi-trash"></i> Delete Selected
            </button>
          </div>
        </div>

        <!-- Upload Zone (hidden by default) -->
        <div
          class="upload-zone"
          id="uploadZone"
          style="display: none"
          ondrop="handleDrop(event)"
          ondragover="event.preventDefault(); event.currentTarget.classList.add('dragover');"
          ondragleave="event.currentTarget.classList.remove('dragover');"
          onclick="document.getElementById('fileInput').click()"
        >
          <i class="bi bi-cloud-arrow-up d-block"></i>
          <h5>Drop files here or click to browse</h5>
          <p class="text-muted mb-0">
            Supported: JPG, PNG, GIF, WebP (Max 5MB each)
          </p>
          <input
            type="file"
            id="fileInput"
            multiple
            accept="image/*"
            style="display: none"
            onchange="handleFileSelect(event)"
          />
        </div>

        <!-- Progress Bar -->
        <div
          class="progress-container"
          id="uploadProgress"
          style="display: none"
        >
          <h6 class="mb-3">Uploading files...</h6>
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated"
              id="progressBar"
              style="width: 0%"
            >
              0%
            </div>
          </div>
        </div>

        <!-- Media Grid -->
        <div class="media-grid" id="mediaGrid">
          <div class="empty-state">
            <i class="bi bi-folder-x d-block"></i>
            <h5>No files yet</h5>
            <p>Upload files or create folders to get started</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Create Folder Modal -->
    <div class="modal fade" id="createFolderModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Create New Folder</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
            ></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">Folder Name</label>
              <input
                type="text"
                class="form-control"
                id="folderNameInput"
                placeholder="Enter folder name"
              />
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Cancel
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="createFolder()"
            >
              Create Folder
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      let currentFolderId = null;
      let allFolders = [];
      let allFiles = [];
      let selectedItems = new Set(); // Store IDs: 'f-{id}' for folders, 'u-{id}' for files
      let folderPath = [];

      async function init() {
        await Promise.all([loadFolders(), loadFiles()]);
      }

      async function loadFolders() {
        try {
          const response = await fetch("/api/admin/folders", {
            credentials: "include",
          });
          const data = await response.json();

          if (data.success) {
            allFolders = data.folders;
          }
        } catch (error) {
          console.error("Failed to load folders:", error);
        }
      }

      async function loadFiles(folderId = null) {
        try {
          currentFolderId = folderId;
          let url = "/api/admin/uploads";

          if (folderId !== null) {
            url += `?folder_id=${folderId}`;
          } else {
            url += "?folder_id=null";
          }

          const response = await fetch(url, {
            credentials: "include",
          });
          const data = await response.json();

          if (data.success) {
            allFiles = data.files;
            renderMedia();
            updateBreadcrumb();
          }
        } catch (error) {
          console.error("Failed to load files:", error);
          alert("Failed to load media library");
        }
      }

      function renderMedia() {
        const grid = document.getElementById("mediaGrid");

        // Get subfolders of current folder
        const subfolders = allFolders.filter(
          (f) => f.parentId === currentFolderId
        );

        if (subfolders.length === 0 && allFiles.length === 0) {
          grid.innerHTML = `
            <div class="empty-state">
              <i class="bi bi-folder-x d-block"></i>
              <h5>No files yet</h5>
              <p>Upload files or create folders to get started</p>
            </div>
          `;
          return;
        }

        let html = "";

        // Render folders first
        for (const folder of subfolders) {
          const isSelected = selectedItems.has(`f-${folder.id}`);
          html += `
            <div class="media-item ${
              isSelected ? "selected" : ""
            }" data-type="folder" data-id="${folder.id}">
              <input type="checkbox" class="media-checkbox form-check-input" 
                     ${isSelected ? "checked" : ""}
                     onclick="toggleSelection('f-${folder.id}', event)" />
              <div class="folder-item" ondblclick="navigateToFolder(${
                folder.id
              })">
                <i class="bi bi-folder-fill"></i>
                <div class="folder-name">${escapeHtml(folder.name)}</div>
                <small class="text-muted">${folder.fileCount} files</small>
              </div>
            </div>
          `;
        }

        // Render files
        for (const file of allFiles) {
          const isSelected = selectedItems.has(`u-${file.id}`);
          html += `
            <div class="media-item ${
              isSelected ? "selected" : ""
            }" data-type="file" data-id="${file.id}">
              <input type="checkbox" class="media-checkbox form-check-input" 
                     ${isSelected ? "checked" : ""}
                     onclick="toggleSelection('u-${file.id}', event)" />
              <div class="file-item">
                <img src="${file.path}" alt="${escapeHtml(file.originalName)}" 
                     onerror="this.src='/assets/images/placeholder.jpg'" />
                <div class="file-name" title="${escapeHtml(
                  file.originalName
                )}">${escapeHtml(file.originalName)}</div>
              </div>
            </div>
          `;
        }

        grid.innerHTML = html;
      }

      function toggleSelection(itemId, event) {
        event.stopPropagation();

        if (selectedItems.has(itemId)) {
          selectedItems.delete(itemId);
        } else {
          selectedItems.add(itemId);
        }

        updateSelectionUI();
      }

      function updateSelectionUI() {
        const countEl = document.getElementById("selectedCount");
        const deleteBtn = document.getElementById("deleteSelectedBtn");

        if (selectedItems.size > 0) {
          countEl.textContent = `${selectedItems.size} selected`;
          countEl.style.display = "inline-block";
          deleteBtn.style.display = "inline-block";
        } else {
          countEl.style.display = "none";
          deleteBtn.style.display = "none";
        }

        renderMedia();
      }

      function navigateToFolder(folderId) {
        selectedItems.clear();
        updateSelectionUI();

        if (folderId === null) {
          folderPath = [];
        } else {
          // Build path
          folderPath = [];
          let currentId = folderId;

          while (currentId !== null) {
            const folder = allFolders.find((f) => f.id === currentId);
            if (!folder) break;

            folderPath.unshift({ id: folder.id, name: folder.name });
            currentId = folder.parentId;
          }
        }

        loadFiles(folderId);
      }

      function updateBreadcrumb() {
        const breadcrumb = document.getElementById("breadcrumb");
        let html =
          '<li class="breadcrumb-item"><a href="#" onclick="navigateToFolder(null); return false;"><i class="bi bi-house-door"></i> Root</a></li>';

        for (const folder of folderPath) {
          html += `<li class="breadcrumb-item"><a href="#" onclick="navigateToFolder(${
            folder.id
          }); return false;">${escapeHtml(folder.name)}</a></li>`;
        }

        breadcrumb.innerHTML = html;
      }

      function showUploadZone() {
        const zone = document.getElementById("uploadZone");
        zone.style.display = zone.style.display === "none" ? "block" : "none";
      }

      async function handleFileSelect(event) {
        const files = Array.from(event.target.files);
        await uploadFiles(files);
        event.target.value = ""; // Reset input
      }

      async function handleDrop(event) {
        event.preventDefault();
        event.currentTarget.classList.remove("dragover");

        const files = Array.from(event.dataTransfer.files);
        await uploadFiles(files);
      }

      async function uploadFiles(files) {
        if (files.length === 0) return;

        const formData = new FormData();
        files.forEach((file) => formData.append("files", file));

        if (currentFolderId !== null) {
          formData.append("folder_id", currentFolderId);
        }

        const progressBar = document.getElementById("progressBar");
        const progressContainer = document.getElementById("uploadProgress");
        progressContainer.style.display = "block";

        try {
          const xhr = new XMLHttpRequest();

          xhr.upload.addEventListener("progress", (e) => {
            if (e.lengthComputable) {
              const percentComplete = (e.loaded / e.total) * 100;
              progressBar.style.width = percentComplete + "%";
              progressBar.textContent = Math.round(percentComplete) + "%";
            }
          });

          xhr.addEventListener("load", function () {
            if (xhr.status === 200) {
              const data = JSON.parse(xhr.responseText);
              if (data.success) {
                setTimeout(() => {
                  progressContainer.style.display = "none";
                  progressBar.style.width = "0%";
                  document.getElementById("uploadZone").style.display = "none";
                  loadFiles(currentFolderId);
                }, 500);
              } else {
                alert("Upload failed: " + data.message);
                progressContainer.style.display = "none";
              }
            } else {
              alert("Upload failed");
              progressContainer.style.display = "none";
            }
          });

          xhr.open("POST", "/api/admin/upload");
          xhr.withCredentials = true;
          xhr.send(formData);
        } catch (error) {
          console.error("Upload failed:", error);
          alert("Upload failed: " + error.message);
          progressContainer.style.display = "none";
        }
      }

      function showCreateFolderModal() {
        const modal = new bootstrap.Modal(
          document.getElementById("createFolderModal")
        );
        document.getElementById("folderNameInput").value = "";
        modal.show();
      }

      async function createFolder() {
        const nameInput = document.getElementById("folderNameInput");
        const name = nameInput.value.trim();

        if (!name) {
          alert("Please enter a folder name");
          return;
        }

        try {
          const response = await fetch("/api/admin/folders", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            credentials: "include",
            body: JSON.stringify({
              name: name,
              parent_id: currentFolderId,
            }),
          });

          const data = await response.json();

          if (data.success) {
            bootstrap.Modal.getInstance(
              document.getElementById("createFolderModal")
            ).hide();
            await loadFolders();
            loadFiles(currentFolderId);
          } else {
            alert("Failed to create folder: " + data.error);
          }
        } catch (error) {
          console.error("Failed to create folder:", error);
          alert("Failed to create folder");
        }
      }

      async function handleDeleteSelected() {
        if (selectedItems.size === 0) return;

        const folderIds = Array.from(selectedItems)
          .filter((id) => id.startsWith("f-"))
          .map((id) => parseInt(id.substring(2)));

        const fileIds = Array.from(selectedItems)
          .filter((id) => id.startsWith("u-"))
          .map((id) => parseInt(id.substring(2)));

        const confirmMsg = `Delete ${selectedItems.size} item(s)?`;
        if (!confirm(confirmMsg)) return;

        try {
          // Delete files
          if (fileIds.length > 0) {
            const response = await fetch("/api/admin/uploads/bulk-delete", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              credentials: "include",
              body: JSON.stringify({ file_ids: fileIds }),
            });

            const data = await response.json();
            if (!data.success) {
              alert("Failed to delete some files: " + data.error);
            }
          }

          // Delete folders
          for (const folderId of folderIds) {
            await fetch(`/api/admin/folders/${folderId}?delete_contents=true`, {
              method: "DELETE",
              credentials: "include",
            });
          }

          selectedItems.clear();
          await loadFolders();
          loadFiles(currentFolderId);
        } catch (error) {
          console.error("Failed to delete items:", error);
          alert("Failed to delete items");
        }
      }

      function escapeHtml(text) {
        const div = document.createElement("div");
        div.textContent = text;
        return div.innerHTML;
      }

      // Initialize after authentication is confirmed
      document.addEventListener("DOMContentLoaded", async function () {
        // Wait a bit for auth.js to check authentication
        setTimeout(init, 100);
      });
    </script>
    <script src="/admin/js/auth.js"></script>
  </body>
</html>