document.addEventListener('alpine:init', () => {
    Alpine.data('masterDataPageMobileAdd', () => ({
        // 0. Init dijalankan sebelum inisialisasi
        init() {

        },
        // 1. Inisialisasi Start
        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',
            },
        ],
        kodeAdd: '',
        namaAdd: '',
        hargaAdd: '',
        formAddArray: [],
        objForm: {
            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,
                })
            }
        },
        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');
                }
            }
        },

        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);
                    }
                }
            }
        },

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

                form.selectedAssay.splice(index, 1);
            }
        },
        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);
        },
        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
            }
        },
        onChangeNamaAdd() {
            this.objForm.nama = this.namaAdd;
        },
        onChangeKodeAdd() {
            this.objForm.kode = this.kodeAdd;
        },
        onChangeHargaAdd() {
            this.objForm.harga = this.hargaAdd;
        },
    }))
})