\u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e37\u0e21\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n <style>\n \/* CSS \u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 *\/\n .card-equipment {\n transition: transform 0.2s;\n cursor: pointer;\n }\n .card-equipment:hover {\n transform: translateY(-5px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n .status-badge {\n font-size: 0.9em;\n padding: 0.4em 0.8em;\n }\n .available { background-color: #d1e7dd; color: #0f5132; }\n .on-loan { background-color: #f8d7da; color: #842029; }\n .maintenance { background-color: #fff3cd; color: #664d03; }\n <\/style>\n<\/head>\n<body>\n\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark shadow-sm\">\n <div class=\"container\">\n <a class=\"navbar-brand\" href=\"#\">\n <i class=\"bi bi-tools me-2\"><\/i>\u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e37\u0e21\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n <\/a>\n <div class=\"collapse navbar-collapse\">\n <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\" href=\"#\" onclick=\"showSection('home')\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 (\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14)<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\" onclick=\"showSection('manage')\">\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\" onclick=\"showSection('returns')\">\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e31\u0e1a\u0e04\u0e37\u0e19 \/ \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21<\/a>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/nav>\n\n <div class=\"container mt-4\">\n\n <section id=\"home-section\">\n <h2 class=\"mb-4 text-primary\"><i class=\"bi bi-grid-fill me-2\"><\/i>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h2>\n <div class=\"row mb-3\">\n <div class=\"col-md-4\">\n <input type=\"text\" id=\"searchInput\" class=\"form-control\" onkeyup=\"renderEquipmentCards()\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c...\">\n <\/div>\n <\/div>\n <div id=\"equipment-list\" class=\"row\">\n <\/div>\n <\/section>\n\n <section id=\"manage-section\" style=\"display:none;\">\n <h2 class=\"mb-4 text-success\"><i class=\"bi bi-list-check me-2\"><\/i>\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/h2>\n <button class=\"btn btn-success mb-3\" data-bs-toggle=\"modal\" data-bs-target=\"#equipmentModal\" onclick=\"prepareEquipmentModal('add')\">\n <i class=\"bi bi-plus-circle me-1\"><\/i>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e43\u0e2b\u0e21\u0e48\n <\/button>\n <table class=\"table table-striped table-hover\">\n <thead>\n <tr>\n <th>ID<\/th>\n <th>\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/th>\n <th>Serial No.<\/th>\n <th>\u0e2a\u0e16\u0e32\u0e19\u0e30<\/th>\n <th>\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"equipment-table-body\">\n <\/tbody>\n <\/table>\n <\/section>\n\n <section id=\"returns-section\" style=\"display:none;\">\n <h2 class=\"mb-4 text-warning\"><i class=\"bi bi-arrow-return-left me-2\"><\/i>\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21 (\u0e23\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e04\u0e37\u0e19)<\/h2>\n <table class=\"table table-bordered\">\n <thead>\n <tr class=\"table-primary\">\n <th>\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/th>\n <th>\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21<\/th>\n <th>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21<\/th>\n <th>\u0e2a\u0e16\u0e32\u0e19\u0e30<\/th>\n <th>\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"loan-history-current-table-body\">\n <\/tbody>\n <\/table>\n\n <h3 class=\"mt-5 text-secondary\"><i class=\"bi bi-clock-history me-2\"><\/i>\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h3>\n <table class=\"table table-striped table-sm\">\n <thead>\n <tr>\n <th>\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/th>\n <th>\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21<\/th>\n <th>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21<\/th>\n <th>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e04\u0e37\u0e19<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"loan-history-full-table-body\">\n <\/tbody>\n <\/table>\n <\/section>\n\n <\/div>\n\n <div class=\"modal fade\" id=\"equipmentModal\" tabindex=\"-1\" aria-labelledby=\"equipmentModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header bg-success text-white\">\n <h5 class=\"modal-title\" id=\"equipmentModalLabel\">\u0e40\u0e1e\u0e34\u0e48\u0e21\/\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/h5>\n <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n <\/div>\n <div class=\"modal-body\">\n <form id=\"equipmentForm\">\n <input type=\"hidden\" id=\"equipmentId\">\n <div class=\"mb-3\">\n <label for=\"equipmentName\" class=\"form-label\">\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/label>\n <input type=\"text\" class=\"form-control\" id=\"equipmentName\" required>\n <\/div>\n <div class=\"mb-3\">\n <label for=\"equipmentSerial\" class=\"form-label\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e0b\u0e35\u0e40\u0e23\u0e35\u0e22\u0e25 (S\/N)<\/label>\n <input type=\"text\" class=\"form-control\" id=\"equipmentSerial\" required>\n <\/div>\n <div class=\"mb-3\">\n <label for=\"equipmentStatus\" class=\"form-label\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/label>\n <select class=\"form-select\" id=\"equipmentStatus\" required>\n <option value=\"Available\">Available (\u0e27\u0e48\u0e32\u0e07)<\/option>\n <option value=\"On Loan\" disabled>On Loan (\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21)<\/option>\n <option value=\"Maintenance\">Maintenance (\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07)<\/option>\n <\/select>\n <\/div>\n <\/form>\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n <button type=\"button\" class=\"btn btn-success\" onclick=\"saveEquipment()\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal fade\" id=\"loanModal\" tabindex=\"-1\" aria-labelledby=\"loanModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header bg-primary text-white\">\n <h5 class=\"modal-title\" id=\"loanModalLabel\">\u0e22\u0e37\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/h5>\n <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n <\/div>\n <div class=\"modal-body\">\n <h6 id=\"loanEquipmentName\" class=\"mb-3 text-info\"><\/h6>\n <form id=\"loanForm\">\n <input type=\"hidden\" id=\"loanEquipmentId\">\n <div class=\"mb-3\">\n <label for=\"borrowerName\" class=\"form-label\">\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21<\/label>\n <input type=\"text\" class=\"form-control\" id=\"borrowerName\" required>\n <\/div>\n <div class=\"mb-3\">\n <label for=\"borrowerDetail\" class=\"form-label\">\u0e41\u0e1c\u0e19\u0e01\/\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c<\/label>\n <input type=\"text\" class=\"form-control\" id=\"borrowerDetail\">\n <\/div>\n <div class=\"mb-3\">\n <label for=\"loanDate\" class=\"form-label\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21<\/label>\n <input type=\"date\" class=\"form-control\" id=\"loanDate\" value=\"\" required>\n <\/div>\n <\/form>\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"submitLoan()\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n <script>\n \/\/ --- 5. JavaScript Core Logic ---\n\n const EQUIPMENT_KEY = 'equipmentList';\n const LOAN_KEY = 'loanHistory';\n\n \/\/ 5.1 \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19: \u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\n document.addEventListener('DOMContentLoaded', () => {\n initializeStorage();\n renderEquipmentCards();\n \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e43\u0e2b\u0e49\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e22\u0e37\u0e21\n document.getElementById('loanDate').valueAsDate = new Date();\n });\n\n \/\/ 5.2 \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e21\u0e35\u0e43\u0e19 LocalStorage\n function initializeStorage() {\n if (!localStorage.getItem(EQUIPMENT_KEY)) {\n const initialEquipment = [\n { id: 1, name: 'Projector Epson EB-X05', serial: 'SN-PRO001', status: 'Available' },\n { id: 2, name: '\u0e01\u0e25\u0e49\u0e2d\u0e07 DSLR Canon 80D', serial: 'SN-CAM002', status: 'On Loan', currentBorrower: '\u0e2a\u0e21\u0e0a\u0e32\u0e22' },\n { id: 3, name: '\u0e0a\u0e38\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e44\u0e23\u0e49\u0e2a\u0e32\u0e22 Sennheiser', serial: 'SN-MIC003', status: 'Available' },\n { id: 4, name: '\u0e42\u0e19\u0e49\u0e15\u0e1a\u0e38\u0e4a\u0e01 Dell Latitude', serial: 'SN-LAP004', status: 'Maintenance' },\n ];\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(initialEquipment));\n }\n\n if (!localStorage.getItem(LOAN_KEY)) {\n const initialLoan = [\n { id: 101, equipmentId: 2, equipmentName: '\u0e01\u0e25\u0e49\u0e2d\u0e07 DSLR Canon 80D', borrower: '\u0e2a\u0e21\u0e0a\u0e32\u0e22', borrowerDetail: 'IT\/091-xxx-xxxx', loanDate: '2025-12-01', returnDate: null },\n { id: 102, equipmentId: 3, equipmentName: '\u0e0a\u0e38\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e44\u0e23\u0e49\u0e2a\u0e32\u0e22 Sennheiser', borrower: '\u0e21\u0e32\u0e19\u0e35', borrowerDetail: 'HR\/088-xxx-xxxx', loanDate: '2025-11-20', returnDate: '2025-11-25' },\n ];\n localStorage.setItem(LOAN_KEY, JSON.stringify(initialLoan));\n }\n }\n\n \/\/ 5.3 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e25\u0e30\u0e2a\u0e35\n function getStatusInfo(status) {\n switch (status) {\n case 'Available':\n return { text: '\u0e27\u0e48\u0e32\u0e07', class: 'available' };\n case 'On Loan':\n return { text: '\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21', class: 'on-loan' };\n case 'Maintenance':\n return { text: '\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07', class: 'maintenance' };\n default:\n return { text: status, class: 'bg-secondary text-white' };\n }\n }\n\n \/\/ 5.4 \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function getEquipment() {\n return JSON.parse(localStorage.getItem(EQUIPMENT_KEY) || '[]');\n }\n\n \/\/ 5.5 \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21\n function getLoans() {\n return JSON.parse(localStorage.getItem(LOAN_KEY) || '[]');\n }\n\n \/\/ 5.6 \u0e41\u0e2a\u0e14\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07 (Home)\n function renderEquipmentCards() {\n const equipmentList = getEquipment();\n const container = document.getElementById('equipment-list');\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\n container.innerHTML = ''; \/\/ \u0e40\u0e04\u0e25\u0e35\u0e22\u0e23\u0e4c\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e21\n\n const filteredList = equipmentList.filter(eq => \n eq.name.toLowerCase().includes(searchTerm) || \n eq.serial.toLowerCase().includes(searchTerm)\n );\n\n if (filteredList.length === 0) {\n container.innerHTML = `<div class=\"col-12\"><div class=\"alert alert-info\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32<\/div><\/div>`;\n return;\n }\n\n filteredList.forEach(eq => {\n const statusInfo = getStatusInfo(eq.status);\n const buttonHtml = eq.status === 'Available'\n ? `<button class=\"btn btn-primary btn-sm mt-2\" onclick=\"prepareLoanModal(${eq.id}, '${eq.name}')\">\n <i class=\"bi bi-box-arrow-in-up-right me-1\"><\/i> \u0e22\u0e37\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n <\/button>`\n : `<button class=\"btn btn-secondary btn-sm mt-2\" disabled>\n <i class=\"bi bi-person-fill me-1\"><\/i> ${eq.status === 'On Loan' && eq.currentBorrower ? eq.currentBorrower : statusInfo.text}\n <\/button>`;\n \n const cardHtml = `\n <div class=\"col-sm-6 col-md-4 col-lg-3 mb-4\">\n <div class=\"card card-equipment shadow-sm h-100 border-${statusInfo.class.includes('available') ? 'success' : statusInfo.class.includes('on-loan') ? 'danger' : 'warning'}\">\n <div class=\"card-body\">\n <h5 class=\"card-title text-truncate\">${eq.name}<\/h5>\n <p class=\"card-text text-muted mb-2\">S\/N: ${eq.serial}<\/p>\n <span class=\"badge status-badge ${statusInfo.class}\">${statusInfo.text}<\/span>\n ${buttonHtml}\n <\/div>\n <\/div>\n <\/div>\n `;\n container.innerHTML += cardHtml;\n });\n }\n\n \/\/ 5.7 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Modal \u0e22\u0e37\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function prepareLoanModal(equipmentId, equipmentName) {\n document.getElementById('loanEquipmentId').value = equipmentId;\n document.getElementById('loanEquipmentName').textContent = `\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c: ${equipmentName}`;\n document.getElementById('loanDate').valueAsDate = new Date(); \/\/ \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\n document.getElementById('loanForm').reset(); \/\/ \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15\u0e1f\u0e2d\u0e23\u0e4c\u0e21\n \n \/\/ \u0e43\u0e0a\u0e49 Bootstrap JS \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14 Modal\n const loanModal = new bootstrap.Modal(document.getElementById('loanModal'));\n loanModal.show();\n }\n\n \/\/ 5.8 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21\n function submitLoan() {\n const equipmentId = parseInt(document.getElementById('loanEquipmentId').value);\n const borrowerName = document.getElementById('borrowerName').value.trim();\n const borrowerDetail = document.getElementById('borrowerDetail').value.trim();\n const loanDate = document.getElementById('loanDate').value;\n\n if (!borrowerName || !loanDate) {\n alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21\u0e41\u0e25\u0e30\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21');\n return;\n }\n\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c: \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e1b\u0e47\u0e19 'On Loan'\n let equipmentList = getEquipment();\n const eqIndex = equipmentList.findIndex(eq => eq.id === equipmentId);\n if (eqIndex !== -1) {\n equipmentList[eqIndex].status = 'On Loan';\n equipmentList[eqIndex].currentBorrower = borrowerName; \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(equipmentList));\n }\n\n \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21\n let loanHistory = getLoans();\n \/\/ *** \u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 ID \u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21 ***\n const currentLoanIds = loanHistory.map(l => l.id);\n const maxLoanId = currentLoanIds.length > 0 ? Math.max(...currentLoanIds) : 100;\n const newLoanId = maxLoanId + 1;\n \n const newLoan = {\n id: newLoanId,\n equipmentId: equipmentId,\n equipmentName: equipmentList[eqIndex].name,\n borrower: borrowerName,\n borrowerDetail: borrowerDetail,\n loanDate: loanDate,\n returnDate: null\n };\n loanHistory.push(newLoan);\n localStorage.setItem(LOAN_KEY, JSON.stringify(loanHistory));\n\n \/\/ \u0e1b\u0e34\u0e14 Modal \u0e41\u0e25\u0e30\u0e23\u0e35\u0e40\u0e1f\u0e23\u0e0a\u0e2b\u0e19\u0e49\u0e32\n const loanModal = bootstrap.Modal.getInstance(document.getElementById('loanModal'));\n loanModal.hide();\n document.getElementById('loanForm').reset();\n renderEquipmentCards();\n alert(`\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21 ${equipmentList[eqIndex].name} \u0e42\u0e14\u0e22 ${borrowerName} \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22!`);\n }\n\n \/\/ 5.9 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Modal \u0e40\u0e1e\u0e34\u0e48\u0e21\/\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function prepareEquipmentModal(mode, equipmentId = null) {\n const modalTitle = document.getElementById('equipmentModalLabel');\n const form = document.getElementById('equipmentForm');\n const equipmentStatusSelect = document.getElementById('equipmentStatus');\n const saveButton = document.querySelector('#equipmentModal .btn-success');\n \n form.reset();\n document.getElementById('equipmentId').value = '';\n \n \/\/ \u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30 'On Loan' \u0e40\u0e1b\u0e47\u0e19\u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 (\u0e40\u0e1e\u0e23\u0e32\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e22\u0e37\u0e21\u0e1c\u0e48\u0e32\u0e19\u0e1b\u0e38\u0e48\u0e21\u0e22\u0e37\u0e21\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19)\n equipmentStatusSelect.querySelector('option[value=\"On Loan\"]').disabled = true;\n\n if (mode === 'add') {\n modalTitle.textContent = '\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e43\u0e2b\u0e21\u0e48';\n saveButton.textContent = '\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01';\n } else if (mode === 'edit' && equipmentId) {\n modalTitle.textContent = '\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c';\n saveButton.textContent = '\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15';\n \n const equipment = getEquipment().find(eq => eq.id === equipmentId);\n if (equipment) {\n document.getElementById('equipmentId').value = equipment.id;\n document.getElementById('equipmentName').value = equipment.name;\n document.getElementById('equipmentSerial').value = equipment.serial;\n \n \/\/ \u0e2b\u0e32\u0e01\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e1b\u0e47\u0e19 On Loan \u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e19\u0e35\u0e49\u0e0a\u0e31\u0e48\u0e27\u0e04\u0e23\u0e32\u0e27\u0e43\u0e19\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\n if (equipment.status === 'On Loan') {\n equipmentStatusSelect.querySelector('option[value=\"On Loan\"]').disabled = false;\n }\n document.getElementById('equipmentStatus').value = equipment.status;\n }\n }\n\n \/\/ \u0e43\u0e0a\u0e49 Bootstrap JS \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14 Modal (\u0e16\u0e49\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e40\u0e1b\u0e34\u0e14)\n const equipmentModal = new bootstrap.Modal(document.getElementById('equipmentModal'));\n equipmentModal.show();\n }\n\n \/\/ 5.10 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\/\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c (\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e19\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32 Modal \u0e04\u0e49\u0e32\u0e07)\n function saveEquipment() {\n const id = document.getElementById('equipmentId').value;\n const name = document.getElementById('equipmentName').value.trim();\n const serial = document.getElementById('equipmentSerial').value.trim();\n const status = document.getElementById('equipmentStatus').value;\n\n if (!name || !serial) {\n alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e25\u0e30\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e0b\u0e35\u0e40\u0e23\u0e35\u0e22\u0e25');\n return;\n }\n\n let equipmentList = getEquipment();\n \n if (id) { \/\/ \u0e41\u0e01\u0e49\u0e44\u0e02 (Update)\n const eqIndex = equipmentList.findIndex(eq => eq.id === parseInt(id));\n if (eqIndex !== -1) {\n equipmentList[eqIndex].name = name;\n equipmentList[eqIndex].serial = serial;\n equipmentList[eqIndex].status = status;\n \/\/ \u0e25\u0e1a currentBorrower \u0e16\u0e49\u0e32\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e1b\u0e47\u0e19 Available \u0e2b\u0e23\u0e37\u0e2d Maintenance\n if (status !== 'On Loan') {\n delete equipmentList[eqIndex].currentBorrower;\n }\n alert(`\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c ${name} \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22!`);\n }\n } else { \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e43\u0e2b\u0e21\u0e48 (Create)\n \/\/ *** \u0e41\u0e01\u0e49\u0e44\u0e02\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 ID \u0e43\u0e2b\u0e49\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e27\u0e48\u0e32\u0e44\u0e21\u0e48\u0e0b\u0e49\u0e33\u0e41\u0e25\u0e30\u0e40\u0e23\u0e35\u0e22\u0e07\u0e15\u0e48\u0e2d ***\n const currentIds = equipmentList.map(eq => eq.id);\n const maxId = currentIds.length > 0 ? Math.max(...currentIds) : 0;\n const newId = maxId + 1;\n\n const newEquipment = { id: newId, name: name, serial: serial, status: status };\n equipmentList.push(newEquipment);\n alert(`\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c ${name} (ID: ${newId}) \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22!`);\n }\n\n \/\/ *** \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e25\u0e07 LocalStorage \u0e17\u0e31\u0e19\u0e17\u0e35 ***\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(equipmentList));\n\n \/\/ *** \u0e2a\u0e48\u0e27\u0e19\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32 Modal \u0e04\u0e49\u0e32\u0e07 (Backdrop) ***\n try {\n const equipmentModalElement = document.getElementById('equipmentModal');\n \/\/ 1. \u0e14\u0e36\u0e07 Instance \u0e02\u0e2d\u0e07 Modal\n const equipmentModal = bootstrap.Modal.getInstance(equipmentModalElement);\n \n \/\/ 2. \u0e16\u0e49\u0e32\u0e21\u0e35 Instance \u0e43\u0e2b\u0e49\u0e2a\u0e31\u0e48\u0e07\u0e1b\u0e34\u0e14 Modal\n if (equipmentModal) {\n equipmentModal.hide();\n } else {\n \/\/ \u0e41\u0e1c\u0e19\u0e2a\u0e33\u0e23\u0e2d\u0e07: \u0e2a\u0e31\u0e48\u0e07\u0e1b\u0e34\u0e14 Modal \u0e41\u0e25\u0e30\u0e25\u0e1a Backdrop \u0e14\u0e49\u0e27\u0e22\u0e21\u0e37\u0e2d\n equipmentModalElement.classList.remove('show');\n equipmentModalElement.style.display = 'none';\n document.body.classList.remove('modal-open');\n \n const backdrop = document.querySelector('.modal-backdrop');\n if (backdrop) backdrop.remove();\n }\n\n } catch (e) {\n console.error(\"Error while hiding modal:\", e);\n \/\/ \u0e41\u0e1c\u0e19\u0e2a\u0e33\u0e23\u0e2d\u0e07\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22: \u0e2a\u0e31\u0e48\u0e07\u0e25\u0e1a Backdrop \u0e14\u0e49\u0e27\u0e22\u0e21\u0e37\u0e2d\n const backdrop = document.querySelector('.modal-backdrop');\n if (backdrop) backdrop.remove();\n }\n \n \/\/ \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e40\u0e2a\u0e21\u0e2d\n document.getElementById('equipmentForm').reset(); \n\n \/\/ \u0e23\u0e35\u0e40\u0e1f\u0e23\u0e0a\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e15\u0e32\u0e23\u0e32\u0e07\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32 Home\n renderManageTable();\n renderEquipmentCards();\n }\n\n \/\/ 5.11 \u0e25\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function deleteEquipment(equipmentId) {\n if (confirm(`\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c ID: ${equipmentId} \u0e08\u0e23\u0e34\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? \u0e01\u0e32\u0e23\u0e25\u0e1a\u0e08\u0e30\u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21\u0e14\u0e49\u0e27\u0e22`)) {\n \n \/\/ \u0e25\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n let equipmentList = getEquipment();\n equipmentList = equipmentList.filter(eq => eq.id !== equipmentId);\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(equipmentList));\n\n \/\/ \u0e25\u0e1a\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e43\u0e19 loanHistory \u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\n let loanHistory = getLoans();\n loanHistory = loanHistory.filter(loan => loan.equipmentId !== equipmentId);\n localStorage.setItem(LOAN_KEY, JSON.stringify(loanHistory));\n \n alert('\u0e25\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22!');\n renderManageTable();\n renderEquipmentCards();\n }\n }\n\n \/\/ 5.12 \u0e41\u0e2a\u0e14\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c (Manage)\n function renderManageTable() {\n const equipmentList = getEquipment();\n const tbody = document.getElementById('equipment-table-body');\n tbody.innerHTML = '';\n\n equipmentList.forEach(eq => {\n const statusInfo = getStatusInfo(eq.status);\n const rowHtml = `\n <tr>\n <td>${eq.id}<\/td>\n <td>${eq.name}<\/td>\n <td>${eq.serial}<\/td>\n <td><span class=\"badge ${statusInfo.class}\">${statusInfo.text}<\/span><\/td>\n <td>\n <button class=\"btn btn-warning btn-sm me-1\" onclick=\"prepareEquipmentModal('edit', ${eq.id})\">\n <i class=\"bi bi-pencil-fill\"><\/i> \u0e41\u0e01\u0e49\u0e44\u0e02\n <\/button>\n <button class=\"btn btn-danger btn-sm\" onclick=\"deleteEquipment(${eq.id})\" ${eq.status === 'On Loan' ? 'disabled' : ''}>\n <i class=\"bi bi-trash-fill\"><\/i> \u0e25\u0e1a\n <\/button>\n <\/td>\n <\/tr>\n `;\n tbody.innerHTML += rowHtml;\n });\n \/\/ \u0e2b\u0e32\u0e01\u0e15\u0e32\u0e23\u0e32\u0e07\u0e27\u0e48\u0e32\u0e07\n if (equipmentList.length === 0) {\n tbody.innerHTML = `<tr><td colspan=\"5\" class=\"text-center\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/td><\/tr>`;\n }\n\n renderLoanHistoryTables();\n }\n\n \/\/ 5.13 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function returnEquipment(loanId, equipmentId) {\n if (confirm(`\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e19\u0e35\u0e49?`)) {\n \/\/ 1. \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21 (\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 returnDate)\n let loanHistory = getLoans();\n const loanIndex = loanHistory.findIndex(loan => loan.id === loanId);\n if (loanIndex !== -1) {\n loanHistory[loanIndex].returnDate = new Date().toISOString().split('T')[0];\n localStorage.setItem(LOAN_KEY, JSON.stringify(loanHistory));\n }\n\n \/\/ 2. \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c (\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e1b\u0e47\u0e19 'Available')\n let equipmentList = getEquipment();\n const eqIndex = equipmentList.findIndex(eq => eq.id === equipmentId);\n if (eqIndex !== -1) {\n equipmentList[eqIndex].status = 'Available';\n delete equipmentList[eqIndex].currentBorrower;\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(equipmentList));\n }\n\n alert('\u0e23\u0e31\u0e1a\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22! \u0e2a\u0e16\u0e32\u0e19\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e16\u0e39\u0e01\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e40\u0e1b\u0e47\u0e19 \"\u0e27\u0e48\u0e32\u0e07\"');\n renderLoanHistoryTables();\n renderEquipmentCards();\n }\n }\n\n \/\/ 5.14 \u0e41\u0e2a\u0e14\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19\n function renderLoanHistoryTables() {\n const loanHistory = getLoans().sort((a, b) => new Date(b.loanDate) - new Date(a.loanDate));\n const currentTbody = document.getElementById('loan-history-current-table-body');\n const fullTbody = document.getElementById('loan-history-full-table-body');\n currentTbody.innerHTML = '';\n fullTbody.innerHTML = '';\n\n const activeLoans = loanHistory.filter(loan => loan.returnDate === null);\n \n \/\/ \u0e15\u0e32\u0e23\u0e32\u0e07\u0e22\u0e37\u0e21\u0e17\u0e35\u0e48\u0e01\u0e33\u0e25\u0e31\u0e07\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\n if (activeLoans.length > 0) {\n activeLoans.forEach(loan => {\n const rowHtml = `\n <tr>\n <td>${loan.equipmentName} (${loan.equipmentId})<\/td>\n <td>${loan.borrower} (${loan.borrowerDetail})<\/td>\n <td>${loan.loanDate}<\/td>\n <td><span class=\"badge bg-danger\">\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21<\/span><\/td>\n <td>\n <button class=\"btn btn-success btn-sm\" onclick=\"returnEquipment(${loan.id}, ${loan.equipmentId})\">\n <i class=\"bi bi-box-arrow-in-left me-1\"><\/i> \u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n <\/button>\n <\/td>\n <\/tr>\n `;\n currentTbody.innerHTML += rowHtml;\n });\n } else {\n currentTbody.innerHTML = `<tr><td colspan=\"5\" class=\"text-center\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e01\u0e33\u0e25\u0e31\u0e07\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21<\/td><\/tr>`;\n }\n\n \/\/ \u0e15\u0e32\u0e23\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\n loanHistory.forEach(loan => {\n const returnDateText = loan.returnDate || '<span class=\"badge bg-secondary\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e04\u0e37\u0e19<\/span>';\n const rowHtml = `\n <tr>\n <td>${loan.equipmentName}<\/td>\n <td>${loan.borrower}<\/td>\n <td>${loan.loanDate}<\/td>\n <td>${returnDateText}<\/td>\n <\/tr>\n `;\n fullTbody.innerHTML += rowHtml;\n });\n if (loanHistory.length === 0) {\n fullTbody.innerHTML = `<tr><td colspan=\"4\" class=\"text-center\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19<\/td><\/tr>`;\n }\n }\n\n \/\/ 5.15 \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n function showSection(sectionId) {\n \/\/ \u0e0b\u0e48\u0e2d\u0e19\u0e17\u0e38\u0e01 Section\n document.querySelectorAll('section').forEach(section => {\n section.style.display = 'none';\n });\n \/\/ \u0e25\u0e1a active class \u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01 Navbar\n document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {\n link.classList.remove('active');\n });\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07 Section \u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01\n document.getElementById(`${sectionId}-section`).style.display = 'block';\n \n \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 active class \u0e43\u0e19 Navbar\n const activeLink = document.querySelector(`[onclick=\"showSection('${sectionId}')\"]`);\n if (activeLink) activeLink.classList.add('active');\n\n \/\/ \u0e40\u0e23\u0e35\u0e22\u0e01\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n if (sectionId === 'home') {\n renderEquipmentCards();\n } else if (sectionId === 'manage') {\n renderManageTable();\n } else if (sectionId === 'returns') {\n renderLoanHistoryTables();\n }\n }\n\n \/\/ \u0e42\u0e0a\u0e27\u0e4c\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e42\u0e2b\u0e25\u0e14\n showSection('home');\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e37\u0e21\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e37\u0e21\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 (\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14) \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e31\u0e1a\u0e04\u0e37\u0e19 \/ \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e43\u0e2b\u0e21\u0e48 ID \u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c Serial No. \u0e2a\u0e16\u0e32\u0e19\u0e30 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 \u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21 (\u0e23\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e04\u0e37\u0e19) \u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21 \u0e2a\u0e16\u0e32\u0e19\u0e30 \u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23 \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e04\u0e37\u0e19 \u0e40\u0e1e\u0e34\u0e48\u0e21\/\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e0b\u0e35\u0e40\u0e23\u0e35\u0e22\u0e25 (S\/N) \u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 Available (\u0e27\u0e48\u0e32\u0e07)On Loan (\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21)Maintenance (\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07) \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 \u0e22\u0e37\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21 \u0e41\u0e1c\u0e19\u0e01\/\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21 \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01 \u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4808","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/pages\/4808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/comments?post=4808"}],"version-history":[{"count":2,"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/pages\/4808\/revisions"}],"predecessor-version":[{"id":4813,"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/pages\/4808\/revisions\/4813"}],"wp:attachment":[{"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/media?parent=4808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4808,"date":"2025-12-04T13:06:34","date_gmt":"2025-12-04T06:06:34","guid":{"rendered":"https:\/\/phakph.com\/sso\/?page_id=4808"},"modified":"2025-12-04T13:11:25","modified_gmt":"2025-12-04T06:11:25","slug":"412-2","status":"publish","type":"page","link":"https:\/\/phakph.com\/sso\/index.php\/412-2\/","title":{"rendered":"\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n \u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e37\u0e21\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n <style>\n \/* CSS \u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 *\/\n .card-equipment {\n transition: transform 0.2s;\n cursor: pointer;\n }\n .card-equipment:hover {\n transform: translateY(-5px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n .status-badge {\n font-size: 0.9em;\n padding: 0.4em 0.8em;\n }\n .available { background-color: #d1e7dd; color: #0f5132; }\n .on-loan { background-color: #f8d7da; color: #842029; }\n .maintenance { background-color: #fff3cd; color: #664d03; }\n <\/style>\n<\/head>\n<body>\n\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark shadow-sm\">\n <div class=\"container\">\n <a class=\"navbar-brand\" href=\"#\">\n <i class=\"bi bi-tools me-2\"><\/i>\u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e37\u0e21\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n <\/a>\n <div class=\"collapse navbar-collapse\">\n <ul class=\"navbar-nav me-auto mb-2 mb-lg-0\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\" href=\"#\" onclick=\"showSection('home')\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 (\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14)<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\" onclick=\"showSection('manage')\">\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\" onclick=\"showSection('returns')\">\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e31\u0e1a\u0e04\u0e37\u0e19 \/ \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21<\/a>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/nav>\n\n <div class=\"container mt-4\">\n\n <section id=\"home-section\">\n <h2 class=\"mb-4 text-primary\"><i class=\"bi bi-grid-fill me-2\"><\/i>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h2>\n <div class=\"row mb-3\">\n <div class=\"col-md-4\">\n <input type=\"text\" id=\"searchInput\" class=\"form-control\" onkeyup=\"renderEquipmentCards()\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c...\">\n <\/div>\n <\/div>\n <div id=\"equipment-list\" class=\"row\">\n <\/div>\n <\/section>\n\n <section id=\"manage-section\" style=\"display:none;\">\n <h2 class=\"mb-4 text-success\"><i class=\"bi bi-list-check me-2\"><\/i>\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/h2>\n <button class=\"btn btn-success mb-3\" data-bs-toggle=\"modal\" data-bs-target=\"#equipmentModal\" onclick=\"prepareEquipmentModal('add')\">\n <i class=\"bi bi-plus-circle me-1\"><\/i>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e43\u0e2b\u0e21\u0e48\n <\/button>\n <table class=\"table table-striped table-hover\">\n <thead>\n <tr>\n <th>ID<\/th>\n <th>\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/th>\n <th>Serial No.<\/th>\n <th>\u0e2a\u0e16\u0e32\u0e19\u0e30<\/th>\n <th>\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"equipment-table-body\">\n <\/tbody>\n <\/table>\n <\/section>\n\n <section id=\"returns-section\" style=\"display:none;\">\n <h2 class=\"mb-4 text-warning\"><i class=\"bi bi-arrow-return-left me-2\"><\/i>\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21 (\u0e23\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e04\u0e37\u0e19)<\/h2>\n <table class=\"table table-bordered\">\n <thead>\n <tr class=\"table-primary\">\n <th>\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/th>\n <th>\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21<\/th>\n <th>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21<\/th>\n <th>\u0e2a\u0e16\u0e32\u0e19\u0e30<\/th>\n <th>\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"loan-history-current-table-body\">\n <\/tbody>\n <\/table>\n\n <h3 class=\"mt-5 text-secondary\"><i class=\"bi bi-clock-history me-2\"><\/i>\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h3>\n <table class=\"table table-striped table-sm\">\n <thead>\n <tr>\n <th>\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/th>\n <th>\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21<\/th>\n <th>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21<\/th>\n <th>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e04\u0e37\u0e19<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"loan-history-full-table-body\">\n <\/tbody>\n <\/table>\n <\/section>\n\n <\/div>\n\n <div class=\"modal fade\" id=\"equipmentModal\" tabindex=\"-1\" aria-labelledby=\"equipmentModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header bg-success text-white\">\n <h5 class=\"modal-title\" id=\"equipmentModalLabel\">\u0e40\u0e1e\u0e34\u0e48\u0e21\/\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/h5>\n <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n <\/div>\n <div class=\"modal-body\">\n <form id=\"equipmentForm\">\n <input type=\"hidden\" id=\"equipmentId\">\n <div class=\"mb-3\">\n <label for=\"equipmentName\" class=\"form-label\">\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/label>\n <input type=\"text\" class=\"form-control\" id=\"equipmentName\" required>\n <\/div>\n <div class=\"mb-3\">\n <label for=\"equipmentSerial\" class=\"form-label\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e0b\u0e35\u0e40\u0e23\u0e35\u0e22\u0e25 (S\/N)<\/label>\n <input type=\"text\" class=\"form-control\" id=\"equipmentSerial\" required>\n <\/div>\n <div class=\"mb-3\">\n <label for=\"equipmentStatus\" class=\"form-label\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/label>\n <select class=\"form-select\" id=\"equipmentStatus\" required>\n <option value=\"Available\">Available (\u0e27\u0e48\u0e32\u0e07)<\/option>\n <option value=\"On Loan\" disabled>On Loan (\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21)<\/option>\n <option value=\"Maintenance\">Maintenance (\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07)<\/option>\n <\/select>\n <\/div>\n <\/form>\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n <button type=\"button\" class=\"btn btn-success\" onclick=\"saveEquipment()\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal fade\" id=\"loanModal\" tabindex=\"-1\" aria-labelledby=\"loanModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header bg-primary text-white\">\n <h5 class=\"modal-title\" id=\"loanModalLabel\">\u0e22\u0e37\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/h5>\n <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n <\/div>\n <div class=\"modal-body\">\n <h6 id=\"loanEquipmentName\" class=\"mb-3 text-info\"><\/h6>\n <form id=\"loanForm\">\n <input type=\"hidden\" id=\"loanEquipmentId\">\n <div class=\"mb-3\">\n <label for=\"borrowerName\" class=\"form-label\">\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21<\/label>\n <input type=\"text\" class=\"form-control\" id=\"borrowerName\" required>\n <\/div>\n <div class=\"mb-3\">\n <label for=\"borrowerDetail\" class=\"form-label\">\u0e41\u0e1c\u0e19\u0e01\/\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c<\/label>\n <input type=\"text\" class=\"form-control\" id=\"borrowerDetail\">\n <\/div>\n <div class=\"mb-3\">\n <label for=\"loanDate\" class=\"form-label\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21<\/label>\n <input type=\"date\" class=\"form-control\" id=\"loanDate\" value=\"\" required>\n <\/div>\n <\/form>\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"submitLoan()\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n <script>\n \/\/ --- 5. JavaScript Core Logic ---\n\n const EQUIPMENT_KEY = 'equipmentList';\n const LOAN_KEY = 'loanHistory';\n\n \/\/ 5.1 \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19: \u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\n document.addEventListener('DOMContentLoaded', () => {\n initializeStorage();\n renderEquipmentCards();\n \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e43\u0e2b\u0e49\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e22\u0e37\u0e21\n document.getElementById('loanDate').valueAsDate = new Date();\n });\n\n \/\/ 5.2 \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e21\u0e35\u0e43\u0e19 LocalStorage\n function initializeStorage() {\n if (!localStorage.getItem(EQUIPMENT_KEY)) {\n const initialEquipment = [\n { id: 1, name: 'Projector Epson EB-X05', serial: 'SN-PRO001', status: 'Available' },\n { id: 2, name: '\u0e01\u0e25\u0e49\u0e2d\u0e07 DSLR Canon 80D', serial: 'SN-CAM002', status: 'On Loan', currentBorrower: '\u0e2a\u0e21\u0e0a\u0e32\u0e22' },\n { id: 3, name: '\u0e0a\u0e38\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e44\u0e23\u0e49\u0e2a\u0e32\u0e22 Sennheiser', serial: 'SN-MIC003', status: 'Available' },\n { id: 4, name: '\u0e42\u0e19\u0e49\u0e15\u0e1a\u0e38\u0e4a\u0e01 Dell Latitude', serial: 'SN-LAP004', status: 'Maintenance' },\n ];\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(initialEquipment));\n }\n\n if (!localStorage.getItem(LOAN_KEY)) {\n const initialLoan = [\n { id: 101, equipmentId: 2, equipmentName: '\u0e01\u0e25\u0e49\u0e2d\u0e07 DSLR Canon 80D', borrower: '\u0e2a\u0e21\u0e0a\u0e32\u0e22', borrowerDetail: 'IT\/091-xxx-xxxx', loanDate: '2025-12-01', returnDate: null },\n { id: 102, equipmentId: 3, equipmentName: '\u0e0a\u0e38\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e44\u0e23\u0e49\u0e2a\u0e32\u0e22 Sennheiser', borrower: '\u0e21\u0e32\u0e19\u0e35', borrowerDetail: 'HR\/088-xxx-xxxx', loanDate: '2025-11-20', returnDate: '2025-11-25' },\n ];\n localStorage.setItem(LOAN_KEY, JSON.stringify(initialLoan));\n }\n }\n\n \/\/ 5.3 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e25\u0e30\u0e2a\u0e35\n function getStatusInfo(status) {\n switch (status) {\n case 'Available':\n return { text: '\u0e27\u0e48\u0e32\u0e07', class: 'available' };\n case 'On Loan':\n return { text: '\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21', class: 'on-loan' };\n case 'Maintenance':\n return { text: '\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07', class: 'maintenance' };\n default:\n return { text: status, class: 'bg-secondary text-white' };\n }\n }\n\n \/\/ 5.4 \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function getEquipment() {\n return JSON.parse(localStorage.getItem(EQUIPMENT_KEY) || '[]');\n }\n\n \/\/ 5.5 \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21\n function getLoans() {\n return JSON.parse(localStorage.getItem(LOAN_KEY) || '[]');\n }\n\n \/\/ 5.6 \u0e41\u0e2a\u0e14\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07 (Home)\n function renderEquipmentCards() {\n const equipmentList = getEquipment();\n const container = document.getElementById('equipment-list');\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\n container.innerHTML = ''; \/\/ \u0e40\u0e04\u0e25\u0e35\u0e22\u0e23\u0e4c\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e21\n\n const filteredList = equipmentList.filter(eq => \n eq.name.toLowerCase().includes(searchTerm) || \n eq.serial.toLowerCase().includes(searchTerm)\n );\n\n if (filteredList.length === 0) {\n container.innerHTML = `<div class=\"col-12\"><div class=\"alert alert-info\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32<\/div><\/div>`;\n return;\n }\n\n filteredList.forEach(eq => {\n const statusInfo = getStatusInfo(eq.status);\n const buttonHtml = eq.status === 'Available'\n ? `<button class=\"btn btn-primary btn-sm mt-2\" onclick=\"prepareLoanModal(${eq.id}, '${eq.name}')\">\n <i class=\"bi bi-box-arrow-in-up-right me-1\"><\/i> \u0e22\u0e37\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n <\/button>`\n : `<button class=\"btn btn-secondary btn-sm mt-2\" disabled>\n <i class=\"bi bi-person-fill me-1\"><\/i> ${eq.status === 'On Loan' && eq.currentBorrower ? eq.currentBorrower : statusInfo.text}\n <\/button>`;\n \n const cardHtml = `\n <div class=\"col-sm-6 col-md-4 col-lg-3 mb-4\">\n <div class=\"card card-equipment shadow-sm h-100 border-${statusInfo.class.includes('available') ? 'success' : statusInfo.class.includes('on-loan') ? 'danger' : 'warning'}\">\n <div class=\"card-body\">\n <h5 class=\"card-title text-truncate\">${eq.name}<\/h5>\n <p class=\"card-text text-muted mb-2\">S\/N: ${eq.serial}<\/p>\n <span class=\"badge status-badge ${statusInfo.class}\">${statusInfo.text}<\/span>\n ${buttonHtml}\n <\/div>\n <\/div>\n <\/div>\n `;\n container.innerHTML += cardHtml;\n });\n }\n\n \/\/ 5.7 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Modal \u0e22\u0e37\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function prepareLoanModal(equipmentId, equipmentName) {\n document.getElementById('loanEquipmentId').value = equipmentId;\n document.getElementById('loanEquipmentName').textContent = `\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c: ${equipmentName}`;\n document.getElementById('loanDate').valueAsDate = new Date(); \/\/ \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\n document.getElementById('loanForm').reset(); \/\/ \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15\u0e1f\u0e2d\u0e23\u0e4c\u0e21\n \n \/\/ \u0e43\u0e0a\u0e49 Bootstrap JS \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14 Modal\n const loanModal = new bootstrap.Modal(document.getElementById('loanModal'));\n loanModal.show();\n }\n\n \/\/ 5.8 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21\n function submitLoan() {\n const equipmentId = parseInt(document.getElementById('loanEquipmentId').value);\n const borrowerName = document.getElementById('borrowerName').value.trim();\n const borrowerDetail = document.getElementById('borrowerDetail').value.trim();\n const loanDate = document.getElementById('loanDate').value;\n\n if (!borrowerName || !loanDate) {\n alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21\u0e41\u0e25\u0e30\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21');\n return;\n }\n\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c: \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e1b\u0e47\u0e19 'On Loan'\n let equipmentList = getEquipment();\n const eqIndex = equipmentList.findIndex(eq => eq.id === equipmentId);\n if (eqIndex !== -1) {\n equipmentList[eqIndex].status = 'On Loan';\n equipmentList[eqIndex].currentBorrower = borrowerName; \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(equipmentList));\n }\n\n \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21\n let loanHistory = getLoans();\n \/\/ *** \u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 ID \u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21 ***\n const currentLoanIds = loanHistory.map(l => l.id);\n const maxLoanId = currentLoanIds.length > 0 ? Math.max(...currentLoanIds) : 100;\n const newLoanId = maxLoanId + 1;\n \n const newLoan = {\n id: newLoanId,\n equipmentId: equipmentId,\n equipmentName: equipmentList[eqIndex].name,\n borrower: borrowerName,\n borrowerDetail: borrowerDetail,\n loanDate: loanDate,\n returnDate: null\n };\n loanHistory.push(newLoan);\n localStorage.setItem(LOAN_KEY, JSON.stringify(loanHistory));\n\n \/\/ \u0e1b\u0e34\u0e14 Modal \u0e41\u0e25\u0e30\u0e23\u0e35\u0e40\u0e1f\u0e23\u0e0a\u0e2b\u0e19\u0e49\u0e32\n const loanModal = bootstrap.Modal.getInstance(document.getElementById('loanModal'));\n loanModal.hide();\n document.getElementById('loanForm').reset();\n renderEquipmentCards();\n alert(`\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21 ${equipmentList[eqIndex].name} \u0e42\u0e14\u0e22 ${borrowerName} \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22!`);\n }\n\n \/\/ 5.9 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Modal \u0e40\u0e1e\u0e34\u0e48\u0e21\/\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function prepareEquipmentModal(mode, equipmentId = null) {\n const modalTitle = document.getElementById('equipmentModalLabel');\n const form = document.getElementById('equipmentForm');\n const equipmentStatusSelect = document.getElementById('equipmentStatus');\n const saveButton = document.querySelector('#equipmentModal .btn-success');\n \n form.reset();\n document.getElementById('equipmentId').value = '';\n \n \/\/ \u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30 'On Loan' \u0e40\u0e1b\u0e47\u0e19\u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 (\u0e40\u0e1e\u0e23\u0e32\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e22\u0e37\u0e21\u0e1c\u0e48\u0e32\u0e19\u0e1b\u0e38\u0e48\u0e21\u0e22\u0e37\u0e21\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19)\n equipmentStatusSelect.querySelector('option[value=\"On Loan\"]').disabled = true;\n\n if (mode === 'add') {\n modalTitle.textContent = '\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e43\u0e2b\u0e21\u0e48';\n saveButton.textContent = '\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01';\n } else if (mode === 'edit' && equipmentId) {\n modalTitle.textContent = '\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c';\n saveButton.textContent = '\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15';\n \n const equipment = getEquipment().find(eq => eq.id === equipmentId);\n if (equipment) {\n document.getElementById('equipmentId').value = equipment.id;\n document.getElementById('equipmentName').value = equipment.name;\n document.getElementById('equipmentSerial').value = equipment.serial;\n \n \/\/ \u0e2b\u0e32\u0e01\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e1b\u0e47\u0e19 On Loan \u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e19\u0e35\u0e49\u0e0a\u0e31\u0e48\u0e27\u0e04\u0e23\u0e32\u0e27\u0e43\u0e19\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\n if (equipment.status === 'On Loan') {\n equipmentStatusSelect.querySelector('option[value=\"On Loan\"]').disabled = false;\n }\n document.getElementById('equipmentStatus').value = equipment.status;\n }\n }\n\n \/\/ \u0e43\u0e0a\u0e49 Bootstrap JS \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14 Modal (\u0e16\u0e49\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e40\u0e1b\u0e34\u0e14)\n const equipmentModal = new bootstrap.Modal(document.getElementById('equipmentModal'));\n equipmentModal.show();\n }\n\n \/\/ 5.10 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\/\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c (\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e19\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32 Modal \u0e04\u0e49\u0e32\u0e07)\n function saveEquipment() {\n const id = document.getElementById('equipmentId').value;\n const name = document.getElementById('equipmentName').value.trim();\n const serial = document.getElementById('equipmentSerial').value.trim();\n const status = document.getElementById('equipmentStatus').value;\n\n if (!name || !serial) {\n alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e25\u0e30\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e0b\u0e35\u0e40\u0e23\u0e35\u0e22\u0e25');\n return;\n }\n\n let equipmentList = getEquipment();\n \n if (id) { \/\/ \u0e41\u0e01\u0e49\u0e44\u0e02 (Update)\n const eqIndex = equipmentList.findIndex(eq => eq.id === parseInt(id));\n if (eqIndex !== -1) {\n equipmentList[eqIndex].name = name;\n equipmentList[eqIndex].serial = serial;\n equipmentList[eqIndex].status = status;\n \/\/ \u0e25\u0e1a currentBorrower \u0e16\u0e49\u0e32\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e1b\u0e47\u0e19 Available \u0e2b\u0e23\u0e37\u0e2d Maintenance\n if (status !== 'On Loan') {\n delete equipmentList[eqIndex].currentBorrower;\n }\n alert(`\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c ${name} \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22!`);\n }\n } else { \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e43\u0e2b\u0e21\u0e48 (Create)\n \/\/ *** \u0e41\u0e01\u0e49\u0e44\u0e02\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 ID \u0e43\u0e2b\u0e49\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e27\u0e48\u0e32\u0e44\u0e21\u0e48\u0e0b\u0e49\u0e33\u0e41\u0e25\u0e30\u0e40\u0e23\u0e35\u0e22\u0e07\u0e15\u0e48\u0e2d ***\n const currentIds = equipmentList.map(eq => eq.id);\n const maxId = currentIds.length > 0 ? Math.max(...currentIds) : 0;\n const newId = maxId + 1;\n\n const newEquipment = { id: newId, name: name, serial: serial, status: status };\n equipmentList.push(newEquipment);\n alert(`\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c ${name} (ID: ${newId}) \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22!`);\n }\n\n \/\/ *** \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e25\u0e07 LocalStorage \u0e17\u0e31\u0e19\u0e17\u0e35 ***\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(equipmentList));\n\n \/\/ *** \u0e2a\u0e48\u0e27\u0e19\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32 Modal \u0e04\u0e49\u0e32\u0e07 (Backdrop) ***\n try {\n const equipmentModalElement = document.getElementById('equipmentModal');\n \/\/ 1. \u0e14\u0e36\u0e07 Instance \u0e02\u0e2d\u0e07 Modal\n const equipmentModal = bootstrap.Modal.getInstance(equipmentModalElement);\n \n \/\/ 2. \u0e16\u0e49\u0e32\u0e21\u0e35 Instance \u0e43\u0e2b\u0e49\u0e2a\u0e31\u0e48\u0e07\u0e1b\u0e34\u0e14 Modal\n if (equipmentModal) {\n equipmentModal.hide();\n } else {\n \/\/ \u0e41\u0e1c\u0e19\u0e2a\u0e33\u0e23\u0e2d\u0e07: \u0e2a\u0e31\u0e48\u0e07\u0e1b\u0e34\u0e14 Modal \u0e41\u0e25\u0e30\u0e25\u0e1a Backdrop \u0e14\u0e49\u0e27\u0e22\u0e21\u0e37\u0e2d\n equipmentModalElement.classList.remove('show');\n equipmentModalElement.style.display = 'none';\n document.body.classList.remove('modal-open');\n \n const backdrop = document.querySelector('.modal-backdrop');\n if (backdrop) backdrop.remove();\n }\n\n } catch (e) {\n console.error(\"Error while hiding modal:\", e);\n \/\/ \u0e41\u0e1c\u0e19\u0e2a\u0e33\u0e23\u0e2d\u0e07\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22: \u0e2a\u0e31\u0e48\u0e07\u0e25\u0e1a Backdrop \u0e14\u0e49\u0e27\u0e22\u0e21\u0e37\u0e2d\n const backdrop = document.querySelector('.modal-backdrop');\n if (backdrop) backdrop.remove();\n }\n \n \/\/ \u0e23\u0e35\u0e40\u0e0b\u0e47\u0e15\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e40\u0e2a\u0e21\u0e2d\n document.getElementById('equipmentForm').reset(); \n\n \/\/ \u0e23\u0e35\u0e40\u0e1f\u0e23\u0e0a\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e15\u0e32\u0e23\u0e32\u0e07\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32 Home\n renderManageTable();\n renderEquipmentCards();\n }\n\n \/\/ 5.11 \u0e25\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function deleteEquipment(equipmentId) {\n if (confirm(`\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c ID: ${equipmentId} \u0e08\u0e23\u0e34\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? \u0e01\u0e32\u0e23\u0e25\u0e1a\u0e08\u0e30\u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21\u0e14\u0e49\u0e27\u0e22`)) {\n \n \/\/ \u0e25\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n let equipmentList = getEquipment();\n equipmentList = equipmentList.filter(eq => eq.id !== equipmentId);\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(equipmentList));\n\n \/\/ \u0e25\u0e1a\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e43\u0e19 loanHistory \u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\n let loanHistory = getLoans();\n loanHistory = loanHistory.filter(loan => loan.equipmentId !== equipmentId);\n localStorage.setItem(LOAN_KEY, JSON.stringify(loanHistory));\n \n alert('\u0e25\u0e1a\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22!');\n renderManageTable();\n renderEquipmentCards();\n }\n }\n\n \/\/ 5.12 \u0e41\u0e2a\u0e14\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c (Manage)\n function renderManageTable() {\n const equipmentList = getEquipment();\n const tbody = document.getElementById('equipment-table-body');\n tbody.innerHTML = '';\n\n equipmentList.forEach(eq => {\n const statusInfo = getStatusInfo(eq.status);\n const rowHtml = `\n <tr>\n <td>${eq.id}<\/td>\n <td>${eq.name}<\/td>\n <td>${eq.serial}<\/td>\n <td><span class=\"badge ${statusInfo.class}\">${statusInfo.text}<\/span><\/td>\n <td>\n <button class=\"btn btn-warning btn-sm me-1\" onclick=\"prepareEquipmentModal('edit', ${eq.id})\">\n <i class=\"bi bi-pencil-fill\"><\/i> \u0e41\u0e01\u0e49\u0e44\u0e02\n <\/button>\n <button class=\"btn btn-danger btn-sm\" onclick=\"deleteEquipment(${eq.id})\" ${eq.status === 'On Loan' ? 'disabled' : ''}>\n <i class=\"bi bi-trash-fill\"><\/i> \u0e25\u0e1a\n <\/button>\n <\/td>\n <\/tr>\n `;\n tbody.innerHTML += rowHtml;\n });\n \/\/ \u0e2b\u0e32\u0e01\u0e15\u0e32\u0e23\u0e32\u0e07\u0e27\u0e48\u0e32\u0e07\n if (equipmentList.length === 0) {\n tbody.innerHTML = `<tr><td colspan=\"5\" class=\"text-center\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/td><\/tr>`;\n }\n\n renderLoanHistoryTables();\n }\n\n \/\/ 5.13 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n function returnEquipment(loanId, equipmentId) {\n if (confirm(`\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e19\u0e35\u0e49?`)) {\n \/\/ 1. \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21 (\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 returnDate)\n let loanHistory = getLoans();\n const loanIndex = loanHistory.findIndex(loan => loan.id === loanId);\n if (loanIndex !== -1) {\n loanHistory[loanIndex].returnDate = new Date().toISOString().split('T')[0];\n localStorage.setItem(LOAN_KEY, JSON.stringify(loanHistory));\n }\n\n \/\/ 2. \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c (\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e1b\u0e47\u0e19 'Available')\n let equipmentList = getEquipment();\n const eqIndex = equipmentList.findIndex(eq => eq.id === equipmentId);\n if (eqIndex !== -1) {\n equipmentList[eqIndex].status = 'Available';\n delete equipmentList[eqIndex].currentBorrower;\n localStorage.setItem(EQUIPMENT_KEY, JSON.stringify(equipmentList));\n }\n\n alert('\u0e23\u0e31\u0e1a\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22! \u0e2a\u0e16\u0e32\u0e19\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e16\u0e39\u0e01\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e40\u0e1b\u0e47\u0e19 \"\u0e27\u0e48\u0e32\u0e07\"');\n renderLoanHistoryTables();\n renderEquipmentCards();\n }\n }\n\n \/\/ 5.14 \u0e41\u0e2a\u0e14\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19\n function renderLoanHistoryTables() {\n const loanHistory = getLoans().sort((a, b) => new Date(b.loanDate) - new Date(a.loanDate));\n const currentTbody = document.getElementById('loan-history-current-table-body');\n const fullTbody = document.getElementById('loan-history-full-table-body');\n currentTbody.innerHTML = '';\n fullTbody.innerHTML = '';\n\n const activeLoans = loanHistory.filter(loan => loan.returnDate === null);\n \n \/\/ \u0e15\u0e32\u0e23\u0e32\u0e07\u0e22\u0e37\u0e21\u0e17\u0e35\u0e48\u0e01\u0e33\u0e25\u0e31\u0e07\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\n if (activeLoans.length > 0) {\n activeLoans.forEach(loan => {\n const rowHtml = `\n <tr>\n <td>${loan.equipmentName} (${loan.equipmentId})<\/td>\n <td>${loan.borrower} (${loan.borrowerDetail})<\/td>\n <td>${loan.loanDate}<\/td>\n <td><span class=\"badge bg-danger\">\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21<\/span><\/td>\n <td>\n <button class=\"btn btn-success btn-sm\" onclick=\"returnEquipment(${loan.id}, ${loan.equipmentId})\">\n <i class=\"bi bi-box-arrow-in-left me-1\"><\/i> \u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\n <\/button>\n <\/td>\n <\/tr>\n `;\n currentTbody.innerHTML += rowHtml;\n });\n } else {\n currentTbody.innerHTML = `<tr><td colspan=\"5\" class=\"text-center\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e01\u0e33\u0e25\u0e31\u0e07\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21<\/td><\/tr>`;\n }\n\n \/\/ \u0e15\u0e32\u0e23\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\n loanHistory.forEach(loan => {\n const returnDateText = loan.returnDate || '<span class=\"badge bg-secondary\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e04\u0e37\u0e19<\/span>';\n const rowHtml = `\n <tr>\n <td>${loan.equipmentName}<\/td>\n <td>${loan.borrower}<\/td>\n <td>${loan.loanDate}<\/td>\n <td>${returnDateText}<\/td>\n <\/tr>\n `;\n fullTbody.innerHTML += rowHtml;\n });\n if (loanHistory.length === 0) {\n fullTbody.innerHTML = `<tr><td colspan=\"4\" class=\"text-center\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19<\/td><\/tr>`;\n }\n }\n\n \/\/ 5.15 \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n function showSection(sectionId) {\n \/\/ \u0e0b\u0e48\u0e2d\u0e19\u0e17\u0e38\u0e01 Section\n document.querySelectorAll('section').forEach(section => {\n section.style.display = 'none';\n });\n \/\/ \u0e25\u0e1a active class \u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01 Navbar\n document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {\n link.classList.remove('active');\n });\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07 Section \u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01\n document.getElementById(`${sectionId}-section`).style.display = 'block';\n \n \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 active class \u0e43\u0e19 Navbar\n const activeLink = document.querySelector(`[onclick=\"showSection('${sectionId}')\"]`);\n if (activeLink) activeLink.classList.add('active');\n\n \/\/ \u0e40\u0e23\u0e35\u0e22\u0e01\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n if (sectionId === 'home') {\n renderEquipmentCards();\n } else if (sectionId === 'manage') {\n renderManageTable();\n } else if (sectionId === 'returns') {\n renderLoanHistoryTables();\n }\n }\n\n \/\/ \u0e42\u0e0a\u0e27\u0e4c\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e42\u0e2b\u0e25\u0e14\n showSection('home');\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e37\u0e21\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e23\u0e30\u0e1a\u0e1a\u0e22\u0e37\u0e21\u0e04\u0e37\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 (\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14) \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e31\u0e1a\u0e04\u0e37\u0e19 \/ \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e43\u0e2b\u0e21\u0e48 ID \u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c Serial No. \u0e2a\u0e16\u0e32\u0e19\u0e30 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 \u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21 (\u0e23\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e04\u0e37\u0e19) \u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21 \u0e2a\u0e16\u0e32\u0e19\u0e30 \u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23 \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21-\u0e04\u0e37\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e04\u0e37\u0e19 \u0e40\u0e1e\u0e34\u0e48\u0e21\/\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e0b\u0e35\u0e40\u0e23\u0e35\u0e22\u0e25 (S\/N) \u0e2a\u0e16\u0e32\u0e19\u0e30\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 Available (\u0e27\u0e48\u0e32\u0e07)On Loan (\u0e16\u0e39\u0e01\u0e22\u0e37\u0e21)Maintenance (\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07) \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 \u0e22\u0e37\u0e21\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c \u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e22\u0e37\u0e21 \u0e41\u0e1c\u0e19\u0e01\/\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e22\u0e37\u0e21 \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01 \u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e22\u0e37\u0e21<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4808","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/pages\/4808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/comments?post=4808"}],"version-history":[{"count":2,"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/pages\/4808\/revisions"}],"predecessor-version":[{"id":4813,"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/pages\/4808\/revisions\/4813"}],"wp:attachment":[{"href":"https:\/\/phakph.com\/sso\/index.php\/wp-json\/wp\/v2\/media?parent=4808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}