import { Head, Link, router } from '@inertiajs/react'; import { BookOpen, GraduationCap, ShoppingCart, Trash2 } from 'lucide-react'; import { useState } from 'react'; import AppLayout from '@/layouts/app-layout'; type CourseItem = { id: number; title: string; slug: string; thumbnail: string | null; price: number; price_type: 'free' | 'paid'; level: string; lessons_count: number; instructor: { id: number; name: string }; }; type CartItem = { id: number; course: CourseItem; is_enrolled: boolean; }; type Props = { items: CartItem[]; total: number; }; const BRAND = '#118AB2'; const levelLabels: Record = { beginner: 'Pemula', intermediate: 'Menengah', advanced: 'Mahir', }; function formatPrice(price: number) { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price); } export default function CartIndex({ items }: Props) { const activeItems = items.filter((i) => !i.is_enrolled); const enrolledItems = items.filter((i) => i.is_enrolled); const [selectedIds, setSelectedIds] = useState>( new Set(activeItems.map((i) => i.id)), ); function toggleItem(id: number) { setSelectedIds((prev) => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); } function toggleAll() { if (selectedIds.size === activeItems.length) { setSelectedIds(new Set()); } else { setSelectedIds(new Set(activeItems.map((i) => i.id))); } } function removeItem(cartItemId: number) { setSelectedIds((prev) => { const n = new Set(prev); n.delete(cartItemId); return n; }); router.delete(`/cart/${cartItemId}`, { preserveScroll: true }); } const selectedItems = activeItems.filter((i) => selectedIds.has(i.id)); const selectedTotal = selectedItems .filter((i) => i.course.price_type === 'paid') .reduce((sum, i) => sum + i.course.price, 0); const checkoutUrl = selectedIds.size > 0 ? `/checkout?items=${[...selectedIds].join(',')}` : '/checkout'; const allSelected = activeItems.length > 0 && selectedIds.size === activeItems.length; const someSelected = selectedIds.size > 0 && selectedIds.size < activeItems.length; return ( <>

Keranjang

{activeItems.length} kelas siap dibeli

{items.length === 0 ? (

Keranjangmu kosong

Cari kelas menarik dan tambahkan ke sini

Jelajahi Kelas
) : (
{/* Item list */}
{/* Select all */} {activeItems.length > 1 && ( )} {activeItems.map((item) => ( toggleItem(item.id)} onRemove={() => removeItem(item.id)} /> ))} {enrolledItems.length > 0 && ( <>

Sudah terdaftar

{enrolledItems.map((item) => ( removeItem(item.id)} dimmed /> ))} )}
{/* Summary */}

Ringkasan

{selectedItems.length === 0 ? (

Belum ada kelas dipilih.

) : (
{selectedItems.map((item) => (
{item.course.title} {item.course.price_type === 'free' ? 'Gratis' : formatPrice(item.course.price)}
))}
)}
Total {selectedTotal > 0 ? formatPrice(selectedTotal) : selectedItems.length > 0 ? 'Gratis' : 'Rp 0'}
{selectedIds.size > 0 ? ( Checkout ({selectedIds.size} kelas) ) : ( )} Tambah kelas lain
)}
); } function CartCard({ item, selected, onToggle, onRemove, dimmed = false, }: { item: CartItem; selected?: boolean; onToggle?: () => void; onRemove: () => void; dimmed?: boolean; }) { return (
{/* Checkbox for selectable items */} {!dimmed && onToggle && (
)} {item.course.thumbnail ? ( {item.course.title} ) : (
)}
{item.course.title}

{item.course.instructor.name} ยท {levelLabels[item.course.level] ?? item.course.level}

{item.course.lessons_count} lesson

{item.is_enrolled && ( Sudah terdaftar )}
{item.course.price_type === 'free' ? 'Gratis' : formatPrice(item.course.price)}
); } CartIndex.layout = (page: React.ReactNode) => {page};