function detail(id) {
                            var xhr = new XMLHttpRequest();
                            xhr.open('GET', '/pendaftar/detail?id=' + id, true);
                            xhr.onreadystatechange = function() {
                                if (xhr.readyState == 4 && xhr.status == 200) {
                                    var response = JSON.parse(xhr.responseText.trim());
                                    console.log("🚀 ~ detail ~ response:", response.maba_id)

                                    

                                    const properties = [
                                        'NamaLengkap', 'UserName', 'WANumber', 'NamaAsalSekolah', 'AsalKampus',
                                        'AsalProvinsi', 'TahunLulus', 'NIS', 'jenis', 'Kategori', 'Jenjang',
                                        'Periode', 'Prodi1', 'Prodi2', 'Prodi3', 'Keterangan'
                                    ];

                                    const propertiesOrtu = [
                                        'nama', 't4lahir', 'tglahir', 'pend', 'agama', 'phone', 'job', 'salary', 'alamat'
                                    ]

                                    const setElementValue = (id, value) => {
                                        const element = document.getElementById(id);
                                        element ? element.value = value || '-' : console.error(`Element with ID '${id}' not found`);
                                    }

                                    const setAllElementOrtu = (value) => {
                                        setElementValue(`nama_${value}`, response[`nama_${value}`]);
                                        setElementValue(`t4lahir_${value}`, response[`t4lahir_${value}`]);
                                        setElementValue(`tglahir_${value}`, response[`tglahir_${value}`]);
                                        setElementValue(`pend_${value}`, response[`pend_${value}`]);
                                        setElementValue(`agama_${value}`, response[`agama_${value}`]);
                                        setElementValue(`phone_${value}`, response[`phone_${value}`]);
                                        setElementValue(`job_${value}`, response[`job_${value}`]);
                                        setElementValue(`salary_${value}`, response[`salary_${value}`]);
                                        setElementValue(`alamat_${value}`, response[`alamat_${value}`]);
                                    }

                                    const setAllElement = (data) => {
                                        Object.keys(response).forEach(prop => {
                                            if (data.includes(prop)) {
                                                setElementValue(prop, response[prop]);
                                            }
                                        });
                                    }  

                                    const setElementFile = (response, path, container, imageFrame, fileFrame) => {
                                        var FileName = response;
                                        var FilePath = path;
                                        var Container = document.getElementById(container);
                                        var ImageFrame = document.getElementById(imageFrame);
                                        var FileFrame = document.getElementById(fileFrame);

                                        var Url = FilePath + FileName;
                                        var FileExtension = FileName?.split('.').pop().toLowerCase() || '';

                                        if (FileName) {
                                            if(FileExtension == 'pdf') {
                                            FileFrame.src = Url;
                                            Container.style.display = 'none';
                                            FileFrame.style.display = 'block';
                                            }
                                            else {
                                            ImageFrame.src = Url;
                                            Container.style.display = 'block';
                                            FileFrame.style.display = 'none';
                                            }
                                        }
                                        else {
                                            FileFrame.style.display = 'none';
                                            Container.style.display = 'block';
                                            ImageFrame.src = ''; 
                                        }
                                    }

                                    //data pribadi
                                    setAllElement(properties);
                                    //data orang tua
                                    setAllElementOrtu('ayah');
                                    setAllElementOrtu('ibu');
                                    //data dokumen
                                    setElementFile(response.photo, '/uploads/photo/', 'imageContainer', 'imageFrame', 'photoFileFrame');
                                    setElementFile(response.bukti_transfer, '/uploads/payment/', 'buktiBayarContainer', 'buktiBayarFrame', 'buktiBayarFileFrame');
                                    setElementFile(response.bukti_regis, '/uploads/payment/', 'buktiRegisContainer', 'buktiRegisFrame', 'buktiRegisFileFrame');
                                    setElementFile(response.berkas, '/uploads/docu/', 'docuContainer', 'docuFrame', 'docuFileFrame');
                                    setElementFile(response.berkas_regis, '/uploads/docu/', 'docuRegisContainer', 'docuRegisFrame', 'docuRegisFileFrame');


                                    var detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
                                    detailModal.show();
                                }
                            };
                            xhr.send();
                        }