elearning/frontend_management/pages/admin/recommended-courses/index.vue

<template>
  <NuxtLayout name="admin">
    <div class="p-6">
      <div class="flex justify-between items-center mb-6">
        <div>
          <h1 class="text-2xl font-bold text-gray-800">จัดการคอร์สแนะนำ</h1>
          <p class="text-gray-600">Recommended Courses Management</p>
        </div>
      </div>

      <!-- Search & Filter -->
      <!-- <div class="bg-white p-4 rounded-lg shadow-sm mb-6">
        <div class="flex gap-4">
          <q-input
            v-model="search"
            outlined
            dense
            placeholder="ค้นหาคอร์ส..."
            class="w-full max-w-md"
          >
            <template v-slot:prepend>
              <q-icon name="search" />
            </template>
          </q-input>
        </div>
      </div> -->

      <!-- Table -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <q-table
          :rows="courses"
          :columns="columns"
          row-key="id"
          :loading="loading"
          :pagination="initialPagination"
        >
          <!-- Thumbnail Column -->
          <template v-slot:body-cell-thumbnail="props">
            <q-td :props="props">
              <q-img
                :src="props.row.thumbnail_url || '/placeholder-course.jpg'"
                class="w-16 h-10 rounded object-cover"
              />
            </q-td>
          </template>

          <!-- Title Column -->
          <template v-slot:body-cell-title="props">
            <q-td :props="props">
              <div class="font-medium text-gray-900">{{ props.row.title.th }}</div>
              <div class="text-xs text-gray-500">{{ props.row.title.en }}</div>
            </q-td>
          </template>

          <!-- Instructor Column -->
          <template v-slot:body-cell-instructor="props">
            <q-td :props="props">
              <div class="flex items-center gap-2">
                <q-avatar size="24px" class="bg-primary-100 text-primary">
                  <!-- <img :src="props.row.instructor.user.avatar_url || '/default-avatar.png'"> -->
                  <q-icon name="person" size="16px" />
                </q-avatar>
                <div>
                  <div class="text-sm font-medium">
                     {{ (props.row.instructors && props.row.instructors.length > 0) ? props.row.instructors.find((i: any) => i.is_primary)?.user.username : 'Unknown' }}
                  </div>
                  <!-- <div class="text-xs text-gray-500">{{ props.row.instructor.user.username }}</div> -->
                </div>
              </div>
            </q-td>
          </template>

           <!-- Price Column -->
           <template v-slot:body-cell-price="props">
            <q-td :props="props">
              <div v-if="props.row.is_free" class="text-green-600 font-medium">Free</div>
              <div v-else class="font-medium">{{ formatPrice(props.row.price) }}</div>
            </q-td>
          </template>

          <!-- Recommended Toggle Column -->
          <template v-slot:body-cell-is_recommended="props">
            <q-td :props="props">
              <q-toggle
                v-model="props.row.is_recommended"
                color="green"
                @update:model-value="(val) => handleToggleRecommendation(props.row, val)"
              />
            </q-td>
          </template>

          <!-- Actions Column -->
          <template v-slot:body-cell-actions="props">
            <q-td :props="props">
              <q-btn flat round dense icon="visibility" color="primary" @click="viewCourse(props.row.id)">
                <q-tooltip>ดูรายละเอียด</q-tooltip>
              </q-btn>
            </q-td>
          </template>

        </q-table>
      </div>

       <!-- View Details Dialog -->
      <q-dialog v-model="showDialog" maximized transition-show="slide-up" transition-hide="slide-down">
        <q-card>
          <q-bar class="bg-primary-500 text-white">
            <q-space />
            <q-btn dense flat icon="close" v-close-popup>
              <q-tooltip class="bg-white text-primary">Close</q-tooltip>
            </q-btn>
          </q-bar>
          
          <q-card-section>
            <div class="text-h6">รายละเอียดคอร์ส (Course Details)</div>
          </q-card-section>

          <q-card-section v-if="selectedCourse" class="q-pt-none">
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Left Column: Image & Basic Info -->
                <div>
                  <q-img
                    :src="selectedCourse.thumbnail_url || '/placeholder-course.jpg'"
                    class="rounded-lg shadow-md mb-4"
                    style="max-height: 300px; object-fit: cover;"
                  />
                  
                  <div class="text-2xl font-bold text-gray-800 mb-2">{{ selectedCourse.title.th }}</div>
                  <div class="text-lg text-gray-600 mb-4">{{ selectedCourse.title.en }}</div>
                  
                  <div class="flex gap-2 mb-4">
                     <q-badge :color="selectedCourse.is_free ? 'green' : 'blue'" class="text-base p-2">
                        {{ selectedCourse.is_free ? 'FREE' : formatPrice(selectedCourse.price) }}
                     </q-badge>
                     <q-badge :color="getStatusColor(selectedCourse.status)" class="text-base p-2">
                        {{ selectedCourse.status }}
                     </q-badge>
                     <q-badge v-if="selectedCourse.have_certificate" color="orange" class="text-base p-2">
                        Certificate
                     </q-badge>
                  </div>
                </div>

                <!-- Right Column: Details -->
                <div class="space-y-4">
                   <!-- Description -->
                   <div class="bg-gray-50 p-4 rounded-lg">
                      <div class="font-bold mb-2">รายละเอียด (Description)</div>
                      <div class="text-gray-700 whitespace-pre-wrap">{{ selectedCourse.description.th }}</div>
                      <div class="text-gray-500 mt-2 text-sm">{{ selectedCourse.description.en }}</div>
                   </div>

                   <!-- Category -->
                   <div class="bg-gray-50 p-4 rounded-lg gap-2">
                      <div class="font-bold mb-2">หมวดหมู่ (Category):</div>
                      <div class="text-gray-700 mb-2">{{ selectedCourse.category.name.th }} ({{ selectedCourse.category.name.en }})</div>
                   </div>

                   <!-- Instructors -->
                   <div class="bg-gray-50 p-4 rounded-lg">
                      <div class="font-bold mb-2">ผู้สอน (Instructors)</div>
                      <div v-for="inst in selectedCourse.instructors" :key="inst.user_id" class="flex items-center gap-2 mb-2">
                         <q-avatar size="32px" class="bg-primary-100 text-primary">
                             <q-icon name="person" />
                         </q-avatar>
                         <div>
                            <div class="font-medium text-gray-700">{{ inst.user.username }}</div>
                            <div class="text-xs text-gray-500" v-if="inst.is_primary">(Primary)</div>
                         </div>
                      </div>
                   </div>

                   <!-- Stats -->
                   <div class="grid grid-cols-3 gap-2">
                      <div class="bg-blue-50 p-2 rounded-lg text-center">
                         <div class="text-2xl font-bold text-blue-800">{{ selectedCourse.chapters_count || 0 }}</div>
                         <div class="text-blue-600 text-sm">Chapters</div>
                      </div>
                      <div class="bg-purple-50 p-2 rounded-lg text-center">
                         <div class="text-2xl font-bold text-purple-800">{{ selectedCourse.lessons_count || 0 }}</div>
                         <div class="text-purple-600 text-sm">Lessons</div>
                      </div>
                   </div>
                </div>
             </div>
          </q-card-section>
          
          <!-- Inner Loading -->
           <q-inner-loading :showing="dialogLoading">
              <q-spinner-gears size="50px" color="primary" />
           </q-inner-loading>
        </q-card>
      </q-dialog>

    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { adminService, type RecommendedCourse } from '~/services/admin.service';

const $q = useQuasar();
const loading = ref(false);
const courses = ref<RecommendedCourse[]>([]);
const search = ref('');

// Dialog state
const showDialog = ref(false);
const dialogLoading = ref(false);
const selectedCourse = ref<RecommendedCourse | null>(null);

const initialPagination = {
  sortBy: 'desc',
  descending: false,
  page: 1,
  rowsPerPage: 10
}

const columns = [
  { name: 'id', label: 'ID', field: 'id', sortable: true, align: 'left' as const },
  { name: 'thumbnail', label: 'Image', field: 'thumbnail_url', align: 'left' as const },
  { 
    name: 'title', 
    label: 'Course Name', 
    field: (row: RecommendedCourse) => row.title.th, 
    sortable: true, 
    align: 'left' as const 
  },
  { 
    name: 'instructor', 
    label: 'Instructor', 
    field: (row: RecommendedCourse) => row.instructors?.find((i: any) => i.is_primary)?.user.username || '', 
    align: 'left' as const 
  },
  { name: 'category', label: 'Category', field: (row: RecommendedCourse) => row.category.name.th, sortable: true, align: 'left' as const },
  { name: 'price', label: 'Price', field: 'price', sortable: true, align: 'right' as const },
  { name: 'is_recommended', label: 'Recommended', field: 'is_recommended', sortable: true, align: 'center' as const },
  { name: 'actions', label: 'Actions', field: 'actions', align: 'center' as const },
];

const fetchCourses = async () => {
  loading.value = true;
  try {
    courses.value = await adminService.getRecommendedCourses();
  } catch (error) {
    console.error('Error fetching courses:', error);
    $q.notify({
      type: 'negative',
      message: 'ไม่สามารถโหลดข้อมูลคอร์สได้',
      position: 'top'
    });
  } finally {
    loading.value = false;
  }
};

const viewCourse = async (id: number) => {
   showDialog.value = true;
   dialogLoading.value = true;
   selectedCourse.value = null; // Clear previous data
   try {
      selectedCourse.value = await adminService.getRecommendedCourseById(id);
   } catch (error) {
      console.error('Error fetching course details:', error);
      $q.notify({
         type: 'negative',
         message: 'ไม่สามารถโหลดข้อมูลรายละเอียดคอร์สได้',
         position: 'top'
      });
      showDialog.value = false;
   } finally {
      dialogLoading.value = false;
   }
};

const handleToggleRecommendation = async (course: RecommendedCourse, isRecommended: boolean) => {
  try {
    await adminService.toggleCourseRecommendation(course.id, isRecommended);
    $q.notify({
      type: 'positive',
      message: isRecommended ? 'เพิ่มคอร์สแนะนำสำร็จ' : 'ยกเลิกคอร์สแนะนำสำเร็จ',
      position: 'top'
    });
  } catch (error) {
    console.error('Error toggling recommendation:', error);
    // Revert the toggle if API fails
    course.is_recommended = !isRecommended;
    $q.notify({
      type: 'negative',
      message: 'เกิดข้อผิดพลาดในการบันทึกข้อมูล',
      position: 'top'
    });
  }
};

const formatPrice = (price: number) => {
  return new Intl.NumberFormat('th-TH', {
    style: 'currency',
    currency: 'THB'
  }).format(price);
};

const getStatusColor = (status: string) => {
  switch (status) {
    case 'PUBLISHED': return 'positive';
    case 'DRAFT': return 'grey';
    case 'PENDING': return 'warning';
    case 'REJECTED': return 'negative';
    default: return 'grey';
  }
};

onMounted(() => {
  fetchCourses();
});
</script>