sindhu/xport-tailwind-alpine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

step 42 : order add mobile

Browse Source
This commit is contained in:
sindhu
2025-03-24 10:41:14 +07:00
parent aae45861e3
commit e726e20698
3 changed files with 949 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

674
v1/js/order_mobile_add.js Normal file
View File

@@ -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
}))
})

2
v1/order.html
View File

@@ -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>

274
v1/order_mobile_add.html Normal file
View File

@@ -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>