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

<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title">사용자 정보 수정</div>
                <button type="button" id="btnSave" class="newbtn bg4">저장</button>
                <button type="button" id="btnCancel" class="newbtn bg1">취소</button>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <form id="userForm" name="userForm">
            <input type="hidden" id="userId" name="userId" value="${user.userId}" />
            <div class="box_column">
                <div class="containers">
                    <div class="forms_table_non">
                        <table>
                            <colgroup>
                                <col style="width:15%;" />
                                <col style="width:35%;" />
                                <col style="width:15%;" />
                                <col />
                            </colgroup>
                            <tr>
                                <th class="th"><span class="required">*</span> 사용자 계정</th>
                                <td>
                                    <input type="text" id="userAcnt" name="userAcnt" class="input" value="${user.userAcnt}" disabled="disabled" />
                                </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">그룹 ID</th>
                                <td colspan="3">${user.userGroupIdNm}</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}" 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;" readonly="readonly" />
                                    <button type="button" class="newbtn bg2" onclick="searchZipCode()">주소찾기</button>
                                </td>
                            </tr>
                            <tr>
                                <th class="th">주소</th>
                                <td>
                                    <input type="text" id="addr" name="addr" class="input" value="${user.addr}" readonly="readonly" />
                                </td>
                                <th class="th">상세주소</th>
                                <td>
                                    <input type="text" id="daddr" name="daddr" class="input" value="${user.daddr}" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- /Main body -->

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

        /**
         * 사용자 등록/수정 네임스페이스
         */
        var UserForm = {
            /**
             * 이벤트 핸들러 설정
             */
            eventBindEvents: function() {
                var self = this;

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

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

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

            /**
             * 코드 정보 로드
             */
            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}');

            },

            /**
             * 코드 상세 목록 로드
             * @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);
                            });
                        }
                    }
                });
            },

            /**
             * 우편번호 검색
             */
            searchZipCode: function() {
                var popUrl = '<c:url value="/common/address/search.do"/>';
                var params = '?callback=searchZipCodeCallback';
                popUrl += params;
                var popTitle = "주소 찾기";
                var popOption = "width=570px, height=420px, 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);
            },

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

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

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

                // AJAX 요청
                $.ajax({
                    url: "<c:url value="/mypage/edit.ajax "/>",
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.result) {
                            alert(response.message);
                            self.goToMypage();
                        } else {
                            alert(response.message);
                        }
                    }
                });
            },

            /**
             * 폼 유효성 검증
             * @returns {boolean} 유효성 검증 결과
             */
            validateForm: function() {
                // validation-check 속성을 기반으로 폼 검증
                return validateFormByAttributes('userForm');
            },

            /**
             * 목록 페이지로 이동
             */
            goToMypage: function() {
                window.location.href = '<c:url value="/mypage.do"/>';
            },

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

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

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

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

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


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