gravity/อนุมัติเดินทาง-ประชุม(ธุรการ)/views/settings/hierarchy.php

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0 text-gray-800">ตั้งค่าสายงานอนุมัติ (Approval Hierarchy)</h1>
    <a href="<?= BASE_URL ?>/settings" class="btn btn-outline-secondary shadow-sm"><i class="fa-solid fa-arrow-left me-1"></i> กลับไปตั้งค่า</a>
</div>

<div class="row">
    <!-- ฟอร์มเพิ่มสายงานอนุมัติ -->
    <div class="col-lg-4">
        <div class="card shadow-sm border-0 rounded-4 mb-4 overflow-hidden">
            <div class="card-header bg-primary text-white py-3">
                <h6 class="m-0 font-weight-bold"><i class="fa-solid fa-sitemap me-2"></i>กำหนดผู้อนุมัติ</h6>
            </div>
            <div class="card-body">
                <form action="<?= BASE_URL ?>/settings/hierarchy/add" method="POST">
                    <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">พนักงาน (ผู้ขออนุมัติ)</label>
                        <select class="form-control userSelect" name="user_id" required>
                            <option value="">-- พิมพ์ชื่อเพื่อค้นหาพนักงาน --</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">ผู้อนุมัติ (Approver)</label>
                        <select class="form-control userSelect" name="approver_id" required>
                            <option value="">-- พิมพ์ชื่อเพื่อค้นหาผู้อนุมัติ --</option>
                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary w-100"><i class="fa-solid fa-save me-1"></i> บันทึกข้อมูล</button>
                </form>
            </div>
        </div>
    </div>

    <!-- ตารางสายงานอนุมัติ -->
    <div class="col-lg-8">
        <div class="card shadow-sm border-0 rounded-4 mb-4 overflow-hidden">
            <div class="card-header bg-white py-3">
                <h6 class="m-0 font-weight-bold text-primary"><i class="fa-solid fa-list me-2"></i>รายชื่อสายงานอนุมัติในระบบ</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle" id="hierarchyTable">
                        <thead class="table-light">
                            <tr>
                                <th>พนักงาน</th>
                                <th>ผู้อนุมัติ</th>
                                <th class="text-center" width="100">จัดการ</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($hierarchy)): ?>
                                <tr>
                                    <td colspan="3" class="text-center py-3">ยังไม่มีการกำหนดสายงานอนุมัติ</td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($hierarchy as $h): ?>
                                    <tr>
                                        <td>
                                            <i class="fa-solid fa-user me-2 text-muted"></i>
                                            <?= htmlspecialchars($h['user_name']) ?>
                                            <small class="text-muted d-block">(<?= htmlspecialchars($h['user_id']) ?>)</small>
                                        </td>
                                        <td>
                                            <i class="fa-solid fa-user-check me-2 text-success"></i>
                                            <?= htmlspecialchars($h['approver_name']) ?>
                                            <small class="text-muted d-block">(<?= htmlspecialchars($h['approver_id']) ?>)</small>
                                        </td>
                                        <td class="text-center">
                                            <form action="<?= BASE_URL ?>/settings/hierarchy/remove" method="POST" onsubmit="return confirm('ยืนยันการลบข้อมูลนี้?');">
                                                <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
                                                <input type="hidden" name="id" value="<?= $h['id'] ?>">
                                                <button type="submit" class="btn btn-sm btn-outline-danger"><i class="fa-solid fa-trash"></i></button>
                                            </form>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<?php
// เพิ่ม Select2 CSS & JS
$extraScripts = '
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        if($("#hierarchyTable tbody tr td").length > 1) {
            $("#hierarchyTable").DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
                }
            });
        }

        $(".userSelect").select2({
            theme: "bootstrap-5",
            allowClear: true,
            ajax: {
                url: "'.BASE_URL.'/settings/search-user",
                dataType: "json",
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            minimumInputLength: 2
        });
    });
</script>
';
?>