Porawit/gravity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Porawit Dongwang
2026-09-16 23:20:08 +07:00
commit 0041668dbb
32577 changed files with 3687927 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
จัดการข้อมูลยานพาหนะ-พนักงานขับรถ/vehicles.php
+690
View File
@@ -0,0 +1,690 @@
<?php
require_once 'includes/auth.php';
require_once 'includes/db.php';
$pageTitle = 'ยานพาหนะ | ระบบจัดการข้อมูลยานพาหนะ โรงพยาบาลเกาะสมุย';
$pageTitleDisplay = 'ยานพาหนะ';
$breadcrumbs = ['ยานพาหนะ'];
require_once 'includes/header.php';
// ดึงข้อมูลรถยนต์
$stmt = $pdo->query("SELECT * FROM vehicles ORDER BY id DESC");
$vehicles = $stmt->fetchAll();
// แผนผังรูปภาพรถจาก internet อ้างอิงตามประเภทรถ
$vehicleImages = [
'รถพยาบาล' => 'uploads/vehicles/defaults/ambulance.jpg',
'รถตู้พยาบาล' => 'uploads/vehicles/defaults/van.jpg',
'รถตู้โดยสาร' => 'uploads/vehicles/defaults/van.jpg',
'รถกระบะ' => 'uploads/vehicles/defaults/pickup.jpg',
'SUV' => 'uploads/vehicles/defaults/suv.jpg',
'รถเก๋ง' => 'uploads/vehicles/defaults/suv.jpg', // Use SUV image for sedan as fallback, or they might add a sedan image later
];
function getVehicleImage($v, $images) {
if (!empty($v['image_path']) && file_exists($v['image_path'])) {
return $v['image_path'] . '?v=' . time(); // Cache busting
}
return $images[$v['type']] ?? 'uploads/vehicles/defaults/suv.jpg';
}
?>
<!-- Floating Background -->
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary-500/10 rounded-full blur-[100px]"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/10 rounded-full blur-[100px]"></div>
</div>
<!-- Layout Wrapper -->
<div x-data="vehicleManager()" class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<?php include 'includes/sidebar.php'; ?>
<!-- Main Content -->
<main class="flex-1 flex flex-col min-w-0 overflow-hidden relative z-10">
<!-- Top Navbar -->
<?php include 'includes/navbar.php'; ?>
<!-- Dashboard Content -->
<div class="flex-1 overflow-y-auto p-4 pt-0 custom-scrollbar page-transition">
<div class="mb-6 flex justify-between items-end">
<div>
<h1 class="text-2xl font-bold dark:text-white tracking-tight">ยานพาหนะ</h1>
<p class="text-slate-500 dark:text-slate-400 mt-1">ข้อมูลรถยนต์ทั้งหมดในระบบ</p>
</div>
<div class="flex gap-3">
<a href="vehicle_inspection.php" class="px-4 py-2 text-sm font-medium flex items-center bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-300 dark:border-slate-600 rounded-[12px] hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm transition-all hover:-translate-y-0.5">
<i class="fa-solid fa-clipboard-check mr-2 text-primary-600 dark:text-primary-400"></i> ตรวจสภาพรถ
</a>
<button @click="openModal()" class="btn-gradient px-4 py-2 text-sm flex items-center shadow-lg shadow-primary-500/30 hover:shadow-primary-500/50 transition-all hover:-translate-y-0.5 rounded-[12px]">
<i class="fa-solid fa-plus mr-2"></i> เพิ่มรถใหม่
</button>
</div>
</div>
<!-- Grid Section -->
<div class="mb-4 flex flex-col sm:flex-row gap-3">
<div class="relative flex-1">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<i class="fa-solid fa-search text-slate-400"></i>
</div>
<input type="text" x-model="searchQuery" class="glass-input block w-full p-2.5 pl-10 text-sm" placeholder="ค้นหาทะเบียน, ประเภท, หรือยี่ห้อ...">
</div>
<div class="w-full sm:w-48">
<select x-model="statusFilter" class="glass-input block w-full p-2.5 text-sm">
<option value="">สถานะทั้งหมด</option>
<option value="available">พร้อมใช้งาน</option>
<option value="in_use">กำลังใช้งาน</option>
<option value="maintenance">ส่งซ่อม</option>
<option value="disposed">จำหน่าย</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
<?php if(count($vehicles) > 0): ?>
<?php foreach($vehicles as $v): ?>
<div class="glass-card flex flex-col hover:-translate-y-1 transition-transform duration-300 relative overflow-hidden rounded-[16px]"
x-show="filterVehicle(<?= htmlspecialchars(json_encode([
'license_plate' => $v['license_plate'],
'type' => $v['type'],
'brand' => $v['brand'],
'model' => $v['model'],
'status' => $v['status']
])) ?>)">
<!-- Cover Image -->
<div class="h-48 w-full relative group">
<img src="<?= htmlspecialchars(getVehicleImage($v, $vehicleImages)) ?>" alt="<?= htmlspecialchars($v['type']) ?>" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
<!-- Status Badge -->
<div class="absolute top-4 right-4">
<?php if($v['status'] == 'available'): ?>
<span class="bg-success text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg border border-white/20"><i class="fa-solid fa-check-circle mr-1"></i> ว่าง</span>
<?php elseif($v['status'] == 'in_use'): ?>
<span class="bg-warning text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg border border-white/20"><i class="fa-solid fa-road mr-1"></i> กำลังใช้งาน</span>
<?php elseif($v['status'] == 'maintenance'): ?>
<span class="bg-danger text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg border border-white/20"><i class="fa-solid fa-wrench mr-1"></i> ส่งซ่อม</span>
<?php else: ?>
<span class="bg-slate-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg border border-white/20"><i class="fa-solid fa-ban mr-1"></i> จำหน่าย</span>
<?php endif; ?>
</div>
<!-- Vehicle Type & Plate -->
<div class="absolute bottom-4 left-4 right-4 text-white">
<div class="text-xs font-medium bg-white/20 backdrop-blur-md px-2 py-1 rounded inline-block mb-1 border border-white/20">
<?= htmlspecialchars($v['type']) ?>
</div>
<h3 class="text-2xl font-bold drop-shadow-md">
<?= htmlspecialchars($v['license_plate']) ?>
</h3>
</div>
</div>
<div class="p-5 flex-1 flex flex-col">
<div class="flex items-start justify-between mb-4">
<div>
<p class="font-bold text-slate-800 dark:text-white text-lg"><?= htmlspecialchars($v['brand'] . ' ' . $v['model']) ?></p>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
<?= !empty($v['vehicle_style']) ? htmlspecialchars($v['vehicle_style']) : 'ไม่ระบุลักษณะรถ' ?>
</p>
</div>
</div>
<div class="space-y-2 mt-auto mb-5">
<!-- Tax/Insurance Expiry -->
<div class="flex items-center text-sm">
<div class="w-6 flex justify-center">
<i class="fa-solid fa-file-shield text-slate-400"></i>
</div>
<?php
$expiry = strtotime($v['tax_expiry']);
$days_left = floor(($expiry - time()) / (60 * 60 * 24));
$is_expired = $days_left < 0;
$is_warning = $days_left >= 0 && $days_left < 30;
$colorClass = ($is_expired || $is_warning) ? 'text-danger font-medium' : 'text-slate-600 dark:text-slate-300';
$thaiYear = date('Y', $expiry) + 543;
$formattedDate = date('d/m/', $expiry) . $thaiYear;
?>
<span class="<?= $colorClass ?> ml-2">
ภาษี/พ.ร.บ.: <strong><?= $formattedDate ?></strong>
<?php if($is_expired): ?>
<i class='fa-solid fa-triangle-exclamation ml-1 text-danger' title='หมดอายุแล้ว'></i>
<?php elseif($is_warning): ?>
<i class='fa-solid fa-triangle-exclamation ml-1 text-warning' title='ใกล้หมดอายุ'></i>
<?php endif; ?>
</span>
</div>
</div>
<!-- Actions -->
<div class="pt-4 border-t border-slate-200 dark:border-slate-700/50 flex flex-wrap justify-end gap-2">
<button type="button" @click='openInspectionModal(<?= htmlspecialchars(json_encode($v), ENT_QUOTES, "UTF-8") ?>)' class="px-3 py-1.5 text-xs font-medium text-emerald-600 bg-emerald-50 hover:bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-900/20 dark:hover:bg-emerald-900/40 rounded-lg transition-colors" title="ประวัติตรวจสภาพ"><i class="fa-solid fa-clipboard-list mr-1"></i> ประวัติตรวจเช็ค</button>
<button @click='openMaintenanceModal(<?= htmlspecialchars(json_encode($v), ENT_QUOTES, "UTF-8") ?>)' class="px-3 py-1.5 text-xs font-medium text-info bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:hover:bg-blue-900/40 rounded-lg transition-colors"><i class="fa-solid fa-wrench mr-1"></i> ประวัติซ่อม</button>
<button @click='openModal(<?= htmlspecialchars(json_encode($v), ENT_QUOTES, "UTF-8") ?>)' class="px-3 py-1.5 text-xs font-medium text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors shadow-sm shadow-primary-600/30"><i class="fa-solid fa-pen-to-square mr-1"></i> แก้ไข</button>
<?php if ($v['status'] !== 'disposed'): ?>
<button @click="deleteVehicle(<?= $v['id'] ?>)" class="px-3 py-1.5 text-xs font-medium text-danger bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/40 rounded-lg transition-colors"><i class="fa-solid fa-trash mr-1"></i> ลบ</button>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach; ?>
<?php else: ?>
<div class="col-span-full glass-card p-10 flex flex-col items-center justify-center text-slate-500">
<i class="fa-solid fa-car-side text-4xl mb-4 opacity-50"></i>
<p>ไม่พบข้อมูลยานพาหนะ</p>
</div>
<?php endif; ?>
</div>
<!-- Maintenance Modal -->
<div x-show="showMaintenanceModal" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="maintenance-modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div x-show="showMaintenanceModal" x-transition.opacity class="fixed inset-0 bg-slate-900/60 dark:bg-slate-900/80 backdrop-blur-sm transition-opacity" @click="closeMaintenanceModal()"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div x-show="showMaintenanceModal"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="relative z-10 inline-block align-bottom bg-white dark:bg-slate-800 rounded-[20px] text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl w-full border border-slate-200 dark:border-slate-700/50">
<div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/50 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/50">
<h3 class="text-lg leading-6 font-bold text-slate-900 dark:text-white" id="maintenance-modal-title">
ประวัติการซ่อมบำรุงรถ <span class="text-primary-600" x-text="activeVehicle ? activeVehicle.license_plate : ''"></span>
</h3>
<button @click="closeMaintenanceModal()" class="text-slate-400 hover:text-slate-500 focus:outline-none bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 rounded-full p-2 transition-colors">
<i class="fa-solid fa-xmark w-4 h-4 flex items-center justify-center"></i>
</button>
</div>
<div class="px-6 py-5 flex flex-col md:flex-row gap-6">
<!-- Add New Maintenance Record Form -->
<div class="w-full md:w-1/3 bg-slate-50 dark:bg-slate-900/50 p-4 rounded-xl border border-slate-200 dark:border-slate-700/50 self-start">
<h4 class="font-bold text-slate-800 dark:text-slate-200 mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">บันทึกการซ่อมใหม่</h4>
<form @submit.prevent="saveMaintenanceRecord">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">วันที่ซ่อมบำรุง <span class="text-danger">*</span></label>
<input type="date" x-model="maintenanceForm.repair_date" required class="glass-input block w-full p-2.5 text-sm dark:[color-scheme:dark]">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">รายละเอียด <span class="text-danger">*</span></label>
<textarea x-model="maintenanceForm.description" required rows="3" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น เปลี่ยนถ่ายน้ำมันเครื่อง, เปลี่ยนยาง"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">เลขไมล์</label>
<input type="number" x-model="maintenanceForm.mileage" class="glass-input block w-full p-2.5 text-sm" placeholder="ระยะทาง ณ วันที่ซ่อม">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ค่าใช้จ่าย (บาท)</label>
<input type="number" step="0.01" x-model="maintenanceForm.cost" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น 1500.00">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">อู่ / ศูนย์บริการ</label>
<input type="text" x-model="maintenanceForm.garage" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น ศูนย์บริการโตโยต้า">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">แนบเอกสาร (PDF)</label>
<input type="file" multiple accept=".pdf" id="maintenance_docs_input" class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 dark:file:bg-slate-700 dark:file:text-slate-300">
</div>
<button type="submit" :disabled="isLoadingMaintenance" class="btn-gradient w-full py-2.5 text-sm flex items-center justify-center mt-2 shadow-lg shadow-primary-500/30">
<span x-show="!isLoadingMaintenance"><i class="fa-solid fa-save mr-2"></i> บันทึกข้อมูล</span>
<span x-show="isLoadingMaintenance" style="display: none;"><i class="fa-solid fa-spinner fa-spin mr-2"></i> กำลังบันทึก...</span>
</button>
</div>
</form>
</div>
<!-- Maintenance History Table -->
<div class="w-full md:w-2/3">
<div class="overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-700/50 max-h-[60vh]">
<table class="w-full text-sm text-left text-slate-500 dark:text-slate-400">
<thead class="text-xs text-slate-700 uppercase bg-slate-50 dark:bg-slate-700/50 dark:text-slate-300 sticky top-0 shadow-sm">
<tr>
<th scope="col" class="px-4 py-3">วันที่</th>
<th scope="col" class="px-4 py-3">รายละเอียด</th>
<th scope="col" class="px-4 py-3">เลขไมล์</th>
<th scope="col" class="px-4 py-3 text-right">ค่าใช้จ่าย</th>
<th scope="col" class="px-4 py-3 text-center">จัดการ</th>
</tr>
</thead>
<tbody>
<template x-if="maintenanceRecords.length > 0">
<template x-for="record in maintenanceRecords" :key="record.id">
<tr class="bg-white dark:bg-slate-800 border-b border-slate-100 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<td class="px-4 py-3 whitespace-nowrap" x-text="formatThaiDate(record.repair_date)"></td>
<td class="px-4 py-3">
<div class="font-medium text-slate-800 dark:text-slate-200" x-text="record.description"></div>
<div class="text-xs text-slate-400" x-show="record.garage">
<i class="fa-solid fa-warehouse mr-1"></i> <span x-text="record.garage"></span>
</div>
<!-- Maintenance Documents -->
<div class="mt-2 space-y-1">
<template x-for="doc in record.documents" :key="doc.id">
<div class="flex items-center text-xs bg-slate-50 dark:bg-slate-700/50 rounded px-2 py-1 border border-slate-200 dark:border-slate-600 max-w-xs">
<a :href="doc.file_path" target="_blank" class="text-primary-600 hover:underline truncate flex-1 flex items-center">
<i class="fa-regular fa-file-pdf text-danger mr-1"></i>
<span x-text="doc.original_name"></span>
</a>
<button type="button" @click="deleteMaintenanceDoc(doc.id)" class="text-danger hover:text-red-700 ml-2" title="ลบ">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</template>
</div>
</td>
<td class="px-4 py-3" x-text="record.mileage ? record.mileage.toLocaleString() : '-'"></td>
<td class="px-4 py-3 text-right font-medium text-primary-600 dark:text-primary-400" x-text="record.cost ? Number(record.cost).toLocaleString('th-TH', {minimumFractionDigits: 2}) : '-'"></td>
<td class="px-4 py-3 text-center space-y-2 flex flex-col items-center">
<button @click="deleteMaintenanceRecord(record.id)" class="text-danger hover:text-red-700 transition-colors" title="ลบประวัติซ่อม"><i class="fa-solid fa-trash"></i></button>
<label class="cursor-pointer text-info hover:text-blue-700 transition-colors" title="แนบไฟล์ใบเสร็จ (PDF)">
<i class="fa-solid fa-paperclip"></i>
<input type="file" multiple accept=".pdf" class="hidden" @change="uploadMaintenanceDocs($event, record.id)">
</label>
</td>
</tr>
</template>
</template>
<template x-if="maintenanceRecords.length === 0">
<tr>
<td colspan="5" class="px-4 py-8 text-center text-slate-500">
<div class="flex flex-col items-center justify-center">
<div class="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mb-3">
<i class="fa-solid fa-toolbox text-slate-400 text-xl"></i>
</div>
<p>ยังไม่มีประวัติการซ่อมบำรุงสำหรับรถคันนี้</p>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Vehicle Modal -->
<div x-show="showModal" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div x-show="showModal" x-transition.opacity class="fixed inset-0 bg-slate-900/60 dark:bg-slate-900/80 backdrop-blur-sm transition-opacity" @click="closeModal()"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div x-show="showModal"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="relative z-10 inline-block align-bottom bg-white dark:bg-slate-800 rounded-[20px] text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl w-full border border-slate-200 dark:border-slate-700/50">
<div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/50 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/50">
<h3 class="text-lg leading-6 font-bold text-slate-900 dark:text-white" id="modal-title" x-text="isEdit ? 'แก้ไขข้อมูลรถยนต์' : 'เพิ่มรถยนต์ใหม่'"></h3>
<button @click="closeModal()" class="text-slate-400 hover:text-slate-500 focus:outline-none bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 rounded-full p-2 transition-colors">
<i class="fa-solid fa-xmark w-4 h-4 flex items-center justify-center"></i>
</button>
</div>
<div class="px-6 py-5">
<form @submit.prevent="saveVehicle">
<div class="mb-6 p-4 rounded-xl flex items-center justify-between transition-colors" style="background-color: #fefce8; border: 1px solid #fef08a;">
<div>
<h4 class="text-sm font-bold" style="color: #854d0e;">จำหน่าย (เลิกใช้งานถาวร)</h4>
<p class="text-xs mt-0.5" style="color: #ca8a04;">หากเช็คข้อนี้ จะไม่สามารถแก้ไขรายละเอียดได้</p>
</div>
<label class="flex items-center cursor-pointer space-x-3 bg-white px-4 py-2 rounded-lg shadow-sm hover:bg-slate-50 transition-colors" style="border: 1px solid #fde047;">
<div class="relative flex items-center justify-center w-6 h-6 rounded bg-white transition-colors" :style="form.status === 'disposed' ? 'border: 2px solid #dc2626;' : 'border: 2px solid #cbd5e1;'">
<input type="checkbox" :checked="form.status === 'disposed'" @change="form.status = $event.target.checked ? 'disposed' : 'available'" class="absolute opacity-0 w-full h-full cursor-pointer m-0 p-0 z-10">
<svg x-show="form.status === 'disposed'" class="w-4 h-4" style="color: #dc2626; display: none;" x-transition fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</div>
<span class="text-sm font-medium" style="color: #334155;">ติ๊กเพื่อระงับการใช้งาน</span>
</label>
</div>
<fieldset :disabled="form.status === 'disposed'" class="grid grid-cols-1 gap-y-4 gap-x-4 sm:grid-cols-2 group disabled:opacity-70 disabled:cursor-not-allowed">
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ป้ายทะเบียน <span class="text-danger">*</span></label>
<input type="text" x-model="form.license_plate" required class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น กค 1234">
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">เลขทะเบียนครุภัณฑ์</label>
<input type="text" x-model="form.asset_number" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น 1234-56789">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ประเภทรถ <span class="text-danger">*</span></label>
<select x-model="form.type" required class="glass-input block w-full p-2.5 text-sm">
<option value="">เลือกประเภท</option>
<option value="รถพยาบาล">รถพยาบาล</option>
<option value="รถตู้พยาบาล">รถตู้พยาบาล</option>
<option value="รถตู้โดยสาร">รถตู้โดยสาร</option>
<option value="รถกระบะ">รถกระบะ</option>
<option value="SUV">SUV</option>
<option value="รถเก๋ง">รถเก๋ง</option>
<option value="รถจักรยานยนต์">รถจักรยานยนต์</option>
<option value="อื่นๆ">อื่นๆ</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ลักษณะรถ</label>
<input type="text" x-model="form.vehicle_style" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น รถกระบะ 4 ประตู">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">สถานะ</label>
<select x-model="form.status" class="glass-input block w-full p-2.5 text-sm">
<option value="available">พร้อมใช้งาน</option>
<option value="in_use">กำลังใช้งาน</option>
<option value="maintenance">ส่งซ่อม</option>
<option value="disposed">จำหน่าย</option>
</select>
</div>
<!-- Add Datalists for Autocomplete -->
<datalist id="brand-list">
<template x-for="brand in suggestions.brands" :key="brand">
<option :value="brand"></option>
</template>
</datalist>
<datalist id="model-list">
<template x-for="model in suggestions.models" :key="model">
<option :value="model"></option>
</template>
</datalist>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ยี่ห้อ</label>
<input type="text" list="brand-list" x-model="form.brand" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น Toyota">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">รุ่น</label>
<input type="text" list="model-list" x-model="form.model" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น Commuter">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">รุ่นรถปี</label>
<input type="text" x-model="form.model_year" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น 2560">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">เลขตัวถัง</label>
<input type="text" x-model="form.chassis_number" class="glass-input block w-full p-2.5 text-sm" placeholder="Chassis Number">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">เลขเครื่อง</label>
<input type="text" x-model="form.engine_number" class="glass-input block w-full p-2.5 text-sm" placeholder="Engine Number">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ความจุเครื่องยนต์ (CC)</label>
<input type="number" x-model="form.engine_cc" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น 2500">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ความจุเชื้อเพลิง/แบตเตอรี่</label>
<input type="text" x-model="form.fuel_capacity" class="glass-input block w-full p-2.5 text-sm" placeholder="เช่น 70 ลิตร หรือ 60 kWh">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ประเภทเชื้อเพลิง</label>
<select x-model="form.fuel_type" class="glass-input block w-full p-2.5 text-sm">
<option value="">ระบุประเภท</option>
<option value="เบนซิน (Benzene)">เบนซิน (Benzene)</option>
<option value="ดีเซล (Diesel)">ดีเซล (Diesel)</option>
<option value="แก๊ส LPG">แก๊ส LPG</option>
<option value="แก๊ส NGV">แก๊ส NGV</option>
<option value="ไฟฟ้า (EV)">ไฟฟ้า (EV)</option>
<option value="ไฮบริด (Hybrid)">ไฮบริด (Hybrid)</option>
<option value="อื่นๆ">อื่นๆ</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">สีรถ</label>
<div class="flex items-center space-x-3">
<input type="color" x-model="form.color" class="h-10 w-10 rounded cursor-pointer border-0 p-0 bg-transparent">
<span class="text-sm text-slate-500" x-text="form.color"></span>
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">วันหมดอายุ ภาษี/พ.ร.บ.</label>
<input type="date" x-model="form.tax_expiry" class="glass-input block w-full p-2.5 text-sm dark:[color-scheme:dark]">
</div>
<!-- Vehicle Documents Section -->
<div class="sm:col-span-2 mt-4" x-show="isEdit">
<h4 class="font-bold text-slate-800 dark:text-slate-200 mb-2 border-b border-slate-200 dark:border-slate-700 pb-2">เอกสารแนบรถยนต์</h4>
<!-- Document List -->
<div class="space-y-2 mb-3 max-h-40 overflow-y-auto">
<template x-if="vehicleDocs.length === 0">
<p class="text-sm text-slate-500 italic">ยังไม่มีเอกสารแนบ</p>
</template>
<template x-for="doc in vehicleDocs" :key="doc.id">
<div class="flex items-center justify-between bg-slate-50 dark:bg-slate-700/30 p-2 rounded border border-slate-200 dark:border-slate-600">
<a :href="doc.file_path" target="_blank" class="text-sm text-primary-600 hover:underline flex items-center">
<i class="fa-regular fa-file-pdf text-danger mr-2"></i>
<span x-text="doc.original_name"></span>
</a>
<button type="button" @click="deleteVehicleDoc(doc.id)" class="text-danger hover:text-red-700 p-1" title="ลบเอกสาร">
<i class="fa-solid fa-trash text-xs"></i>
</button>
</div>
</template>
</div>
<!-- Upload Input -->
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">เพิ่มเอกสาร (เฉพาะ PDF)</label>
<input type="file" multiple accept=".pdf" @change="uploadVehicleDocs($event)" class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 dark:file:bg-slate-700 dark:file:text-slate-300">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">รูปรถ (ตัวใหม่) - <span class="text-xs text-slate-500">เลือกเพื่อเปลี่ยนรูปรถหลัก</span></label>
<input type="file" id="vehicle_image" accept="image/*" class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 dark:file:bg-slate-700 dark:file:text-slate-300">
<!-- Preview of existing image if any -->
<div x-show="form.image_path" class="mt-2 relative inline-block">
<p class="text-xs text-slate-500 mb-1">รูปปัจจุบัน:</p>
<img :src="form.image_path" class="h-24 w-auto rounded-lg border border-slate-200 shadow-sm" alt="Vehicle Image">
</div>
</div>
</div>
</fieldset>
<div class="mt-6 pt-5 border-t border-slate-100 dark:border-slate-700/50 flex justify-end space-x-3">
<button type="button" @click="closeModal()" class="px-4 py-2.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-xl hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600 dark:hover:bg-slate-700 transition-colors">
ยกเลิก
</button>
<button type="submit" :disabled="isLoading" class="btn-gradient px-4 py-2.5 text-sm flex items-center justify-center min-w-[100px] shadow-lg shadow-primary-500/30">
<span x-show="!isLoading" x-text="isEdit ? 'บันทึกการแก้ไข' : 'เพิ่มข้อมูล'"></span>
<span x-show="isLoading" style="display: none;"><i class="fa-solid fa-spinner fa-spin mr-2"></i> กำลังบันทึก...</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Inspection History Modal -->
<div x-show="showInspectionModal" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="inspection-modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div x-show="showInspectionModal" x-transition.opacity class="fixed inset-0 bg-slate-900/60 dark:bg-slate-900/80 backdrop-blur-sm transition-opacity" @click="closeInspectionModal()"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div x-show="showInspectionModal"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="relative z-10 inline-block align-bottom bg-white dark:bg-slate-800 rounded-[20px] text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl w-full border border-slate-200 dark:border-slate-700/50">
<div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700/50 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/50">
<h3 class="text-lg leading-6 font-bold text-slate-900 dark:text-white" id="inspection-modal-title">
ประวัติการตรวจสภาพรถ <span class="text-primary-600" x-text="activeVehicle ? activeVehicle.license_plate : ''"></span>
</h3>
<button @click="closeInspectionModal()" class="text-slate-400 hover:text-slate-500 focus:outline-none bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 rounded-full p-2 transition-colors">
<i class="fa-solid fa-xmark w-4 h-4 flex items-center justify-center"></i>
</button>
</div>
<div class="px-6 py-5">
<div x-show="isLoadingInspection" class="flex justify-center items-center py-12">
<i class="fa-solid fa-spinner fa-spin text-3xl text-primary-500"></i>
<span class="ml-3 text-slate-500">กำลังโหลดข้อมูล...</span>
</div>
<div x-show="!isLoadingInspection && inspectionHistory.length === 0" class="text-center py-12">
<i class="fa-solid fa-clipboard-list text-4xl text-slate-300 dark:text-slate-600 mb-3"></i>
<p class="text-slate-500 dark:text-slate-400">ยังไม่มีประวัติการตรวจเช็คสภาพรถสำหรับคันนี้</p>
</div>
<div x-show="!isLoadingInspection && inspectionHistory.length > 0" class="max-h-[65vh] overflow-x-auto custom-scrollbar rounded-xl bg-white dark:bg-slate-900 shadow-sm border border-slate-200 dark:border-slate-700" x-data="{ currentPage: 1, itemsPerPage: 10, get paginatedData() { return inspectionHistory.slice((this.currentPage - 1) * this.itemsPerPage, this.currentPage * this.itemsPerPage); }, get totalPages() { return Math.ceil(inspectionHistory.length / this.itemsPerPage); } }">
<table class="w-full text-sm text-left text-slate-600 dark:text-slate-400">
<thead class="text-xs text-slate-700 uppercase bg-slate-100 dark:bg-slate-800 dark:text-slate-300 sticky top-0 z-10">
<tr>
<th scope="col" class="w-12 px-4 py-3 text-center border-b border-slate-200 dark:border-slate-700"></th>
<th scope="col" class="px-4 py-3 whitespace-nowrap border-b border-slate-200 dark:border-slate-700">วันที่ / เวลา</th>
<th scope="col" class="px-4 py-3 whitespace-nowrap border-b border-slate-200 dark:border-slate-700">เลขไมล์</th>
<th scope="col" class="px-4 py-3 whitespace-nowrap border-b border-slate-200 dark:border-slate-700">น้ำมัน (ลิตร)</th>
<th scope="col" class="px-4 py-3 whitespace-nowrap border-b border-slate-200 dark:border-slate-700">ผู้ตรวจ</th>
<th scope="col" class="px-4 py-3 whitespace-nowrap border-b border-slate-200 dark:border-slate-700">สถานะ</th>
</tr>
</thead>
<template x-for="record in paginatedData" :key="record.id">
<tbody x-data="{ expanded: false }" class="border-b border-slate-200 dark:border-slate-700 last:border-0 hover:bg-slate-50 dark:hover:bg-slate-800/50">
<!-- Main Row -->
<tr class="cursor-pointer transition-colors" @click="expanded = !expanded">
<!-- Expand Icon -->
<td class="px-4 py-3 text-center text-primary-500">
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-primary-50 dark:bg-primary-900/30 transition-colors border border-primary-200 dark:border-primary-800/50 mx-auto">
<i class="fa-solid" :class="expanded ? 'fa-minus' : 'fa-plus'"></i>
</div>
</td>
<!-- Date & Time -->
<td class="px-4 py-3 whitespace-nowrap">
<div class="font-medium text-slate-900 dark:text-white" x-text="formatThaiDate(record.inspection_date)"></div>
<div class="text-xs text-slate-500" x-text="record.inspection_time + ' น.'"></div>
</td>
<!-- Mileage -->
<td class="px-4 py-3 whitespace-nowrap" x-text="record.mileage + ' กม.'"></td>
<!-- Fuel -->
<td class="px-4 py-3 whitespace-nowrap" x-text="record.fuel_level"></td>
<!-- Inspector -->
<td class="px-4 py-3 whitespace-nowrap">
<div class="font-medium text-slate-900 dark:text-white" x-text="record.first_name ? (record.first_name + ' ' + (record.last_name || '')) : record.inspector_cid"></div>
</td>
<!-- Status -->
<td class="px-4 py-3 whitespace-nowrap">
<template x-if="record.items.filter(i => i.status === 'abnormal').length === 0">
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-bold bg-success/10 text-success">
<i class="fa-solid fa-check-circle mr-1.5"></i> ปกติทั้งหมด
</span>
</template>
<template x-if="record.items.filter(i => i.status === 'abnormal').length > 0">
<span class="inline-flex items-center px-2 py-1 rounded text-xs font-bold bg-danger/10 text-danger">
<i class="fa-solid fa-triangle-exclamation mr-1.5"></i> พบปัญหา <span x-text="record.items.filter(i => i.status === 'abnormal').length" class="mx-1"></span> จุด
</span>
</template>
</td>
</tr>
<!-- Expanded Details Row -->
<tr x-show="expanded" x-transition x-cloak class="bg-slate-50/80 dark:bg-slate-800/80 border-t border-slate-100 dark:border-slate-800">
<td colspan="6" class="px-6 py-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<template x-for="item in record.items" :key="item.name">
<div class="flex flex-col p-3 rounded-lg bg-white dark:bg-slate-900 border" :class="item.status === 'normal' ? 'border-slate-100 dark:border-slate-800' : 'border-danger/30 bg-danger/5'">
<div class="flex items-start justify-between mb-1">
<span class="text-xs font-semibold text-slate-700 dark:text-slate-300" x-text="item.name"></span>
<span class="px-2 py-0.5 rounded text-[10px] font-bold"
:class="item.status === 'normal' ? 'bg-success/10 text-success' : 'bg-danger text-white'"
x-text="item.status === 'normal' ? 'ปกติ' : 'ไม่ปกติ'"></span>
</div>
<template x-if="item.status === 'abnormal'">
<div class="text-[11px] text-danger mt-1 flex items-start">
<i class="fa-solid fa-arrow-turn-up rotate-90 mr-1.5 mt-0.5 opacity-70"></i>
<span x-text="item.reason"></span>
</div>
</template>
</div>
</template>
</div>
<template x-if="record.vehicle_status">
<div class="mt-3 text-xs bg-white dark:bg-slate-900 p-3 rounded-lg border border-slate-200 dark:border-slate-700">
<span class="font-bold text-slate-700 dark:text-slate-300"><i class="fa-solid fa-car mr-1"></i> สถานะรถยนต์หลังการตรวจสอบ:</span>
<span x-text="record.vehicle_status === 'available' ? 'พร้อมใช้งาน' : 'ไม่พร้อมใช้งาน / ส่งซ่อม'" class="ml-1" :class="record.vehicle_status === 'available' ? 'text-success font-medium' : 'text-danger font-medium'"></span>
</div>
</template>
<template x-if="record.other_items">
<div class="mt-3 text-xs text-slate-600 dark:text-slate-400 bg-white dark:bg-slate-900 p-3 rounded-lg border border-slate-200 dark:border-slate-700">
<span class="font-bold text-slate-700 dark:text-slate-300"><i class="fa-solid fa-comment-dots mr-1"></i> หมายเหตุเพิ่มเติม:</span>
<span x-text="record.other_items" class="ml-1"></span>
</div>
</template>
</td>
</tr>
</tbody>
</template>
</table>
<!-- Pagination Controls -->
<div class="px-4 py-3 flex items-center justify-between border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 rounded-b-xl">
<div class="text-sm text-slate-500">
แสดง <span class="font-medium" x-text="((currentPage - 1) * itemsPerPage) + 1"></span> ถึง <span class="font-medium" x-text="Math.min(currentPage * itemsPerPage, inspectionHistory.length)"></span> จาก <span class="font-medium" x-text="inspectionHistory.length"></span> รายการ
</div>
<div class="flex space-x-1">
<button @click="if(currentPage > 1) currentPage--" :disabled="currentPage === 1" class="px-3 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed">
ก่อนหน้า
</button>
<button @click="if(currentPage < totalPages) currentPage++" :disabled="currentPage === totalPages" class="px-3 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed">
ถัดไป
</button>
</div>
</div>
</div>
</div>
<div class="px-6 py-4 border-t border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-800/50 flex justify-end">
<button type="button" @click="closeInspectionModal()" class="btn-gradient px-6 py-2 text-sm shadow-lg shadow-primary-500/30">ปิด</button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<?php require_once 'includes/footer.php'; ?>