<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/include/tags.jspf" %>

<script src="/clfd/js/utils.js?ver=1.1"></script>
<script src="/clfd/js/validation/common-validation.js?ver=1.1"></script>
<script src="/clfd/js/user/userService.js?ver=1.2"></script>
<script src="/clfd/js/user/myPage.js?ver=1.2"></script>
<script src="/clfd/lib/cleave/cleave.min.js"></script>

<div class="pathbar">
    <div class="pathbar__text">
    </div>
</div>
<div class="myinfo-wrapper">
    <div class="myinfo-inner">
        <div class="myinfo-inner__contents">
            <div class="myinfo-inner__contents__left" id="myinfo_img">
                <div class="myinfo_img"></div>
            </div>
            <div class="myinfo-inner__contents__right" style="line-height: 50px; font-size: 1.5rem;" id="userId"></div>
        </div>
        <div class="myinfo-inner__contents">
            <div class="myinfo-inner__contents__left">이름</div>
            <div class="myinfo-inner__contents__right">
                <input class="myinfoInput" type="text" id="name" name="name" placeholder="이름을 입력해주세요." maxlength="100">
            </div>
        </div>
        <div class="myinfo-inner__contents">
            <div class="myinfo-inner__contents__left">성별</div>
            <div class="myinfo-inner__contents__right">
                <input type="radio" name="genderRadios" id="female" value="f">
                <label class="form-check-label" for="female">여성</label>
                <input type="radio" name="genderRadios" id="male" value="m">
                <label class="form-check-label" for="male">남성</label>
            </div>
        </div>
        <div class="myinfo-inner__contents">
            <div class="myinfo-inner__contents__left">생년월일</div>
            <div class="myinfo-inner__contents__right">
                <input class="myinfoInput" type="text" id="birth" name="birth" placeholder="생년월일을 입력해주세요." cleave="birth" maxlength="10">
            </div>
        </div>
        <div class="myinfo-inner__contents">
            <div class="myinfo-inner__contents__left"></div>
            <div class="myinfo-inner__contents__right">
                <div type="button" class="myinfo-btn" id="changeBtn">기 본 정 보 변 경</div>
            </div>
        </div>

        <div>
            <hr>
        </div>

        <div class="myinfo-inner__contents">
            <div class="myinfo-inner__contents__left">비밀번호</div>
            <div class="myinfo-inner__contents__right">
                <div type="button" class="myinfo-btn" id="pwUpdateBtn">비 밀 번 호 변 경</div>
            </div>
        </div>
        <div id="passwordDiv" style="display: none;">
            <div class="myinfo-inner__contents">
                <div class="myinfo-inner__contents__left">기존 비밀번호</div>
                <div class="myinfo-inner__contents__right">
                    <input class="myinfoInput" type="password" id="password" name="password" placeholder="기존 비밀번호를 입력해주세요.">
                </div>
            </div>
            <div class="myinfo-inner__contents">
                <div class="myinfo-inner__contents__left">새 비밀번호</div>
                <div class="myinfo-inner__contents__right">
                    <input class="myinfoInput" type="password" id="newPassword" name="newPassword" placeholder="새 비밀번호를 입력해주세요.">
                </div>
            </div>
            <div class="myinfo-inner__contents">
                <div class="myinfo-inner__contents__left">비밀번호 확인</div>
                <div class="myinfo-inner__contents__right">
                    <input class="myinfoInput" type="password" id="newPasswordConfirm" name="newPasswordConfirm" placeholder="새 비밀번호와 동일하게 입력해주세요.">
                </div>
            </div>
            <div class="myinfo-inner__contents">
                <div class="myinfo-inner__contents__left"></div>
                <div class="myinfo-inner__contents__right">
                    <div type="button" class="myinfo-btn" id="pwdChangeBtn">변 경</div>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px; margin-bottom: 20px">
            <hr>
        </div>

        <div class="myinfo-inner__contents">
            <div class="myinfo-inner__contents__left">휴대폰 번호</div>
            <div class="myinfo-inner__contents__right">
                <input class="myinfoInput" type="text" id="phone" name="phone" cleave="phone" disabled maxlength="13">
            </div>
        </div>
        <div class="myinfo-inner__contents">
            <div class="myinfo-inner__contents__left"></div>
            <div class="myinfo-inner__contents__right">
                <div type="button" class="myinfo-btn" id="changePhoneBtn">휴대폰 번호 변경</div>
            </div>
        </div>
        <div id="phoneDiv" style="display: none">
            <div class="myinfo-inner__contents">
                <div class="myinfo-inner__contents__left">변경 휴대폰 번호</div>
                <div class="myinfo-inner__contents__right">
                    <input class="myinfoInput" type="text" id="newPhone" name="newPhone" placeholder="변경할 휴대폰 번호를 입력해주세요." cleave="phone" maxlength="13">
                </div>
            </div>
            <div class="myinfo-inner__contents">
                <div class="myinfo-inner__contents__left"></div>
                <div class="myinfo-inner__contents__right">
                    <div type="button" class="myinfo-btn" id="authRequestBtn">인증번호 전송</div>
                </div>
            </div>
            <div class="myinfo-inner__contents">
                <div class="myinfo-inner__contents__left">인증 번호</div>
                <div class="myinfo-inner__contents__right">
                    <input class="myinfoInput" type="text" id="phoneAuthKey" name="phoneAuthKey" placeholder="인증번호를 입력해주세요." cleave="number" maxlength="6">
                </div>
            </div>
            <div class="myinfo-inner__contents">
                <div class="myinfo-inner__contents__left"></div>
                <div class="myinfo-inner__contents__right">
                    <div type="button" class="myinfo-btn" id="authCheckBtn">인증 확인</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        // 숫자만 입력할 수 있는 태그 설정
        $('input[cleave], textarea[cleave]').each(function (index, element) {
            var type = $(element).attr('cleave');
            var option = {};

            switch (type) {
                case 'number':
                    option['numeral'] = true;
                    option['numericOnly'] = true;
                    option['stripLeadingZeroes'] = false;
                    option['delimiter'] = '';
                    option['numeralDecimalScale'] = 20;
                    break;
                case 'phone':
                    option['numericOnly'] = true;
                    option['delimiter'] = '-';
                    option['blocks'] = [3, 4, 4];
                    option['stripLeadingZeroes'] = false;
                    break;
                case 'birth':
                    option['date'] = true;
                    option['delimiter'] = '-';
                    option['datePattern'] = ['Y', 'm', 'd'];
                    break;
                default:
                    break;
            }

            new Cleave(element, $.extend({}, option));

        });
    });
</script>
