<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ผลการตัดงาน</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>ผลการตัดงาน</h1>

    <!-- ข้อความแจ้งเตือน -->
    <p id="response-message" style="display:none;"></p>

    <!-- ตารางแสดงผล -->
    <table border="1" id="redistribution-table" style="width:100%; margin-top:20px; border-collapse: collapse;">
        <thead>
            <tr>
                <th>ชื่อพนักงาน</th>
                <th>ยอดงานปัจจุบัน</th>
                <th>รายละเอียดการตัดงาน</th>
            </tr>
        </thead>
        <tbody>
            <!-- ข้อมูลจะแสดงในที่นี้ -->
        </tbody>
    </table>

    <!-- ฟอร์มสำหรับอัปเดตยอดงาน -->
    <h2>อัปเดตยอดงาน</h2>
<form id="job-assignment-form">
    <label for="staff_id">เลือกพนักงาน:</label>
    <select id="staff_id" name="staff_id" required>
        <!-- ตัวเลือกจะถูกเติมผ่าน JavaScript -->
    </select>

    <label for="job_count">จำนวนงานใหม่:</label>
    <input type="number" id="job_count" name="job_count" required min="0">

    <button type="submit">อัปเดตยอดงาน</button>
</form>


    <script>
        $(document).ready(function () {
            const redistributionUrl = '<?= base_url('jobs/redistributeJobs') ?>';
            const updateJobUrl = '<?= base_url('jobs/assignJobToStaff') ?>';

            // ฟังก์ชันดึงข้อมูลการตัดงาน
function fetchRedistributionData() {
    const url = '<?= base_url('jobs/redistributeJobs') ?>';

    $.get(url, function (response) {
        if (response.status === 'success') {
            const data = response.data;

            const tbody = $('#redistribution-table tbody');
            tbody.empty(); // ล้างข้อมูลเก่าในตาราง

            data.forEach(staff => {
                tbody.append(`
                    <tr>
                        <td>${staff.name}</td>
                        <td>${staff.current_jobs}</td>
                        <td>${staff.action}</td>
                    </tr>
                `);
            });
        } else {
            $('#response-message').text(response.message).css({
                display: 'block',
                color: 'red'
            });
        }
    }, 'json').fail(function () {
        $('#response-message').text('เกิดข้อผิดพลาดในการโหลดข้อมูล').css({
            display: 'block',
            color: 'red'
        });
    });
}


            // เรียกฟังก์ชัน fetchRedistributionData เมื่อโหลดหน้าเว็บ
            fetchRedistributionData();

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

                $.post(updateJobUrl, formData, function (response) {
                    $('#response-message').text(response.message).css({
                        display: 'block',
                        color: response.status === 'success' ? 'green' : 'red'
                    });

                    if (response.status === 'success') {
                        fetchRedistributionData(); // อัปเดตข้อมูลในตารางหลังจากอัปเดตสำเร็จ
                    }
                }, 'json').fail(function () {
                    $('#response-message').text('เกิดข้อผิดพลาดในการอัปเดตข้อมูล').css({
                        display: 'block',
                        color: 'red'
                    });
                });
            });
        });
    </script>
</body>
</html>
