import { Form, Head, Link, router, usePage } from '@inertiajs/react'; import { Award, BookOpen, CheckCircle2, ChevronDown, ClipboardList, Clock, FileText, GraduationCap, Lock, Play, Settings, Users, } from 'lucide-react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Spinner } from '@/components/ui/spinner'; import GuestLayout from '@/layouts/guest-layout'; import AppLayout from '@/layouts/app-layout'; import type { Auth } from '@/types'; type Lesson = { id: number; title: string; type: string; duration_minutes: number; order: number; is_preview: boolean }; type Quiz = { id: number; title: string; duration_minutes: number; order: number }; type Assignment = { id: number; title: string; deadline: string | null; order: number }; type Chapter = { id: number; title: string; order: number; lessons: Lesson[]; quizzes: Quiz[]; assignments: Assignment[]; }; type Course = { id: number; title: string; slug: string; description: string | null; objectives: string | null; thumbnail: string | null; level: string; price_type: 'free' | 'paid'; price: number; bank_name: string | null; bank_account: string | null; bank_holder: string | null; duration_minutes: number; enrollments_count: number; lessons_count: number; instructor: { id: number; name: string; avatar: string | null; bio: string | null }; category: { id: number; name: string } | null; chapters: Chapter[]; }; type Enrollment = { id: number; status: 'pending' | 'active' | 'completed'; payment_confirmation: { status: 'pending' | 'approved' | 'rejected' } | null; } | null; type Props = { course: Course; enrollment: Enrollment; isInCart: boolean; adminPreview?: boolean }; const BRAND = '#118AB2'; const BRAND_DARK = '#0A2540'; const levelLabels: Record = { beginner: 'Pemula', intermediate: 'Menengah', advanced: 'Mahir', }; const levelColors: Record = { beginner: { bg: 'rgba(6,214,160,0.15)', text: '#05A57D' }, intermediate: { bg: 'rgba(255,183,3,0.15)', text: '#B8820A' }, advanced: { bg: 'rgba(230,57,70,0.15)', text: '#C0303B' }, }; function formatPrice(price: number): string { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price); } function formatDuration(minutes: number): string { if (minutes < 60) return `${minutes} mnt`; const h = Math.floor(minutes / 60); const m = minutes % 60; return m > 0 ? `${h}j ${m}mnt` : `${h} jam`; } function LessonIcon({ type }: { type: string }) { if (type === 'video') return ; if (type === 'pdf') return ; return ; } export default function CourseShow({ course, enrollment, isInCart, adminPreview }: Props) { const { auth } = usePage().props; const [openChapter, setOpenChapter] = useState(course.chapters[0]?.id ?? null); const isAdmin = auth.user?.role === 'admin'; const isEnrolled = !!enrollment; const isActive = enrollment?.status === 'active'; const isPending = enrollment?.status === 'pending'; function handleBuyNow() { router.post(`/cart/${course.id}`, { redirect_to: '/checkout' }); } const totalLessons = course.chapters.reduce((sum, ch) => sum + ch.lessons.length, 0); const totalQuizzes = course.chapters.reduce((sum, ch) => sum + ch.quizzes.length, 0); const totalAssignments = course.chapters.reduce((sum, ch) => sum + ch.assignments.length, 0); const objectives = course.objectives ? course.objectives.split('\n').filter(Boolean) : []; const level = levelColors[course.level] ?? { bg: 'rgba(0,0,0,0.08)', text: '#555555' }; return ( <> {adminPreview && (
Pratinjau admin — kelas ini belum dipublikasikan dan tidak terlihat oleh pengguna umum. Kembali ke Admin
)} {/* ── HERO ──────────────────────────────────────────────────── */}
{/* Left: Meta */}
{course.category && ( {course.category.name} )}

{course.title}

{course.description && (

{course.description}

)} {/* Stats row */}
{course.enrollments_count.toLocaleString('id-ID')} siswa {totalLessons} lesson {formatDuration(course.duration_minutes)} {levelLabels[course.level] ?? course.level}
{/* Instructor */}
{course.instructor.name[0]}
Instruktur:{' '} {course.instructor.name}
{/* Right: Thumbnail (desktop hero) */}
{course.thumbnail ? ( {course.title} ) : (
)}
{/* ── CONTENT ───────────────────────────────────────────────── */}
{/* ── MAIN LEFT ───────────────────────────────────────── */}
{/* Thumbnail (mobile) */} {course.thumbnail && ( {course.title} )} {/* Objectives */} {objectives.length > 0 && (

Yang Akan Kamu Pelajari

    {objectives.map((obj, i) => (
  • {obj}
    • ))}
)} {/* Description */} {course.description && (

Deskripsi Kelas

{course.description}

)} {/* Curriculum */}

Kurikulum

{course.chapters.length} bab · {totalLessons} lesson {totalQuizzes > 0 && ` · ${totalQuizzes} quiz`} {totalAssignments > 0 && ` · ${totalAssignments} tugas`}

{course.chapters.map((chapter, idx) => { const isOpen = openChapter === chapter.id; const itemCount = chapter.lessons.length + chapter.quizzes.length + chapter.assignments.length; return (
0 ? '1px solid rgba(0,0,0,0.06)' : undefined }} > {isOpen && (
{chapter.lessons.map((lesson, li) => (
0 ? '1px solid rgba(0,0,0,0.04)' : undefined, }} > {lesson.title}
{lesson.is_preview ? ( Preview ) : ( !isActive && ( ) )} {lesson.duration_minutes > 0 && ( {lesson.duration_minutes}mnt )}
))} {chapter.quizzes.map((quiz, qi) => (
{quiz.title}
{!isActive && ( )} {quiz.duration_minutes}mnt
))} {chapter.assignments.map((assignment) => (
{isActive ? ( {assignment.title} ) : ( {assignment.title} )} {!isActive && ( )}
))}
)}
); })}
{/* Instructor */}

Instruktur

{course.instructor.name[0]}

{course.instructor.name}

Instruktur Pakandi

{course.instructor.bio && (

{course.instructor.bio}

)}
{/* ── SIDEBAR RIGHT ───────────────────────────────────── */}
{/* Thumbnail inside card (desktop) */} {course.thumbnail ? ( {course.title} ) : (
)}
{/* Price */}
{course.price_type === 'free' ? (
Gratis selamanya
) : ( {formatPrice(course.price)} )}
{/* Admin */} {isAdmin && ( )} {/* Pending notice */} {!isAdmin && isPending && (

Menunggu Konfirmasi

Admin sedang memverifikasi pembayaran kamu.

)} {/* Active — lanjutkan */} {!isAdmin && isActive && ( )} {/* Not enrolled */} {!isAdmin && !isEnrolled && ( <> {course.price_type === 'free' ? (
{({ processing }) => ( )}
) : isInCart ? (
Lanjut ke Checkout Lihat Keranjang
) : (
{({ processing }) => ( )}
)} )} {/* Course includes */}

Kelas ini termasuk

{totalLessons} video & materi lesson
{formatDuration(course.duration_minutes)} total durasi
{totalQuizzes > 0 && (
{totalQuizzes} kuis interaktif
)} {totalAssignments > 0 && (
{totalAssignments} tugas praktek
)}
Sertifikat kelulusan resmi
); } function CourseLayoutWrapper({ children }: { children: React.ReactNode }) { const { auth } = usePage<{ auth: Auth }>().props; if (auth?.user) { return {children}; } return {children}; } CourseShow.layout = (page: React.ReactNode) => {page};