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>
      <button class="btn btn-secondary mb-6" @click="showDetail = false">← กลับหน้ารายการ</button>
      
      <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;">฿3,500</span>
              <h2 class="text-primary font-bold" style="font-size: 32px; margin: 0;">ฟรี</h2>
              <span class="status-pill status-success">ระยะเวลาจำกัด</span>
            </div>

            <NuxtLink to="/dashboard/my-courses?enrolled=true" class="btn btn-primary w-full mb-4" 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>