document.addEventListener('alpine:init', () => {
    Alpine.data('masterData', () => ({
        // 0. Init dijalankan sebelum inisialisasi
        init() {
        },
        // 1. Inisialisasi Start
        // multiple select
        dataAssay: [
            {
                idAssay: 1,
                namaAssay: 'Xn500'
            },
            {
                idAssay: 2,
                namaAssay: 'HGB'
            },
            {
                idAssay: 3,
                namaAssay: 'WBC'
            },
            {
                idAssay: 4,
                namaAssay: 'RBC'
            },
            {
                idAssay: 5,
                namaAssay: 'PLT'
            },
        ],
        dataAlat: [
            {
                idAlat: 1,
                namaAlat: 'Hema 01',
            },
            {
                idAlat: 2,
                namaAlat: 'Axsym',
            },
            {
                idAlat: 3,
                namaAlat: 'Cobas C311',
            },
        ],

        // multiple select
        dataMaster: [
            {
                idMaster: 1,
                kode: 'A04',
                namaPemeriksaan: 'Darah Lengkap',
                harga: '50.000',
                pemeriksaanStr: 'Xn500, HCB, WBC, RBC, PLT',
                dataDetail: [
                    {
                        idDetail: 1,
                        dataAlat: {
                            idAlat: 1,
                            namaAlat: 'Hema 01',
                        },
                        dataAssay: [
                            {
                                idAssay: 1,
                                namaAssay: 'Xn500'
                            },
                            {
                                idAssay: 2,
                                namaAssay: 'HGB'
                            },
                        ],
                    },
                    {
                        idDetail: 2,
                        dataAlat: {
                            idAlat: 3,
                            namaAlat: 'Cobas C311',
                        },
                        dataAssay: [
                            {
                                idAssay: 3,
                                namaAssay: 'WBC'
                            },
                            {
                                idAssay: 4,
                                namaAssay: 'RBC'
                            },
                            {
                                idAssay: 5,
                                namaAssay: 'PLT'
                            },
                        ],
                    }
                ],
            },
        ],
        showDialogAdd: false,
        kodeAdd: '',
        e_kode: '',
        namaAdd: '',
        e_nama: '',
        hargaAdd: '',
        e_harga: '',
        formAddArray: [],
        formEditArray: [],
        showDialogEdit: false,
        objForm: {
            nama: '',
            kode: '',
            harga: '',
            alat: {},
            assay: []
        },
        objFormEdit: {
            nama: '',
            kode: '',
            harga: '',
            alat: {},
            assay: []
        },
        // 1. Inisialisasi End
        // 2. Fungsi Start
        formDetail(action) {
            if (action === 'add') {
                const lastId = this.formAddArray.length;
                this.formAddArray.push({
                    idForm: lastId + 1,
                    openAlat: false,
                    dataAlatForm: this.dataAlat,
                    selectedAlat: {
                        idAlat: -1,
                        namaAlat: 'Alat'
                    },
                    selectedAssay: [],
                    searchAssay: "",
                    filterItemAssay: this.dataAssay,
                    dataAssayForm: this.dataAssay,
                    openAssayAdd: false,
                })
            } else {
                const lastId = this.formEditArray.length;
                this.formEditArray.push({
                    idForm: lastId + 1,
                    openAlat: false,
                    dataAlatForm: this.dataAlat,
                    selectedAlat: {
                        idAlat: -1,
                        namaAlat: 'Alat'
                    },
                    selectedAssay: [],
                    searchAssay: "",
                    filterItemAssay: this.dataAssay,
                    dataAssayForm: this.dataAssay,
                    openAssayAdd: false,
                })
            }
        },
        filterItemAssay(idx, formItem, action) {
            if (action === 'add') {
                let formId = formItem.idForm
                // console.log('formItem ',formItem)
                let targetForm = this.formAddArray.find(e => e.idForm === formId);

                if (targetForm) {
                    targetForm.openAssayAdd = true
                    let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
                    targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
                        item.namaAssay.toLowerCase().includes(searchTerm)
                    );

                    // targetForm.dataAssayForm = targetForm.filterItemAssay
                    console.log('Filtered Assay:', targetForm.filterItemAssay);
                } else {
                    console.warn('Tidak match ID Form nya');
                }
            } else {
                let formId = formItem.idForm
                // console.log('formItem ',formItem)
                let targetForm = this.formEditArray.find(e => e.idForm === formId);

                if (targetForm) {
                    targetForm.openAssayAdd = true
                    let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
                    targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
                        item.namaAssay.toLowerCase().includes(searchTerm)
                    );

                    // targetForm.dataAssayForm = targetForm.filterItemAssay
                    console.log('Filtered Assay:', targetForm.filterItemAssay);
                } else {
                    console.warn('Tidak match ID Form nya');
                }
            }
        },

        addItemAssayToForm(item, idForm, action) {
            if (action === 'add') {
                let form = this.formAddArray.find(f => f.idForm === idForm);

                if (form) {
                    let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
                    if (!exists) {
                        form.selectedAssay.push(item);
                    } else {
                        console.warn("Item sudah dipilih:", item);
                    }
                }
            } else {
                let form = this.formEditArray.find(f => f.idForm === idForm);

                if (form) {
                    let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
                    if (!exists) {
                        form.selectedAssay.push(item);
                    } else {
                        console.warn("Item sudah dipilih:", item);
                    }
                }
            }

        },

        removeItemAssayToForm(idForm, index, action) {
            if (action === 'add') {
                let form = this.formAddArray.find(f => f.idForm === idForm);
                if (!form) return;

                form.selectedAssay.splice(index, 1);
            } else {
                let form = this.formEditArray.find(f => f.idForm === idForm);
                if (!form) return;

                form.selectedAssay.splice(index, 1);
            }
        },
        closeDialog() {
            this.formAddArray = []
            this.kodeAdd = ''
            this.namaAdd = ''
            this.hargaAdd = ''
            this.objForm = {
                nama: '',
                kode: '',
                harga: '',
                dataAssay: [],
            }
            this.showDialogAdd = false
        },
        saveA() {
            this.objForm.alat = this.formAddArray.map(form => form.selectedAlat);
            this.objForm.assay = this.formAddArray.map(form => form.selectedAssay);

            console.log('Data yang disimpan:', this.objForm);
        },
        saveE() {
            this.objFormEdit.alat = this.formEditArray.map(form => form.selectedAlat);
            this.objFormEdit.assay = this.formEditArray.map(form => form.selectedAssay);

            console.log('Data Edit yang disimpan:', this.objFormEdit);
        },
        deleteData(){
           console.log('hapus record ke database')
        },
        onChangeInstrument(item, idForm, action) {
            if (action === 'add') {
                let form = this.formAddArray.find(f => f.idForm === idForm);
                if (!form) return;

                form.selectedAlat = {
                    idAlat: item.idAlat,
                    namaAlat: item.namaAlat
                }

                form.openAlat = false
            } else {
                let form = this.formEditArray.find(f => f.idForm === idForm);
                if (!form) return;

                form.selectedAlat = {
                    idAlat: item.idAlat,
                    namaAlat: item.namaAlat
                }

                form.openAlat = false
            }

        },
        onChangeNamaAdd() {
            this.objForm.nama = this.namaAdd;
        },
        onChangeNamaEdit() {
            this.objFormEdit.nama = this.e_nama;
        },
        onChangeKodeAdd() {
            this.objForm.kode = this.kodeAdd;
        },
        onChangeKodeEdit() {
            this.objFormEdit.kode = this.e_kode;
        },
        onChangeHargaAdd() {
            this.objForm.harga = this.hargaAdd;
        },
        onChangeHargaEdit() {
            this.objFormEdit.harga = this.e_harga;
        },
        openModalEdit(item) {
            console.log('edit item', item)
            this.e_harga = item.harga
            this.e_kode = item.kode
            this.e_nama = item.namaPemeriksaan

            this.formEditArray = [];
            item.dataDetail.forEach((detail, index) => {
                this.formEditArray.push({
                    idForm: detail.idDetail,
                    openAlat: false,
                    dataAlatForm: this.dataAlat,
                    selectedAlat: {
                        idAlat: detail.dataAlat.idAlat,
                        namaAlat: detail.dataAlat.namaAlat,
                    },
                    selectedAssay: detail.dataAssay,
                    searchAssay: "",
                    filterItemAssay: [...this.dataAssay],
                    dataAssayForm: [...this.dataAssay],
                    openAssayAdd: false,
                });
            })


            console.log('formEditArray', this.formEditArray);
            this.showDialogEdit = !this.showDialogEdit;
        },
        closeDialogEdit() {
            this.formEditArray = []
            this.e_harga = ''
            this.e_kode = ''
            this.e_nama = ''
            this.objFormEdit = {
                nama: '',
                kode: '',
                harga: '',
                dataAssay: [],
            }
            this.showDialogEdit = false
        },
        editMobilePage(item){
            var json = JSON.stringify(item);
            localStorage.setItem('itemEditMobile', json);
            window.location.href = "master_data_mobile_edit.html"
        },
        // 2. Fungsi End
    }))
})