import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { 
    ArrowLeftIcon,
    AcademicCapIcon,
    BookOpenIcon,
    UserIcon,
    CalendarIcon,
    BuildingLibraryIcon,
    UserGroupIcon,
    CheckCircleIcon,
    ExclamationTriangleIcon,
    ChevronLeftIcon,
    ClockIcon,
    GlobeAltIcon,
    ComputerDesktopIcon,
    UsersIcon,
    PlusCircleIcon,
    TrashIcon,
    XCircleIcon,
    LockClosedIcon,
    LockOpenIcon,
    DocumentTextIcon,
    CalculatorIcon,
    ChartBarIcon,
    InformationCircleIcon
} from '@heroicons/react/24/outline';
import { CheckIcon } from '@heroicons/react/24/solid';
import { useState, useMemo, useEffect, useRef } from 'react';
import Swal from 'sweetalert2';
import toast, { Toaster } from 'react-hot-toast';

export default function Create({
    kampusList,
    tahunAkademikList,
    prodiList,
    mataKuliahList,
    dosenList,
    semesters,
    tipeAjarOptions,
    pembagianAjarOptions,
    lingkupOptions,
    modeOptions,
    bobotTipeOptions,
    bobotDefault,
    auth
}) {
    const { data, setData, post, processing, errors } = useForm({
        nama_kelas: '',
        mata_kuliah_id: '',
        dosen_id: '',
        tipe_ajar: '',
        dosen_id_lainnya: [],
        pembagian_ajar: [],
        tahun_akademik_id: '',
        kampus_id: '',
        prodi_id: '',
        semester: '',
        number_of_meetings: 16,
        kapasitas: '',
        tanggal_mulai_efektif: '',
        tanggal_akhir_efektif: '',
        lingkup: '',
        mode: '',
        bobot_diatur: false,
        bobot: [],
    });

    const [filterKampus, setFilterKampus] = useState('');
    const [filterProdi, setFilterProdi] = useState('');
    const [pembagianItems, setPembagianItems] = useState([]);
    const [availableDosen, setAvailableDosen] = useState([]);
    const [bobotItems, setBobotItems] = useState([...bobotDefault]);
    const [showBobotForm, setShowBobotForm] = useState(false);

    // Searchable mata kuliah (pola sama seperti Nama Bank di SumberInformasi/Create)
    const [mataKuliahSearchOpen, setMataKuliahSearchOpen] = useState(false);
    const [mataKuliahSearch, setMataKuliahSearch] = useState('');
    const mataKuliahDropdownRef = useRef(null);
    const mataKuliahTriggerRef = useRef(null);
    
    // State untuk mengontrol urutan pengisian
    const [currentStep, setCurrentStep] = useState('kampus');
    const [completedSteps, setCompletedSteps] = useState({
        kampus: false,
        prodi: false,
        mataKuliah: false,
        tahunAkademik: false,
        namaKelas: false,
        tipeAjar: false,
        dosenUtama: false,
        dosenLainnya: false,
        pembagian: false,
        bobot: false
    });

    // Reset form ketika kampus berubah
    useEffect(() => {
        if (filterKampus) {
            setData('kampus_id', filterKampus);
            setData('tipe_ajar', '');
            setData('dosen_id', '');
            setCompletedSteps({
                kampus: true,
                prodi: false,
                mataKuliah: false,
                tahunAkademik: false,
                namaKelas: false,
                tipeAjar: false,
                dosenUtama: false,
                dosenLainnya: false,
                pembagian: false,
                bobot: false
            });
            setCurrentStep('prodi');
            
            // Reset pilihan yang bergantung pada kampus
            if (data.mata_kuliah_id) {
                const selectedMk = mataKuliahList.find(mk => mk.id == data.mata_kuliah_id);
                if (selectedMk && selectedMk.kampus_id != filterKampus) {
                    setData('mata_kuliah_id', '');
                }
            }
            
            if (data.dosen_id) {
                const selectedDosen = dosenList.find(d => d.id == data.dosen_id);
                if (selectedDosen && selectedDosen.kampus_id != filterKampus) {
                    setData('dosen_id', '');
                }
            }
            
            if (data.tahun_akademik_id) {
                const selectedTA = tahunAkademikList.find(ta => ta.id == data.tahun_akademik_id);
                if (selectedTA && selectedTA.kampus_id != filterKampus) {
                    setData('tahun_akademik_id', '');
                }
            }
            
            if (filterProdi) {
                const selectedProdi = prodiList.find(p => p.id == filterProdi);
                if (selectedProdi && selectedProdi.kampus_id != filterKampus) {
                    setFilterProdi('');
                    setData('prodi_id', '');
                }
            }
            
            if (data.dosen_id_lainnya.length > 0) {
                const validDosenLainnya = data.dosen_id_lainnya.filter(dosenId => {
                    const dosen = dosenList.find(d => d.id == dosenId);
                    return dosen && dosen.kampus_id == filterKampus;
                });
                setData('dosen_id_lainnya', validDosenLainnya);
            }
            
            setPembagianItems([]);
            setData('pembagian_ajar', []);
        } else {
            setData('tipe_ajar', '');
            setCompletedSteps({
                kampus: false,
                prodi: false,
                mataKuliah: false,
                tahunAkademik: false,
                namaKelas: false,
                tipeAjar: false,
                dosenUtama: false,
                dosenLainnya: false,
                pembagian: false,
                bobot: false
            });
            setCurrentStep('kampus');
        }
    }, [filterKampus]);

    // Reset mata kuliah ketika prodi berubah
    useEffect(() => {
        if (filterProdi) {
            setData('prodi_id', filterProdi);
            setCompletedSteps(prev => ({ ...prev, prodi: true }));
            setCurrentStep('mataKuliah');
            
            if (data.mata_kuliah_id) {
                const selectedMk = mataKuliahList.find(mk => mk.id == data.mata_kuliah_id);
                if (selectedMk && selectedMk.prodi_id != filterProdi) {
                    setData('mata_kuliah_id', '');
                }
            }
        } else {
            setCompletedSteps(prev => ({ ...prev, prodi: false }));
        }
    }, [filterProdi]);

    // Update completed steps untuk mata kuliah
    useEffect(() => {
        if (data.mata_kuliah_id) {
            setCompletedSteps(prev => ({ ...prev, mataKuliah: true }));
            setCurrentStep('tahunAkademik');
        } else {
            setCompletedSteps(prev => ({ ...prev, mataKuliah: false }));
        }
    }, [data.mata_kuliah_id]);

    // Update completed steps untuk tahun akademik
    useEffect(() => {
        if (data.tahun_akademik_id) {
            setCompletedSteps(prev => ({ ...prev, tahunAkademik: true }));
            setCurrentStep('namaKelas');
        } else {
            setCompletedSteps(prev => ({ ...prev, tahunAkademik: false }));
        }
    }, [data.tahun_akademik_id]);

    // Update completed steps untuk nama kelas
    useEffect(() => {
        if (data.nama_kelas.trim()) {
            setCompletedSteps(prev => ({ ...prev, namaKelas: true }));
            setCurrentStep('tipeAjar');
        } else {
            setCompletedSteps(prev => ({ ...prev, namaKelas: false }));
        }
    }, [data.nama_kelas]);

    // Update completed steps untuk tipe ajar (hanya setelah user memilih nilai sah)
    useEffect(() => {
        const validTipe = tipeAjarOptions.some(opt => opt.value === data.tipe_ajar);
        if (validTipe) {
            setCompletedSteps(prev => ({ ...prev, tipeAjar: true }));
            setCurrentStep('dosenUtama');
        } else {
            setCompletedSteps(prev => ({ ...prev, tipeAjar: false }));
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- tipeAjarOptions dari props Inertia, stabil per halaman
    }, [data.tipe_ajar]);

    // Update completed steps untuk dosen utama
    useEffect(() => {
        const tipeValid = tipeAjarOptions.some(opt => opt.value === data.tipe_ajar);
        if (data.dosen_id && tipeValid) {
            setCompletedSteps(prev => ({ ...prev, dosenUtama: true }));
            if (data.tipe_ajar === 'campuran') {
                setCurrentStep('dosenLainnya');
            } else {
                setCurrentStep('bobot');
                setCompletedSteps(prev => ({ ...prev, dosenLainnya: true, pembagian: true }));
            }
        } else {
            setCompletedSteps(prev => ({ ...prev, dosenUtama: false, dosenLainnya: false, pembagian: false }));
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- tipeAjarOptions dari props Inertia, stabil per halaman
    }, [data.dosen_id, data.tipe_ajar]);

    // Update completed steps untuk dosen lainnya (hanya untuk tipe campuran)
    useEffect(() => {
        if (data.tipe_ajar === 'campuran') {
            if (data.dosen_id_lainnya.length > 0) {
                setCompletedSteps(prev => ({ ...prev, dosenLainnya: true }));
                setCurrentStep('pembagian');
            } else {
                setCompletedSteps(prev => ({ ...prev, dosenLainnya: false, pembagian: false }));
            }
        }
    }, [data.dosen_id_lainnya, data.tipe_ajar]);

    // Update pembagian ajar otomatis ketika tipe ajar, dosen utama, atau dosen lainnya berubah
    useEffect(() => {
        if (data.tipe_ajar === 'campuran') {
            // Buat pembagian otomatis
            const newPembagianItems = [];
            
            // Tambahkan dosen utama dengan default "sebelum_uts"
            if (data.dosen_id) {
                newPembagianItems.push({
                    id: Date.now(),
                    dosen_id: data.dosen_id,
                    pembagian: 'sebelum_uts'
                });
            }
            
            // Tambahkan dosen lainnya dengan default "sesudah_uts"
            data.dosen_id_lainnya.forEach(dosenId => {
                newPembagianItems.push({
                    id: Date.now() + Math.random(),
                    dosen_id: dosenId,
                    pembagian: 'sesudah_uts'
                });
            });
            
            setPembagianItems(newPembagianItems);
            
            // Update completed steps untuk pembagian
            const isValid = newPembagianItems.length > 0;
            setCompletedSteps(prev => ({ ...prev, pembagian: isValid }));
            if (isValid) {
                setCurrentStep('bobot');
            }
        } else {
            setPembagianItems([]);
        }
    }, [data.tipe_ajar, data.dosen_id, data.dosen_id_lainnya]);

    // Update completed steps untuk pembagian (hanya untuk tipe campuran)
    useEffect(() => {
        if (data.tipe_ajar === 'campuran') {
            const isValid = isPembagianValid;
            setCompletedSteps(prev => ({ ...prev, pembagian: isValid }));
            if (isValid) {
                setCurrentStep('bobot');
            }
        }
    }, [pembagianItems, data.tipe_ajar]);

    // Update completed steps untuk bobot
    useEffect(() => {
        const totalBobot = calculateTotalBobot();
        setCompletedSteps(prev => ({ ...prev, bobot: totalBobot === 100 }));
    }, [bobotItems, data.bobot_diatur]);

    // Update available dosen ketika tipe ajar atau dosen utama berubah
    useEffect(() => {
        if (data.tipe_ajar === 'campuran' && filterKampus && data.mata_kuliah_id) {
            // Filter dosen berdasarkan kampus dan penugasan MK
            let filtered = dosenList.filter(dosen => 
                dosen.kampus_id == filterKampus && 
                dosen.is_dosen_terassign &&
                dosen.mata_kuliah_terassign && 
                dosen.mata_kuliah_terassign.some(mk => {
                    const selectedMk = mataKuliahList.find(m => m.id == data.mata_kuliah_id);
                    return mk.includes(`[${selectedMk?.kode_mk}]`);
                })
            );
            
            // Hapus dosen utama dari pilihan dosen lainnya
            if (data.dosen_id) {
                filtered = filtered.filter(dosen => dosen.id != data.dosen_id);
            }
            
            setAvailableDosen(filtered);
        } else {
            setAvailableDosen([]);
        }
    }, [data.tipe_ajar, data.dosen_id, filterKampus, dosenList, data.mata_kuliah_id]);

    // Update pembagian ajar ketika items berubah
    useEffect(() => {
        setData('pembagian_ajar', pembagianItems);
    }, [pembagianItems]);

    // Update bobot ketika items berubah
    useEffect(() => {
        if (data.bobot_diatur) {
            setData('bobot', bobotItems);
        } else {
            setData('bobot', []);
        }
    }, [bobotItems, data.bobot_diatur]);

    // Filter MK berdasarkan Kampus & Prodi pilihan
    const filteredMK = useMemo(() => {
        return mataKuliahList.filter(mk => {
            const matchKampus = !filterKampus || mk.kampus_id == filterKampus;
            const matchProdi = !filterProdi || mk.prodi_id == filterProdi;
            return matchKampus && matchProdi;
        });
    }, [filterKampus, filterProdi, mataKuliahList]);

    const filteredMKBySearch = useMemo(() => {
        const q = mataKuliahSearch.trim().toLowerCase();
        if (!q) return filteredMK;
        return filteredMK.filter((mk) => {
            const code = String(mk.kode_mk ?? '').toLowerCase();
            const name = String(mk.nama_mk ?? '').toLowerCase();
            return code.includes(q) || name.includes(q);
        });
    }, [filteredMK, mataKuliahSearch]);

    useEffect(() => {
        function handleClickOutside(event) {
            if (
                mataKuliahDropdownRef.current &&
                !mataKuliahDropdownRef.current.contains(event.target) &&
                mataKuliahTriggerRef.current &&
                !mataKuliahTriggerRef.current.contains(event.target)
            ) {
                setMataKuliahSearchOpen(false);
                setMataKuliahSearch('');
            }
        }
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    useEffect(() => {
        setMataKuliahSearchOpen(false);
        setMataKuliahSearch('');
    }, [filterKampus, filterProdi]);

    // Filter Dosen - HANYA DOSEN YANG DITUGASKAN UNTUK MK INI
    const filteredDosenByPenugasan = useMemo(() => {
        if (!data.mata_kuliah_id || !filterKampus) return [];
        
        const selectedMk = mataKuliahList.find(mk => mk.id == data.mata_kuliah_id);
        if (!selectedMk) return [];
        
        // Filter dosen yang ditugaskan untuk mata kuliah ini
        return dosenList.filter(dosen => {
            const matchKampus = dosen.kampus_id == filterKampus;
            const isTerassign = dosen.is_dosen_terassign && dosen.mata_kuliah_terassign;
            const assignedToThisMK = isTerassign && dosen.mata_kuliah_terassign.some(mkName => 
                mkName.includes(`[${selectedMk.kode_mk}]`)
            );
            
            return matchKampus && assignedToThisMK;
        });
    }, [dosenList, data.mata_kuliah_id, mataKuliahList, filterKampus]);

    // Filter Prodi berdasarkan Kampus pilihan
    const filteredProdi = useMemo(() => {
        return prodiList.filter(prodi => {
            return !filterKampus || prodi.kampus_id == filterKampus;
        });
    }, [filterKampus, prodiList]);

    // Filter Tahun Akademik berdasarkan Kampus pilihan
    const filteredTA = useMemo(() => {
        return tahunAkademikList.filter(ta => {
            return !filterKampus || ta.kampus_id == filterKampus;
        });
    }, [filterKampus, tahunAkademikList]);

    // Dapatkan info mata kuliah yang dipilih
    const selectedMataKuliah = data.mata_kuliah_id 
        ? mataKuliahList.find(mk => mk.id == data.mata_kuliah_id)
        : null;

    // Fungsi untuk handle perubahan mata kuliah
    const handleMataKuliahChange = (mkId) => {
        const idStr = mkId === '' || mkId === null || mkId === undefined ? '' : String(mkId);
        setData('mata_kuliah_id', idStr);
        setData('dosen_id', ''); // Reset dosen saat MK berubah
        setData('dosen_id_lainnya', []); // Reset dosen lainnya
        setPembagianItems([]); // Reset pembagian
        
        if (idStr) {
            const selectedMk = mataKuliahList.find(mk => mk.id == idStr);
            if (selectedMk && selectedMk.semester) {
                setData('semester', selectedMk.semester);
            }
        } else {
            setData('semester', '');
        }
    };

    const selectMataKuliahOption = (mk) => {
        handleMataKuliahChange(mk.id);
        setMataKuliahSearch('');
        setMataKuliahSearchOpen(false);
    };

    const clearMataKuliahSelection = () => {
        handleMataKuliahChange('');
        setMataKuliahSearch('');
        setMataKuliahSearchOpen(false);
    };

    // Fungsi untuk menambah dosen lainnya
    const handleTambahDosenLainnya = (dosenId) => {
        if (dosenId && !data.dosen_id_lainnya.includes(dosenId)) {
            const updatedDosenLainnya = [...data.dosen_id_lainnya, dosenId];
            setData('dosen_id_lainnya', updatedDosenLainnya);
        }
    };

    // Fungsi untuk menghapus dosen lainnya
    const handleHapusDosenLainnya = (dosenId) => {
        const updatedDosenLainnya = data.dosen_id_lainnya.filter(id => id != dosenId);
        setData('dosen_id_lainnya', updatedDosenLainnya);
        
        // Hapus juga dari pembagian items
        const updatedPembagian = pembagianItems.filter(item => item.dosen_id != dosenId);
        setPembagianItems(updatedPembagian);
    };

    // Fungsi untuk update pembagian item
    const handleUpdatePembagian = (index, field, value) => {
        const updatedItems = [...pembagianItems];
        updatedItems[index][field] = value;
        setPembagianItems(updatedItems);
    };

    // Fungsi untuk bobot
    const handleToggleBobot = () => {
        const newValue = !data.bobot_diatur;
        setData('bobot_diatur', newValue);
        setShowBobotForm(newValue);
        
        if (!newValue) {
            setBobotItems([...bobotDefault]);
        }
    };

    const handleAddBobotItem = () => {
        const newItem = {
            tipe: '',
            persentase: 0,
            id: Date.now() + Math.random()
        };
        setBobotItems([...bobotItems, newItem]);
    };

    const handleRemoveBobotItem = (index) => {
        const updatedItems = [...bobotItems];
        updatedItems.splice(index, 1);
        setBobotItems(updatedItems);
    };

    const handleUpdateBobotItem = (index, field, value) => {
        const updatedItems = [...bobotItems];
        updatedItems[index][field] = value;
        
        if (field === 'tipe') {
            const isDefaultType = ['Absensi', 'Tugas', 'UTS', 'UAS'].includes(value);
            updatedItems[index].isDefault = isDefaultType;
        }
        
        setBobotItems(updatedItems);
    };

    const calculateTotalBobot = () => {
        return bobotItems.reduce((total, item) => total + (parseFloat(item.persentase) || 0), 0);
    };

    // Validasi pembagian
    const isPembagianValid = useMemo(() => {
        if (data.tipe_ajar !== 'campuran') return true;
        if (pembagianItems.length === 0) return false;
        
        for (const item of pembagianItems) {
            if (!item.dosen_id || !item.pembagian) {
                return false;
            }
        }
        
        const dosenIds = pembagianItems.map(item => item.dosen_id);
        const uniqueDosenIds = [...new Set(dosenIds)];
        if (dosenIds.length !== uniqueDosenIds.length) {
            return false;
        }
        
        return true;
    }, [pembagianItems, data.tipe_ajar]);

    // Validasi tanggal
    const validateDates = () => {
        if (data.tanggal_mulai_efektif && data.tanggal_akhir_efektif) {
            const start = new Date(data.tanggal_mulai_efektif);
            const end = new Date(data.tanggal_akhir_efektif);
            if (end < start) {
                return false;
            }
        }
        return true;
    };

    // Format tanggal untuk min attribute
    const today = new Date().toISOString().split('T')[0];

    // Fungsi untuk mendapatkan nama dosen dari ID
    const getDosenNama = (dosenId) => {
        const dosen = dosenList.find(d => d.id == dosenId);
        return dosen ? dosen.nama : 'Dosen tidak ditemukan';
    };

    // Fungsi untuk mendapatkan label pembagian
    const getPembagianLabel = (pembagian) => {
        const option = pembagianAjarOptions.find(opt => opt.value === pembagian);
        return option ? option.label : pembagian;
    };

    // Fungsi untuk menentukan apakah field disabled
    const isFieldDisabled = (fieldName) => {
        const fieldDependencies = {
            kampus: false,
            prodi: !completedSteps.kampus,
            mataKuliah: !completedSteps.prodi,
            tahunAkademik: !completedSteps.mataKuliah,
            namaKelas: !completedSteps.tahunAkademik,
            tipeAjar: !completedSteps.namaKelas,
            dosenUtama: !completedSteps.tipeAjar,
            dosenLainnya: data.tipe_ajar !== 'campuran' || !completedSteps.dosenUtama,
            pembagian: data.tipe_ajar !== 'campuran' || !completedSteps.dosenLainnya,
            bobot: !completedSteps.dosenUtama,
            semester: !completedSteps.mataKuliah,
            number_of_meetings: !completedSteps.dosenUtama,
            kapasitas: !completedSteps.dosenUtama,
            tanggal_mulai_efektif: !completedSteps.dosenUtama,
            tanggal_akhir_efektif: !completedSteps.dosenUtama,
            lingkup: !completedSteps.dosenUtama,
            mode: !completedSteps.dosenUtama,
        };
        
        return fieldDependencies[fieldName] || false;
    };

    // Fungsi untuk mendapatkan class untuk field yang disabled
    const getFieldClass = (fieldName) => {
        const isDisabled = isFieldDisabled(fieldName);
        const baseClass = "w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200";
        const errorClass = errors[fieldName] ? 'border-red-500' : '';
        const disabledClass = isDisabled ? 'opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-800' : '';
        
        return `${baseClass} ${errorClass} ${disabledClass}`;
    };

    // Class khusus untuk dropdown dengan perbaikan dark mode
    const getDropdownClass = (fieldName) => {
        const isDisabled = isFieldDisabled(fieldName);
        const baseClass = "w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 [&>option]:bg-white [&>option]:text-gray-900 dark:[&>option]:bg-purple-950 dark:[&>option]:text-purple-100";
        const errorClass = errors[fieldName] ? 'border-red-500' : '';
        const disabledClass = isDisabled ? 'opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-800' : '';
        
        return `${baseClass} ${errorClass} ${disabledClass}`;
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        
        if (!data.mata_kuliah_id) {
            toast.error('Pilih Mata Kuliah terlebih dahulu.');
            return;
        }
        
        if (!data.dosen_id) {
            toast.error('Pilih Dosen Pengampu terlebih dahulu.');
            return;
        }
        
        if (!data.tahun_akademik_id) {
            toast.error('Pilih Tahun Akademik terlebih dahulu.');
            return;
        }

        if (!data.semester) {
            toast.error('Semester harus diisi.');
            return;
        }

        if (!data.nama_kelas) {
            toast.error('Nama Kelas harus diisi.');
            return;
        }

        if (!data.tipe_ajar || !tipeAjarOptions.some(opt => opt.value === data.tipe_ajar)) {
            toast.error('Pilih tipe ajar terlebih dahulu.');
            return;
        }
        
        if (data.tipe_ajar === 'campuran' && !isPembagianValid) {
            toast.error('Pembagian ajar tidak valid. Pastikan semua dosen yang terlibat memiliki pembagian yang unik.');
            return;
        }
        
        if (data.bobot_diatur) {
            const totalBobot = calculateTotalBobot();
            if (totalBobot !== 100) {
                toast.error(`Total bobot harus 100%. Saat ini total: ${totalBobot}%`);
                return;
            }
            
            for (const item of bobotItems) {
                if (!item.tipe || !item.tipe.trim()) {
                    toast.error('Semua tipe bobot harus diisi.');
                    return;
                }
                
                if (item.persentase < 0 || item.persentase > 100) {
                    toast.error('Persentase harus antara 0-100%.');
                    return;
                }
            }
        }
        
        if (!validateDates()) {
            toast.error('Tanggal akhir efektif tidak boleh lebih awal dari tanggal mulai.');
            return;
        }
        
        const selectedMk = mataKuliahList.find(mk => mk.id == data.mata_kuliah_id);
        const selectedDosen = dosenList.find(d => d.id == data.dosen_id);
        const selectedTA = tahunAkademikList.find(ta => ta.id == data.tahun_akademik_id);
        const selectedKampus = kampusList.find(k => k.id == data.kampus_id);
        const selectedProdi = prodiList.find(p => p.id == data.prodi_id);
        
        const formatDate = (dateString) => {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return date.toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'long',
                year: 'numeric'
            });
        };
        
        let dosenLainnyaList = '';
        if (data.tipe_ajar === 'campuran' && data.dosen_id_lainnya.length > 0) {
            const dosenLainnyaNames = data.dosen_id_lainnya.map(id => {
                const dosen = dosenList.find(d => d.id == id);
                return dosen ? dosen.nama : '';
            }).filter(name => name).join(', ');
            dosenLainnyaList = `Dosen Lainnya: <strong>${dosenLainnyaNames}</strong><br>`;
        }
        
        let pembagianList = '';
        if (data.tipe_ajar === 'campuran' && pembagianItems.length > 0) {
            pembagianList = '<br><strong>Pembagian Ajar:</strong><ul>';
            pembagianItems.forEach((item, index) => {
                const dosenNama = getDosenNama(item.dosen_id);
                const pembagianLabel = getPembagianLabel(item.pembagian);
                pembagianList += `<li>${dosenNama}: ${pembagianLabel}</li>`;
            });
            pembagianList += '</ul>';
        }

        let bobotList = '';
        if (data.bobot_diatur && bobotItems.length > 0) {
            bobotList = '<br><strong>Bobot Penilaian:</strong><ul>';
            bobotItems.forEach((item, index) => {
                bobotList += `<li>${item.tipe}: ${item.persentase}%</li>`;
            });
            bobotList += `<li><strong>Total: ${calculateTotalBobot()}%</strong></li>`;
            bobotList += '</ul>';
        } else {
            bobotList = '<br><strong>Bobot Penilaian:</strong> <em>Menggunakan default sistem</em>';
        }
        
        Swal.fire({
            title: 'Simpan Kelas?',
            html: `
                <div class="text-left">
                    <p class="mb-2">Anda akan membuat kelas dengan detail:</p>
                    <ul class="list-disc pl-5 text-sm">
                        <li>Mata Kuliah: <strong>${selectedMk?.nama_mk || '-'}</strong></li>
                        <li>Kode: <strong>${selectedMk?.kode_mk || '-'}</strong></li>
                        <li>Kelas: <strong>${data.nama_kelas || '-'}</strong></li>
                        <li>Tipe Ajar: <strong>${data.tipe_ajar === 'solo' ? 'Solo (1 Dosen)' : data.tipe_ajar === 'campuran' ? 'Campuran (Multiple Dosen)' : '-'}</strong></li>
                        <li>Dosen Utama: <strong>${selectedDosen?.nama || '-'}</strong></li>
                        ${dosenLainnyaList}
                        <li>Tahun Akademik: <strong>${selectedTA?.nama || '-'} (${selectedTA?.kode || '-'})</strong></li>
                        <li>Kampus: <strong>${selectedKampus?.nama_kampus || '-'}</strong></li>
                        <li>Prodi: <strong>${selectedProdi?.nama || '-'}</strong></li>
                        <li>Semester: <strong>${data.semester || '-'}</strong></li>
                        <li>Jumlah Pertemuan: <strong>${data.number_of_meetings || 16}</strong></li>
                        ${pembagianList}
                        <li>Kapasitas: <strong>${data.kapasitas || 'Tidak terbatas'}</strong></li>
                        <li>Lingkup: <strong>${data.lingkup === '1' ? 'Internal' : data.lingkup === '2' ? 'External' : data.lingkup === '3' ? 'Campuran' : '-'}</strong></li>
                        <li>Mode: <strong>${data.mode === 'O' ? 'Online' : data.mode === 'F' ? 'Offline' : data.mode === 'M' ? 'Campuran' : '-'}</strong></li>
                        <li>Periode Efektif: <strong>${formatDate(data.tanggal_mulai_efektif)} s/d ${formatDate(data.tanggal_akhir_efektif)}</strong></li>
                        ${bobotList}
                    </ul>
                </div>
            `,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#8b5cf6',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Ya, Simpan!',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            showLoaderOnConfirm: true,
            preConfirm: () => {
                return post(route('akademik.kelas.store'), {
                    onSuccess: () => {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: 'Kelas berhasil dibuat.',
                            icon: 'success',
                            confirmButtonColor: '#8b5cf6',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = route('akademik.kelas.index');
                            }
                        });
                    },
                    onError: (errors) => {
                        Swal.fire({
                            title: 'Gagal!',
                            text: 'Gagal membuat kelas. Periksa data yang dimasukkan.',
                            icon: 'error',
                            confirmButtonColor: '#ef4444',
                        });
                    }
                });
            },
            allowOutsideClick: () => !Swal.isLoading()
        });
    };

    return (
        <AuthenticatedLayout
            user={auth.user}
            header={
                <h2 className="font-semibold text-xl flex items-center gap-2 text-gray-800 dark:text-gray-100">
                    <PlusCircleIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                    Tambah Kelas Perkuliahan
                </h2>
            }
        >
            <Head title="Tambah Kelas Perkuliahan" />
            <Toaster position="top-right" />

            <div className="py-6">
                <div className="max-w-5xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white dark:bg-dark-300 overflow-hidden shadow-sm sm:rounded-lg border border-gray-200 dark:border-purple-500/20">
                        <div className="p-6">
                            <div className="mb-6">
                                <div className="flex items-center gap-3 mb-2">
                                    <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                                        <AcademicCapIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                                    </div>
                                    <div>
                                        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                                            Tambah Kelas Perkuliahan Baru
                                        </h1>
                                        <p className="text-sm text-gray-600 dark:text-purple-300/80">
                                            Buat kelas perkuliahan baru dengan mengisi form berikut
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <form onSubmit={handleSubmit} className="space-y-8">
                                {/* Progress Indicator */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                        <InformationCircleIcon className="w-5 h-5" />
                                        Urutan Pengisian Data
                                    </h3>
                                    
                                    <div className="mb-3">
                                        <div className="flex items-center justify-between mb-2">
                                            <h4 className="font-bold text-gray-700 dark:text-gray-300">Progress Pengisian</h4>
                                            <div className="text-xs text-gray-500 dark:text-gray-400">
                                                Langkah: <span className="font-bold text-purple-600 dark:text-purple-400">
                                                    {currentStep === 'kampus' ? '1. Kampus' :
                                                     currentStep === 'prodi' ? '2. Prodi' :
                                                     currentStep === 'mataKuliah' ? '3. Mata Kuliah' :
                                                     currentStep === 'tahunAkademik' ? '4. Tahun Akademik' :
                                                     currentStep === 'namaKelas' ? '5. Nama Kelas' :
                                                     currentStep === 'tipeAjar' ? '6. Tipe Ajar' :
                                                     currentStep === 'dosenUtama' ? '7. Dosen Utama' :
                                                     currentStep === 'dosenLainnya' ? '8. Dosen Lainnya' :
                                                     currentStep === 'pembagian' ? '9. Pembagian Ajar' :
                                                     currentStep === 'bobot' ? '10. Bobot Penilaian' : 'Selesai'}
                                                </span>
                                            </div>
                                        </div>
                                        <div className="flex items-center justify-between">
                                            {['kampus', 'prodi', 'mataKuliah', 'tahunAkademik', 'namaKelas', 'tipeAjar', 'dosenUtama'].map((step, index) => (
                                                <div key={step} className="flex flex-col items-center">
                                                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${completedSteps[step] ? 'bg-green-500 text-white' : currentStep === step ? 'bg-purple-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-500'}`}>
                                                        {completedSteps[step] ? (
                                                            <CheckCircleIcon className="w-5 h-5" />
                                                        ) : (
                                                            <span className="text-sm font-bold">{index + 1}</span>
                                                        )}
                                                    </div>
                                                    <span className="text-xs mt-1 text-gray-600 dark:text-gray-400 capitalize">
                                                        {step === 'mataKuliah' ? 'Mata Kuliah' :
                                                         step === 'tahunAkademik' ? 'Tahun Akad' :
                                                         step === 'namaKelas' ? 'Nama Kelas' :
                                                         step === 'tipeAjar' ? 'Tipe Ajar' :
                                                         step === 'dosenUtama' ? 'Dosen Utama' :
                                                         step.replace(/([A-Z])/g, ' $1').trim()}
                                                    </span>
                                                </div>
                                            ))}
                                            {data.tipe_ajar === 'campuran' && (
                                                <>
                                                    <div className="flex flex-col items-center">
                                                        <div className={`w-8 h-8 rounded-full flex items-center justify-center ${completedSteps.dosenLainnya ? 'bg-green-500 text-white' : currentStep === 'dosenLainnya' ? 'bg-purple-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-500'}`}>
                                                            {completedSteps.dosenLainnya ? (
                                                                <CheckCircleIcon className="w-5 h-5" />
                                                            ) : (
                                                                <span className="text-sm font-bold">8</span>
                                                            )}
                                                        </div>
                                                        <span className="text-xs mt-1 text-gray-600 dark:text-gray-400">Dosen Lain</span>
                                                    </div>
                                                    <div className="flex flex-col items-center">
                                                        <div className={`w-8 h-8 rounded-full flex items-center justify-center ${completedSteps.pembagian ? 'bg-green-500 text-white' : currentStep === 'pembagian' ? 'bg-purple-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-500'}`}>
                                                            {completedSteps.pembagian ? (
                                                                <CheckCircleIcon className="w-5 h-5" />
                                                            ) : (
                                                                <span className="text-sm font-bold">9</span>
                                                            )}
                                                        </div>
                                                        <span className="text-xs mt-1 text-gray-600 dark:text-gray-400">Pembagian</span>
                                                    </div>
                                                </>
                                            )}
                                            <div className="flex flex-col items-center">
                                                <div className={`w-8 h-8 rounded-full flex items-center justify-center ${completedSteps.bobot ? 'bg-green-500 text-white' : currentStep === 'bobot' ? 'bg-purple-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-500'}`}>
                                                    {completedSteps.bobot ? (
                                                        <CheckCircleIcon className="w-5 h-5" />
                                                    ) : (
                                                        <span className="text-sm font-bold">{data.tipe_ajar === 'campuran' ? '10' : '8'}</span>
                                                    )}
                                                </div>
                                                <span className="text-xs mt-1 text-gray-600 dark:text-gray-400">Bobot</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {/* Section 1: Informasi Akademik */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                        <BookOpenIcon className="w-5 h-5" />
                                        Informasi Akademik
                                    </h3>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Pilih Kampus
                                                <span className="text-red-500"> *</span>
                                            </label>
                                            <div className="relative">
                                                <select 
                                                    className={getDropdownClass('kampus')}
                                                    onChange={(e) => setFilterKampus(e.target.value)}
                                                    value={filterKampus}
                                                >
                                                    <option value="">-- Pilih Kampus --</option>
                                                    {kampusList.map(k => <option key={k.id} value={k.id}>{k.nama_kampus}</option>)}
                                                </select>
                                                {completedSteps.kampus && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <CheckCircleIcon className="w-5 h-5 text-green-500" />
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Pilih Program Studi
                                                {completedSteps.prodi && <span className="text-green-500 ml-2">✓</span>}
                                            </label>
                                            <div className="relative">
                                                <select 
                                                    className={getDropdownClass('prodi')}
                                                    onChange={(e) => setFilterProdi(e.target.value)}
                                                    value={filterProdi}
                                                    disabled={isFieldDisabled('prodi')}
                                                >
                                                    <option value="">-- {filterKampus ? 'Pilih Prodi' : 'Pilih Kampus terlebih dahulu'} --</option>
                                                    {filteredProdi.map(p => <option key={p.id} value={p.id}>{p.nama}</option>)}
                                                </select>
                                                {completedSteps.prodi && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <CheckCircleIcon className="w-5 h-5 text-green-500" />
                                                    </div>
                                                )}
                                                {isFieldDisabled('prodi') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {!completedSteps.kampus && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih kampus terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div className="md:col-span-2">
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Mata Kuliah
                                                <span className="text-red-500"> *</span>
                                                {completedSteps.mataKuliah && <span className="text-green-500 ml-2">✓</span>}
                                            </label>
                                            <div className="relative">
                                                {(() => {
                                                    const mkFieldDisabled = isFieldDisabled('mataKuliah');
                                                    const mkErr = errors.mata_kuliah_id;
                                                    const mkPlaceholder = !filterKampus
                                                        ? 'Pilih Kampus terlebih dahulu'
                                                        : !filterProdi
                                                          ? 'Pilih Prodi terlebih dahulu'
                                                          : 'Pilih Mata Kuliah...';
                                                    const triggerClass = `relative w-full pl-4 pr-14 py-3 border rounded-lg text-left transition-all duration-200 ${
                                                        mkErr
                                                            ? 'border-red-500'
                                                            : mataKuliahSearchOpen && !mkFieldDisabled
                                                              ? 'border-purple-500 ring-2 ring-purple-500'
                                                              : 'border-purple-300 dark:border-purple-500/40'
                                                    } ${
                                                        mkFieldDisabled
                                                            ? 'opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-purple-100'
                                                            : 'cursor-pointer bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 hover:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500'
                                                    }`;
                                                    return (
                                                        <>
                                                            <div
                                                                ref={mataKuliahTriggerRef}
                                                                role="button"
                                                                tabIndex={mkFieldDisabled ? -1 : 0}
                                                                onClick={() => {
                                                                    if (mkFieldDisabled) return;
                                                                    setMataKuliahSearchOpen((o) => !o);
                                                                }}
                                                                onKeyDown={(e) => {
                                                                    if (mkFieldDisabled) return;
                                                                    if (e.key === 'Enter' || e.key === ' ') {
                                                                        e.preventDefault();
                                                                        setMataKuliahSearchOpen((o) => !o);
                                                                    }
                                                                }}
                                                                className={triggerClass}
                                                            >
                                                                <span
                                                                    className={`block truncate pr-1 ${selectedMataKuliah ? 'font-medium' : 'text-purple-500/50'}`}
                                                                >
                                                                    {selectedMataKuliah
                                                                        ? `[${selectedMataKuliah.kode_mk}] ${selectedMataKuliah.nama_mk}`
                                                                        : mkPlaceholder}
                                                                </span>
                                                                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center gap-1 pr-3">
                                                                    {completedSteps.mataKuliah && (
                                                                        <CheckCircleIcon className="h-5 w-5 shrink-0 text-green-500" />
                                                                    )}
                                                                    {mkFieldDisabled && (
                                                                        <LockClosedIcon className="h-5 w-5 shrink-0 text-gray-400" />
                                                                    )}
                                                                    <svg
                                                                        className={`h-5 w-5 shrink-0 text-purple-400 transition-transform duration-200 ${mataKuliahSearchOpen ? 'rotate-180' : ''}`}
                                                                        fill="none"
                                                                        stroke="currentColor"
                                                                        viewBox="0 0 24 24"
                                                                    >
                                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                                                                    </svg>
                                                                </div>
                                                            </div>
                                                            {mataKuliahSearchOpen && !mkFieldDisabled && (
                                                                <div
                                                                    ref={mataKuliahDropdownRef}
                                                                    className="absolute z-50 mt-2 w-full overflow-hidden rounded-lg border border-purple-200 bg-white shadow-2xl animate-in fade-in zoom-in duration-150 dark:border-purple-500/30 dark:bg-gray-800"
                                                                >
                                                                    <div className="border-b border-gray-100 bg-gray-50 p-2 dark:border-gray-700 dark:bg-gray-900/50">
                                                                        <input
                                                                            autoFocus
                                                                            type="text"
                                                                            placeholder="Cari kode atau nama mata kuliah..."
                                                                            value={mataKuliahSearch}
                                                                            onChange={(e) => setMataKuliahSearch(e.target.value)}
                                                                            className="w-full rounded-md border border-purple-200 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:ring-2 focus:ring-purple-500 dark:border-purple-500/30 dark:bg-gray-800 dark:text-white"
                                                                        />
                                                                    </div>
                                                                    <div className="custom-scrollbar max-h-52 overflow-y-auto">
                                                                        {filterKampus && filterProdi && data.mata_kuliah_id ? (
                                                                            <button
                                                                                type="button"
                                                                                onClick={clearMataKuliahSelection}
                                                                                className="w-full border-b border-gray-100 px-4 py-2.5 text-left text-sm text-gray-500 transition-colors hover:bg-purple-50 dark:border-gray-700 dark:text-purple-400 dark:hover:bg-purple-900/40"
                                                                            >
                                                                                — Kosongkan pilihan —
                                                                            </button>
                                                                        ) : null}
                                                                        {filteredMKBySearch.length > 0 ? (
                                                                            filteredMKBySearch.map((mk) => (
                                                                                <button
                                                                                    key={mk.id}
                                                                                    type="button"
                                                                                    onClick={() => selectMataKuliahOption(mk)}
                                                                                    className="group flex w-full items-center justify-between px-4 py-2.5 text-left text-gray-700 transition-colors hover:bg-purple-50 dark:text-purple-100 dark:hover:bg-purple-900/40"
                                                                                >
                                                                                    <span className="text-sm">
                                                                                        <span className="font-medium text-purple-700 dark:text-purple-300">[{mk.kode_mk}]</span>{' '}
                                                                                        {mk.nama_mk}
                                                                                    </span>
                                                                                    {String(data.mata_kuliah_id) === String(mk.id) ? (
                                                                                        <CheckIcon className="h-4 w-4 shrink-0 text-purple-600 dark:text-purple-400" />
                                                                                    ) : null}
                                                                                </button>
                                                                            ))
                                                                        ) : (
                                                                            <div className="px-4 py-6 text-center text-sm text-gray-500 dark:text-purple-400">
                                                                                {!filterKampus || !filterProdi
                                                                                    ? 'Pilih kampus dan prodi terlebih dahulu.'
                                                                                    : mataKuliahSearch.trim()
                                                                                      ? 'Mata kuliah tidak ditemukan.'
                                                                                      : 'Tidak ada mata kuliah untuk prodi ini.'}
                                                                            </div>
                                                                        )}
                                                                    </div>
                                                                </div>
                                                            )}
                                                        </>
                                                    );
                                                })()}
                                            </div>
                                            {errors.mata_kuliah_id && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.mata_kuliah_id}</p>}
                                            {selectedMataKuliah && (
                                                <div className="mt-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-500/30">
                                                    <p className="text-sm text-blue-700 dark:text-blue-300">
                                                        <span className="font-semibold">Info:</span> {selectedMataKuliah.kode_mk} - {selectedMataKuliah.nama_mk}
                                                    </p>
                                                </div>
                                            )}
                                            {!completedSteps.prodi && completedSteps.kampus && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih prodi terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </div>

                                {/* Section 2: Detail Kelas & Dosen */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                        <AcademicCapIcon className="w-5 h-5" />
                                        Detail Kelas & Dosen
                                    </h3>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Tahun Akademik
                                                <span className="text-red-500"> *</span>
                                                {completedSteps.tahunAkademik && <span className="text-green-500 ml-2">✓</span>}
                                            </label>
                                            <div className="relative">
                                                <select 
                                                    className={getDropdownClass('tahun_akademik_id')}
                                                    value={data.tahun_akademik_id}
                                                    onChange={e => setData('tahun_akademik_id', e.target.value)}
                                                    disabled={isFieldDisabled('tahunAkademik')}
                                                >
                                                    <option value="">-- {filterKampus ? 'Pilih Tahun Akademik' : 'Pilih Kampus terlebih dahulu'} --</option>
                                                    {filteredTA.map(ta => (
                                                        <option key={ta.id} value={ta.id}>
                                                            {ta.nama} ({ta.kode})
                                                        </option>
                                                    ))}
                                                </select>
                                                {completedSteps.tahunAkademik && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <CheckCircleIcon className="w-5 h-5 text-green-500" />
                                                    </div>
                                                )}
                                                {isFieldDisabled('tahunAkademik') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.tahun_akademik_id && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.tahun_akademik_id}</p>}
                                            {!completedSteps.mataKuliah && completedSteps.prodi && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih mata kuliah terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Nama Kelas
                                                <span className="text-red-500"> *</span>
                                                {completedSteps.namaKelas && <span className="text-green-500 ml-2">✓</span>}
                                            </label>
                                            <div className="relative">
                                                <input 
                                                    type="text"
                                                    className={getFieldClass('nama_kelas')}
                                                    placeholder="Contoh: Kelas A, Kelas Pagi, dll..."
                                                    value={data.nama_kelas}
                                                    onChange={e => setData('nama_kelas', e.target.value)}
                                                    disabled={isFieldDisabled('namaKelas')}
                                                />
                                                {completedSteps.namaKelas && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <CheckCircleIcon className="w-5 h-5 text-green-500" />
                                                    </div>
                                                )}
                                                {isFieldDisabled('namaKelas') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.nama_kelas && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.nama_kelas}</p>}
                                            {!completedSteps.tahunAkademik && completedSteps.mataKuliah && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih tahun akademik terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Tipe Ajar
                                                <span className="text-red-500"> *</span>
                                                {completedSteps.tipeAjar && <span className="text-green-500 ml-2">✓</span>}
                                            </label>
                                            <div className="relative">
                                                <select 
                                                    className={getDropdownClass('tipe_ajar')}
                                                    value={data.tipe_ajar}
                                                    onChange={e => setData('tipe_ajar', e.target.value)}
                                                    disabled={isFieldDisabled('tipeAjar')}
                                                >
                                                    <option value="" disabled>Pilih Tipe...</option>
                                                    {tipeAjarOptions.map(option => (
                                                        <option key={option.value} value={option.value}>
                                                            {option.label}
                                                        </option>
                                                    ))}
                                                </select>
                                                {completedSteps.tipeAjar && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <CheckCircleIcon className="w-5 h-5 text-green-500" />
                                                    </div>
                                                )}
                                                {isFieldDisabled('tipeAjar') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.tipe_ajar && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.tipe_ajar}</p>}
                                            {!completedSteps.namaKelas && completedSteps.tahunAkademik && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Isi nama kelas terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Dosen Pengampu Utama
                                                <span className="text-red-500"> *</span>
                                                {completedSteps.dosenUtama && <span className="text-green-500 ml-2">✓</span>}
                                            </label>
                                            <div className="relative">
                                                <select 
                                                    className={`${getDropdownClass('dosen_id')} ${filteredDosenByPenugasan.length > 0 ? 'ring-2 ring-green-500 dark:ring-green-400' : ''}`}
                                                    value={data.dosen_id}
                                                    onChange={e => setData('dosen_id', e.target.value)}
                                                    disabled={isFieldDisabled('dosenUtama') || !data.mata_kuliah_id}
                                                >
                                                    <option value="">-- {data.mata_kuliah_id ? 'Pilih Dosen Utama' : 'Pilih Mata Kuliah terlebih dahulu'} --</option>
                                                    {filteredDosenByPenugasan.map(d => (
                                                        <option 
                                                            key={d.id} 
                                                            value={d.id}
                                                            className="text-green-800 dark:text-green-300 font-semibold"
                                                        >
                                                            {d.nama} ({d.nidn}) - ✅ Ditugaskan
                                                        </option>
                                                    ))}
                                                </select>
                                                {completedSteps.dosenUtama && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <CheckCircleIcon className="w-5 h-5 text-green-500" />
                                                    </div>
                                                )}
                                                {isFieldDisabled('dosenUtama') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.dosen_id && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.dosen_id}</p>}
                                            {!completedSteps.tipeAjar && completedSteps.namaKelas && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih tipe ajar terlebih dahulu
                                                </p>
                                            )}
                                            {data.mata_kuliah_id && (
                                                <p className="text-xs text-green-600 dark:text-green-400 mt-1">
                                                    ✅ Hanya menampilkan dosen yang ditugaskan untuk mata kuliah ini ({filteredDosenByPenugasan.length} orang)
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Semester
                                                <span className="text-red-500"> *</span>
                                            </label>
                                            <div className="relative">
                                                <select 
                                                    className={getDropdownClass('semester')}
                                                    value={data.semester}
                                                    onChange={e => setData('semester', e.target.value)}
                                                    disabled={isFieldDisabled('semester')}
                                                >
                                                    <option value="">-- Pilih Semester --</option>
                                                    {semesters?.map((sem) => (
                                                        <option key={sem} value={sem}>
                                                            Semester {sem}
                                                        </option>
                                                    ))}
                                                </select>
                                                {data.mata_kuliah_id && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
                                                            Auto
                                                        </span>
                                                    </div>
                                                )}
                                                {isFieldDisabled('semester') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.semester && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.semester}</p>}
                                            {!completedSteps.mataKuliah && completedSteps.prodi && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih mata kuliah terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                    
                                    {/* Section 3: Tipe Campuran - Dosen Lainnya */}
                                    {data.tipe_ajar === 'campuran' && (
                                        <div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-500/30">
                                            <div className="flex items-center gap-2 mb-4 text-green-800 dark:text-green-300">
                                                <UserGroupIcon className="w-5 h-5" />
                                                <h4 className="font-semibold">Dosen Lainnya</h4>
                                                {completedSteps.dosenLainnya && <span className="text-green-500">✓</span>}
                                            </div>

                                            <div className="mb-4">
                                                <label className="block mb-2 font-medium text-green-700 dark:text-green-200">
                                                    Tambah Dosen Lainnya
                                                </label>
                                                <div className="flex gap-2">
                                                    <select 
                                                        className="flex-1 pl-4 pr-4 py-3 border border-green-300 dark:border-green-500/40 rounded-lg bg-white dark:bg-green-900/30 text-gray-900 dark:text-green-100 placeholder-green-500 dark:placeholder-green-400 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed [&>option]:bg-white [&>option]:text-gray-900 dark:[&>option]:bg-green-950 dark:[&>option]:text-green-100"
                                                        value=""
                                                        onChange={(e) => {
                                                            if (e.target.value) {
                                                                handleTambahDosenLainnya(e.target.value);
                                                                e.target.value = '';
                                                            }
                                                        }}
                                                        disabled={isFieldDisabled('dosenLainnya') || !data.mata_kuliah_id || !data.dosen_id}
                                                    >
                                                        <option value="">-- {data.mata_kuliah_id ? 'Pilih Dosen Lainnya' : 'Pilih Mata Kuliah terlebih dahulu'} --</option>
                                                        {availableDosen.map(d => (
                                                            <option 
                                                                key={d.id} 
                                                                value={d.id}
                                                                disabled={data.dosen_id_lainnya.includes(d.id)}
                                                                className="text-green-800 dark:text-green-300 font-semibold"
                                                            >
                                                                {d.nama} ({d.nidn}) - ✅ Ditugaskan
                                                            </option>
                                                        ))}
                                                    </select>
                                                </div>
                                                <p className="text-xs text-green-600 dark:text-green-400 mt-1">
                                                    Pilih dosen tambahan yang akan mengajar bersama dosen utama
                                                </p>
                                                {!completedSteps.dosenUtama && completedSteps.tipeAjar && (
                                                    <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                        ⚠️ Pilih dosen utama terlebih dahulu
                                                    </p>
                                                )}
                                            </div>

                                            {/* Daftar Dosen Lainnya */}
                                            {data.dosen_id_lainnya.length > 0 && (
                                                <div className="mt-4">
                                                    <h4 className="text-sm font-bold text-green-700 dark:text-green-300 mb-2">
                                                        Dosen Lainnya Terpilih ({data.dosen_id_lainnya.length})
                                                    </h4>
                                                    <div className="space-y-2">
                                                        {data.dosen_id_lainnya.map((dosenId) => {
                                                            const dosen = dosenList.find(d => d.id == dosenId);
                                                            return (
                                                                <div key={dosenId} className="flex items-center justify-between p-3 rounded-lg border bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-500/30">
                                                                    <div className="flex items-center">
                                                                        <div>
                                                                            <span className="font-medium text-green-800 dark:text-green-200">
                                                                                {dosen?.nama || 'Dosen tidak ditemukan'}
                                                                                <span className="ml-2 text-green-600 dark:text-green-400">✅</span>
                                                                            </span>
                                                                            {dosen?.nidn && (
                                                                                <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">
                                                                                    ({dosen.nidn})
                                                                                </span>
                                                                            )}
                                                                        </div>
                                                                    </div>
                                                                    <button
                                                                        type="button"
                                                                        onClick={() => handleHapusDosenLainnya(dosenId)}
                                                                        className="text-red-500 hover:text-red-700 dark:hover:text-red-400 p-1 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20"
                                                                    >
                                                                        <TrashIcon className="w-4 h-4" />
                                                                    </button>
                                                                </div>
                                                            );
                                                        })}
                                                    </div>
                                                </div>
                                            )}

                                            {/* Note jika belum ada dosen lainnya */}
                                            {data.dosen_id_lainnya.length === 0 && data.tipe_ajar === 'campuran' && !isFieldDisabled('dosenLainnya') && (
                                                <div className="text-center py-4 border-2 border-dashed border-green-300 dark:border-green-500/30 rounded-lg mt-4">
                                                    <p className="text-green-500 dark:text-green-400">
                                                        Belum ada dosen lainnya yang dipilih
                                                    </p>
                                                    <p className="text-sm text-green-400 dark:text-green-500 mt-1">
                                                        Pilih dosen lainnya dari dropdown di atas
                                                    </p>
                                                </div>
                                            )}
                                        </div>
                                    )}

                                    {/* Section 4: Pembagian Ajar (Hanya untuk tipe campuran) */}
                                    {data.tipe_ajar === 'campuran' && (
                                        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-500/30">
                                            <div className="flex items-center gap-2 mb-4 text-blue-800 dark:text-blue-300">
                                                <ClockIcon className="w-5 h-5" />
                                                <h4 className="font-semibold">Pembagian Ajar (Otomatis)</h4>
                                                {completedSteps.pembagian && <span className="text-green-500">✓</span>}
                                            </div>

                                            <div className="mb-4">
                                                <div className="mb-4">
                                                    <h4 className="text-sm font-bold text-blue-700 dark:text-blue-300 mb-2">
                                                        Pembagian Ajar per Dosen
                                                    </h4>
                                                    <p className="text-xs text-blue-600 dark:text-blue-400 mb-3">
                                                        Pembagian ajar diatur secara otomatis dengan default: Dosen Utama (Sebelum UTS), Dosen Lainnya (Sesudah UTS)
                                                    </p>
                                                    {!completedSteps.dosenLainnya && completedSteps.dosenUtama && (
                                                        <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                            ⚠️ Pilih dosen lainnya terlebih dahulu
                                                        </p>
                                                    )}
                                                </div>

                                                {/* Status Pembagian */}
                                                <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-500/30 rounded-lg">
                                                    <div className="flex items-center justify-between">
                                                        <div>
                                                            <span className="text-sm font-medium text-blue-800 dark:text-blue-300">
                                                                Total Dosen yang Terlibat: {1 + data.dosen_id_lainnya.length}
                                                            </span>
                                                            <span className="text-sm text-blue-600 dark:text-blue-400 ml-4">
                                                                Pembagian: {pembagianItems.length} / {1 + data.dosen_id_lainnya.length}
                                                            </span>
                                                        </div>
                                                        {!isPembagianValid && (
                                                            <span className="text-sm text-red-600 dark:text-red-400 font-medium">
                                                                ❌ Pembagian tidak valid
                                                            </span>
                                                        )}
                                                        {isPembagianValid && (
                                                            <span className="text-sm text-green-600 dark:text-green-400 font-medium">
                                                                ✅ Pembagian valid
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>

                                                {/* Daftar Pembagian Items - Hanya menampilkan, tidak bisa ditambah/dihapus */}
                                                {pembagianItems.length > 0 && (
                                                    <div className="space-y-3">
                                                        {pembagianItems.map((item, index) => {
                                                            const dosen = dosenList.find(d => d.id == item.dosen_id);
                                                            const isDosenUtama = item.dosen_id == data.dosen_id;
                                                            return (
                                                                <div key={item.id} className="p-4 rounded-lg border bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-500/30">
                                                                    <div className="flex items-center justify-between mb-3">
                                                                        <h5 className="font-medium text-green-800 dark:text-green-300">
                                                                            {isDosenUtama ? 'Dosen Utama' : 'Dosen Lainnya'}
                                                                            <span className="ml-2 text-xs text-green-600 dark:text-green-400">✅ Dosen ditugaskan</span>
                                                                        </h5>
                                                                    </div>
                                                                    
                                                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                                                        <div>
                                                                            <label className="block text-xs font-medium text-green-600 dark:text-green-400 mb-1">
                                                                                Dosen
                                                                            </label>
                                                                            <div className="w-full pl-3 pr-3 py-2 rounded-lg border border-green-300 dark:border-green-500/40 bg-green-50 dark:bg-green-900/30 text-green-900 dark:text-green-100">
                                                                                <div className="flex items-center">
                                                                                    <div className="flex-1">
                                                                                        {dosen?.nama || 'Dosen tidak ditemukan'}
                                                                                        {dosen?.nidn && ` (${dosen.nidn})`}
                                                                                        {isDosenUtama && <span className="ml-2 text-xs text-blue-600 dark:text-blue-400 font-medium">(Utama)</span>}
                                                                                    </div>
                                                                                    <span className="text-green-600 dark:text-green-400">✅</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div>
                                                                            <label className="block text-xs font-medium text-green-600 dark:text-green-400 mb-1">
                                                                                Pembagian Ajar
                                                                            </label>
                                                                            <select 
                                                                                className="w-full pl-3 pr-3 py-2 rounded-lg border border-purple-300 dark:border-purple-500/40 bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed [&>option]:bg-white [&>option]:text-gray-900 dark:[&>option]:bg-purple-950 dark:[&>option]:text-purple-100"
                                                                                value={item.pembagian}
                                                                                onChange={(e) => handleUpdatePembagian(index, 'pembagian', e.target.value)}
                                                                                disabled={isFieldDisabled('pembagian')}
                                                                            >
                                                                                {pembagianAjarOptions.map(option => (
                                                                                    <option key={option.value} value={option.value}>
                                                                                        {option.label}
                                                                                    </option>
                                                                                ))}
                                                                            </select>
                                                                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                                                {isDosenUtama ? 'Default: Sebelum UTS' : 'Default: Sesudah UTS'}
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            );
                                                        })}
                                                    </div>
                                                )}

                                                {pembagianItems.length === 0 && !isFieldDisabled('pembagian') && (
                                                    <div className="text-center py-8 border-2 border-dashed border-purple-300 dark:border-purple-500/30 rounded-lg">
                                                        <div className="text-purple-400 dark:text-purple-500 mb-2">
                                                            <ClockIcon className="w-12 h-12 mx-auto opacity-50" />
                                                        </div>
                                                        <p className="text-purple-500 dark:text-purple-400">
                                                            Pembagian ajar akan otomatis dibuat setelah memilih dosen lainnya
                                                        </p>
                                                        <p className="text-sm text-purple-400 dark:text-purple-500 mt-1">
                                                            Pilih dosen lainnya untuk melihat pembagian ajar otomatis
                                                        </p>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    )}
                                </div>

                                {/* Section 5: Bobot Penilaian */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                        <CalculatorIcon className="w-5 h-5" />
                                        Bobot Penilaian
                                    </h3>

                                    <div className="mb-6">
                                        <div className="flex items-center justify-between mb-4">
                                            <div>
                                                <h4 className="text-sm font-bold text-purple-700 dark:text-purple-300">
                                                    Konfigurasi Bobot Penilaian
                                                </h4>
                                                <p className="text-xs text-purple-600 dark:text-purple-400">
                                                    Atur bobot penilaian untuk kelas ini. Jika tidak diatur, sistem akan menggunakan bobot default.
                                                </p>
                                                {!completedSteps.dosenUtama && (
                                                    <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                        ⚠️ Pilih dosen utama terlebih dahulu
                                                    </p>
                                                )}
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <span className="text-sm text-purple-600 dark:text-purple-400">
                                                    {data.bobot_diatur ? 'Atur Manual' : 'Gunakan Default'}
                                                </span>
                                                <button
                                                    type="button"
                                                    onClick={handleToggleBobot}
                                                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${data.bobot_diatur ? 'bg-purple-600' : 'bg-gray-300 dark:bg-gray-700'} ${isFieldDisabled('bobot') ? 'opacity-50 cursor-not-allowed' : ''}`}
                                                    disabled={isFieldDisabled('bobot')}
                                                >
                                                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${data.bobot_diatur ? 'translate-x-6' : 'translate-x-1'}`} />
                                                </button>
                                            </div>
                                        </div>

                                        {/* Bobot Default Info */}
                                        {!data.bobot_diatur && (
                                            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-500/30 rounded-lg">
                                                <div className="flex items-start gap-3">
                                                    <DocumentTextIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" />
                                                    <div>
                                                        <h5 className="font-medium text-blue-800 dark:text-blue-300 mb-2">
                                                            Bobot Penilaian Default (Sistem)
                                                        </h5>
                                                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                                                            {bobotDefault.map((item, index) => (
                                                                <div key={index} className="bg-white dark:bg-dark-200 p-3 rounded-lg border border-blue-100 dark:border-blue-500/20">
                                                                    <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
                                                                        {item.tipe}
                                                                    </div>
                                                                    <div className="text-lg font-bold text-blue-700 dark:text-blue-300">
                                                                        {item.persentase}%
                                                                    </div>
                                                                </div>
                                                            ))}
                                                        </div>
                                                        <div className="mt-3 pt-3 border-t border-blue-200 dark:border-blue-500/20">
                                                            <div className="flex justify-between">
                                                                <span className="text-sm font-medium text-blue-800 dark:text-blue-300">
                                                                    Total Bobot
                                                                </span>
                                                                <span className="text-lg font-bold text-purple-600 dark:text-purple-400">
                                                                    100%
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        )}

                                        {/* Form Bobot Manual */}
                                        {data.bobot_diatur && (
                                            <div className="space-y-4">
                                                <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-500/30 rounded-lg">
                                                    <div className="flex items-center justify-between mb-3">
                                                        <div>
                                                            <h5 className="font-medium text-green-800 dark:text-green-300 mb-1">
                                                                Atur Bobot Penilaian Manual
                                                            </h5>
                                                            <p className="text-xs text-green-700 dark:text-green-400">
                                                                Tentukan bobot penilaian sesuai kebutuhan kelas. Total harus 100%.
                                                            </p>
                                                        </div>
                                                        <button
                                                            type="button"
                                                            onClick={handleAddBobotItem}
                                                            className="inline-flex items-center gap-1 px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition"
                                                        >
                                                            <PlusCircleIcon className="w-4 h-4" />
                                                            Tambah Item
                                                        </button>
                                                    </div>

                                                    {/* Status Total Bobot */}
                                                    <div className="p-3 bg-white dark:bg-dark-200 rounded-lg border border-green-200 dark:border-green-500/20">
                                                        <div className="flex items-center justify-between">
                                                            <div>
                                                                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                                                    Total Bobot Saat Ini
                                                                </span>
                                                                <span className="text-sm text-gray-500 dark:text-gray-400 ml-4">
                                                                    Item: {bobotItems.length}
                                                                </span>
                                                            </div>
                                                            <div className={`text-lg font-bold ${calculateTotalBobot() === 100 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
                                                                {calculateTotalBobot()}%
                                                            </div>
                                                        </div>
                                                        <div className="mt-2">
                                                            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                                                <div 
                                                                    className={`h-2 rounded-full ${calculateTotalBobot() === 100 ? 'bg-green-500' : calculateTotalBobot() > 100 ? 'bg-red-500' : 'bg-blue-500'}`}
                                                                    style={{ width: `${Math.min(calculateTotalBobot(), 100)}%` }}
                                                                ></div>
                                                            </div>
                                                            <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                                <span>0%</span>
                                                                <span>100%</span>
                                                            </div>
                                                        </div>
                                                        {calculateTotalBobot() !== 100 && (
                                                            <p className={`text-xs mt-2 ${calculateTotalBobot() > 100 ? 'text-red-600 dark:text-red-400' : 'text-yellow-600 dark:text-yellow-400'}`}>
                                                                {calculateTotalBobot() > 100 ? '⚠️ Total bobot melebihi 100%' : '⚠️ Total bobot kurang dari 100%'}
                                                            </p>
                                                        )}
                                                    </div>
                                                </div>

                                                {/* Daftar Item Bobot */}
                                                {bobotItems.length > 0 && (
                                                    <div className="space-y-3">
                                                        {bobotItems.map((item, index) => {
                                                            return (
                                                                <div key={item.id || index} className="p-4 bg-gray-50 dark:bg-dark-200 rounded-lg border border-gray-200 dark:border-purple-500/20">
                                                                    <div className="flex items-center justify-between mb-3">
                                                                        <h5 className="font-medium text-gray-700 dark:text-gray-300">
                                                                            Item #{index + 1}
                                                                        </h5>
                                                                        <button
                                                                            type="button"
                                                                            onClick={() => handleRemoveBobotItem(index)}
                                                                            className="text-red-500 hover:text-red-700 dark:hover:text-red-400 p-1 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20"
                                                                        >
                                                                            <XCircleIcon className="w-5 h-5" />
                                                                        </button>
                                                                    </div>
                                                                    
                                                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                                                        <div>
                                                                            <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                                                                Tipe Penilaian
                                                                            </label>
                                                                            <input
                                                                                type="text"
                                                                                className="w-full pl-3 pr-3 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                                                placeholder="Contoh: Absensi, Tugas, UTS, UAS, dll..."
                                                                                value={item.tipe}
                                                                                onChange={(e) => handleUpdateBobotItem(index, 'tipe', e.target.value)}
                                                                            />
                                                                        </div>
                                                                        <div>
                                                                            <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                                                                Persentase (%)
                                                                            </label>
                                                                            <div className="relative">
                                                                                <input
                                                                                    type="number"
                                                                                    min="0"
                                                                                    max="100"
                                                                                    step="0.1"
                                                                                    className="w-full pl-3 pr-8 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                                                    value={item.persentase}
                                                                                    onChange={(e) => handleUpdateBobotItem(index, 'persentase', parseFloat(e.target.value) || 0)}
                                                                                />
                                                                                <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                                                    <span className="text-gray-500 dark:text-gray-400">%</span>
                                                                                </div>
                                                                            </div>
                                                                            <div className="flex items-center justify-between mt-1">
                                                                                <span className="text-xs text-gray-500 dark:text-gray-400">
                                                                                    Range: 0-100%
                                                                                </span>
                                                                                <span className={`text-xs font-medium ${item.persentase < 0 || item.persentase > 100 ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`}>
                                                                                    {item.persentase < 0 || item.persentase > 100 ? '⚠️ Invalid' : '✓ Valid'}
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            );
                                                        })}
                                                    </div>
                                                )}

                                                {bobotItems.length === 0 && (
                                                    <div className="text-center py-8 border-2 border-dashed border-purple-300 dark:border-purple-500/30 rounded-lg">
                                                        <div className="text-purple-400 dark:text-purple-500 mb-2">
                                                            <CalculatorIcon className="w-12 h-12 mx-auto opacity-50" />
                                                        </div>
                                                        <p className="text-purple-500 dark:text-purple-400">
                                                            Belum ada item bobot
                                                        </p>
                                                        <p className="text-sm text-purple-400 dark:text-purple-500 mt-1">
                                                            Klik "Tambah Item" untuk mulai mengatur bobot penilaian
                                                        </p>
                                                    </div>
                                                )}
                                            </div>
                                        )}
                                    </div>
                                </div>

                                {/* Section 6: Pengaturan Tambahan */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                        <ClockIcon className="w-5 h-5" />
                                        Pengaturan Tambahan
                                    </h3>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Jumlah Pertemuan (Total)
                                                <span className="text-red-500"> *</span>
                                            </label>
                                            <div className="relative">
                                                <input 
                                                    type="number"
                                                    min="1"
                                                    max="20"
                                                    className={getFieldClass('number_of_meetings')}
                                                    placeholder="16"
                                                    value={data.number_of_meetings}
                                                    onChange={e => setData('number_of_meetings', e.target.value)}
                                                    disabled={isFieldDisabled('number_of_meetings')}
                                                />
                                                {isFieldDisabled('number_of_meetings') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.number_of_meetings && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.number_of_meetings}</p>}
                                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                Jumlah total pertemuan dalam satu semester
                                            </p>
                                            {!completedSteps.dosenUtama && completedSteps.tipeAjar && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih dosen utama terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Kapasitas Kelas
                                            </label>
                                            <div className="relative">
                                                <input 
                                                    type="number"
                                                    min="1"
                                                    className={getFieldClass('kapasitas')}
                                                    placeholder="Contoh: 40 (kosongkan untuk tidak terbatas)"
                                                    value={data.kapasitas}
                                                    onChange={e => setData('kapasitas', e.target.value)}
                                                    disabled={isFieldDisabled('kapasitas')}
                                                />
                                                {isFieldDisabled('kapasitas') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.kapasitas && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.kapasitas}</p>}
                                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                Jumlah maksimal mahasiswa yang dapat diikuti dalam kelas
                                            </p>
                                            {!completedSteps.dosenUtama && completedSteps.tipeAjar && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih dosen utama terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Tanggal Mulai Efektif
                                            </label>
                                            <div className="relative">
                                                <input 
                                                    type="date"
                                                    className={getFieldClass('tanggal_mulai_efektif')}
                                                    value={data.tanggal_mulai_efektif}
                                                    onChange={e => setData('tanggal_mulai_efektif', e.target.value)}
                                                    min={today}
                                                    disabled={isFieldDisabled('tanggal_mulai_efektif')}
                                                />
                                                {isFieldDisabled('tanggal_mulai_efektif') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.tanggal_mulai_efektif && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.tanggal_mulai_efektif}</p>}
                                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                Tanggal mulai kelas berlaku
                                            </p>
                                            {!completedSteps.dosenUtama && completedSteps.tipeAjar && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih dosen utama terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Tanggal Akhir Efektif
                                            </label>
                                            <div className="relative">
                                                <input 
                                                    type="date"
                                                    className={getFieldClass('tanggal_akhir_efektif')}
                                                    value={data.tanggal_akhir_efektif}
                                                    onChange={e => setData('tanggal_akhir_efektif', e.target.value)}
                                                    min={data.tanggal_mulai_efektif || today}
                                                    disabled={isFieldDisabled('tanggal_akhir_efektif')}
                                                />
                                                {isFieldDisabled('tanggal_akhir_efektif') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.tanggal_akhir_efektif && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.tanggal_akhir_efektif}</p>}
                                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                Tanggal berakhir kelas berlaku
                                            </p>
                                            {!completedSteps.dosenUtama && completedSteps.tipeAjar && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih dosen utama terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Lingkup Kelas
                                            </label>
                                            <div className="relative">
                                                <div className="flex items-center gap-2">
                                                    <GlobeAltIcon className="w-4 h-4 text-purple-500" />
                                                    <select 
                                                        className={getDropdownClass('lingkup')}
                                                        value={data.lingkup}
                                                        onChange={e => setData('lingkup', e.target.value)}
                                                        disabled={isFieldDisabled('lingkup')}
                                                    >
                                                        <option value="">-- Pilih Lingkup --</option>
                                                        {lingkupOptions.map(option => (
                                                            <option key={option.value} value={option.value}>
                                                                {option.label}
                                                            </option>
                                                        ))}
                                                    </select>
                                                </div>
                                                {isFieldDisabled('lingkup') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.lingkup && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.lingkup}</p>}
                                            {!completedSteps.dosenUtama && completedSteps.tipeAjar && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih dosen utama terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                        
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-200">
                                                Mode Pembelajaran
                                            </label>
                                            <div className="relative">
                                                <div className="flex items-center gap-2">
                                                    <ComputerDesktopIcon className="w-4 h-4 text-purple-500" />
                                                    <select 
                                                        className={getDropdownClass('mode')}
                                                        value={data.mode}
                                                        onChange={e => setData('mode', e.target.value)}
                                                        disabled={isFieldDisabled('mode')}
                                                    >
                                                        <option value="">-- Pilih Mode --</option>
                                                        {modeOptions.map(option => (
                                                            <option key={option.value} value={option.value}>
                                                                {option.label}
                                                            </option>
                                                        ))}
                                                    </select>
                                                </div>
                                                {isFieldDisabled('mode') && (
                                                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <LockClosedIcon className="w-5 h-5 text-gray-400" />
                                                    </div>
                                                )}
                                            </div>
                                            {errors.mode && <p className="text-red-500 dark:text-red-400 text-sm mt-1 bg-red-50 dark:bg-red-900/30 px-2 py-1 rounded">{errors.mode}</p>}
                                            {!completedSteps.dosenUtama && completedSteps.tipeAjar && (
                                                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                                                    ⚠️ Pilih dosen utama terlebih dahulu
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    {/* Note tentang mahasiswa */}
                                    <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-500/30">
                                        <div className="flex items-start gap-3">
                                            <UserGroupIcon className="w-5 h-5 text-blue-600 mt-0.5" />
                                            <div>
                                                <h4 className="font-bold text-blue-800 dark:text-blue-300">
                                                    Mahasiswa akan ditambahkan nanti
                                                </h4>
                                                <p className="text-sm text-blue-600 dark:text-blue-400/80 mt-1">
                                                    Anda dapat menambahkan mahasiswa ke kelas ini setelah kelas dibuat melalui halaman edit.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {/* Summary Section */}
                                {filterKampus && (
                                    <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-100 dark:border-purple-500/30 rounded-xl p-5">
                                        <h4 className="font-bold text-purple-700 dark:text-purple-300 mb-2">Ringkasan Kelas</h4>
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Kampus:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {kampusList.find(k => k.id == filterKampus)?.nama_kampus || '-'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Prodi:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {prodiList.find(p => p.id == filterProdi)?.nama || '-'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Mata Kuliah:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {selectedMataKuliah?.nama_mk || '-'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Kode MK:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {selectedMataKuliah?.kode_mk || '-'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Tipe Ajar:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {data.tipe_ajar === 'solo' ? 'Solo (1 Dosen)' : data.tipe_ajar === 'campuran' ? 'Campuran (Multiple Dosen)' : '—'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Dosen Utama:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {dosenList.find(d => d.id == data.dosen_id)?.nama || '-'}
                                                    {data.dosen_id && ' ✅ Ditugaskan'}
                                                </span>
                                            </div>
                                            {data.tipe_ajar === 'campuran' && data.dosen_id_lainnya.length > 0 && (
                                                <div className="flex justify-between md:col-span-2">
                                                    <span className="text-purple-600 dark:text-purple-400">Dosen Lainnya:</span>
                                                    <span className="font-semibold text-gray-800 dark:text-white text-right">
                                                        {data.dosen_id_lainnya.map(id => {
                                                            const dosen = dosenList.find(d => d.id == id);
                                                            return `${dosen?.nama} ✅`;
                                                        }).filter(name => name).join(', ')}
                                                    </span>
                                                </div>
                                            )}
                                            {data.tipe_ajar === 'campuran' && pembagianItems.length > 0 && (
                                                <div className="md:col-span-2">
                                                    <span className="text-purple-600 dark:text-purple-400 block mb-1">Pembagian Ajar:</span>
                                                    <div className="text-gray-800 dark:text-white text-sm">
                                                        {pembagianItems.map((item, index) => (
                                                            <div key={index} className="flex justify-between py-1 border-b border-green-100 dark:border-green-500/20 last:border-0">
                                                                <span>
                                                                    {getDosenNama(item.dosen_id)} ✅
                                                                    {item.dosen_id == data.dosen_id && ' (Utama)'}
                                                                </span>
                                                                <span className="font-semibold text-green-600 dark:text-green-400">
                                                                    {getPembagianLabel(item.pembagian)}
                                                                </span>
                                                            </div>
                                                        ))}
                                                        <div className="flex justify-between pt-2 mt-2 border-t border-purple-200 dark:border-purple-500/20 font-bold">
                                                            <span>Total Pembagian</span>
                                                            <span className="text-purple-600 dark:text-purple-400">{pembagianItems.length} dari {1 + data.dosen_id_lainnya.length} dosen</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Tahun Akademik:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {tahunAkademikList.find(ta => ta.id == data.tahun_akademik_id)?.nama || '-'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Semester:</span>
                                                <span className="font-bold text-purple-600 dark:text-purple-400">
                                                    {data.semester || 'Belum dipilih'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Jumlah Pertemuan:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {data.number_of_meetings || 0} sesi
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Kapasitas:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {data.kapasitas || 'Tidak terbatas'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Lingkup:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {data.lingkup === '1' ? 'Internal' : data.lingkup === '2' ? 'External' : data.lingkup === '3' ? 'Campuran' : 'Belum dipilih'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Mode:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {data.mode === 'O' ? 'Online' : data.mode === 'F' ? 'Offline' : data.mode === 'M' ? 'Campuran' : 'Belum dipilih'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between">
                                                <span className="text-purple-600 dark:text-purple-400">Periode Efektif:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {data.tanggal_mulai_efektif || '-'} s/d {data.tanggal_akhir_efektif || '-'}
                                                </span>
                                            </div>
                                            <div className="flex justify-between md:col-span-2">
                                                <span className="text-purple-600 dark:text-purple-400">Bobot Penilaian:</span>
                                                <span className="font-semibold text-gray-800 dark:text-white">
                                                    {data.bobot_diatur ? 'Diatur Manual' : 'Default Sistem'}
                                                    {data.bobot_diatur && ` (${calculateTotalBobot()}%)`}
                                                </span>
                                            </div>
                                            {data.bobot_diatur && bobotItems.length > 0 && (
                                                <div className="md:col-span-2">
                                                    <div className="mt-2 p-2 bg-gray-50 dark:bg-dark-200 rounded-lg border border-purple-200 dark:border-purple-500/20">
                                                        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                                                            {bobotItems.map((item, index) => (
                                                                <div key={index} className="text-center">
                                                                    <div className="text-xs text-purple-600 dark:text-purple-400">{item.tipe}</div>
                                                                    <div className="font-bold text-purple-600 dark:text-purple-400">{item.persentase}%</div>
                                                                </div>
                                                            ))}
                                                        </div>
                                                        <div className="mt-2 pt-2 border-t border-purple-200 dark:border-purple-500/20 text-center">
                                                            <div className="text-sm font-bold">Total: {calculateTotalBobot()}%</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                )}
                            </form>

                            <div className="flex justify-between pt-6 border-t border-gray-200 dark:border-purple-500/20">
                                <Link
                                    href={route('akademik.kelas.index')}
                                    className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-gray-500 to-gray-600 text-white rounded-lg"
                                >
                                    <ArrowLeftIcon className="w-5 h-5" />
                                    Kembali
                                </Link>

                                <button
                                    type="submit"
                                    onClick={handleSubmit}
                                    disabled={processing || 
                                        !data.mata_kuliah_id || 
                                        !data.dosen_id || 
                                        !data.tahun_akademik_id || 
                                        !data.semester || 
                                        !data.nama_kelas || 
                                        !data.tipe_ajar ||
                                        (data.tipe_ajar === 'campuran' && !isPembagianValid) ||
                                        (data.bobot_diatur && calculateTotalBobot() !== 100)
                                    }
                                    className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg disabled:opacity-75 disabled:cursor-not-allowed"
                                >
                                    <CheckCircleIcon className="w-5 h-5" />
                                    {processing ? 'Menyimpan...' : 'Simpan Kelas'}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}