<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="apple-touch-icon" sizes="76x76" href="https://www.cdn.niendsitekungz.com/finance/assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="https://www.cdn.niendsitekungz.com/finance/assets/img/favicon556.png">

<title>ระบบหารงานเสือ | NiendsiteKunGz</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Kanit' rel='stylesheet'>

<link href="https://www.cdn.niendsitekungz.com/finance/assets/css/nucleo-icons.css" rel="stylesheet">
<link href="https://www.cdn.niendsitekungz.com/finance/assets/css/nucleo-svg.css" rel="stylesheet">
<link href="https://www.cdn.niendsitekungz.com/finance/assets/css/nucleo-svg.css" rel="stylesheet">

<link id="pagestyle" href="https://www.cdn.niendsitekungz.com/finance/assets/css/ui.css?v=1.0.6" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<link rel="stylesheet" href="https://cdn.niendsitekungz.com/fontawesome/css/all.css">
<link rel="stylesheet" href="https://cdn.niendsitekungz.com/fontawesome/css/all.min.css">

<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js"></script>
<script src="https://cdn.niendsitekungz.com/fontawesome/js/all.js"></script>
<script src="https://cdn.niendsitekungz.com/fontawesome/js/all.min.js"></script>

<style>

body {
font-family: 'Kanit';font-size: 22px;
}

li {
font-family: 'Kanit';font-size: 22px;
}

div {
font-family: 'Kanit';font-size: 15px;
}

html {
font-family: 'Kanit';font-size: 17px;
}
h5 {
font-family: 'Kanit';font-size: 15px;
}
p {
font-family: 'Kanit';font-size: 15px;
}
small {
font-family: 'Kanit';font-size: 12px;
}
</style>

<style>
#messageAlert {
display: none;
padding: 10px;
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
#messageAlert.success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
#messageAlert.error {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.employee-list {
margin-top: 20px;
display: flex;
flex-wrap: wrap; /* แบ่งหลายแถว */
}
.employee-item {
flex: 1 0 33.33%; /* แต่ละช่องใช้พื้นที่ 33.33% ของแถว */
padding: 5px; /* ระยะห่างระหว่างช่อง */
}
.employee-item label {
display: flex;
align-items: center;
}

</style>
</head>
<body>
<div class="container mt-4">
<h1>Scan Barcodes</h1>

<div class="mb-3">
<strong>Total Scanned:</strong> <span id="scannedCount">0</span>
</div>

<div class="mb-4">
<h3>Assign to Employees:</h3>
<div class="row">
<?php foreach ($employees as $employee): ?>
<div class="col-md-4 mb-2">
<div class="form-check">
<input class="form-check-input employee-checkbox" type="checkbox" value="<?= $employee['id'] ?>" id="employee-<?= $employee['id'] ?>" data-name="<?= $employee['name'] ?>">
<label class="form-check-label" for="employee-<?= $employee['id'] ?>">
<?= $employee['name'] ?>
</label>
</div>
</div>
<?php endforeach; ?>
</div>
</div>

<div class="mb-4">
<h3>Work Distribution:</h3>
<ul id="workDistribution" class="list-unstyled"></ul>
</div>

<div id="messageAlert" class="alert d-none"></div>

<form id="scanForm" class="mb-4">
<div class="mb-3">
<label for="barcode" class="form-label">Scan Barcode:</label>
<input type="text" id="barcode" name="barcode" class="form-control" placeholder="SCAN BARCODE.." required>
</div>

<div class="text-center">
<button type="submit" class="btn bg-gradient-info w-100 mt-4 mb-0">SCAN NOW</button>
                  </div>
</form>


</div>

<!-- ลิงก์ JS ของ Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
let scannedCount = 0; // ตัวนับจำนวนงานที่สแกน
const workDistribution = {}; // เก็บข้อมูลการกระจายงาน

// อัปเดตการกระจายงานเมื่อมีการติ๊กเลือกพนักงาน
function updateWorkDistribution() {
const checkboxes = document.querySelectorAll('.employee-checkbox:checked');
const selectedEmployees = Array.from(checkboxes).map(cb => cb.dataset.name);
const totalEmployees = selectedEmployees.length;

// คำนวณงานต่อคน
const workPerEmployee = totalEmployees > 0 ? Math.floor(scannedCount / totalEmployees) : 0;

// สร้างรายการกระจายงาน
const workList = document.getElementById('workDistribution');
workList.innerHTML = '';

selectedEmployees.forEach(name => {
workList.innerHTML += `<li>${name}: ${workPerEmployee} tasks</li>`;
});
}

// ฟังค์ชันอัปเดตการแสดงผลเรียลไทม์เมื่อสแกน
document.getElementById('scanForm').addEventListener('submit', async function(e) {
e.preventDefault(); // ป้องกันการโหลดหน้าใหม่
const formData = new FormData(this);


const barcodeInput = document.getElementById('barcode');
const barcode = barcodeInput.value.trim();

// ตรวจสอบว่า barcode ขึ้นต้นด้วย "TH" หรือ "SPXTH"
if (!/^TH|SPXTH/.test(barcode)) {
showMessage('Invalid barcode! Barcode must start with "TH" or "SPXTH".', 'error');
barcodeInput.value = ''; // ล้างข้อมูล
barcodeInput.focus();    // Focus ช่องใหม่
return; // หยุดการส่งข้อมูล
}


const response = await fetch('/scan/scanBarcode', {
method: 'POST',
body: formData
});

const result = await response.json();

// แสดงสถานะแจ้งเตือน
showMessage(result.message, result.status === 'success' ? 'success' : 'error');

if (result.status === 'success') {
scannedCount++; // เพิ่มตัวนับเมื่อสแกนสำเร็จ
document.getElementById('scannedCount').textContent = scannedCount; // อัปเดตจำนวนงาน
updateWorkDistribution(); // อัปเดตการกระจายงาน
}

// ล้างข้อมูลในช่องบาร์โค้ด และ Focus ช่องใหม่เสมอ
document.getElementById('barcode').value = '';
document.getElementById('barcode').focus();
});

// เมื่อมีการเลือกหรือยกเลิกติ๊กพนักงาน
document.querySelectorAll('.employee-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', updateWorkDistribution);
});

function showMessage(message, type) {
const messageAlert = document.getElementById('messageAlert');
messageAlert.textContent = message;
messageAlert.className = `alert alert-${type === 'success' ? 'success' : 'danger'} d-block`;
setTimeout(() => {
messageAlert.className = 'alert d-none';
}, 3000);
}
</script>
</body>
</html>