<?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>Posts & Reels</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      background: #f4f5f9;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
  </style>
</head>

<body class="p-6 md:p-10">

  <div class="max-w-7xl mx-auto bg-white border border-gray-100 rounded-3xl shadow-sm p-6 md:p-8 m-4 mx-auto md:my-6 lg:my-8">

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
      
      <div>
        <h2 class="text-2xl font-bold text-gray-900 tracking-tight">
          Posts & Reels
        </h2>

        <div class="flex gap-6 mt-4 overflow-x-auto text-sm font-medium no-scrollbar border-b border-gray-100 sm:border-none pb-1 sm:pb-0">
          <button class="tab-btn pb-2 border-b-2 border-blue-600 text-blue-600 whitespace-nowrap" data-filter="all">
            All
          </button>
          <button class="tab-btn pb-2 border-b-2 border-transparent text-gray-400 hover:text-gray-600 whitespace-nowrap" data-filter="published">
            Published
          </button>
          <button class="tab-btn pb-2 border-b-2 border-transparent text-gray-400 hover:text-gray-600 whitespace-nowrap" data-filter="scheduled">
            Scheduled
          </button>
          <button class="tab-btn pb-2 border-b-2 border-transparent text-gray-400 hover:text-gray-600 whitespace-nowrap" data-filter="pending">
            Pending
          </button>
          <button class="tab-btn pb-2 border-b-2 border-transparent text-gray-400 hover:text-gray-600 whitespace-nowrap" data-filter="rejected">
            Rejected
          </button>
        </div>
      </div>

      <div class="flex items-center gap-3 self-end sm:self-center">
        <button id="openModalBtn" class="bg-blue-600 hover:bg-blue-700 transition text-white px-5 py-2.5 rounded-xl text-sm font-semibold shadow-sm flex items-center gap-1.5">
          <span class="text-base font-normal">+</span> Create Reel
        </button>
      </div>

    </div>

    <div class="divide-y divide-gray-100 border-t border-gray-50" id="postsContainer">

      <div class="post-item flex flex-col md:flex-row md:items-center justify-between gap-4 py-5" data-status="published">
        <div class="flex items-center gap-4 min-w-0">
          <div class="w-20 h-14 rounded-xl overflow-hidden bg-gray-100 shrink-0">
            <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1200&auto=format&fit=crop" class="w-full h-full object-cover" alt="thumbnail" />
          </div>
          <div class="min-w-0">
            <h3 class="text-base font-bold text-gray-900 truncate">
              5 Ways to Improve Your Business Growth
            </h3>
            <p class="text-sm text-gray-400 mt-0.5">
              Instagram Reel
            </p>
          </div>
        </div>

        <div class="flex items-center justify-between md:justify-end gap-6 md:gap-8 flex-wrap mt-2 md:mt-0">
          <span class="bg-emerald-50 text-emerald-600 text-xs font-semibold px-3 py-1 rounded-md">
            Published
          </span>
          <div class="text-sm text-gray-500 font-medium min-w-[90px]">
            12 May 2025
          </div>
          <div class="min-w-[55px]">
            <p class="text-[11px] font-medium text-gray-400 uppercase tracking-wider">Reach</p>
            <p class="text-sm font-bold text-gray-900">32.5K</p>
          </div>
          <div class="min-w-[75px]">
            <p class="text-[11px] font-medium text-gray-400 uppercase tracking-wider">Engagement</p>
            <p class="text-sm font-bold text-gray-900">1.3K</p>
          </div>
        </div>
      </div>

      <div class="post-item flex flex-col md:flex-row md:items-center justify-between gap-4 py-5" data-status="scheduled">
        <div class="flex items-center gap-4 min-w-0">
          <div class="w-20 h-14 rounded-xl overflow-hidden bg-gray-100 shrink-0">
            <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=1200&auto=format&fit=crop" class="w-full h-full object-cover" alt="thumbnail" />
          </div>
          <div class="min-w-0">
            <h3 class="text-base font-bold text-gray-900 truncate">
              New Product Launch - Stay Tuned
            </h3>
            <p class="text-sm text-gray-400 mt-0.5">
              Facebook Post
            </p>
          </div>
        </div>

        <div class="flex items-center justify-between md:justify-end gap-6 md:gap-8 flex-wrap mt-2 md:mt-0">
          <span class="bg-indigo-50 text-indigo-600 text-xs font-semibold px-3 py-1 rounded-md">
            Scheduled
          </span>
          <div class="text-sm text-gray-500 font-medium min-w-[90px]">
            16 May 2025
          </div>
          <div class="min-w-[55px] text-center md:text-left text-gray-400 font-semibold px-2">-</div>
          <div class="min-w-[75px] text-center md:text-left text-gray-400 font-semibold px-2">-</div>
        </div>
      </div>

      <div class="post-item flex flex-col md:flex-row md:items-center justify-between gap-4 py-5" data-status="pending">
        <div class="flex items-center gap-4 min-w-0">
          <div class="w-20 h-14 rounded-xl overflow-hidden bg-gray-100 shrink-0">
            <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=1200&auto=format&fit=crop" class="w-full h-full object-cover" alt="thumbnail" />
          </div>
          <div class="min-w-0">
            <h3 class="text-base font-bold text-gray-900 truncate">
              Behind the Scenes
            </h3>
            <p class="text-sm text-gray-400 mt-0.5">
              Instagram Reel
            </p>
          </div>
        </div>

        <div class="flex items-center justify-between md:justify-end gap-6 md:gap-8 flex-wrap mt-2 md:mt-0">
          <span class="bg-amber-50 text-amber-600 text-xs font-semibold px-3 py-1 rounded-md">
            Pending
          </span>
          <div class="text-sm text-gray-500 font-medium min-w-[90px]">
            18 May 2025
          </div>
          <div class="min-w-[55px] text-center md:text-left text-gray-400 font-semibold px-2">-</div>
          <div class="min-w-[75px] text-center md:text-left text-gray-400 font-semibold px-2">-</div>
        </div>
      </div>

      <div class="post-item flex flex-col md:flex-row md:items-center justify-between gap-4 py-5" data-status="published">
        <div class="flex items-center gap-4 min-w-0">
          <div class="w-20 h-14 rounded-xl overflow-hidden bg-gray-100 shrink-0">
            <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1200&auto=format&fit=crop" class="w-full h-full object-cover" alt="thumbnail" />
          </div>
          <div class="min-w-0">
            <h3 class="text-base font-bold text-gray-900 truncate">
              Big Announcement Coming Soon
            </h3>
            <p class="text-sm text-gray-400 mt-0.5">
              LinkedIn Post
            </p>
          </div>
        </div>

        <div class="flex items-center justify-between md:justify-end gap-6 md:gap-8 flex-wrap mt-2 md:mt-0">
          <span class="bg-emerald-50 text-emerald-600 text-xs font-semibold px-3 py-1 rounded-md">
            Published
          </span>
          <div class="text-sm text-gray-500 font-medium min-w-[90px]">
            10 May 2025
          </div>
          <div class="min-w-[55px]">
            <p class="text-[11px] font-medium text-gray-400 uppercase tracking-wider">Reach</p>
            <p class="text-sm font-bold text-gray-900">5.2K</p>
          </div>
          <div class="min-w-[75px]">
            <p class="text-[11px] font-medium text-gray-400 uppercase tracking-wider">Engagement</p>
            <p class="text-sm font-bold text-gray-900">990</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div id="createModal" class="fixed inset-0 bg-black/40 hidden items-center justify-center z-50 p-4 transition-all">
    <div class="bg-white rounded-2xl w-full max-w-xl p-6 relative max-h-[90vh] overflow-y-auto shadow-xl">
      
      <button id="closeModalBtn" class="absolute top-4 right-4 text-gray-400 hover:text-gray-700 text-2xl font-semibold transition">
        &times;
      </button>

      <h2 class="text-xl font-bold text-gray-900 mb-5">
        Create New Post / Reel
      </h2>

      <form id="postForm" class="space-y-4">
        <div>
          <label class="block text-xs font-bold text-gray-700 uppercase tracking-wide mb-1.5">Upload Thumbnail</label>
          <input type="file" id="postImage" accept="image/*" required class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm text-gray-600 file:mr-4 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" />
        </div>

        <div>
          <label class="block text-xs font-bold text-gray-700 uppercase tracking-wide mb-1.5">Title</label>
          <input type="text" id="postTitle" placeholder="Enter post or reel title" required class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" />
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wide mb-1.5">Platform</label>
            <select id="postPlatform" required class="w-full border border-gray-200 bg-white rounded-xl px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
              <option value="">Select Platform</option>
              <option>Instagram Reel</option>
              <option>Facebook Post</option>
              <option>LinkedIn Post</option>
              <option>YouTube Reel</option>
            </select>
          </div>

          <div>
            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wide mb-1.5">Status</label>
            <select id="postStatus" required class="w-full border border-gray-200 bg-white rounded-xl px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
              <option value="">Select Status</option>
              <option value="published">Published</option>
              <option value="scheduled">Scheduled</option>
              <option value="pending">Pending</option>
              <option value="rejected">Rejected</option>
            </select>
          </div>
        </div>

        <div>
          <label class="block text-xs font-bold text-gray-700 uppercase tracking-wide mb-1.5">Publish Date</label>
          <input type="date" id="postDate" required class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" />
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wide mb-1.5">Reach</label>
            <input type="text" id="postReach" placeholder="Ex. 10.5K" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" />
          </div>

          <div>
            <label class="block text-xs font-bold text-gray-700 uppercase tracking-wide mb-1.5">Engagement</label>
            <input type="text" id="postEngagement" placeholder="Ex. 1.2K" class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" />
          </div>
        </div>

        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-xl text-sm transition mt-2 shadow-sm">
          Add Post / Reel
        </button>
      </form>

    </div>
  </div>

  <script>
    // Tab filtering interactive core
    const tabButtons = document.querySelectorAll(".tab-btn");

    tabButtons.forEach((button) => {
      button.addEventListener("click", () => {
        const postItems = document.querySelectorAll(".post-item");

        // Reset all tabs UI state styles
        tabButtons.forEach((btn) => {
          btn.classList.remove("border-blue-600", "text-blue-600");
          btn.classList.add("border-transparent", "text-gray-400");
        });

        // Set active selected tab
        button.classList.remove("border-transparent", "text-gray-400");
        button.classList.add("border-blue-600", "text-blue-600");

        const filter = button.getAttribute("data-filter");

        // Dynamic Filtering
        postItems.forEach((item) => {
          if (filter === "all") {
            item.style.display = "flex";
          } else if (item.getAttribute("data-status") === filter) {
            item.style.display = "flex";
          } else {
            item.style.display = "none";
          }
        });
      });
    });

    // Control triggers for Creation Modal
    const openModalBtn = document.getElementById("openModalBtn");
    const closeModalBtn = document.getElementById("closeModalBtn");
    const createModal = document.getElementById("createModal");
    const postForm = document.getElementById("postForm");

    openModalBtn.addEventListener("click", () => {
      createModal.classList.remove("hidden");
      createModal.classList.add("flex");
    });

    closeModalBtn.addEventListener("click", () => {
      createModal.classList.add("hidden");
      createModal.classList.remove("flex");
    });

    createModal.addEventListener("click", (e) => {
      if (e.target === createModal) {
        createModal.classList.add("hidden");
        createModal.classList.remove("flex");
      }
    });

    // Handle incoming Form Submission & append new structured records
    postForm.addEventListener("submit", (e) => {
      e.preventDefault();

      const image = document.getElementById("postImage").files[0];
      const title = document.getElementById("postTitle").value;
      const platform = document.getElementById("postPlatform").value;
      const status = document.getElementById("postStatus").value;
      const date = document.getElementById("postDate").value;
      const reach = document.getElementById("postReach").value || "-";
      const engagement = document.getElementById("postEngagement").value || "-";

      const imageURL = URL.createObjectURL(image);

      // Color logic match configuration
      let badgeClass = "";
      if(status === "published") badgeClass = "bg-emerald-50 text-emerald-600";
      else if(status === "scheduled") badgeClass = "bg-indigo-50 text-indigo-600";
      else if(status === "pending") badgeClass = "bg-amber-50 text-amber-600";
      else badgeClass = "bg-rose-50 text-rose-600";

      // Uniform short dates formatting matching display format
      const formattedDate = new Date(date).toLocaleDateString("en-GB", {
        day: "2-digit",
        month: "short",
        year: "numeric"
      });

      // Construct identical structure Row component
      const row = document.createElement("div");
      row.className = "post-item flex flex-col md:flex-row md:items-center justify-between gap-4 py-5";
      row.setAttribute("data-status", status);

      row.innerHTML = `
        <div class="flex items-center gap-4 min-w-0">
          <div class="w-20 h-14 rounded-xl overflow-hidden bg-gray-100 shrink-0">
            <img src="${imageURL}" class="w-full h-full object-cover" alt="thumbnail" />
          </div>
          <div class="min-w-0">
            <h3 class="text-base font-bold text-gray-900 truncate">${title}</h3>
            <p class="text-sm text-gray-400 mt-0.5">${platform}</p>
          </div>
        </div>
        <div class="flex items-center justify-between md:justify-end gap-6 md:gap-8 flex-wrap mt-2 md:mt-0">
          <span class="${badgeClass} text-xs font-semibold px-3 py-1 rounded-md capitalize">${status}</span>
          <div class="text-sm text-gray-500 font-medium min-w-[90px]">${formattedDate}</div>
          <div class="min-w-[55px]">
            ${reach !== '-' ? `<p class="text-[11px] font-medium text-gray-400 uppercase tracking-wider">Reach</p><p class="text-sm font-bold text-gray-900">${reach}</p>` : `<p class="text-gray-400 font-semibold px-2">-</p>`}
          </div>
          <div class="min-w-[75px]">
            ${engagement !== '-' ? `<p class="text-[11px] font-medium text-gray-400 uppercase tracking-wider">Engagement</p><p class="text-sm font-bold text-gray-900">${engagement}</p>` : `<p class="text-gray-400 font-semibold px-2">-</p>`}
          </div>
          <button class="text-gray-400 hover:text-gray-700 text-xl font-bold p-1">⋮</button>
        </div>
      `;

      // Insert at very top entry
      document.getElementById("postsContainer").prepend(row);

      // Clean setup forms & dismiss modal views
      postForm.reset();
      createModal.classList.add("hidden");
      createModal.classList.remove("flex");
    });
  </script>

</body>
</html>

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