{##}
{% extends 'layout/layout_kc.html' %}
{% block content %}
{% autoescape false %}
	{#
	__THEME_URL_COMMON : 공통 경로
	__THEME_URL : 테마경로
	#}

  <style>
    .mypage_box {
      padding: 29px 15px 0;
      box-sizing: border-box;
      max-width: 640px;
      margin: 0 auto;
    }
    .mypage_box .inner {
      position: relative;
      background: #EEF3F8;
      border-radius: 30px;
      padding: min(9.3vw, 40px) min(9.3vw, 40px) min(14.88vw, 64px);
      box-sizing: border-box;
    }
    .mypage_box .inner:before {
      content: "";
      display: block;
      width: min(12.79vw, 55px);
      height: min(12.79vw, 55px);
      background: url({{__THEME_URL}}/img_kc/v1/ico_mypage_main.png) no-repeat center / 100%;
      position: absolute;
      right: min(6.98vw, 30px);
      top: min(6.28vw, 27px);
    }
    .mypage_box span {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #202122;
      font-size: min(3.49vw, 15px);
      font-weight: bold;
    }
    .mypage_box span em {
      color: rgba(0,0,0,.2);
      font-size: 11px;
      font-weight: 800;
    }
    .mypage_box p {
      margin-top: 13px;
      color: #202122;
      font-size: min(6.28vw, 27px);
      line-height: 1.16;
      word-break: keep-all;
    }
    .blue {
      color: #1786F1 !important;
    }
    .mypage_box a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: min(9.8vw, 40px);
      padding: 0 17px;
      box-sizing: border-box;
      color: #fff;
      font-size: min(3.3vw, 14px);
      font-weight: bold;
      background: #2F3338;
      border-radius: min(2.33vw, 10px);
      margin-top: min(2.33vw, 10px);
    }
    .my_navi {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      max-width: 640px;
      margin: -22px auto 0;
      padding: 0 35px;
      box-sizing: border-box;
    }
    .my_navi li {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: min(4.65vw, 20px);
      height: 42px;
      padding: 0 min(3.49vw, 15px);
      box-sizing: border-box;
      border-radius: min(3.72vw, 16px);
      background: #fff;
      border: 1px solid #1786F1;
    }
    .my_navi li a {
      color: #72777C;
      font-weight: 600;
      font-size: min(3.6vw,14.5px);
    }
    .my_navi li.on {
      background: #0161D1;
      border-color: #0161D1;
    }
    .my_navi li.on:after {
      content: "";
      width: 13.5px;
      height: 10.2px;
      background: url({{__THEME_URL}}/img_kc/v1/chked_yello2.svg) no-repeat center / 100%;
    }
    .my_navi li.on a {
      color: #fff;
      font-weight: bold;
    }
  
    .info-edit_wrap{
      width: 100%;
      padding: 43px 15px;
      box-sizing: border-box;
      max-width: 640px;
      margin: 0 auto;
    }
    .info-edit_wrap .hiddenBox p{
      padding-left: 22px;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: -0.03em;
      color: #888;
      animation: slideInUp 1s;
    }
    .info_title {
      color: #1786F1;
      text-align: center;
      font-size: 23px;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .info_title + p {
      color: #424548;
      font-size: min(3.26vw, 14px);
      line-height: 1.45;
    }
    .info_title + p span {
      color: #EC5B57;
      font-weight: 600;
      line-height: 1.8;
    }
    .info_con {
      padding: 0 25px;
      box-sizing: border-box;
    }
    .info_con li {
      margin-top: 26px;
    }
    .info_con li a {
      position: relative;
      display: block;
    }
    .info_txt .tit {
      color: #1786F1;
      font-size: min(3.26vw, 14px);
      font-weight: 600;
      margin-bottom: 8px;
      display: block;
    }
    .info_txt .box {
      border: 1px solid #CFDCE3;
      border-radius: min(3.49vw, 15px);
      height: min(15.35vw, 66px);
      display: flex;
      align-items: center;
      padding: 0 15px;
      box-sizing: border-box;
      font-size: min(4.19vw, 18px);
      font-weight: 500;
      color: #1B1C1E;
    }
    .info_txt .input {
      border: 0;
      font-size: min(4.19vw, 18px);
      font-weight: 500;
      color: #1B1C1E;
      width: 100%;
      background: #fff;
    }
    .btn_sub {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #D8E3ED;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 0 12px;
      color: #1786F1;
      font-size: min(2.79vw, 12px);
      font-weight: 600;
      height: min(7.44vw, 32px);
      position: absolute;
      right: 15px;
      top: min(9.3vw, 40px);
    }
    .address_edit {
      position: relative;
    }
    .address_edit .box:nth-child(2) {
      width: 71%;
      margin-top: 10px;
    }
    .btn_address {
      background: #313437;
      color: #fff;
      border-radius: min(2.33vw, 10px);
      height: min(9.3vw, 40px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      box-sizing: border-box;
      position: absolute;
      right: 0;
      bottom: min(2.79vw, 12px);
      font-size: min(3.26vw, 14px);
    }
    .info-btn_box {
      text-align: center;
      margin-top: 73px;
      margin-bottom: 170px;
    }
    .btn_confirm {
      border: 1px solid #1786F1;
      background: #1786F1;
      color: #fff;
      height: 66px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
      padding: 0 50px;
      box-sizing: border-box;
      font-size: 20px;
      font-weight: bold;
    }
    .chk_wrap {
      display: flex;
      padding-top: 8px;
    }
    .chkbox + .chkbox {
      margin-left: min(4.9vw, 25px);
    }
    .chk_wrap input[type=checkbox] {
      display: none;
    }
    .chk_wrap input[type=checkbox] + label {
      display: inline-block;
      vertical-align: middle;
      font-size: min(3.14vw, 13.5px);
      font-weight: 600;
      color: rgba(27, 28, 30, .5);
      cursor: pointer;
      position: relative;
      padding-left: min(7.67vw, 33px);
    }
    .chk_wrap input[type=checkbox] + label:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      background: #fff url("{{__THEME_URL}}/img_kc/v1/chk_lightblue.svg") no-repeat center / min(3.02vw, 13px);
      width: min(5.58vw, 24px);
      height: min(5.58vw, 24px);
      border-radius: 6px;
      border: 1px solid #1786F1;
      transform: translateY(-6.5px);
      position: absolute;
      left: 0;
    }
    .chk_wrap input[type=checkbox]:checked + label {
      color: #1B1C1E;
    }
    .chk_wrap input[type=checkbox]:checked + label:before {
      border-color: #0161D1;
      background: #0161D1 url("{{__THEME_URL}}/img_kc/v1/chk_yello.svg") no-repeat center / min(3.02vw, 13px);
    }
  </style>

  <!-- 메인 콘텐츠 -->
  <main>
    <div class="mypage_box">
      <div class="inner">
        <span>마이페이지<em>My page</em></span>
        {% if member.m_id %}
        <p><strong class="blue">{{member.m_name}}</strong>님 반갑습니다.</p>
        <a href="/home/login/logout.php" class="logout_btn">로그아웃</a>
        {% else %}
        <p><strong class="blue">{{org_res.name}}</strong>입니다.</p>
        <a href="/home/login/" class="login_btn">로그인</a>
        {% endif %}
      </div>
    </div>
    <ul class="my_navi">
      <li class="on"><a href="/home/mypage">정보수정</a></li>
      <li><a href="/home/mypage/change_pass.php">비밀번호 변경</a></li>
      <li><a href="/home/mypage/sign_out_check.php">회원탈퇴</a></li>
      <li><a href="/home/join/privacy.php">개인정보처리방침</a></li>
      <li><a href="/home/join/service.php">이용약관</a></li>
      <li><a href="/home/mypage/point.php">포인트</a></li>
    </ul>

    <form name="change_form" id="change_form" method="post" action="" onsubmit="return reg(this);">
      <input type="hidden" name="mypage" value="info">
      <section class="info-edit_wrap">
        <h2 class="info_title">회원정보 수정</h2>
        <p>개명하신 학우님은 이름 입력란 오른쪽에 <b>변경문의</b> 이용 부탁드립니다.<br><span>수정을 원하시는 이름을 남겨주세요.</span></p>
        <article class="info_con">
          <ul>
            <li>
              <a href="/home/customer" title="변경문의">
                <div class="info_txt">
                  <span class="tit">이름</span>
                  <span class="box">{{member.m_name}}</span>
                </div>
                <span class="btn_sub">변경문의</span>
              </a>
            </li>
            <li>
              <a href="javasript:void(0);" onclick="return false;" class="edit_impossible" title="아이디 변경 불가">
                <div class="info_txt">
                  <span class="tit">아이디</span>
                  <span class="box">{{member.m_id}}</span>
                </div>
                <span style="display:none;">&nbsp;</span>
              </a>
            </li>
            <li>
              <a target="_self" href="change_pass.php" title="비밀번호 변경">
                <div class="info_txt">
                  <span class="tit">비밀번호</span>
                  <span class="box">********</span>
                </div>
                <span class="btn_sub">비밀번호 변경</span>
                </div>
              </a>
            </li>
            <li>
              <div>
                <div class="info_txt">
                  <span class="tit">생년월일</span>
                  <span class="box"><input type="date" name="m_birth" class="input" value="{{ member.m_birth }}"></span>
                </div>
              </div>
            </li>
            <li>
              <div>
                <!-- 기존 href="change_email.php" -->
                <div class="info_txt">
                  <span class="tit">이메일</span>
                  <span class="box"><input type="email" name="m_mail" class="input" value="{{ member.m_mail }}"></span>
                </div>
              </div>
            </li>
            <li>
              <div>
                <div class="info_txt">
                  <span class="tit">휴대번호</span>
                  <span class="box"><input type="text" class="form-control empty phoneNumber input" name="m_htel" id="m_htel" placeholder="" value="{{member.m_htel}}" autocomplete="tel" data-inputmask="&quot;mask&quot;: &quot;999-9999-9999&quot;" maxlength="13" tag="휴대폰" required="Y" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"></span>
                </div>
              </div>
            </li>
            <li>
              <a target="_self" href="change_address.php" title="주소지 변경">
                <div class="info_txt">
                  <span class="tit">주소지 정보</span>
                  <div class="address_edit">
                    <span class="box">{{member.m_address}}</span>
                    <span class="box">{{member.m_address_desc}}</span>
                  </div>
                </div>
                <span class="btn_address">변경</span>
              </a>
            </li>
            <li>
              <div class="info_txt">
                <span class="tit">수신동의</span>
                  <div class="chk_wrap">
                    <div class="chkbox">
                      <input type="checkbox" id="sms_text" name="m_sms_perm" value="1" {% if member.m_sms_perm == 1 %} checked {% endif %} class="perm_chk">
                      <label for="sms_text">문자수신에 동의합니다.</label>
                    </div>
                    <div class="chkbox">
                      <input type="checkbox" id="mail_text" name="m_mail_perm" value="1" {% if member.m_mail_perm == 1%} checked {% endif %} class="perm_chk">
                      <label for="mail_text">메일수신에 동의합니다.</label>
                    </div>
                  </div>
              </div>
              </a>
            </li>
          </ul>
        </article>
        <div class="info-btn_box">
          <button class="btn_confirm">정보수정 완료</button>
        </div>
      </section>
    </form>
  </main>

  <script>
    //전화번호 자동하이픈
    $(document).on("keyup", ".phoneNumber", function() { 
      $(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})/,"$1-$2-$3").replace("--", "-") ); 
    });
    
    // 특수문자 입력 방지
    function characterCheck(obj){
    var regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi; 
    // 허용할 특수문자는 여기서 삭제하면 됨
    // 지금은 띄어쓰기도 특수문자 처리됨
    if( regExp.test(obj.value) ){
      obj.value = obj.value.substring( 0 , obj.value.length - 1 ); // 입력한 특수문자 한자리 지움
      }
    }
  
    function maxLengthCheck(object){
      if (object.value.length > object.maxLength){
          object.value = object.value.slice(0, object.maxLength);
      }
    }
  
    function reg(form){
      if(confirm("변경하시겠습니까?")){
        return true;
      }else{
        return false;
      }
    }	
  </script>


{# 하단 FOOTER ####################### #}
{{ include('layout/layout_footer.html') }}
{# 하단 FOOTER ####################### #}

{% endautoescape %}
{% endblock %}