From e726e206980b995a7cbc7f5f9548af8ecfbbb95e Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Mon, 24 Mar 2025 10:41:14 +0700
Subject: [PATCH] step 42 : order add mobile

---
 v1/js/order_mobile_add.js | 674 ++++++++++++++++++++++++++++++++++++++
 v1/order.html             |   2 +-
 v1/order_mobile_add.html  | 274 ++++++++++++++++
 3 files changed, 949 insertions(+), 1 deletion(-)
 create mode 100644 v1/js/order_mobile_add.js
 create mode 100644 v1/order_mobile_add.html

diff --git a/v1/js/order_mobile_add.js b/v1/js/order_mobile_add.js
new file mode 100644
index 0000000..7403934
--- /dev/null
+++ b/v1/js/order_mobile_add.js
@@ -0,0 +1,674 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('orderMobileAdd', () => ({
+        // 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();
+
+            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
+    }))
+})
\ No newline at end of file
diff --git a/v1/order.html b/v1/order.html
index 5d224ef..3734a71 100644
--- a/v1/order.html
+++ b/v1/order.html
@@ -910,7 +910,7 @@
         <!-- Kiri Mobile -->
         <div class="bg-[#F2F9FF] h-5 flex justify-between space-x-2 lg:hidden">
             <h2 class="text-black/87 font-medium text-xl mb-4">Order</h2>
-            <a href="assay_format_mobile_add.html">
+            <a href="order_mobile_add.html">
                 <span class="material-symbols-outlined text-[#2196F3]">add</span>
             </a>
         </div>
diff --git a/v1/order_mobile_add.html b/v1/order_mobile_add.html
new file mode 100644
index 0000000..013bcb3
--- /dev/null
+++ b/v1/order_mobile_add.html
@@ -0,0 +1,274 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Order XPORT</title>
+    <!-- tailwind cdn -->
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <!-- alpine cdn -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
+    <!-- material Symbols -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
+</head>
+
+<body class="bg-white h-screen flex flex-col">
+    <!-- appbar -->
+    <div class="bg-white h-15 flex items-center justify-start px-6">
+        <a href="order.html">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black/87" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+        </a>
+        <h3 class="font-medium text-xl text-black/87 ml-3">Add</h3>
+    </div>
+    <!-- appbar -->
+
+    <!-- konten utama -->
+    <div class="flex-1 flex flex-col lg:flex-row px-5 pt-6 overflow-auto h-[calc(100vh-60px)]" x-data="orderMobileAdd">
+        <div class="relative w-full lg:hidden">
+            <!-- Order Date -->
+            <label for="Order Date"
+                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                <input type="text" id="Order Date" autocomplete="off" x-model="datepickerValueOD"
+                    @click="showDatepickerOD = true" readonly
+                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                    placeholder="Order Date" />
+
+                <span
+                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                    Order Date
+                </span>
+            </label>
+
+            <!-- Datepicker Modal for Order Date -->
+            <div x-show="showDatepickerOD"
+                class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
+                @click.away="showDatepickerOD = false">
+                <div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
+                    <div class="flex justify-between items-center mb-4">
+                        <button @click="prevMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
+                            <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M15 19l-7-7 7-7" />
+                            </svg>
+                        </button>
+                        <span class="text-lg font-bold text-gray-800"
+                            x-text="MONTH_NAMES[monthOD] + ' ' + yearOD"></span>
+                        <button @click="nextMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
+                            <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M9 5l7 7-7 7" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800 mb-2">
+                        <template x-for="day in DAYS">
+                            <div x-text="day"></div>
+                        </template>
+                    </div>
+                    <div class="grid grid-cols-7 text-sm">
+                        <template x-for="date in no_of_daysOD">
+                            <div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
+                                :class="{'bg-blue-500 text-white': isSelectedOD(date)}" @click="setDateOD(date)">
+                                <span x-text="date"></span>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="mt-4 text-center">
+                        <button @click="showDatepickerOD = false"
+                            class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
+                            Tutup
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+
+            <!-- MRN -->
+            <label for="MRN"
+                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                <input type="text" id="MRN" autocomplete="off" x-model="mrnAdd" @change="onChangeMrnAdd()"
+                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                    placeholder="MRN" />
+
+                <span
+                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                    MRN
+                </span>
+            </label>
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+
+            <!-- SID -->
+            <label for="SID"
+                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                <input type="text" id="SID" autocomplete="off" x-model="sidAdd" @change="onChangeSidAdd()"
+                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                    placeholder="SID" />
+
+                <span
+                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                    SID
+                </span>
+            </label>
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+
+            <!-- Name -->
+            <label for="Name"
+                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                <input type="text" id="Name" autocomplete="off" x-model="nameAdd" @change="onChangeNameAdd()"
+                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                    placeholder="Name" />
+
+                <span
+                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                    Name
+                </span>
+            </label>
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+            
+            <!-- DOB -->
+            <label for="DOB"
+                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                <input type="text" id="DOB" autocomplete="off" x-model="datepickerValueDOB"
+                    @click="showDatepickerDOB = true" readonly
+                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                    placeholder="DOB" />
+
+                <span
+                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                    DOB
+                </span>
+            </label>
+
+            <!-- Datepicker Modal for DOB -->
+            <div x-show="showDatepickerDOB"
+                class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
+                @click.away="showDatepickerDOB = false">
+                <div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
+                    <div class="flex justify-between items-center mb-4">
+                        <button @click="prevMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
+                            <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M15 19l-7-7 7-7" />
+                            </svg>
+                        </button>
+                        <span class="text-lg font-bold text-gray-800"
+                            x-text="MONTH_NAMES[monthDOB] + ' ' + yearDOB"></span>
+                        <button @click="nextMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
+                            <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M9 5l7 7-7 7" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800 mb-2">
+                        <template x-for="day in DAYS">
+                            <div x-text="day"></div>
+                        </template>
+                    </div>
+                    <div class="grid grid-cols-7 text-sm">
+                        <template x-for="date in no_of_daysDOB">
+                            <div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
+                                :class="{'bg-blue-500 text-white': isSelectedDOB(date)}" @click="setDateDOB(date)">
+                                <span x-text="date"></span>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="mt-4 text-center">
+                        <button @click="showDatepickerDOB = false"
+                            class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
+                            Tutup
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+
+            <!-- pemeriksaan -->
+            <label for="Pemeriksaan"
+                class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                <input type="text" id="Pemeriksaan" autocomplete="off" x-model="searchPemeriksaan"
+                    @click="openPemeriksaanAdd = true" @input="filterItemPemeriksaan()"
+                    class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                    placeholder="Cari Pemeriksaan" />
+
+                <span
+                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                    Cari Pemeriksaan
+                </span>
+            </label>
+
+            <div>
+                <!-- List Dipilih -->
+                <div class="flex flex-wrap gap-2 mt-2">
+                    <template x-for="(item, index) in selectedPemeriksaan" :key="item.idPemeriksaan">
+                        <div class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
+                            <span x-text="item.namaPemeriksaan"></span>
+                            <button @click="removeItemPemeriksaan(index)" class="ml-2 focus:outline-none">
+                                <svg class="w-4 h-4 text-blue-500 hover:text-blue-700" fill="none" stroke="currentColor"
+                                    stroke-width="2" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12">
+                                    </path>
+                                </svg>
+                            </button>
+                        </div>
+                    </template>
+                </div>
+
+                <!-- Dropdown List -->
+                <div x-show="openPemeriksaanAdd" @click.away="openPemeriksaanAdd = false"
+                    class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
+                    <template x-if="filteredPemeriksaan.length === 0">
+                        <div class="p-2 text-gray-500 text-sm text-center">Tidak ada hasil</div>
+                    </template>
+                    <template x-for="item in filteredPemeriksaan" :key="item.idPemeriksaan">
+                        <div @click="addItemPemeriksaan(item)"
+                            class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
+                            :class="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan) ? 'bg-yellow-100 text-yellow-800' : ''">
+                            <span x-text="item.namaPemeriksaan"></span>
+                            <svg x-show="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)"
+                                class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" stroke-width="2"
+                                viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7">
+                                </path>
+                            </svg>
+                        </div>
+                    </template>
+                </div>
+            </div>
+
+            <!-- space 20 -->
+            <div class="mb-5 lg:mb-0"></div>
+        </div>
+
+        <div class="fixed bottom-0 left-0 w-full bg-white h-15 flex items-center align-middle shadow-custom p-4">
+            <button @click="save()"
+                class="w-full px-4 py-2 rounded-[4px] transition duration-200 font-bold text-sm uppercase" :class="objForm.isValidForm 
+                    ? 'bg-[#1976D2] text-white hover:bg-[#2196F3] hover:text-white' 
+                    : 'bg-[#0000001F] text-[#00000042] cursor-not-allowed'" :disabled="!objForm.isValidForm">
+                Save
+            </button>
+        </div>
+
+    </div>
+    <!-- konten utama -->
+
+    <script src="js/order_mobile_add.js"></script>
+</body>
+
+</html>
\ No newline at end of file