document.addEventListener('alpine:init', () => {
    Alpine.data('order', () => ({
        // 0. Init dijalankan sebelum inisialisasi
        init() {
            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();

            // DOB
            this.selectedDayDOB = today.getDate();
            this.monthDOB = today.getMonth();
            this.yearDOB = today.getFullYear();
            this.datepickerValueDOB = this.formatDate(today);
            this.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: [],

        // DOB Variabless
        showDatepickerDOB: false,
        selectedDayDOB: null,
        datepickerValueDOB: '',
        monthDOB: 0,
        yearDOB: 0,
        no_of_daysDOB: [],
        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);
        },

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

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

        // multiple select
        showDialogAdd: false,
        showDialogEdit: false,
        loadingVerifikasi: false,
        isVerifikasiDone: false,
        MRN_SID: '',
        dataOrder: [
            {
                idOrder: 1,
                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: 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: '',
        datePickerValueAdd: '',
        sidAdd: '',
        nameAdd: '',
        dobAdd: '',
        pemeriksaanAdd: [],
        objForm: {
            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.assayCode = this.mrnAdd;
        },
        onChangeSidAdd() {
            this.objForm.sid = this.sidAdd;
        },
        onChangeNameAdd() {
            this.objForm.name = this.nameAdd;
        },
        onChangeInstrumentMobile(item) {
            this.openInstrumentSearchMobile = false;
            // this.selectedInstrument = item;
            this.selectedInstrument = { ...item };
        },
        openModalEdit(item) {
            this.selectedInstrumentEdit = {
                idInstrument: item.idInstrument,
                namaInstrument: item.namaInstrument
            }

            this.assayCodeEdit = item.assayCode
            this.decimalFontEdit = item.decimalFont
            this.formulaEdit = item.formula

            this.showDialogEdit = !this.showDialogEdit;
        },
        closeDialogEdit() {
            this.loadingVerifikasi = false;
            this.isErrorVerifikasi = false;
            this.isVerifikasiDone = false;
            this.hasilVerifikasi = ''
            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
    }))
})