From d787412036c2a9c61066d0bdb3b4c69455dbe46f Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Wed, 11 Feb 2026 17:52:34 +0700
Subject: [PATCH] feat: Add course detail page and comprehensive English and
 Thai internationalization.

---
 Frontend-Learner/i18n/locales/en.json  | 4 +++-
 Frontend-Learner/i18n/locales/th.json  | 4 +++-
 Frontend-Learner/pages/course/[id].vue | 9 +++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/Frontend-Learner/i18n/locales/en.json b/Frontend-Learner/i18n/locales/en.json
index d27dd01e..0a810b22 100644
--- a/Frontend-Learner/i18n/locales/en.json
+++ b/Frontend-Learner/i18n/locales/en.json
@@ -83,7 +83,8 @@
     "successTitle": "Enrollment Successful!",
     "successDesc": "You have successfully enrolled in this course.",
     "startNow": "Start Learning",
-    "later": "Later"
+    "later": "Later",
+    "alreadyEnrolledHint": "You have already enrolled in the course {course}."
   },
   "certificate": {
     "title": "Certificate of Completion",
@@ -167,6 +168,7 @@
     "newBadge": "New",
     "popularBadge": "Popular",
     "save": "Save",
+    "ok": "OK",
     "close": "Close",
     "cancel": "Cancel",
     "required": "This field is required",
diff --git a/Frontend-Learner/i18n/locales/th.json b/Frontend-Learner/i18n/locales/th.json
index 44fa940b..056b3b44 100644
--- a/Frontend-Learner/i18n/locales/th.json
+++ b/Frontend-Learner/i18n/locales/th.json
@@ -83,7 +83,8 @@
     "successTitle": "ลงทะเบียนสำเร็จ!",
     "successDesc": "คุณได้ลงทะเบียนคอร์สนี้เรียบร้อยแล้ว",
     "startNow": "เริ่มเรียนทันที",
-    "later": "ไว้ทีหลัง"
+    "later": "ไว้ทีหลัง",
+    "alreadyEnrolledHint": "ท่านเคยลงทะเบียนคอร์ส {course} นี้ไปเรียบร้อยแล้ว"
   },
   "certificate": {
     "title": "ใบประกาศนียบัตรจบหลักสูตร",
@@ -167,6 +168,7 @@
     "newBadge": "ใหม่",
     "popularBadge": "ยอดนิยม",
     "save": "บันทึก",
+    "ok": "ตกลง",
     "close": "ปิด",
     "cancel": "ยกเลิก",
     "required": "กรุณากรอกข้อมูล",
diff --git a/Frontend-Learner/pages/course/[id].vue b/Frontend-Learner/pages/course/[id].vue
index 9c559339..6571fff3 100644
--- a/Frontend-Learner/pages/course/[id].vue
+++ b/Frontend-Learner/pages/course/[id].vue
@@ -15,6 +15,7 @@ const route = useRoute()
 const courseId = computed(() => parseInt(route.params.id as string))
 const { currentUser } = useAuth()
 const $q = useQuasar()
+const { t } = useI18n()
 const { fetchCourseById, enrollCourse, getLocalizedText } = useCourse()
 
 // ใช้ useAsyncData ดึงข้อมูลคอร์ส Server-side rendering (SSR)
@@ -35,10 +36,10 @@ const handleEnroll = async () => {
     // กรณีเคยกดลงทะเบียนไปแล้ว (Check จากสถานะคอร์ส)
         if (course.value.enrolled) {
         $q.dialog({
-            message: `<div class="text-slate-800 text-base leading-relaxed">ท่านเคยลงทะเบียนคอร์ส <b class="text-blue-600">"${getLocalizedText(course.value.title)}"</b> นี้ไปเรียบร้อยแล้ว</div>`,
+            message: `<div class="text-slate-800 text-base leading-relaxed">${t('enrollment.alreadyEnrolledHint', { course: `<b class="text-blue-600">"${getLocalizedText(course.value.title)}"</b>` })}</div>`,
             html: true,
             ok: {
-                label: 'ตกลง',
+                label: t('common.ok'),
                 color: 'primary',
                 rounded: true,
                 unelevated: true,
@@ -67,10 +68,10 @@ const handleEnroll = async () => {
         // กรณี API แจ้งว่าเคยลงทะเบียนไปแล้ว (Code 409)
         if (res.code === 409) {
             $q.dialog({
-                message: `<div class="text-slate-800 text-base leading-relaxed">ท่านเคยลงทะเบียนคอร์ส <b class="text-blue-600">"${getLocalizedText(course.value.title)}"</b> นี้ไปเรียบร้อยแล้ว</div>`,
+                message: `<div class="text-slate-800 text-base leading-relaxed">${t('enrollment.alreadyEnrolledHint', { course: `<b class="text-blue-600">"${getLocalizedText(course.value.title)}"</b>` })}</div>`,
                 html: true,
                 ok: {
-                    label: 'ตกลง',
+                    label: t('common.ok'),
                     color: 'primary',
                     rounded: true,
                     unelevated: true,