<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title"> - 그룹 역할 맵핑</div>
                <a href="<c:url value='/system/auth/main.do'/>" class="newbtn bg1">목록</a>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="gs_booking">
            <div class="row">
                <!-- 그룹 선택 영역 -->
                <div class="col-sm-6">
                    <div class="box_column">
                        <ul class="box_title">
                            <li class="tit">그룹 선택</li>
                            <li class="rig">

                            </li>
                        </ul>
                        <div class="containers">
                            <div class="search-box">
                                <input type="text" id="groupSearchInput" placeholder="그룹명 검색..." class="input">
                                <button id="groupSearchBtn" class="newbtn bg1">검색</button>
                            </div>
                            <div class="tabels">
                                <table id="groupTable" class="display">
                                    <thead>
                                        <tr>
                                            <th>그룹 ID</th>
                                            <th>그룹명</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 그룹 목록이 여기에 동적으로 추가됩니다 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 역할 권한 관리 영역 -->
                <div class="col-sm-6">
                    <div class="box_column">
                        <ul class="box_title">
                            <li class="tit">역할 권한 관리 <span id="selectedGroupName"></span></li>
                            <li class="rig">
                                <button id="assignAllRoleBtn" class="newbtn bg1" disabled>모두 할당</button>
                                <button id="removeAllRoleBtn" class="newbtn bg2" disabled>모두 제거</button>
                            </li>
                        </ul>
                        <div class="containers">
                            <div class="tabels">
                                <!-- 할당된 역할 목록 -->
                                <div class="list-title">
                                    <span>할당된 역할 목록</span>
                                </div>
                                <table id="assignedRoleTable" class="display">
                                    <thead>
                                        <tr>
                                            <th>역할 ID</th>
                                            <th>역할명</th>
                                            <th>설명</th>
                                            <th>관리</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 할당된 역할 목록이 여기에 동적으로 추가됩니다 -->
                                    </tbody>
                                </table>

                                <!-- 할당 가능한 역할 목록 -->
                                <div class="list-title">
                                    <span>할당 가능한 역할 목록</span>
                                </div>
                                <table id="unassignedRoleTable" class="display">
                                    <thead>
                                        <tr>
                                            <th>역할 ID</th>
                                            <th>역할명</th>
                                            <th>설명</th>
                                            <th>관리</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 할당 가능한 역할 목록이 여기에 동적으로 추가됩니다 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Main body -->

<style>
.search-box {
    display: flex;
    margin-bottom: 15px;
    padding: 0 15px;
}

.search-box input {
    flex: 1;
    margin-right: 5px;
}

.list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 10px;
    padding: 0 15px;
    font-weight: bold;
}

#selectedGroupName {
    font-weight: normal;
    color: #3498db;
    margin-left: 10px;
}

.group-row {
    cursor: pointer;
}

.group-row:hover, .group-row.selected {
    background-color: #e0f7fa;
}

.tabels {
    margin-bottom: 20px;
}

.tabels:last-child {
    margin-bottom: 0;
}

/* 테이블 칸 넓이 조정 */
#assignedRoleTable th,
#unassignedRoleTable th,
#assignedRoleTable td,
#unassignedRoleTable td {
    width: 25%;
    text-align: center;
}

#assignedRoleTable th:last-child,
#unassignedRoleTable th:last-child,
#assignedRoleTable td:last-child,
#unassignedRoleTable td:last-child {
    width: 15%;
}

#assignedRoleTable th:nth-child(3),
#unassignedRoleTable th:nth-child(3),
#assignedRoleTable td:nth-child(3),
#unassignedRoleTable td:nth-child(3) {
    width: 35%;
    text-align: left;
}

/* 테이블 스타일 보완 */
.tabels table {
    width: 100% !important;
    table-layout: fixed;
}

.tabels table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabels table td:nth-child(3) {
    white-space: normal;
    word-break: break-all;
}
</style>

<script type="text/javascript">
/**
 * 그룹-역할 권한 관리 모듈
 * 그룹에 역할을 부여하거나 회수하는 기능을 제공합니다.
 */
(function(window, $) {
    'use strict';

    /**
     * 그룹-역할 권한 관리 네임스페이스
     */
    var GroupRoleManagement = {
        selectedGroupId: null,

        /**
         * 이벤트 핸들러 설정
         */
        bindEvents: function() {
            var self = this;

            // 그룹 검색 버튼 클릭 이벤트
            $('#groupSearchBtn').on('click', function() {
                self.searchGroups();
            });

            // 그룹 검색 입력 필드 엔터키 이벤트
            $('#groupSearchInput').on('keypress', function(e) {
                if (e.which === 13) {
                    self.searchGroups();
                    return false;
                }
            });

            // 모든 역할 제거 버튼 클릭 이벤트
            $('#removeAllRoleBtn').on('click', function() {
                if (confirm('선택한 그룹에서 모든 역할을 제거하시겠습니까?')) {
                    self.removeAllRoles();
                }
            });

            // 모든 역할 할당 버튼 클릭 이벤트
            $('#assignAllRoleBtn').on('click', function() {
                if (confirm('선택한 그룹에 모든 역할을 할당하시겠습니까?')) {
                    self.assignAllRoles();
                }
            });
        },

        /**
         * 그룹 목록 조회
         */
        loadGroups: function() {
            var self = this;

            $.ajax({
                url: '<c:url value="/system/auth/group/list.ajax"/>',
                type: 'POST',
                data: {
                    searchUseYn: 'Y'
                },
                success: function(response) {
                    if (response.result) {
                        self.renderGroupList(response.data);
                    } else {
                        alert(response.message || '그룹 목록을 불러오는데 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 그룹 목록 렌더링
         */
        renderGroupList: function(groups) {
            var self = this;
            var $tbody = $('#groupTable tbody');
            $tbody.empty();

            if (groups && groups.length > 0) {
                $.each(groups, function(index, group) {
                    var $tr = $('<tr class="group-row" data-group-id="' + group.groupId + '"></tr>');
                    $tr.append('<td>' + group.groupId + '</td>');
                    $tr.append('<td>' + group.groupNm + '</td>');

                    $tr.on('click', function() {
                        $('.group-row').removeClass('selected');
                        $(this).addClass('selected');
                        self.selectGroup(group.groupId, group.groupNm);
                    });

                    $tbody.append($tr);
                });
            } else {
                $tbody.append('<tr><td colspan="2" class="text-center">그룹이 없습니다.</td></tr>');
            }
        },

        /**
         * 그룹 검색
         */
        searchGroups: function() {
            var self = this;
            var keyword = $('#groupSearchInput').val();

            $.ajax({
                url: '<c:url value="/system/auth/group/list.ajax"/>',
                type: 'POST',
                data: {
                    searchUseYn: 'Y',
                    searchKeyword: keyword
                },
                success: function(response) {
                    if (response.result) {
                        self.renderGroupList(unescapeHtml(response.data));
                    } else {
                        alert(response.message || '그룹 검색에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 그룹 선택
         */
        selectGroup: function(groupId, groupName) {
            var self = this;
            self.selectedGroupId = groupId;
            $('#selectedGroupName').text('- ' + groupName);

            // 버튼 활성화
            $('#removeAllRoleBtn, #assignAllRoleBtn').prop('disabled', false);

            // 할당된 역할 목록 조회
            self.loadAssignedRoles(groupId);

            // 할당 가능한 역할 목록 조회
            self.loadUnassignedRoles(groupId);
        },

        /**
         * 할당된 역할 목록 조회
         */
        loadAssignedRoles: function(groupId) {
            var self = this;

            $.ajax({
                url: '<c:url value="/system/auth/groupRole/list.ajax"/>',
                type: 'POST',
                data: {
                    groupId: groupId
                },
                success: function(response) {
                    if (response.result) {
                        self.renderAssignedRoles(unescapeHtml(response.data));
                    } else {
                        alert(response.message || '할당된 역할 목록을 불러오는데 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 할당된 역할 목록 렌더링
         */
        renderAssignedRoles: function(roles) {
            var self = this;
            var $tbody = $('#assignedRoleTable tbody');
            $tbody.empty();

            if (roles && roles.length > 0) {
                $.each(roles, function(index, role) {
                    var $tr = $('<tr></tr>');
                    $tr.append('<td>' + role.roleId + '</td>');
                    $tr.append('<td>' + role.roleNm + '</td>');
                    $tr.append('<td>' + (role.roleDc || '-') + '</td>');

                    var $tdAction = $('<td style="text-align: center;"></td>');
                    var $removeBtn = $('<button class="newbtn xs bg2">제거</button>');

                    $removeBtn.on('click', function () {
                        self.removeRole(role.groupId, role.roleId);
                    });

                    $tdAction.append($removeBtn);
                    $tr.append($tdAction);

                    $tbody.append($tr);
                });
            } else {
                $tbody.append('<tr><td colspan="4" class="text-center">할당된 역할이 없습니다.</td></tr>');
            }
        },

        /**
         * 할당 가능한 역할 목록 조회
         */
        loadUnassignedRoles: function(groupId) {
            var self = this;

            $.ajax({
                url: '<c:url value="/system/auth/groupRole/unassignedList.ajax"/>',
                type: 'POST',
                data: {
                    groupId: groupId
                },
                success: function(response) {
                    if (response.result) {
                        self.renderUnassignedRoles(unescapeHtml(response.data));
                    } else {
                        alert(response.message || '할당 가능한 역할 목록을 불러오는데 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 할당 가능한 역할 목록 렌더링
         */
        renderUnassignedRoles: function(roles) {
            var self = this;
            var $tbody = $('#unassignedRoleTable tbody');
            $tbody.empty();

            if (roles && roles.length > 0) {
                $.each(roles, function(index, role) {
                    var $tr = $('<tr></tr>');
                    $tr.append('<td>' + role.roleId + '</td>');
                    $tr.append('<td>' + role.roleNm + '</td>');
                    $tr.append('<td>' + (role.roleDc || '-') + '</td>');

                    var $tdAction = $('<td style="text-align: center;"></td>');
                    var $assignBtn = $('<button class="newbtn xs bg1">할당</button>');

                    $assignBtn.on('click', function() {
                        self.assignRole(self.selectedGroupId, role.roleId);
                    });

                    $tdAction.append($assignBtn);
                    $tr.append($tdAction);

                    $tbody.append($tr);
                });
            } else {
                $tbody.append('<tr><td colspan="4" class="text-center">할당 가능한 역할이 없습니다.</td></tr>');
            }
        },

        /**
         * 역할 할당
         */
        assignRole: function(groupId, roleId) {
            var self = this;

            $.ajax({
                url: '<c:url value="/system/auth/groupRole/assign.ajax"/>',
                type: 'POST',
                data: {
                    groupId: groupId,
                    roleId: roleId
                },
                success: function(response) {
                    if (response.result) {
                        alert(response.message || '역할이 성공적으로 할당되었습니다.');
                        self.loadAssignedRoles(groupId);
                        self.loadUnassignedRoles(groupId);
                    } else {
                        alert(response.message || '역할 할당에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 역할 제거
         */
        removeRole: function(groupId, roleId) {
            var self = this;

            $.ajax({
                url: '<c:url value="/system/auth/groupRole/remove.ajax"/>',
                type: 'POST',
                data: {
                    groupId: groupId,
                    roleId: roleId
                },
                success: function(response) {
                    if (response.result) {
                        alert(response.message || '역할이 성공적으로 제거되었습니다.');
                        self.loadAssignedRoles(groupId);
                        self.loadUnassignedRoles(groupId);
                    } else {
                        alert(response.message || '역할 제거에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 모든 역할 제거
         */
        removeAllRoles: function() {
            var self = this;

            if (!self.selectedGroupId) {
                alert('그룹을 선택해주세요.');
                return;
            }

            $.ajax({
                url: '<c:url value="/system/auth/groupRole/assignMultiple.ajax"/>',
                type: 'POST',
                data: {
                    groupId: self.selectedGroupId,
                    roleIds: []
                },
                success: function(response) {
                    if (response.result) {
                        alert(response.message || '모든 역할이 성공적으로 제거되었습니다.');
                        self.loadAssignedRoles(self.selectedGroupId);
                        self.loadUnassignedRoles(self.selectedGroupId);
                    } else {
                        alert(response.message || '역할 제거에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 모든 역할 할당
         */
        assignAllRoles: function() {
            var self = this;

            if (!self.selectedGroupId) {
                alert('그룹을 선택해주세요.');
                return;
            }

            // 할당 가능한 모든 역할 ID 수집
            var roleIds = [];

            // 기존 할당된 역할 ID 수집
            $('#assignedRoleTable tbody tr').each(function() {
                var roleId = $(this).find('td:first').text();
                if (roleId && roleId !== '할당된 역할이 없습니다.') {
                    roleIds.push(roleId);
                }
            });

            // 할당 가능한 역할 ID 수집
            $('#unassignedRoleTable tbody tr').each(function() {
                var roleId = $(this).find('td:first').text();
                if (roleId && roleId !== '할당 가능한 역할이 없습니다.') {
                    roleIds.push(roleId);
                }
            });

            if (roleIds.length === 0) {
                alert('할당할 역할이 없습니다.');
                return;
            }

            $.ajax({
                url: '<c:url value="/system/auth/groupRole/assignMultiple.ajax"/>',
                type: 'POST',
                data: {
                    groupId: self.selectedGroupId,
                    roleIds: roleIds
                },
                success: function(response) {
                    if (response.result) {
                        alert(response.message || '모든 역할이 성공적으로 할당되었습니다.');
                        self.loadAssignedRoles(self.selectedGroupId);
                        self.loadUnassignedRoles(self.selectedGroupId);
                    } else {
                        alert(response.message || '역할 할당에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 모듈 초기화
         */
        init: function() {
            this.bindEvents();
            this.loadGroups();
        }
    };

    // 페이지 로드 시 초기화
    $(function() {
        GroupRoleManagement.init();
    });

})(window, jQuery);
</script>
