document.addEventListener('alpine:init', () => {
    Alpine.data('orderMobileEdit', () => ({
        // 0. Init dijalankan sebelum inisialisasi
        init() {
            if (localStorage.getItem('itemEditMobile') != null) {
                let orderData = JSON.parse(localStorage.getItem('itemEditMobile'));
                console.log("itemEditMobile ", orderData);

                // Set Order Date
                let selectedDate = new Date(orderData.date.split('/').reverse().join('-'));
                this.selectedDayOD = selectedDate.getDate();
                this.monthOD = selectedDate.getMonth();
                this.yearOD = selectedDate.getFullYear();
                this.datepickerValueOD = this.formatDate(selectedDate);
                this.getNoOfDaysOD();

                // Set MRN
                this.mrnAdd = orderData.mrn;

                // Set SID
                this.sidAdd = orderData.sid;

                // Set Name
                this.nameAdd = orderData.name;

                // Set DOB
                let selectedDateDOB = new Date(orderData.dob.split('/').reverse().join('-'));
                this.selectedDayDOB = selectedDateDOB.getDate();
                this.monthDOB = selectedDateDOB.getMonth();
                this.yearDOB = selectedDateDOB.getFullYear();
                this.datepickerValueDOB = this.formatDate(selectedDateDOB);
                this.getNoOfDaysDOB();

                // Set Pemeriksaan
                this.selectedPemeriksaan = [...orderData.dataPemeriksaan];

                // Pastikan filtered list pemeriksaan ada
                this.filteredPemeriksaan = [...this.dataPemeriksaan];
            }

            let today = new Date();
            this.selectedDaySD = today.getDate();
            this.month = today.getMonth();
            this.year = today.getFullYear();
            // this.datepickerValueSD = this.formatDate(today);
            this.datepickerValueSD = 'Start Date'
            this.getNoOfDays();
            this.selectedDaySD = today.getDate();

            // End Date Functions
            this.selectedDayED = today.getDate();
            this.monthED = today.getMonth();
            this.yearED = today.getFullYear();
            this.datepickerValueED = 'End Date';
            this.getNoOfDaysED();

            // Order Date
            this.selectedDayOD = today.getDate();
            this.monthOD = today.getMonth();
            this.yearOD = today.getFullYear();
            this.datepickerValueOD = this.formatDate(today);
            this.getNoOfDaysOD();

            this.e_selectedDayOD = today.getDate();
            this.e_monthOD = today.getMonth();
            this.e_yearOD = today.getFullYear();
            this.e_datepickerValueOD = this.formatDate(today);
            this.e_getNoOfDaysOD();

            // DOB
            this.selectedDayDOB = today.getDate();
            this.monthDOB = today.getMonth();
            this.yearDOB = today.getFullYear();
            this.datepickerValueDOB = this.formatDate(today);
            this.getNoOfDaysDOB();

            this.e_selectedDayDOB = today.getDate();
            this.e_monthDOB = today.getMonth();
            this.e_yearDOB = today.getFullYear();
            this.e_datepickerValueDOB = this.formatDate(today);
            this.e_getNoOfDaysDOB();

            // multiple pemeriksaan add
            this.filteredPemeriksaan = [...this.dataPemeriksaan];

        },
        // 1. Inisialisasi Start
        // datepicker
        selectedDaySD: null,
        showDatepickerSD: false,
        datepickerValueSD: '',
        month: 0,
        year: 0,
        no_of_days: [],
        blankdays: [],

        selectedDayED: null,
        showDatepickerED: false,
        datepickerValueED: '',
        monthED: 0,
        yearED: 0,
        no_of_daysED: [],
        blankdaysED: [],

        // Order Date Variables
        showDatepickerOD: false,
        selectedDayOD: null,
        datepickerValueOD: '',
        monthOD: 0,
        yearOD: 0,
        no_of_daysOD: [],
        blankdaysOD: [],

        e_showDatepickerOD: false,
        e_selectedDayOD: null,
        e_datepickerValueOD: '',
        e_monthOD: 0,
        e_yearOD: 0,
        e_no_of_daysOD: [],
        e_blankdaysOD: [],

        // DOB Variabless
        showDatepickerDOB: false,
        selectedDayDOB: null,
        datepickerValueDOB: '',
        monthDOB: 0,
        yearDOB: 0,
        no_of_daysDOB: [],
        blankdaysDOB: [],

        e_showDatepickerDOB: false,
        e_selectedDayDOB: null,
        e_datepickerValueDOB: '',
        e_monthDOB: 0,
        e_yearDOB: 0,
        e_no_of_daysDOB: [],
        e_blankdaysDOB: [],

        MONTH_NAMES: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        DAYS: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

        formatDate(date) {
            let day = date.getDate().toString().padStart(2, '0');
            let month = (date.getMonth() + 1).toString().padStart(2, '0');
            let year = date.getFullYear();
            return `${day}/${month}/${year}`;
        },

        prevMonth() {
            if (this.month === 0) {
                this.year--;
                this.month = 11;
            } else {
                this.month--;
            }
            this.getNoOfDays();
        },

        nextMonth() {
            if (this.month === 11) {
                this.year++;
                this.month = 0;
            } else {
                this.month++;
            }
            this.getNoOfDays();
        },

        getDateValue(date) {
            let selectedDate = new Date(this.year, this.month, date);
            this.selectedDaySD = date; // Simpan tanggal yang dipilih
            this.datepickerValueSD = this.formatDate(selectedDate);
            this.showDatepickerSD = false;
        },

        isToday(date) {
            let today = new Date();
            let d = new Date(this.year, this.month, date);
            return today.toDateString() === d.toDateString();
        },

        isSelected(date) {
            return this.selectedDaySD === date;
        },

        getNoOfDays() {
            let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
            let dayOfWeek = new Date(this.year, this.month, 1).getDay();
            this.blankdays = Array.from({ length: dayOfWeek }, (_, i) => i);
            this.no_of_days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
        },

        setDate(date) {
            let selectedDate = new Date(this.year, this.month, date);
            this.selectedDaySD = date;
            this.datepickerValueSD = this.formatDate(selectedDate);
            this.showDatepickerSD = false;
        },

        // End Date Functions
        prevMonthED() {
            if (this.monthED === 0) {
                this.yearED--;
                this.monthED = 11;
            } else {
                this.monthED--;
            }
            this.getNoOfDaysED();
        },

        nextMonthED() {
            if (this.monthED === 11) {
                this.yearED++;
                this.monthED = 0;
            } else {
                this.monthED++;
            }
            this.getNoOfDaysED();
        },

        setDateED(date) {
            let selectedDate = new Date(this.yearED, this.monthED, date);
            this.selectedDayED = date;
            this.datepickerValueED = this.formatDate(selectedDate);
            this.showDatepickerED = false;
        },

        isSelectedED(date) {
            return this.selectedDayED === date;
        },

        getNoOfDaysED() {
            let daysInMonth = new Date(this.yearED, this.monthED + 1, 0).getDate();
            let dayOfWeek = new Date(this.yearED, this.monthED, 1).getDay();
            this.blankdaysED = Array.from({ length: dayOfWeek }, (_, i) => i);
            this.no_of_daysED = Array.from({ length: daysInMonth }, (_, i) => i + 1);
        },

        // Order Date Functions
        prevMonthOD() {
            if (this.monthOD === 0) {
                this.yearOD--;
                this.monthOD = 11;
            } else {
                this.monthOD--;
            }
            this.getNoOfDaysOD();
        },

        nextMonthOD() {
            if (this.monthOD === 11) {
                this.yearOD++;
                this.monthOD = 0;
            } else {
                this.monthOD++;
            }
            this.getNoOfDaysOD();
        },

        setDateOD(date) {
            let selectedDate = new Date(this.yearOD, this.monthOD, date);
            this.selectedDayOD = date;
            this.datepickerValueOD = this.formatDate(selectedDate);
            this.showDatepickerOD = false;
        },

        isSelectedOD(date) {
            return this.selectedDayOD === date;
        },

        getNoOfDaysOD() {
            let daysInMonth = new Date(this.yearOD, this.monthOD + 1, 0).getDate();
            let dayOfWeek = new Date(this.yearOD, this.monthOD, 1).getDay();
            this.blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
            this.no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
        },

        // edit order date
        e_prevMonthOD() {
            if (this.e_monthOD === 0) {
                this.e_yearOD--;
                this.e_monthOD = 11;
            } else {
                this.e_monthOD--;
            }
            this.e_getNoOfDaysOD();
        },

        e_nextMonthOD() {
            if (this.e_monthOD === 11) {
                this.e_yearOD++;
                this.e_monthOD = 0;
            } else {
                this.e_monthOD++;
            }
            this.e_getNoOfDaysOD();
        },

        e_setDateOD(date) {
            let selectedDate = new Date(this.e_yearOD, this.e_monthOD, date);
            this.e_selectedDayOD = date;
            this.e_datepickerValueOD = this.formatDate(selectedDate);
            this.e_showDatepickerOD = false;
        },

        e_isSelectedOD(date) {
            return this.e_selectedDayOD === date;
        },

        e_getNoOfDaysOD() {
            let daysInMonth = new Date(this.e_yearOD, this.e_monthOD + 1, 0).getDate();
            let dayOfWeek = new Date(this.e_yearOD, this.e_monthOD, 1).getDay();
            this.e_blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
            this.e_no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
        },

        // Dob Functions
        prevMonthDOB() {
            if (this.monthDOB === 0) {
                this.yearDOB--;
                this.monthDOB = 11;
            } else {
                this.monthDOB--;
            }
            this.getNoOfDaysDOB();
        },

        nextMonthDOB() {
            if (this.monthDOB === 11) {
                this.yearDOB++;
                this.monthDOB = 0;
            } else {
                this.monthDOB++;
            }
            this.getNoOfDaysDOB();
        },

        setDateDOB(date) {
            let selectedDate = new Date(this.yearDOB, this.monthDOB, date);
            this.selectedDayDOB = date;
            this.datepickerValueDOB = this.formatDate(selectedDate);
            this.showDatepickerDOB = false;
        },

        isSelectedDOB(date) {
            return this.selectedDayDOB === date;
        },

        getNoOfDaysDOB() {
            let daysInMonth = new Date(this.yearDOB, this.monthDOB + 1, 0).getDate();
            let dayOfWeek = new Date(this.yearDOB, this.monthDOB, 1).getDay();
            this.blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
            this.no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
        },

        // edit dob
        e_prevMonthDOB() {
            if (this.e_monthDOB === 0) {
                this.e_yearDOB--;
                this.e_monthDOB = 11;
            } else {
                this.e_monthDOB--;
            }
            this.e_getNoOfDaysDOB();
        },

        e_nextMonthDOB() {
            if (this.e_monthDOB === 11) {
                this.e_yearDOB++;
                this.e_monthDOB = 0;
            } else {
                this.e_monthDOB++;
            }
            this.e_getNoOfDaysDOB();
        },

        e_setDateDOB(date) {
            let selectedDate = new Date(this.e_yearDOB, this.e_monthDOB, date);
            this.e_selectedDayDOB = date;
            this.e_datepickerValueDOB = this.formatDate(selectedDate);
            this.e_showDatepickerDOB = false;
        },

        e_isSelectedDOB(date) {
            return this.e_selectedDayDOB === date;
        },

        e_getNoOfDaysDOB() {
            let daysInMonth = new Date(this.e_yearDOB, this.e_monthDOB + 1, 0).getDate();
            let dayOfWeek = new Date(this.e_yearDOB, this.e_monthDOB, 1).getDay();
            this.e_blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
            this.e_no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
        },

        // datepicker

        // multiple select
        openPemeriksaanAdd: false,
        searchPemeriksaan: "",
        selectedPemeriksaan: [],
        dataPemeriksaan: [
            {
                idPemeriksaan: 1,
                namaPemeriksaan: 'SGOT'
            },
            {
                idPemeriksaan: 2,
                namaPemeriksaan: 'SGPT'
            },
            {
                idPemeriksaan: 3,
                namaPemeriksaan: 'GLOB'
            },
            {
                idPemeriksaan: 4,
                namaPemeriksaan: 'TBIL'
            },
            {
                idPemeriksaan: 5,
                namaPemeriksaan: 'Darah Lengkap'
            },
        ],
        filteredItemPemeriksaan: [],
        filterItemPemeriksaan() {
            this.filteredPemeriksaan = this.dataPemeriksaan.filter(item =>
                item.namaPemeriksaan.toLowerCase().includes(this.searchPemeriksaan.toLowerCase())
            );
        },

        addItemPemeriksaan(item) {
            if (!this.selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
                this.selectedPemeriksaan.push(item);
                this.objForm.pemeriksaan.push(item);
            }
            this.searchPemeriksaan = "";
            this.filterItemPemeriksaan();
        },

        removeItemPemeriksaan(index) {
            this.selectedPemeriksaan.splice(index, 1);
        },

        // edit multiple
        openPemeriksaanEdit: false,
        e_searchPemeriksaan: "",
        e_selectedPemeriksaan: [],
        e_filteredItemPemeriksaan: [],
        e_filterItemPemeriksaan() {
            if (this.e_searchPemeriksaan.trim() === '') {
                this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
            } else {
                this.e_filteredPemeriksaan = this.dataPemeriksaan.filter((item) =>
                    item.namaPemeriksaan.toLowerCase().includes(this.e_searchPemeriksaan.toLowerCase())
                );
            }
        },

        e_ItemPemeriksaan(item) {
            if (!this.e_selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
                this.e_selectedPemeriksaan.push(item);
                this.objFormEdit.pemeriksaan.push(item);
            }
            this.e_searchPemeriksaan = "";
            this.e_filterItemPemeriksaan();
        },

        e_removeItemPemeriksaan(index) {
            this.e_selectedPemeriksaan.splice(index, 1);
        },

        // multiple select

        showDialogAdd: false,
        showDialogEdit: false,
        loadingVerifikasi: false,
        isVerifikasiDone: false,
        MRN_SID: '',
        dataOrder: [
            {
                idOrder: 1,
                date: '01/03/2025',
                mrn: 'P.2024.205.1',
                sid: 'SRK1234SK',
                name: 'Joko Santoso',
                dob: '09/05/2008',
                pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
                dataPemeriksaan: [
                    {
                        idPemeriksaan: 1,
                        namaPemeriksaan: 'SGOT'
                    },
                    {
                        idPemeriksaan: 2,
                        namaPemeriksaan: 'SGPT'
                    },
                    {
                        idPemeriksaan: 3,
                        namaPemeriksaan: 'GLOB'
                    },
                    {
                        idPemeriksaan: 4,
                        namaPemeriksaan: 'TBIL'
                    },
                ],
            },
            {
                idOrder: 2,
                date: '02/03/2025',
                mrn: 'P.2024.205.1',
                sid: 'SRK1234SK',
                name: 'Joko Santoso',
                dob: '01/03/2000',
                pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
                dataPemeriksaan: [
                    {
                        idPemeriksaan: 1,
                        namaPemeriksaan: 'SGOT'
                    },
                    {
                        idPemeriksaan: 2,
                        namaPemeriksaan: 'SGPT'
                    },
                    {
                        idPemeriksaan: 3,
                        namaPemeriksaan: 'GLOB'
                    },
                    {
                        idPemeriksaan: 4,
                        namaPemeriksaan: 'TBIL'
                    },
                ],
            },
            {
                idOrder: 3,
                date: '02/03/2025',
                mrn: 'P.2024.205.1',
                sid: 'SRK1234SK',
                name: 'Joko Santoso',
                dob: '01/03/2000',
                pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL, Darah Lengkap',
                dataPemeriksaan: [
                    {
                        idPemeriksaan: 1,
                        namaPemeriksaan: 'SGOT'
                    },
                    {
                        idPemeriksaan: 2,
                        namaPemeriksaan: 'SGPT'
                    },
                    {
                        idPemeriksaan: 3,
                        namaPemeriksaan: 'GLOB'
                    },
                    {
                        idPemeriksaan: 4,
                        namaPemeriksaan: 'TBIL'
                    },
                    {
                        idPemeriksaan: 5,
                        namaPemeriksaan: 'Darah Lengkap'
                    },
                ],
            },
        ],
        selectedInstrument: {
            idInstrument: -1,
            namaInstrument: 'Instrument'
        },
        openInstrument: false,
        openInstrumentSearchMobile: false,
        openInstrumentSearch: false,
        dataInstrument: [
            {
                idInstrument: 1,
                namaInstrument: 'Hema 01',
            },
            {
                idInstrument: 2,
                namaInstrument: 'Axsym',
            },
            {
                idInstrument: 3,
                namaInstrument: 'Cobas C311',
            },
        ],

        mrnAdd: '',
        e_mrn: '',
        datePickerValueAdd: '',
        sidAdd: '',
        e_sid: '',
        nameAdd: '',
        e_name: '',
        dobAdd: '',
        pemeriksaanAdd: [],
        objForm: {
            date: '',
            mrn: '',
            sid: '',
            name: '',
            dob: '',
            pemeriksaan: [],
        },
        objFormEdit: {
            date: '',
            mrn: '',
            sid: '',
            name: '',
            dob: '',
            pemeriksaan: [],
        },
        // 1. Inisialisasi End
        // 2. Fungsi Start
        closeDialog() {
            this.pemeriksaanAdd = []
            this.filteredItemPemeriksaan = []
            this.selectedPemeriksaan = []
            this.mrnAdd = ''
            this.datePickerValueAdd = ''
            this.sidAdd = ''
            this.nameAdd = ''
            this.dobAdd = ''
            this.objForm = {
                date: '',
                mrn: '',
                sid: '',
                name: '',
                dob: '',
                pemeriksaan: [],
            }
            this.showDialogAdd = false
        },
        onChangeInstrumentSearch(item) {
            this.openInstrumentSearch = false;
            this.selectedInstrument = item;
        },
        onChangeInstrument(item) {
            this.openInstrument = false;
            this.selectedInstrumentAdd = item;
        },
        onChangeInstrumentEdit(item) {
            this.openInstrument = false;
            this.selectedInstrumentEdit = item;
        },
        onChangeMrnAdd() {
            this.objForm.mrn = this.mrnAdd;
        },
        onChangeMrnEdit() {
            this.objFormEdit.mrn = this.e_mrn;
        },
        onChangeSidAdd() {
            this.objForm.sid = this.sidAdd;
        },
        onChangeSidEdit() {
            this.objFormEdit.sid = this.e_sid;
        },
        onChangeNameAdd() {
            this.objForm.name = this.nameAdd;
        },
        onChangeNameEdit() {
            this.objFormEdit.name = this.e_name;
        },
        onChangeInstrumentMobile(item) {
            this.openInstrumentSearchMobile = false;
            // this.selectedInstrument = item;
            this.selectedInstrument = { ...item };
        },
        openModalEdit(item) {
            // Order date edit
            let selectedDate = new Date(item.date.split('/').reverse().join('-'));
            this.e_selectedDayOD = selectedDate.getDate();
            this.e_monthOD = selectedDate.getMonth();
            this.e_yearOD = selectedDate.getFullYear();
            this.e_datepickerValueOD = this.formatDate(selectedDate);
            this.e_getNoOfDaysOD();

            // mrn
            this.e_mrn = item.mrn

            // sid
            this.e_sid = item.sid

            // name
            this.e_name = item.name

            // DOB edit
            let selectedDateDOB = new Date(item.dob.split('/').reverse().join('-'));
            this.e_selectedDayDOB = selectedDateDOB.getDate();
            this.e_monthDOB = selectedDateDOB.getMonth();
            this.e_yearDOB = selectedDateDOB.getFullYear();
            this.e_datepickerValueDOB = this.formatDate(selectedDateDOB);
            this.e_getNoOfDaysDOB();

            // multiple pemeriksaan
            this.e_selectedPemeriksaan = [...item.dataPemeriksaan];
            this.e_filteredPemeriksaan = [...this.dataPemeriksaan];

            this.showDialogEdit = !this.showDialogEdit;
        },
        closeDialogEdit() {
            this.showDialogEdit = !this.showDialogEdit;
        },
        editMobilePage(item) {
            var json = JSON.stringify(item);
            localStorage.setItem('itemEditMobile', json)
            window.location.href = "assay_format_mobile_edit.html";
        },
        // 2. Fungsi End
    }))
})