function switchView(mode) {
  const wrapper = document.getElementById("sessionWrapper");
  const listBtn = document.getElementById("listBtn");
  const gridBtn = document.getElementById("gridBtn");

  if (mode === "grid") {
    wrapper.className = "sessions-grid";
    gridBtn.classList.add("active");
    listBtn.classList.remove("active");
  } else {
    wrapper.className = "sessions-list";
    listBtn.classList.add("active");
    gridBtn.classList.remove("active");
  }
}

const allSessions = [
  {
    id: 1,
    title: "Python Basic Live",
    instructor: "By Alex John",
    date: "Dec 20, 06:30 PM",
    price: "$49.99",
    seats: "8 Seats left",
    img: "../assets/images/Pic2.png",
  },
  {
    id: 2,
    title: "Graphic Design",
    instructor: "By Sarah Jenkins",
    date: "Dec 21, 07:00 PM",
    price: "$39.99",
    seats: "5 Seats left",
    img: "../assets/images/upcommingSession.png",
  },
  {
    id: 3,
    title: "Web Development",
    instructor: "By David Miller",
    date: "Dec 22, 08:30 PM",
    price: "$59.99",
    seats: "12 Seats left",
    img: "../assets/images/pic5.png",
  },
  {
    id: 4,
    title: "UI/UX Masterclass",
    instructor: "By Emily Blunt",
    date: "Dec 23, 05:30 PM",
    price: "$45.00",
    seats: "3 Seats left",
    img: "../assets/images/Pic2.png",
  },
  {
    id: 5,
    title: "Digital Marketing",
    instructor: "By Michael Chen",
    date: "Dec 24, 09:00 PM",
    price: "$29.99",
    seats: "15 Seats left",
    img: "../assets/images/pic5.png",
  },
  {
    id: 6,
    title: "Machine Learning",
    instructor: "By Robert Fox",
    date: "Dec 25, 10:00 AM",
    price: "$99.99",
    seats: "2 Seats left",
    img: "../assets/images/upcommingSession.png",
  },
];

let currentPage = 1;
const itemsPerPage = 3;

function renderSessions(page) {
  const wrapper = document.getElementById("sessionWrapper");
  wrapper.innerHTML = "";

  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const paginatedItems = allSessions.slice(start, end);

  paginatedItems.forEach((item) => {
    wrapper.innerHTML += `
            <div  class="session-item list grid-card flex relative p-3 bg-[#120D1F] rounded-2xl border border-white/5">
              <div class="relative upcomming">
                 <img class="w-full aspect-[16/10] object-cover block"  src="${item.img}" alt="" />
                 <span class="absolute top-1 left-1 bg-[#FF4B4B] text-white text-[8px] px-1.5 py-0.5 rounded-md uppercase font-bold">Live</span>
              </div>
              
              <div class=" flex flex-col justify-between p-1.5">
                <div>
                  <h3 class="text-white text-sm font-medium mb-0.5">${item.title}</h3>
                  <p class="text-[#9AA4B2] text-[10px] mb-1">with <span class="text-white/80">${item.instructor}</span></p>
                  
                  <div class="flex justify-between gap-3 items-center">
                    <p class="text-[#9AA4B2] text-[10px]">📅 ${item.date}</p>
                    <p class="text-[#FFB800] text-[9px] font-medium">${item.seats}</p>
                  </div>
                </div>

                <div class="flex justify-between items-center mt-2">
                  <span class="text-[#7B48FF] font-bold text-sm">${item.price}</span>
                  <a href="./course-details.html" class="bg-[#7B48FF] text-white text-[10px] px-3 py-1.5 rounded-lg font-medium hover:bg-[#6a3de6] transition">Join Now</a>
                </div>
              </div>
            </div>
          `;
  });

  renderPagination();
}

function renderPagination() {
  const paginationDiv = document.getElementById("pagination");
  const totalPages = Math.ceil(allSessions.length / itemsPerPage);
  paginationDiv.innerHTML = "";

  // Prev Button
  const prevBtn = document.createElement("button");
  prevBtn.className = `page-link ${currentPage === 1 ? "disabled" : ""}`;
  prevBtn.innerHTML = "‹";
  prevBtn.onclick = () => {
    if (currentPage > 1) {
      currentPage--;
      renderSessions(currentPage);
    }
  };
  paginationDiv.appendChild(prevBtn);

  // Page Numbers
  for (let i = 1; i <= totalPages; i++) {
    const btn = document.createElement("button");
    btn.className = `page-link ${i === currentPage ? "active" : ""}`;
    btn.innerText = i;
    btn.onclick = () => {
      currentPage = i;
      renderSessions(currentPage);
    };
    paginationDiv.appendChild(btn);
  }

  // Next Button
  const nextBtn = document.createElement("button");
  nextBtn.className = `page-link ${currentPage === totalPages ? "disabled" : ""}`;
  nextBtn.innerHTML = "›";
  nextBtn.onclick = () => {
    if (currentPage < totalPages) {
      currentPage++;
      renderSessions(currentPage);
    }
  };
  paginationDiv.appendChild(nextBtn);
}

// Initial Load
renderSessions(currentPage);
