elearning/Frontend-Learner/pages/browse/discovery.vue

<script setup lang="ts">
/**
 * @file discovery.vue
 * @description Course Discovery / Catalog Page.
 * Allows users to browse, filter, and view details of available courses.
 * Includes a toggleable detailed view for course previews.
 */

definePageMeta({
  layout: "default",
  middleware: "auth",
});

useHead({
  title: "รายการคอร์ส - e-Learning",
});

// UI State
const showDetail = ref(false);
const searchQuery = ref("");
const isCategoryOpen = ref(true);

// Mock Course Data
const courses = [
  {
    id: 1,
    title: "เบื้องต้นการออกแบบ UX/UI",
    levelType: "neutral" as const,
    price: "ฟรี",
    description: "เรียนรู้พื้นฐานการวาดโครงร่าง...",
    rating: "4.8",
    lessons: "12",
  },
  {
    id: 2,
    title: "รูปแบบ React ขั้นสูง",
    levelType: "warning" as const,
    price: "ฟรี",
    description: "เจาะลึก HOC, Hooks และอื่นๆ...",
    rating: "4.9",
    lessons: "24",
  },
  {
    id: 3,
    title: "การตลาดดิจิทัล 101",
    levelType: "success" as const,
    price: "ฟรี",
    description: "คู่มือสมบูรณ์ SEO/SEM...",
    rating: "4.7",
    lessons: "18",
  },
];

// Categories Data
const categories = [
  "การตลาดออนไลน์",
  "ธุรกิจ",
  "การเงิน & ลงทุน",
  "การพัฒนาตนเอง",
  "Office Productivity",
  "Data",
  "เขียนโปรแกรม",
  "การพัฒนาซอฟต์แวร์",
  "การออกแบบ",
  "Art & Craft",
  "การเขียน",
  "ถ่ายภาพ & วิดีโอ",
  "ภาษา",
  "Lifestyles",
  "คอร์สฟรี",
];

// Category Visibility State
const showAllCategories = ref(false);

const visibleCategories = computed(() => {
  return showAllCategories.value ? categories : categories.slice(0, 8);
});

// Filter Logic based on search query
const filteredCourses = computed(() => {
  if (!searchQuery.value) return courses;
  const query = searchQuery.value.toLowerCase();
  return courses.filter(
    (c) =>
      c.title.toLowerCase().includes(query) ||
      c.description.toLowerCase().includes(query)
  );
});
</script>

<template>
  <div>
    <!-- CATALOG VIEW: Browse courses -->
    <div v-if="!showDetail">
      <!-- Search & Filters Header -->
      <div
        class="flex justify-between items-center mb-6"
        style="flex-wrap: wrap; gap: 16px"
      >
        <h1 class="text-[28px] font-bold text-slate-900 dark:text-white">
          รายการคอร์สทั้งหมด
        </h1>
        <div class="flex gap-3" style="flex-wrap: wrap">
          <!-- Search Input -->
          <div class="relative">
            <input
              v-model="searchQuery"
              type="text"
              class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800 placeholder:text-slate-500"
              placeholder="ค้นหาคอร์ส..."
              style="padding-left: 36px; width: 240px"
            />
          </div>
          <!-- Sorting Select -->
          <select
            class="input-field bg-white dark:bg-slate-800"
            style="width: auto; color: #0f172a"
          >
            <option style="color: #0f172a">เรียงตาม: ล่าสุด</option>
            <option style="color: #0f172a">ยอดนิยม</option>
          </select>
        </div>
      </div>

      <!-- Main Grid Layout -->
      <div class="grid-12">
        <!-- Sidebar Filters -->
        <div class="col-span-3">
          <div class="card">
            <div class="mb-6">
              <div
                class="flex items-center justify-between mb-4 cursor-pointer"
                @click="isCategoryOpen = !isCategoryOpen"
              >
                <h4 class="text-lg font-bold text-slate-900 dark:text-white">
                  หมวดหมู่ ({{ categories.length }})
                </h4>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5 text-slate-400 transition-transform duration-200"
                  :class="{ 'rotate-180': !isCategoryOpen }"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 15l7-7 7 7"
                  />
                </svg>
              </div>

              <div v-show="isCategoryOpen" class="flex flex-col gap-1">
                <div
                  v-for="cat in visibleCategories"
                  :key="cat"
                  class="flex items-center justify-between py-3 border-b border-slate-100 dark:border-slate-700/50 group cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 -mx-4 px-4 transition-colors"
                >
                  <label
                    class="flex items-center gap-3 text-slate-700 dark:text-slate-300 cursor-pointer w-full"
                  >
                    <input
                      type="checkbox"
                      class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary"
                    />
                    {{ cat }}
                  </label>
                </div>
                <button
                  class="text-primary text-sm mt-4 font-medium hover:underline flex items-center gap-1"
                  @click="showAllCategories = !showAllCategories"
                >
                  {{ showAllCategories ? "แสดงน้อยลง" : "แสดงเพิ่มเติม" }}
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 transition-transform duration-200"
                    :class="{ 'rotate-180': showAllCategories }"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Course List -->
        <div class="col-span-9" style="min-width: 0">
          <div class="course-grid">
            <CourseCard
              v-for="course in filteredCourses"
              :key="course.id"
              :title="course.title"
              :price="course.price"
              :description="course.description"
              :rating="course.rating"
              :lessons="course.lessons"
              show-view-details
              @view-details="showDetail = true"
            />
          </div>

          <!-- Empty State -->
          <div
            v-if="filteredCourses.length === 0"
            class="empty-state"
            style="grid-column: 1 / -1"
          >
            <h3 class="empty-state-title">ไม่พบผลการค้นหา</h3>
            <p class="empty-state-description">
              ลองใช้คำค้นหาอื่น หรือตรวจดูความถูกต้องของตัวอักษรอีกครั้ง
            </p>
            <button class="btn btn-secondary" @click="searchQuery = ''">
              แสดงทั้งหมด
            </button>
          </div>

          <!-- Pagination / Load More -->
          <div class="load-more-wrap">
            <button
              class="btn btn-secondary"
              style="
                border-color: #64748b;
                color: white;
                background: rgba(255, 255, 255, 0.05);
              "
            >
              โหลดเพิ่มเติม
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
    <div v-else>
      <NuxtLink to="/browse" class="btn btn-secondary mb-6 inline-block">
        ← กลับหน้ารายการคอร์ส
      </NuxtLink>

      <div class="grid-12">
        <!-- Main Content (Left Column) -->
        <div class="col-span-8">
          <!-- Hero Video Placeholder -->
          <div
            style="
              width: 100%;
              height: 400px;
              background: var(--neutral-900);
              border-radius: var(--radius-xl);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 24px;
              position: relative;
              border: 1px solid var(--border-color);
            "
          >
            <!-- Play Button -->
            <div
              style="
                width: 80px;
                height: 80px;
                background: var(--primary);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
              "
            >
              <div
                style="
                  width: 0;
                  height: 0;
                  border-top: 15px solid transparent;
                  border-bottom: 15px solid transparent;
                  border-left: 25px solid white;
                  margin-left: 6px;
                "
              />
            </div>
          </div>

          <h1 class="text-[32px] font-bold mb-4 text-slate-900 dark:text-white">
            เบื้องต้นการออกแบบ UX/UI
          </h1>
          <p
            class="text-slate-700 dark:text-slate-400 mb-6"
            style="font-size: 1.1em; line-height: 1.7"
          >
            เนื้อหาครอบคลุมทุกอย่างตั้งแต่การวิจัยผู้ใช้ (User Research)
            ไปจนถึงการทำต้นแบบความละเอียดสูง (High-fidelity Prototyping)
            เหมาะสำหรับผู้เริ่มต้นที่ต้องการเข้าสู่สายงานออกแบบผลิตภัณฑ์
          </p>

          <!-- Learning Objectives -->
          <div class="card mb-6">
            <h3 class="font-bold mb-4 text-slate-900 dark:text-white">
              สิ่งที่คุณจะได้เรียนรู้
            </h3>
            <ul
              class="grid-12"
              style="grid-template-columns: 1fr 1fr; gap: 12px"
            >
              <li class="flex gap-2 text-sm">
                <span style="color: var(--success)">✓</span> วิธีการวิจัยผู้ใช้
                (User Research)
              </li>
              <li class="flex gap-2 text-sm">
                <span style="color: var(--success)">✓</span>
                การวาดโครงร่างและทำต้นแบบ
              </li>
              <li class="flex gap-2 text-sm">
                <span style="color: var(--success)">✓</span> ระบบการออกแบบ
                (Design Systems)
              </li>
              <li class="flex gap-2 text-sm">
                <span style="color: var(--success)">✓</span> การทดสอบการใช้งาน
                (Usability Testing)
              </li>
            </ul>
          </div>

          <!-- Course Syllabus / Outline -->
          <div class="card">
            <h3 class="font-bold mb-4 text-slate-900 dark:text-white">
              เนื้อหาในคอร์ส
            </h3>
            <!-- Chapter 1 -->
            <div class="mb-4">
              <div
                class="flex justify-between p-4 rounded mb-2"
                style="background: #f3f4f6; border: 1px solid #e5e7eb"
              >
                <span class="font-bold text-slate-900 dark:text-slate-900"
                  >01. บทนำ</span
                >
                <span class="text-sm text-slate-600 dark:text-slate-400"
                  >3 บทเรียน</span
                >
              </div>
              <div style="padding-left: 16px">
                <div
                  class="flex justify-between py-2 border-b"
                  style="border-color: var(--neutral-100)"
                >
                  <span class="text-sm">1.1 การออกแบบ UX คืออะไร?</span>
                  <span class="text-sm text-slate-600 dark:text-slate-400"
                    >10:00</span
                  >
                </div>
                <div
                  class="flex justify-between py-2 border-b"
                  style="border-color: var(--neutral-100)"
                >
                  <span class="text-sm"
                    >1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)</span
                  >
                  <span class="text-sm text-slate-600 dark:text-slate-400"
                    >15:30</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Sidebar (Right Column): Sticky CTA -->
        <div class="col-span-4">
          <div class="card" style="position: sticky; top: 88px">
            <div class="mb-6">
              <span
                class="text-sm text-slate-600 dark:text-slate-400"
                style="text-decoration: line-through"
                ></span
              >
              <h2
                class="text-primary font-bold"
                style="font-size: 32px; margin: 0"
              >
                ฟรี
              </h2>
            </div>

            <NuxtLink
              to="/dashboard/my-courses?enrolled=true"
              class="btn btn-primary w-full mb-4 text-white"
              style="height: 48px; font-size: 16px"
            >
              ลงทะเบียนเรียนทันที
            </NuxtLink>

            <div class="text-sm text-slate-600 dark:text-slate-400 mb-4">
              <div
                class="flex justify-between py-2 border-b"
                style="border-color: var(--neutral-100)"
              >
                <span>ระยะเวลา</span>
                <span class="font-bold">4.5 ชั่วโมง</span>
              </div>
              <div
                class="flex justify-between py-2 border-b"
                style="border-color: var(--neutral-100)"
              >
                <span>ใบประกาศ</span>
                <span class="font-bold">มี</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>