<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="ko">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>총괄팀장 찾기</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
    <meta name="description" content="ArchitectUI HTML Bootstrap 5 Dashboard Template">

    <script defer src="/architectui/assets/scripts/vendors.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/main.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/demo.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/ladda.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/blockui.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/circle_progress.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/count_up.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/toastr.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/sweet_alerts.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/scrollbar.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/sticky_elements.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/carousel_slider.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/fullcalendar.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/treeview.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/maps.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/rating.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/image_crop.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/guided_tours.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/tables.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/form_validation.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/form_wizard.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/clipboard.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/datepicker.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/input_mask.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/input_select.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/range_slider.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/textarea_autosize.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/toggle_switch.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/chart_js.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/apex_charts.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/sparklines.98288b227c064e6a107f.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="/architectui/assets/styles/vendors.98288b227c064e6a107f.css" rel="stylesheet">
    <link href="/architectui/assets/styles/main.98288b227c064e6a107f.css" rel="stylesheet">
    <style>
        #userList tbody tr {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="my-loader-template d-none">
        <div class="loader bg-transparent no-shadow p-0">
            <div class="ball-grid-pulse">
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
            </div>
        </div>
    </div>
    <div class="app-container app-theme-white body-tabs-shadow">
        <div class="app-container">
            <div class="main-card mb-3 card">
                <div class="card-header">사용자 목록</div>
                <div class="card-body">
                    <table id="userList" class="table table-hover table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>순번</th>
                                <th>아이디</th>
                                <th>이름</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    <button type="button" class="btn btn-primary" id="addUser">
                        등록
                    </button>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script defer src="/architectui/assets/js/datatable.kor.js"></script>
    <script type="text/javascript">

        // const tpl = document.querySelector('.my-loader-template');

        $(function () {
            let table = $('#userList').DataTable({
                language: lang_kor,
                processing: true,
                ajax: {
                    url: '/manage/dept/getUserList',
                    type: 'GET',
                    beforeSend: function () {
                        blockUI.blockPage({
                            message: tpl
                        })
                    },
                    complete: function () {
                        blockUI.unblockPage()
                    },
                    data: function (d) {
                        d.start = d.start || 0
                        d.length = d.length || 10
                    }
                },
                "columnDefs": [
                    { 'targets': '_all', "defaultContent": "" },
                    { 'className': 'text-center', 'targets': [0, 1, 2] },
                ],
                columns: [
                    {
                        "data": null,
                        "width": "50px",
                        "render": function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { data: 'usr_id' },
                    { data: 'usr_nm' },
                ],
                // 옵션들 예시
                paging: true,
                searching: false,
                ordering: false,
                serverSide: true,
            });


            $('#userList tbody').on('click', 'tr', function () {
                const row = table.row(this).data()
                if (!row) return

                if (window.opener && !window.opener.closed) {
                    const id = row.usr_id
                    const name = row.usr_nm
                    const usrSq = row.usr_sq

                    window.opener.setSelectedUser(id, name, usrSq)
                }

                window.close()

            });

        });

    </script>
</body>

</html>