<%@ 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>
                <%-- 로그인 사용자가 시스템관리자가 아니면, 시스템관리자의 비밀번호 초기화 불가능 --%>
                <c:if test="${not (user.userGroupId eq 'GROUP_SYSTEM') || (sessionScope.sessionVO.isSystem())}">
                    <button class="newbtn bg4" type="button" id="btnSave">저장</button>
                </c:if>
                <button class="newbtn bg3" type="button" id="btnCancel">목록</button>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="box_column">
            <div class="containers">
                <div class="forms_table_non">
                    <form id="userForm" name="userForm">
                        <table>
                            <tr>
                                <th class="th"><span class="required">*</span> 사용자 ID</th>
                                <td colspan="3">
                                    <input type="hidden" id="mode" name="mode" value="${empty user.userId ? 'register' : 'edit'}" />
                                    <c:if test="${not empty user.userId}">
                                        <input type="hidden" id="userId" name="userId" value="${user.userId}" />
                                    </c:if>
                                    <c:choose>
                                        <c:when test="${empty user.userId}">
                                            <span>※ 사용자 ID는 자동으로 생성됩니다. (USER00000001 형식)</span>
                                        </c:when>
                                        <c:otherwise>
                                            <input type="text" id="userId_view" name="userId_view" class="input" value="${user.userId}" disabled="disabled" />
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                            </tr>
                            <tr>
                                <th class="th"><span class="required">*</span> 사용자 계정</th>
                                <td>
                                    <c:choose>
                                        <c:when test="${empty user.userId}">
                                            <input type="text" id="userAcnt" name="userAcnt" class="input" maxlength="20" validation-check="required" />
                                            <div class="hint-message">※ 영문, 숫자, 특수문자(_-.)만 사용 가능합니다. (공백, 한글 사용 불가)</div>
                                        </c:when>
                                        <c:otherwise>
                                            <input type="text" id="userAcnt" name="userAcnt" class="input" value="${user.userAcnt}" disabled="disabled" />
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <th class="th"><span class="required">*</span> 사용자명</th>
                                <td>
                                    <input type="text" id="userNm" name="userNm" class="input" value="${user.userNm}" validation-check="required" />
                                </td>
                            </tr>
                            <tr>
                                <th class="th"><span class="required">*</span> 그룹 ID</th>
                                <td>
                                    <select id="userGroupId" name="userGroupId" class="input" style="width: 150px;" validation-check="required">
                                        <option value="">선택</option>
                                        <!-- 그룹 코드 목록은 JavaScript에서 동적으로 로드 -->
                                    </select>
                                    <button class="newbtn bg1 userser" type="button" onclick="fnAuthInfo();">그룹 정보</button>
                                </td>
                                <th class="th">
                                    <c:choose>
                                        <c:when test="${empty user.userId}">
                                            비밀번호 안내
                                        </c:when>
                                        <c:otherwise>
                                            비밀번호 초기화
                                        </c:otherwise>
                                    </c:choose>
                                </th>
                                <td>
                                    <%-- 로그인 사용자가 시스템관리자가 아니면, 시스템관리자의 비밀번호 초기화 불가능 --%>
                                    <c:if test="${not (user.userGroupId eq 'GROUP_SYSTEM') || (sessionScope.sessionVO.isSystem())}">
                                        <c:choose>
                                            <c:when test="${empty user.userId}">
                                                <span>※ 최초 비밀번호는 'vipspassword'로 자동 설정됩니다.</span>
                                            </c:when>
                                            <c:otherwise>
                                                <a href="javascript:void(0);" class="newbtn bg1" onclick="fnPasswordReset();">비밀번호 초기화</a>
                                                <span class="ml10">※ 초기화 시 'vipspassword'로 설정됩니다.</span>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:if>
                                </td>
                            </tr>
                            <%--
                        사용 안함.
                        <tr>
                            <th>비밀번호 힌트</th>
                            <td>
                                <input type="text" id="passwdHint" name="passwdHint" class="" value="${user.passwdHint}" />
                            </td>
                            <th>비밀번호 답변</th>
                            <td>
                                <input type="text" id="passwdNsr" name="passwdNsr" class="" value="${user.passwdNsr}" />
                            </td>
                        </tr>
                        --%>
                            <tr>
                                <th class="th">사원번호</th>
                                <td>
                                    <input type="text" id="empNo" name="empNo" class="input" value="${user.empNo}" />
                                </td>
                                <th class="th">이메일</th>
                                <td>
                                    <input type="email" id="emlAddr" name="emlAddr" class="input" value="${user.emlAddr}" validation-check="email" />
                                </td>
                            </tr>
                            <tr>
                                <th class="th"><span class="required">*</span> 조직코드</th>
                                <td>
                                    <select id="orgCd" name="orgCd" class="input" validation-check="required">
                                        <option value="">선택</option>
                                        <!-- 조직 코드 목록은 JavaScript에서 동적으로 로드 -->
                                    </select>
                                </td>
                                <th class="th">부서코드</th>
                                <td>
                                    <select id="deptCd" name="deptCd" class="input">
                                        <option value="">선택</option>
                                        <!-- 부서 코드 목록은 JavaScript에서 동적으로 로드 -->
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="th">직위명</th>
                                <td>
                                    <input type="text" id="posNm" name="posNm" class="input" value="${user.posNm}" />
                                </td>
                                <th class="th">소속코드</th>
                                <td>
                                    <select id="nsttCd" name="nsttCd" class="input">
                                        <option value="">선택</option>
                                        <!-- 소속 코드 목록은 JavaScript에서 동적으로 로드 -->
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="th">휴대전화</th>
                                <td>
                                    <input type="text" id="mblTelno" name="mblTelno" class="input" value="${user.mblTelno}" validation-check="phone" />
                                </td>
                                <th class="th">전화번호</th>
                                <td>
                                    <input type="text" id="telno" name="telno" class="input" value="${user.telno}" validation-check="phone" />
                                </td>
                            </tr>
                            <tr>
                               <th class="th">팩스번호</th>
                               <td colspan="3">
                                   <input type="text" id="fxno" name="fxno" class="input" value="${user.fxno}" style="width: 200px;" validation-check="phone" />
                               </td>
                            </tr>
                            <tr>
                                <th class="th">우편번호</th>
                                <td colspan="3">
                                    <input type="text" id="zip" name="zip" class="input" value="${user.zip}" style="width: 100px;" />
                                    <%--<button class="newbtn bg1 userser" type="button" onclick="searchZipCode();">주소 찾기</button>--%>
                                </td>
                            </tr>
                            <tr>
                                <th class="th">주소</th>
                                <td>
                                    <input type="text" id="addr" name="addr" class="input" value="${user.addr}" />
                                </td>
                                <th class="th">상세주소</th>
                                <td>
                                    <input type="text" id="daddr" name="daddr" class="input" value="${user.daddr}" />
                                </td>
                            </tr>
                            <tr>
                                <th class="th"><span class="required">*</span> 잠금여부</th>
                                <td colspan="3">
                                    <select id="lockYn" name="lockYn" class="input" validation-check="required">
                                        <option value="N" ${empty user.lockYn or user.lockYn eq 'N' ? 'selected' : '' }>정상</option>
                                        <option value="Y" ${user.lockYn eq 'Y' ? 'selected' : '' }>잠금</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="th"><span class="required">*</span> 사용여부</th>
                                <td colspan="3">
                                    <select id="useYn" name="useYn" class="input" validation-check="required">
                                        <option value="Y" ${empty user.useYn or user.useYn eq 'Y' ? 'selected' : '' }>사용</option>
                                        <option value="N" ${user.useYn eq 'N' ? 'selected' : '' }>미사용</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="th"><span class="required">*</span> 상태</th>
                                <td colspan="3">
                                    <select id="userStatusCd" name="userStatusCd" class="input" validation-check="required">
                                        <option value="">선택</option>
                                        <!-- 상태 코드 목록은 JavaScript에서 동적으로 로드 -->
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Main body -->

<script type="text/javascript">
    /**
     * 사용자 등록/수정 모듈
     * 사용자 정보를 등록하거나 수정하는 기능을 제공합니다.
     */
    (function(window, $) {
        'use strict';

        //사용자 계정 중복 방지 타이머
        let debounceTimer;

        /**
         * 사용자 등록/수정 네임스페이스
         */
        var UserForm = {
            /**
             * 현재 모드 (register: 등록, edit: 수정)
             */
            mode: $('#mode').val(),

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

                // 저장 버튼 클릭 이벤트
                $('#btnSave, #btnSave2').on('click', function() {
                    self.saveUser();
                });

                // 취소 버튼 클릭 이벤트
                $('#btnCancel, #btnCancel2').on('click', function() {
                    self.cancel();
                });

                // 취소 버튼 클릭 이벤트
                $('#userAcnt').on('input', function() {
                    self.userAcntInput();
                });

                // 사용자 계정 입력 필드 이벤트 (등록 모드일 때만)
                if (this.mode === 'register') {
                    $('#userAcnt').on('keyup', function() {
                        self.validateUserAccount($(this).val());
                    });

                    // 입력 시 한글, 공백 등 허용되지 않는 문자 입력 방지
                    $('#userAcnt').on('input', function() {
                        var inputVal = $(this).val();
                        var filteredVal = inputVal.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣\s]/g, '');

                        // 허용된 특수문자만 남기고 제거
                        filteredVal = filteredVal.replace(/[^\w\-\.]/g, '');

                        if (inputVal !== filteredVal) {
                            $(this).val(filteredVal);
                        }
                    });
                }

                // 날짜 선택기 초기화
                $(".datepicker").datepicker({
                    dateFormat: 'yy.mm.dd'
                });
            },

            userAcntInput: function() {
                var userAcnt = $('#userAcnt').val();

                // debounce 처리: 입력 후 500ms 대기
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(function() {
                    if (userAcnt.length > 0) {
                        errorElementCreate($("#userAcnt")[0], "", false);
                    }
                    $.ajax({
                        url: '<c:url value="/system/user/duplicateCheck.ajax"/>',
                        type: 'POST',
                        data: {
                            userAcnt: userAcnt
                        },
                        success: function(response) {
                            if (response.result) {
                                if (response.data > 0) {
                                    errorElementCreate($("#userAcnt")[0], "중복된 사용자 계정입니다.", false);
                                } else {
                                    errorElementCreate($("#userAcnt")[0], "", true);
                                }
                            }
                        }
                    });
                }, 500); // 입력 후 0.5초 뒤 실행
            },

            /**
             * 코드 정보 로드
             */
            loadCodeInfo: function() {
                var self = this;

                // 조직 코드 로드
                self.loadCodeDetailList('ORG_CD', 'orgCd', '${user.orgCd}');

                // 소속 코드 로드
                self.loadCodeDetailList('NSTT_CD', 'nsttCd', '${user.nsttCd}');

                // 부서 코드 로드
                self.loadCodeDetailList('DEPT_CD', 'deptCd', '${user.deptCd}');

                // 상태 코드 로드
                self.loadCodeDetailList('USER_STATUS_CD', 'userStatusCd', '${user.userStatusCd}');

                // 그룹 정보 로드
                self.loadGroupList();
            },

            /**
             * 코드 상세 목록 로드
             * @param {string} cdGroupId 코드 그룹 ID
             * @param {string} targetId 목록을 표시할 select 요소의 ID
             * @param {string} selectedValue 선택할 값
             */
            loadCodeDetailList: function(cdGroupId, targetId, selectedValue) {
                $.ajax({
                    url: '<c:url value="/common/code/detail/listByGroupId.ajax"/>',
                    type: 'GET',
                    data: {
                        cdGroupId: cdGroupId
                    },
                    success: function(response) {
                        if (response.result && response.data) {
                            var $select = $('#' + targetId);
                            $select.find('option:not(:first)').remove();

                            $.each(response.data, function(index, item) {
                                var $option = $('<option></option>')
                                    .val(item.cdId)
                                    .text(item.cdNm);

                                if (item.cdId === selectedValue) {
                                    $option.attr('selected', 'selected');
                                }

                                $select.append($option);
                            });
                        }
                    }
                });
            },

            /**
             * 그룹 목록 로드
             */
            loadGroupList: function() {
                var self = this;
                var selectedValue = '${user.userGroupId}';

                $.ajax({
                    url: '<c:url value="/system/user/getGroupList.ajax"/>',
                    type: 'GET',
                    success: function(response) {
                        if (response.result && response.data) {
                            var $select = $('#userGroupId');
                            $select.find('option:not(:first)').remove();

                            $.each(response.data, function(index, item) {
                                var $option = $('<option></option>')
                                    .val(item.groupId)
                                    .text(item.groupNm);

                                if (item.groupId === selectedValue) {
                                    $option.attr('selected', 'selected');
                                }

                                $select.append($option);
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // 에러 처리는 xit-common.js의 ajaxError에서 처리됨
                    }
                });
            },

            /**
             * 우편번호 검색
             */
            searchZipCode: function() {
                var popUrl = '<c:url value="/common/address/search.do"/>';
                var params = '?callback=searchZipCodeCallback';
                popUrl += params;
                var popTitle = "주소 찾기";
                var popOption = "width=570px, height=530px, resizable=yes, scrollbars=yes, location=no, top=100px, left=100px";
                window.open(popUrl, popTitle, popOption);
            },

            /* ========================
            * 주소 검색 콜백 함수
               -주소 검색 팝업의 검색결과를 전달 받는다.
            ======================== */
            searchZipCodeCallback: function(obj) {
                //검색결과 Set
                $("#zip").val(obj.zipNo);
                $("#addr").val(obj.roadAddrPart1);
                $("#daddr").val(obj.addrDetail);
            },

            // 그룹 선택 팝업 콜백 함수
            userGroupSelectionCallback: function(selectedData) {
                if (selectedData && selectedData.groupId) {
                    // 선택한 그룹 ID로 select box 값 설정
                    $('#userGroupId').val(selectedData.groupId);
                }
            },

            // 그룹 정보 팝업 호출 함수
            fnAuthInfo: function() {
                var userGroupId = '${user.userGroupId}';
                var popUrl = '<c:url value="/system/user/group_popup.do"/>';
                if (userGroupId) {
                    popUrl += '?userGroupId=' + userGroupId;
                }
                var popTitle = "그룹 정보";
                var popOption = "width=1200px, height=700px, resizable=yes, scrollbars=yes, location=no, top=100px, left=100px";
                window.open(popUrl, popTitle, popOption);
            },

            /**
             * 사용자 정보 저장
             */
            saveUser: function() {
                var self = this;

                // 필수 입력 필드 검증
                if (!this.validateForm()) {
                    return;
                }

                // 폼 데이터 직렬화
                var formData = $('#userForm').serialize();

                // AJAX 요청 URL 설정
                var url = (self.mode === 'register') ? '<c:url value="/system/user/register.ajax"/>' : '<c:url value="/system/user/edit.ajax"/>';

                // AJAX 요청
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.result) {
                            alert((self.mode === 'register') ? '사용자가 성공적으로 등록되었습니다.' : '사용자 정보가 성공적으로 수정되었습니다.');
                            self.goToList();
                        } else {
                            alert(response.message || ((self.mode === 'register') ? '사용자 등록에 실패했습니다.' : '사용자 정보 수정에 실패했습니다.'));
                        }
                    },
                    error: function(xhr, status, error) {
                        // 에러 처리는 xit-common.js의 ajaxError에서 처리됨
                    }
                });
            },

            /**
             * 사용자 계정 형식 검증
             * @param {string} userAcnt 사용자 계정
             * @returns {boolean} 유효성 검증 결과
             */
            validateUserAccount: function(userAcnt) {
                // 영문, 숫자, 특수문자(_-.)만 허용하는 정규식
                var userAcntRegex = /^[a-zA-Z0-9_\-\.]+$/;

                // 한글이 포함되어 있는지 확인하는 정규식
                var koreanRegex = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;

                // 공백이 포함되어 있는지 확인
                var hasSpace = /\s/.test(userAcnt);

                // 오류 메시지 요소
                var errorElement = $('#userAcnt-error');

                if (koreanRegex.test(userAcnt)) {
                    errorElement.text('한글은 사용할 수 없습니다.');
                    errorElement.show();
                    return false;
                }

                if (hasSpace) {
                    errorElement.text('공백은 사용할 수 없습니다.');
                    errorElement.show();
                    return false;
                }

                if (!userAcntRegex.test(userAcnt)) {
                    errorElement.text('영문, 숫자, 특수문자(_-.)만 사용 가능합니다.');
                    errorElement.show();
                    return false;
                }

                errorElement.hide();
                return true;
            },

            /**
             * 폼 유효성 검증
             * @returns {boolean} 유효성 검증 결과
             */
            validateForm: function() {

                // 사용자 계정 형식 검증 (등록 모드일 때만)
                if (isValid && this.mode === 'register') {
                    var userAcnt = $('#userAcnt').val();
                    if (!this.validateUserAccount(userAcnt)) {
                        $('#userAcnt').focus();
                        return false;
                    }
                }

                // validation-check 속성을 기반으로 폼 검증
                var isValid = validateFormByAttributes('userForm');

                return isValid;
            },

            /**
             * 목록 페이지로 이동
             */
            goToList: function() {
                window.location.href = removeUrlParam("selectUserId", "<c:url value="/system/user/list.do"/>");
            },

            /**
             * 취소 처리
             */
            cancel: function() {
                if (confirm('입력한 내용이 저장되지 않습니다. 목록으로 돌아가시겠습니까?')) {
                    this.goToList();
                }
            },

            /**
             * 비밀번호 초기화
             */
            passwordReset: function() {
                var userId = '${user.userId}';

                if (!userId) {
                    alert('사용자 정보가 올바르지 않습니다.');
                    return;
                }

                if (confirm('비밀번호를 초기화하시겠습니까?')) {
                    $.ajax({
                        url: '<c:url value="/system/user/resetPassword.ajax"/>',
                        type: 'POST',
                        data: {
                            userId: userId
                        },
                        success: function(response) {
                            if (response.result) {
                                alert('비밀번호가 성공적으로 초기화되었습니다.');
                            } else {
                                alert(response.message || '비밀번호 초기화에 실패했습니다.');
                            }
                        },
                        error: function(xhr, status, error) {
                            // 에러 처리는 xit-common.js의 ajaxError에서 처리됨
                        }
                    });
                }
            },

            /**
             * 모듈 초기화
             */
            init: function() {
                // 이벤트 핸들러 설정
                this.eventBindEvents();

                // 코드 정보 로드
                this.loadCodeInfo();
            }
        };

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

        // 전역 함수로 검색 기능 노출
        window.searchZipCode = function() {
            UserForm.searchZipCode();
        };

        // 추가할 코드:
        window.searchZipCodeCallback = function(obj) {
            UserForm.searchZipCodeCallback(obj);
        };

        // 비밀번호 초기화 함수
        window.fnPasswordReset = function() {
            UserForm.passwordReset();
        };

        // 그룹 선택 팝업 콜백 함수
        window.userGroupSelectionCallback = function(selectedData) {
            UserForm.userGroupSelectionCallback(selectedData);
        };

        // 그룹 정보 팝업 호출 함수
        window.fnAuthInfo = function() {
            UserForm.fnAuthInfo();
        };

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