107 lines
12 KiB
PHP
107 lines
12 KiB
PHP
<div id="tab-opd-condition" class="tab-content hidden space-y-4 md:space-y-6">
|
|
<form class="opd-filter-form card-premium p-4 bg-gradient-to-r from-slate-50 to-white border-l-4 border-l-indigo-500 shadow-sm flex flex-col gap-3.5 mb-6">
|
|
<input type="hidden" name="filter_type" value="date">
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">การนัดหมาย</label><select name="appoint" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none">
|
|
<option value="">ทั้งหมด</option>
|
|
<option value="1">มาตามนัด</option>
|
|
<option value="2">ไม่มาตามนัด</option>
|
|
<option value="3">Walk in</option>
|
|
</select></div>
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">จากจุด (Step)</label><select name="step_from" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none">
|
|
<option>ยื่นบัตร</option>
|
|
<option>ซักประวัติ</option>
|
|
<option>รอพบแพทย์</option>
|
|
<option>แพทย์ตรวจ</option>
|
|
<option>รับยากลับบ้าน</option>
|
|
</select></div>
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">ถึงจุด (Step)</label><select name="step_to" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none">
|
|
<option>รับยากลับบ้าน</option>
|
|
<option>แพทย์ตรวจ</option>
|
|
<option>รอพบแพทย์</option>
|
|
</select></div>
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">คลินิก</label><select name="clinic_id" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none">
|
|
<option value="">ทั้งหมด</option>
|
|
<option value="130">อายุรกรรม</option>
|
|
<option value="102">ศัลยกรรม</option>
|
|
</select></div>
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">ช่วงเวลา</label><select name="time_period" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none">
|
|
<option value="">ทั้งหมด</option>
|
|
<option value="morning">เช้า</option>
|
|
<option value="afternoon">บ่าย</option>
|
|
</select></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 items-end">
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">สถานะ Lab</label><select name="lab_status" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none">
|
|
<option value="">ทั้งหมด</option>
|
|
<option value="1">มี Lab</option>
|
|
<option value="0">ไม่มี Lab</option>
|
|
</select></div>
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">สถานะ X-ray</label><select name="xray_status" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none">
|
|
<option value="">ทั้งหมด</option>
|
|
<option value="1">มี X-ray</option>
|
|
<option value="0">ไม่มี X-ray</option>
|
|
</select></div>
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">ตั้งแต่วันที่</label><input type="date" name="start_date" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none" value="<?= date('Y-m-01') ?>"></div>
|
|
<div><label class="block text-[10px] md:text-xs font-bold text-slate-600 mb-1">ถึงวันที่</label><input type="date" name="end_date" class="w-full bg-white border border-slate-300 rounded-lg p-2 text-xs md:text-sm outline-none" value="<?= date('Y-m-d') ?>"></div>
|
|
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 active:scale-[0.98] text-white font-bold py-2 px-4 rounded-lg h-[38px] flex items-center justify-center transition-all shadow-md shadow-indigo-500/10"><i class="fa-solid fa-magnifying-glass mr-2"></i> ค้นหาเงื่อนไข</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="card-premium p-4 md:p-8 bg-white relative overflow-visible mb-6">
|
|
<div class="absolute top-0 left-0 w-1 md:w-1.5 h-full bg-gradient-to-b from-indigo-500 to-purple-500 rounded-l-xl"></div>
|
|
<h3 class="font-bold text-slate-800 mb-4 md:mb-8 flex flex-col md:flex-row items-start md:items-center text-base md:text-lg">
|
|
<div class="flex items-center mb-2 md:mb-0">
|
|
<div class="w-6 h-6 md:w-8 md:h-8 rounded bg-indigo-100 text-indigo-600 flex items-center justify-center mr-2 md:mr-3"><i class="fa-solid fa-filter"></i></div>ผลลัพธ์เส้นทางระยะเวลารอคอย (ตามเงื่อนไข)
|
|
</div>
|
|
<span class="md:ml-auto bg-slate-100 text-slate-500 px-5 py-2 rounded-full text-xs md:text-sm font-extrabold shadow-md opd-total-time-display-cond">- นาที</span>
|
|
</h3>
|
|
<div class="flow-container flex flex-col md:flex-row justify-between items-center py-2 md:py-4 relative">
|
|
<div class="flow-line hidden md:block" style="background: linear-gradient(90deg, #6366f1, #a855f7);"></div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-9 h-9 md:w-16 md:h-16 bg-white border-[2px] md:border-[3px] border-blue-200 text-blue-500 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-id-card text-xs md:text-2xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">ยื่นบัตร</span>
|
|
</div>
|
|
<span class="t-step-1-cond text-xs font-bold text-blue-700 bg-blue-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-blue-100 z-10">- นาที</span>
|
|
</div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-9 h-9 md:w-16 md:h-16 bg-white border-[2px] md:border-[3px] border-indigo-200 text-indigo-500 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-clipboard-list text-xs md:text-2xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">ซักประวัติ</span>
|
|
</div>
|
|
<span class="t-step-2-cond text-xs font-bold text-indigo-700 bg-indigo-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-indigo-100 z-10">- นาที</span>
|
|
</div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-10 h-10 md:w-20 md:h-20 bg-gradient-to-br from-orange-500 to-amber-400 text-white border-2 md:border-4 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-user-clock text-sm md:text-3xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">รอพบแพทย์</span>
|
|
</div>
|
|
<span class="t-step-3-cond text-xs font-bold text-orange-700 bg-orange-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-orange-100 z-10">- นาที</span>
|
|
</div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-9 h-9 md:w-16 md:h-16 bg-white border-[2px] md:border-[3px] border-teal-200 text-teal-500 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-user-doctor text-xs md:text-2xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">แพทย์ตรวจ</span>
|
|
</div>
|
|
<span class="t-step-4-cond text-xs font-bold text-teal-700 bg-teal-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-teal-100 z-10">- นาที</span>
|
|
</div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-9 h-9 md:w-16 md:h-16 bg-white border-[2px] md:border-[3px] border-emerald-200 text-emerald-500 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-pills text-xs md:text-2xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">รับยากลับบ้าน</span>
|
|
</div>
|
|
<span class="t-step-5-cond text-xs font-bold text-emerald-700 bg-emerald-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-emerald-100 z-10">- นาที</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base mt-6 mb-3 border-l-4 border-indigo-500 pl-3">ระยะเวลารอคอยแต่ละคลินิกเฉลี่ย</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 md:gap-4 mb-6" id="clinic-wait-cards-opd-cond">
|
|
<div class="col-span-full text-center text-slate-400 py-8 bg-white rounded-xl border border-dashed border-slate-300 font-medium">รอการค้นหาข้อมูล...</div>
|
|
</div>
|
|
|
|
<div class="card-premium p-4 md:p-6 mb-6">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base mb-4 md:mb-6 flex items-center justify-between">
|
|
<span class="flex items-center"><i class="fa-solid fa-chart-area text-indigo-500 mr-2"></i> แนวโน้มระยะเวลารอคอย OPD (ตามเงื่อนไข)</span>
|
|
</h3>
|
|
<div class="h-[300px] md:h-[400px] w-full flex items-center justify-center bg-slate-50 rounded-lg border border-dashed border-slate-200" id="opdWaitTimeChartTabCond_container">
|
|
<span class="text-slate-400 font-medium">รอการค้นหาข้อมูล...</span>
|
|
</div>
|
|
</div>
|
|
</div> |