<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบยืมและคืนอุปกรณ์</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<!-- Navbar -->
<nav class="bg-blue-600 p-4">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<a href="/" class="text-white text-2xl font-bold">ระบบยืมและคืนอุปกรณ์</a>
<div class="flex space-x-4">
<% if (user) { %> <!-- ถ้าผู้ใช้ล็อกอินแล้ว -->
<a href="/" class="text-white hover:text-gray-200">หน้าหลัก</a>
<!-- แสดงเฉพาะสำหรับ User -->
<% if (user.role==='user' ) { %>
<a href="/loans" class="text-white hover:text-gray-200">รวมการยืมอุปกรณ์</a>
<!-- <a href="/return-equipment" class="text-white hover:text-gray-200">คืนอุปกรณ์</a> -->
<% } %>
<% if (user.role==='admin' ) { %> <!-- แสดงเฉพาะสำหรับ Admin -->
<a href="/manage" class="text-white hover:text-gray-200">จัดการอุปกรณ์</a>
<a href="/admin-loans" class="text-white hover:text-gray-200">การยืมอุปกรณ์</a>
<% } %>
<a href="/logout" class="text-white hover:text-gray-200">ออกจากระบบ</a>
<% } else { %> <!-- ถ้าผู้ใช้ยังไม่ได้ล็อกอิน -->
<a href="/login" class="text-white hover:text-gray-200">เข้าสู่ระบบ</a>
<a href="/register" class="text-white hover:text-gray-200">สมัครสมาชิก</a>
<% } %>
</div>
</div>
</nav>
<!-- ฟอร์มค้นหาอุปกรณ์ -->
<div class="container mx-auto p-4">
<form action="/" method="GET" class="flex mb-4">
<input type="text" name="search" placeholder="ค้นหาอุปกรณ์..."
class="p-2 border border-gray-300 rounded-l-md flex-grow" value="<%= search %>">
<button type="submit" class="bg-blue-600 text-white p-2 rounded-r-md hover:bg-blue-700">ค้นหา</button>
</form>
</div>
<!-- รายการอุปกรณ์ -->
<div class="container mx-auto p-4">
<h2 class="text-xl font-bold mb-4">อุปกรณ์ที่มีอยู่</h2>
<!-- ตารางแสดงอุปกรณ์ -->
<div class="overflow-x-auto bg-white shadow-md rounded-lg">
<table class="min-w-full text-sm text-gray-500">
<thead class="bg-blue-600 text-white">
<tr>
<th class="px-6 py-3 text-left">ชื่ออุปกรณ์</th>
<th class="px-6 py-3 text-left">สถานะ</th>
<th class="px-6 py-3 text-left">จำนวน</th>
<th class="px-6 py-3 text-left">การจัดการ</th>
</tr>
</thead>
<tbody>
<% equipment.forEach(item=> { %>
<tr class="border-b">
<td class="px-6 py-4">
<%= item.name %>
</td>
<td class="px-6 py-4">
<span class="<%= item.status === 'available' ? 'text-green-600' : 'text-gray-500' %>">
<%= item.status %>
</span>
</td>
<td class="px-6 py-4">
<%= item.quantity %>
</td>
<td class="px-6 py-4">
<!-- ฟอร์มยืมอุปกรณ์ -->
<% if (item.status==='available' ) { %>
<form action="/confirm-loan" method="POST" class="flex space-x-2">
<input type="hidden" name="equipment_id" value="<%= item.id %>">
<label for="quantity" class="text-sm text-gray-700">จำนวน:</label>
<input type="number" name="quantity" min="1" max="<%= item.quantity %>"
class="p-2 border border-gray-300 rounded-md" required>
<button type="submit"
class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700">
ยืมอุปกรณ์
</button>
</form>
<% } else { %>
<span class="text-gray-400">ไม่สามารถยืมได้</span>
<% } %>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</body>
</html>