34 lines
3.0 KiB
PHP
34 lines
3.0 KiB
PHP
<div id="tab-ipd-occ" class="tab-content hidden space-y-4 md:space-y-6">
|
|
<?= $ipd_filter_html ?>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 mb-4 md:mb-6">
|
|
<div class="card-premium p-4 md:p-6 bg-gradient-to-br from-white to-orange-50 border-l-4 border-l-orange-500">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base">อัตราครองเตียง (ภาพรวม)</h3><span class="text-2xl md:text-3xl font-black text-orange-600"><span class="dynamic-number-occ">0.00</span>%</span>
|
|
</div>
|
|
<div class="w-full bg-slate-200 rounded-full h-3 mb-1 mt-3 md:mt-4 shadow-inner">
|
|
<div class="bg-gradient-to-r from-emerald-400 to-emerald-500 h-3 rounded-full border-t border-white/50 dynamic-width-occ" style="width: 0%"></div>
|
|
</div>
|
|
<p class="text-[9px] md:text-[10px] text-slate-500 text-right mt-2 font-bold">เป้าหมาย: ไม่เกิน 100.00%</p>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-6 bg-gradient-to-br from-white to-rose-50 border-l-4 border-l-rose-500 flex flex-col justify-center">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base mb-1">ตึกที่มีอัตราครองเตียงสูงสุด</h3>
|
|
<h2 class="text-xl md:text-2xl font-black text-rose-600 truncate" id="max-occ-ward">-</h2>
|
|
<p class="text-xs text-slate-500 mt-1 font-bold">อัตรา <span class="text-rose-500" id="max-occ-val">0.00%</span></p>
|
|
</div>
|
|
<div class="card-premium p-4 md:p-6 bg-gradient-to-br from-white to-emerald-50 border-l-4 border-l-emerald-500 flex flex-col justify-center">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base mb-1">ตึกที่มีอัตราการครองเตียงต่ำสุด</h3>
|
|
<h2 class="text-xl md:text-2xl font-black text-emerald-600 truncate" id="min-occ-ward">-</h2>
|
|
<p class="text-xs text-slate-500 mt-1 font-bold">อัตรา <span class="text-emerald-500" id="min-occ-val">0.00%</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-premium p-4 md:p-6">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 md:mb-6">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base flex items-center mb-2 md:mb-0"><i class="fa-solid fa-building text-indigo-500 mr-2"></i> อัตราการครองเตียงแยกตามรายตึก (ข้อมูลรวมตามช่วงเวลาที่ค้นหา)</h3>
|
|
</div>
|
|
<div class="w-full" id="ward-occ-charts-container">
|
|
<div class="text-center text-slate-400 py-8 font-medium border border-dashed border-slate-300 rounded-lg">รอการค้นหาข้อมูล...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|