<!DOCTYPE html>
<html lang="th">
<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>
    <!-- CSS Files -->
<link href="https://www.cdn.niendsitekungz.com/black-dashboard-master/assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Kanit' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">

<!--     Fonts and icons     -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  

  <!--   Core JS Files   -->
<script src="https://www.cdn.niendsitekungz.com/black-dashboard-master/assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="https://www.cdn.niendsitekungz.com/black-dashboard-master/assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="https://www.cdn.niendsitekungz.com/black-dashboard-master/assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.cdn.niendsitekungz.com/black-dashboard-master/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Chartist JS -->
<script src="https://www.cdn.niendsitekungz.com/black-dashboard-master/assets/js/plugins/chartjs.min.js"></script>
<!--  Notifications Plugin    -->
<script src="https://www.cdn.niendsitekungz.com/black-dashboard-master/assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="https://www.cdn.niendsitekungz.com/black-dashboard-master/assets/js/black-dashboard.js?v=1.0.0" type="text/javascript"></script>

<script src="https://code.jquery.com/jquery-3.6.0.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: 20px;
}
    
    script {
      font-family: 'Kanit';
      font-size: 17px;
    }
    swal {
      font-family: 'Kanit';
      font-size: 17px;
    if {
      font-family: 'Kanit';
      font-size: 17px;

      /* กำหนดความสูงของ container ให้ Card อยู่กึ่งกลางหน้าจอ */
        .full-height {
            height: 100vh;
        }



</style>

</head>

<body class="">
<div class="card">
  <div class="table-responsive">
    <!-- ตารางแสดงผล -->
    
    <table class="table">
        <thead>
            <tr>
                <th>ชื่อพนักงาน</th>
                <th>ยอดงานหารเฉลี่ย</th>
                <th>รายละเอียดการตัดงาน</th>
            </tr>
        </thead>
        <tbody id="redistribution-table"></tbody>
    </table>
</div>
</div><br>
     <div class="col-xl-5 col-lg-5 col-md-6 d-flex flex-column mx-auto">
        <div class="card card-plain mt-8">
            <div class="card-header pb-0 text-left bg-transparent">

            <!-- ข้อความแจ้งเตือน -->
    <div id="response-message" class="alert d-none" role="alert"></div>
    
    <!-- ฟอร์มอัปเดตยอดงาน -->
    <div class="card-body">
    <form id="job-assignment-form">

            <div class="form-group">
        <label for="staff_id">เลือกพนักงาน</label>
        <select class="form-control" id="staff_id" name="staff_id" required>

        </select>
      </div>
        <div class="mb-3">
            <label for="job_count" class="form-label">จำนวนงานใหม่</label>
            <input type="number" id="job_count" name="job_count" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">อัปเดตยอดงาน</button>
    </form>

    <!-- ปุ่ม Reset -->
    <div class="text-end mb-3">
        <button id="reset-btn" class="btn btn-danger">Reset ข้อมูลยอดงาน</button>
    </div>

    </div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer pt-3  ">
        <div class="container-fluid">
          <div class="row align-items-center justify-content-lg-between">
            <div class="col-lg-6 mb-lg-0 mb-4">
              <div class="copyright text-center text-sm text-muted text-lg-start">
                © <script>
                  document.write(new Date().getFullYear())
                </script>,
                NiendsiteKunGz All rights reserved.
              </div>
            </div>
          </div>
        </div>
      </footer>

    <!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function () {
    const apiUrl = 'https://www.work.niendsitekungz.com/jobs/redistributeJobs';
    const updateJobUrl = 'https://www.work.niendsitekungz.com/jobs/assignJobToStaff';
    const getStaffMembersUrl = 'https://www.work.niendsitekungz.com/jobs/getStaffMembers';
    const resetUrl = 'https://www.work.niendsitekungz.com/api/resetJobs';

    // ฟังก์ชันดึงข้อมูลจาก API และเติมในตาราง
      function fetchRedistributionData() {
        $.get(apiUrl, function (response) {
            if (response.status === 'success') {
                const staffData = response.data.staff; // ข้อมูลพนักงาน
                const actions = response.data.actions; // รายละเอียดการตัดงาน
                const tbody = $('#redistribution-table');
                tbody.empty();

                // แสดงข้อมูลพนักงานในตาราง
                staffData.forEach(staff => {
                    const staffActions = actions
                        .filter(action => action.giver === staff.name || action.receiver === staff.name)
                        .map(action => action.action)
                        .join('<br>');

                    tbody.append(`
                        <tr>
                            <td>${staff.name}</td>
                            <td>${staff.current_jobs}</td>
                            <td>${staffActions || 'ไม่มีรายละเอียดการตัดงาน'}</td>
                        </tr>
                    `);
                });
            } else {
                alert('เกิดข้อผิดพลาด: ' + response.message);
            }
        }).fail(function () {
            alert('ไม่สามารถเชื่อมต่อกับ API ได้');
        });
    }


    // ฟังก์ชันสำหรับแสดงข้อความ
    function displayMessage(message, type) {
        $('#response-message')
            .removeClass('d-none alert-danger alert-success')
            .addClass(`alert-${type}`)
            .text(message);
    }

    // ฟังก์ชันเติมตัวเลือกพนักงานใน <select>
    function loadStaffOptions(apiUrl, selectId) {
        $.get(apiUrl, function (response) {
            if (response.status === 'success') {
                const data = response.data;
                const staffSelect = $(selectId);
                staffSelect.empty();

                // เติมตัวเลือก
                data.forEach(staff => {
                    staffSelect.append(`<option value="${staff.id}">${staff.name}</option>`);
                });
            } else {
                displayMessage(response.message, 'danger');
            }
        }).fail(function () {
            displayMessage('เกิดข้อผิดพลาดในการโหลดข้อมูลพนักงาน', 'danger');
        });
    }

    // ฟังก์ชันเมื่อส่งฟอร์มอัปเดตยอดงาน
    $('#job-assignment-form').on('submit', function (e) {
        e.preventDefault(); // ป้องกันการรีเฟรชหน้า
        const formData = $(this).serialize();

        $.post(updateJobUrl, formData, function (response) {
            displayMessage(response.message, response.status === 'success' ? 'success' : 'danger');

            if (response.status === 'success') {
                loadStaffOptions(getStaffMembersUrl, '#staff_id'); // โหลดตัวเลือกพนักงานใหม่
                fetchRedistributionData(); // อัปเดตตารางการตัดงาน
            }
        }).fail(function () {
            displayMessage('เกิดข้อผิดพลาดในการอัปเดตข้อมูล', 'danger');
        });
    });

    // ฟังก์ชัน Reset current_jobs
    function resetJobs() {
    if (confirm('คุณต้องการรีเซ็ต current_jobs ทั้งหมดเป็น 0 ใช่หรือไม่?')) {
        $.post(resetUrl, function (response) {
            if (response.status === 'success') {
                // ใช้ message box แจ้งผลการรีเซ็ต
                displayMessage('รีเซ็ต current_jobs สำเร็จ', 'success');

                // อัปเดตตารางข้อมูลแบบ Real-Time
                fetchRedistributionData(); 
            } else {
                // แจ้งข้อผิดพลาดผ่าน message box
                displayMessage('เกิดข้อผิดพลาด: ' + response.message, 'danger');
            }
        }).fail(function () {
            // แจ้งข้อผิดพลาดเมื่อ API ไม่ตอบสนอง
            displayMessage('ไม่สามารถเชื่อมต่อกับ API เพื่อรีเซ็ตได้', 'danger');
        });
    }
}

// กดปุ่ม Reset
$('#reset-btn').on('click', resetJobs);


    // เรียกฟังก์ชันเมื่อโหลดหน้า
    loadStaffOptions(getStaffMembersUrl, '#staff_id');
    fetchRedistributionData();

    // อัปเดตข้อมูลทุกๆ 15 วินาที
    setInterval(fetchRedistributionData, 15000);
});

</script>


<script>
    // ฟังก์ชันแสดงผล Message Alert แบบ Real-Time
    function displayMessageAlert(message) {
        const alertBox = document.createElement('div');
        alertBox.className = 'alert alert-info';
        alertBox.innerText = message;

        document.body.appendChild(alertBox);

        setTimeout(() => {
            alertBox.remove();
        }, 5000); // ลบข้อความหลัง 5 วินาที
    }

    // ตัวอย่าง Real-Time (ด้วย WebSocket / Polling)
    const eventSource = new EventSource('/JobController/redistributeJobs');
    eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        if (data.actions) {
            data.actions.forEach(action => {
                displayMessageAlert(action.action);
            });
        }
    };
</script>
</body>


</html>

