<div class="main-content">
    <div class="alert alert-secondary mx-4" role="alert">
        <span class="text-white">
            <strong>Add Project</strong>
        </span>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card mb-4 mx-4">
                <div class="card-header pb-0">
                    <div class="d-flex flex-row justify-content-between">
                        <div>
                            <h5 class="mb-0">All Project</h5>
                        </div>
                        <!-- ปุ่ม Add Project -->
                        <a href="#" class="btn bg-gradient-primary btn-sm mb-0" type="button"
                            id="add-project-btn">+&nbsp; New Project</a>
                    </div>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        PROJECT NO.
                                    </th>
                                    <th
                                        class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                        PO NO./CONTRACT NO.
                                    </th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        PROJECT NAME
                                    </th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        DESCRIPTION
                                    </th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        DISCIPLINE ENGINEER
                                    </th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        COMPANY
                                    </th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- ตัวอย่างข้อมูลในตาราง -->
                                <tr>
                                    <td class="ps-4">
                                        <p class="text-xs font-weight-bold mb-0">1</p>
                                    </td>
                                    <td></td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">Admin</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">admin@softui.com</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">Admin</p>
                                    </td>
                                    <td class="text-center">
                                        <span class="text-secondary text-xs font-weight-bold">16/06/18</span>
                                    </td>
                                    <td class="text-center">
                                        <a href="#" class="mx-3" data-bs-toggle="tooltip"
                                            data-bs-original-title="Edit user">
                                            <i class="fas fa-user-edit text-secondary"></i>
                                        </a>
                                        <span>
                                            <i class="cursor-pointer fas fa-trash text-secondary"></i>
                                        </span>
                                    </td>
                                </tr>
                                <!-- เพิ่มแถวเพิ่มเติมได้ -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Popup Modal -->
    <div class="modal fade" id="jkanban-info-modal" style="display: none;" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="h5 modal-title">Task details</h5>
                    <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="pt-4 modal-body">
                    <input id="jkanban-task-id" class="d-none">
                    <div class="mb-4 input-group">
                        <span class="input-group-text">
                            <i class="far fa-edit"></i>
                        </span>
                        <input class="form-control" placeholder="Task Title" type="text" id="jkanban-task-title"
                            onfocus="focused(this)" onfocusout="defocused(this)">
                    </div>
                    <div class="mb-4 input-group">
                        <span class="input-group-text">
                            <i class="fas fa-user"></i>
                        </span>
                        <input class="form-control" placeholder="Task Assignee" type="text"
                            id="jkanban-task-assignee" onfocus="focused(this)" onfocusout="defocused(this)">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" placeholder="Task Description" id="jkanban-task-description" rows="4"></textarea>
                    </div>
                    <div class="alert alert-success d-none">Changes saved!</div>
                    <div class="text-end">
                        <button class="m-1 btn btn-primary" id="jkanban-update-task">
                            Save changes
                        </button>
                        <button class="m-1 btn btn-secondary" id="close-modal-btn">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // เมื่อ document โหลดเสร็จ
    document.addEventListener("DOMContentLoaded", function() {
        // ค้นหา element ปุ่ม Add Project
        const addProjectButton = document.getElementById("add-project-btn");
        const closeModalButton = document.getElementById("close-modal-btn");

        // เพิ่ม event listener ให้ปุ่ม Add Project
        addProjectButton.addEventListener("click", function(event) {
            event.preventDefault(); // ป้องกันการรีเฟรชหน้า

            // เปิด modal โดยเพิ่ม class 'show' และจัดการ style
            const modal = document.getElementById("jkanban-info-modal");
            modal.style.display = "block";
            modal.classList.add("show");
            document.body.classList.add("modal-open");
        });

        // เพิ่ม event listener ให้ปุ่ม Close
        closeModalButton.addEventListener("click", function() {
            const modal = document.getElementById("jkanban-info-modal");
            modal.style.display = "none";
            modal.classList.remove("show");
            document.body.classList.remove("modal-open");
        });

        // จัดการปิด modal เมื่อกดปุ่มปิด (X)
        const closeButton = document.querySelector('[data-bs-dismiss="modal"]');
        closeButton.addEventListener("click", function() {
            const modal = document.getElementById("jkanban-info-modal");
            modal.style.display = "none";
            modal.classList.remove("show");
            document.body.classList.remove("modal-open");
        });
    });
</script>