<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Upload Graphics</title>

  <script src="https://cdn.tailwindcss.com"></script>

  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  >

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <style>

    *{
      font-family:'Inter',sans-serif;
    }

    body{
      background:#f4f7fb;
    }

    .graphic-card{
      transition:.2s ease;
    }

    .graphic-card:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 25px rgba(0,0,0,.06);
    }

  </style>

</head>

<body class="pt-16 pb-8">

<div class="max-w-7xl mx-auto px-0 sm:px-6 lg:px-8 space-y-6 my-4">

  <!-- Main -->
  <div class="bg-white border border-gray-200 rounded-3xl shadow-sm p-5">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">

      <div>

        <h1 class="text-2xl font-bold text-gray-900">
          Upload Graphics
        </h1>

        <p class="text-sm text-gray-500 mt-1">
          Manage and upload your creative graphics
        </p>

      </div>

      <button
        id="openModalBtn"
        class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-3 rounded-2xl transition shadow-sm"
      >
        + Upload New
      </button>

    </div>

    <!-- Search + Filter -->
    <div class="flex flex-col lg:flex-row gap-4 mb-6">

      <input
        type="text"
        placeholder="Search graphics..."
        class="w-full lg:w-80 px-4 py-3 rounded-2xl border border-gray-200 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500"
      >

      <select
        class="px-4 py-3 rounded-2xl border border-gray-200 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500"
      >
        <option>All Graphics</option>
        <option>Social Media</option>
        <option>Marketing</option>
        <option>Business</option>
      </select>

    </div>

    <!-- Grid -->
    <div
      id="graphicsGrid"
      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"
    >

      <!-- Card -->
      <div class="graphic-card bg-white border border-gray-200 rounded-3xl overflow-hidden">

        <div class="relative">

          <img
            src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop"
            class="w-full h-52 object-cover"
          >

          <span class="absolute top-3 left-3 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-semibold text-gray-700">
            Business
          </span>

        </div>

        <div class="p-4">

          <h3 class="font-semibold text-gray-900 line-clamp-1">
            Business Growth Tips
          </h3>

          <p class="text-sm text-gray-500 mt-1">
            12 May 2025
          </p>

          <div class="flex items-center justify-end mt-4">

            <button class="deleteBtn text-red-500 text-sm font-semibold hover:underline">
              Delete
            </button>

          </div>

        </div>

      </div>

      <!-- Card -->
      <div class="graphic-card bg-white border border-gray-200 rounded-3xl overflow-hidden">

        <div class="relative">

          <img
            src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=1200&auto=format&fit=crop"
            class="w-full h-52 object-cover"
          >

          <span class="absolute top-3 left-3 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-semibold text-gray-700">
            Marketing
          </span>

        </div>

        <div class="p-4">

          <h3 class="font-semibold text-gray-900 line-clamp-1">
            Digital Marketing Strategy
          </h3>

          <p class="text-sm text-gray-500 mt-1">
            10 May 2025
          </p>

          <div class="flex items-center justify-end mt-4">

            <button class="deleteBtn text-red-500 text-sm font-semibold hover:underline">
              Delete
            </button>

          </div>

        </div>

      </div>

      <!-- Card -->
      <div class="graphic-card bg-white border border-gray-200 rounded-3xl overflow-hidden">

        <div class="relative">

          <img
            src="https://images.unsplash.com/photo-1515169067868-5387ec356754?q=80&w=1200&auto=format&fit=crop"
            class="w-full h-52 object-cover"
          >

          <span class="absolute top-3 left-3 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-semibold text-gray-700">
            Service
          </span>

        </div>

        <div class="p-4">

          <h3 class="font-semibold text-gray-900 line-clamp-1">
            Our New Service
          </h3>

          <p class="text-sm text-gray-500 mt-1">
            06 May 2025
          </p>

          <div class="flex items-center justify-end mt-4">

            <button class="deleteBtn text-red-500 text-sm font-semibold hover:underline">
              Delete
            </button>

          </div>

        </div>

      </div>

      <!-- Card -->
      <div class="graphic-card bg-white border border-gray-200 rounded-3xl overflow-hidden">

        <div class="relative">

          <img
            src="https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1200&auto=format&fit=crop"
            class="w-full h-52 object-cover"
          >

          <span class="absolute top-3 left-3 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-semibold text-gray-700">
            Client
          </span>

        </div>

        <div class="p-4">

          <h3 class="font-semibold text-gray-900 line-clamp-1">
            Client Success Story
          </h3>

          <p class="text-sm text-gray-500 mt-1">
            04 May 2025
          </p>

          <div class="flex items-center justify-end mt-4">

            <button class="deleteBtn text-red-500 text-sm font-semibold hover:underline">
              Delete
            </button>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

<!-- Modal -->
<div
  id="uploadModal"
  class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4"
>

  <div class="bg-white rounded-3xl w-full max-w-lg p-6 relative">

    <!-- Close -->
    <button
      id="closeModalBtn"
      class="absolute top-4 right-5 text-gray-500 hover:text-black text-3xl"
    >
      &times;
    </button>

    <h2 class="text-2xl font-bold text-gray-900 mb-6">
      Upload Graphic
    </h2>

    <!-- Form -->
    <form id="uploadForm" class="space-y-5">

      <!-- Upload -->
      <div>

        <label class="block text-sm font-semibold text-gray-700 mb-2">
          Upload Image
        </label>

        <div class="border-2 border-dashed border-gray-300 rounded-2xl p-6 text-center hover:border-blue-400 transition">

          <input
            type="file"
            id="graphicImage"
            accept="image/*"
            required
            class="w-full"
          >

        </div>

      </div>

      <!-- Title -->
      <div>

        <label class="block text-sm font-semibold text-gray-700 mb-2">
          Title
        </label>

        <input
          type="text"
          id="graphicTitle"
          placeholder="Enter title"
          required
          class="w-full border border-gray-300 rounded-2xl px-4 py-3 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500"
        >

      </div>

      <!-- Date -->
      <div>

        <label class="block text-sm font-semibold text-gray-700 mb-2">
          Date
        </label>

        <input
          type="date"
          id="graphicDate"
          required
          class="w-full border border-gray-300 rounded-2xl px-4 py-3 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500"
        >

      </div>

      <!-- Submit -->
      <button
        type="submit"
        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-2xl transition"
      >
        Upload Graphic
      </button>

    </form>

  </div>

</div>

<!-- Script -->
<script>

  const openModalBtn = document.getElementById("openModalBtn");
  const closeModalBtn = document.getElementById("closeModalBtn");
  const uploadModal = document.getElementById("uploadModal");
  const uploadForm = document.getElementById("uploadForm");
  const graphicsGrid = document.getElementById("graphicsGrid");

  // Open Modal
  openModalBtn.addEventListener("click", () => {

    uploadModal.classList.remove("hidden");
    uploadModal.classList.add("flex");

  });

  // Close Modal
  closeModalBtn.addEventListener("click", () => {

    uploadModal.classList.add("hidden");
    uploadModal.classList.remove("flex");

  });

  // Outside Click
  uploadModal.addEventListener("click", (e) => {

    if(e.target === uploadModal){

      uploadModal.classList.add("hidden");
      uploadModal.classList.remove("flex");

    }

  });

  // Delete Function
  function bindDeleteButtons(){

    document.querySelectorAll(".deleteBtn").forEach(button=>{

      button.onclick=function(){

        const card=this.closest(".graphic-card");

        Swal.fire({
          title:'Are you sure?',
          text:'You want to delete this graphic?',
          icon:'warning',
          showCancelButton:true,
          confirmButtonColor:'#ef4444',
          cancelButtonColor:'#6b7280',
          confirmButtonText:'Yes, Delete'
        }).then((result)=>{

          if(result.isConfirmed){

            card.remove();

            Swal.fire({
              icon:'success',
              title:'Deleted!',
              text:'Graphic deleted successfully.',
              timer:1500,
              showConfirmButton:false
            });

          }

        });

      };

    });

  }

  bindDeleteButtons();

  // Upload
  uploadForm.addEventListener("submit", (e) => {

    e.preventDefault();

    const imageFile = document.getElementById("graphicImage").files[0];
    const title = document.getElementById("graphicTitle").value;
    const date = document.getElementById("graphicDate").value;

    if(!imageFile) return;

    const imageURL = URL.createObjectURL(imageFile);

    const formattedDate = new Date(date).toLocaleDateString(
      "en-GB",
      {
        day:"2-digit",
        month:"short",
        year:"numeric"
      }
    );

    // Create Card
    const card = document.createElement("div");

    card.className =
      "graphic-card bg-white border border-gray-200 rounded-3xl overflow-hidden";

    card.innerHTML = `

      <div class="relative">

        <img
          src="${imageURL}"
          class="w-full h-52 object-cover"
        >

        <span class="absolute top-3 left-3 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-semibold text-gray-700">
          New
        </span>

      </div>

      <div class="p-4">

        <h3 class="font-semibold text-gray-900">
          ${title}
        </h3>

        <p class="text-sm text-gray-500 mt-1">
          ${formattedDate}
        </p>

        <div class="flex items-center justify-end mt-4">

          <button class="deleteBtn text-red-500 text-sm font-semibold hover:underline">
            Delete
          </button>

        </div>

      </div>

    `;

    graphicsGrid.prepend(card);

    bindDeleteButtons();

    uploadForm.reset();

    uploadModal.classList.add("hidden");
    uploadModal.classList.remove("flex");

    Swal.fire({
      icon:'success',
      title:'Uploaded!',
      text:'Graphic uploaded successfully.',
      timer:1500,
      showConfirmButton:false
    });

  });

</script>

</body>
</html>

<?php include 'footer.php'; ?>