SkyArtShop/wwwroot/assets/js/admin.js

// Sky Art Shop - Admin Panel Functions

// Delete confirmation with fetch
function deleteWithConfirmation(url, itemName, redirectUrl) {
  if (!confirm(`Are you sure you want to delete ${itemName}?`)) {
    return false;
  }

  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((response) => {
      if (response.ok) {
        window.location.href = redirectUrl || window.location.href;
      } else {
        alert("Delete failed. Please try again.");
      }
    })
    .catch((error) => {
      alert("Error: " + error.message);
    });

  return false;
}

// Image upload with preview
function uploadImageWithPreview(fileInputId, previewId, urlInputId) {
  const input = document.getElementById(fileInputId);
  const file = input.files[0];

  if (!file) {
    alert("Please select a file");
    return;
  }

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

  fetch("/admin/upload/image", {
    method: "POST",
    body: formData,
  })
    .then((response) => response.json())
    .then((result) => {
      if (result.success) {
        document.getElementById(urlInputId).value = result.url;
        const preview = document.getElementById(previewId);
        if (preview) {
          preview.src = result.url;
          preview.style.display = "block";
        }
        showAdminNotification("Image uploaded successfully!", "success");
      } else {
        showAdminNotification("Upload failed: " + result.message, "error");
      }
    })
    .catch((error) => {
      showAdminNotification("Upload error: " + error.message, "error");
    });
}

// Show admin notification
function showAdminNotification(message, type = "success") {
  const notification = document.createElement("div");
  notification.className = `alert alert-${
    type === "success" ? "success" : "danger"
  } alert-dismissible fade show`;
  notification.style.cssText =
    "position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;";
  notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;

  document.body.appendChild(notification);

  setTimeout(() => {
    notification.classList.remove("show");
    setTimeout(() => notification.remove(), 150);
  }, 3000);
}

// Copy to clipboard
function copyToClipboard(text) {
  navigator.clipboard
    .writeText(text)
    .then(() => {
      showAdminNotification("Copied to clipboard!", "success");
    })
    .catch(() => {
      showAdminNotification("Failed to copy", "error");
    });
}

// Auto-generate slug from title
function generateSlugFromTitle(titleInputId, slugInputId) {
  const titleInput = document.getElementById(titleInputId);
  const slugInput = document.getElementById(slugInputId);

  if (titleInput && slugInput) {
    titleInput.addEventListener("input", function () {
      if (slugInput.value === "" || slugInput.dataset.auto === "true") {
        slugInput.value = titleInput.value
          .toLowerCase()
          .replace(/[^a-z0-9]+/g, "-")
          .replace(/(^-|-$)/g, "");
        slugInput.dataset.auto = "true";
      }
    });

    slugInput.addEventListener("input", function () {
      slugInput.dataset.auto = "false";
    });
  }
}

// Form validation helper
function validateForm(formId) {
  const form = document.getElementById(formId);
  if (!form) return true;

  const requiredFields = form.querySelectorAll("[required]");
  let isValid = true;

  requiredFields.forEach((field) => {
    if (!field.value.trim()) {
      field.classList.add("is-invalid");
      isValid = false;
    } else {
      field.classList.remove("is-invalid");
    }
  });

  if (!isValid) {
    showAdminNotification("Please fill in all required fields", "error");
  }

  return isValid;
}

// Initialize tooltips
document.addEventListener("DOMContentLoaded", function () {
  // Bootstrap tooltips
  var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
  );
  if (typeof bootstrap !== "undefined") {
    tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
  }
});