{% extends "base.html" %}
{% set title = "회원정보 수정" if member.mb_id else "회원가입" %}

{% block head %}
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" async></script>
    <script src="{{ url_for('static', path='js/jquery.register_form.js') }}"></script>
{% endblock head %}

{% block title %}{{ title }}{% endblock title %}
{% block subtitle %}{{ title }}{% endblock subtitle %}

{% block content %}
<div class="register">
    <form id="fregisterform" name="fregisterform" action="{{ form.action_url }}"
          onsubmit="return fregisterform_submit(this)" method="post" enctype="multipart/form-data" autocomplete="off">
        <input type="hidden" name="is_register" value="{{ is_register }}"/>
        <input type="hidden" name="token" value="">
<!--        <input type="hidden" name="cert_type" value="">-->
<!--        <input type="hidden" name="cert_no" value="">-->
        <input type="hidden" name="mb_sex" value="">

        <div id="register_form" class="form_01">
            <div class="register_form_inner">
                <h2>사이트 이용정보 입력</h2>
                <ul>
                    <li>
                        <input type="text" name="mb_id" value="{{ member.mb_id|default('', true) }}"
                               id="reg_mb_id" required class="frm_input full_input required alnum_" minlength="3"
                               maxlength="20"
                               {% if member.mb_id %}readonly="readonly"{% endif %}
                               placeholder="">
                        <label for="reg_mb_id" class="text_input">
                          아이디 (필수)
                          <button type="button" class="tooltip_icon">
                              <i class="fa fa-regular fa-question-circle" aria-hidden="true"></i>
                              <span class="blind">설명보기</span>
                              <span class="tooltip">영문자, 숫자, _ 만 입력 가능. 최소 3자이상 입력하세요.</span>
                          </button>
                        </label>
                        <span id="msg_mb_id"></span>
                    </li>
                    <li class="left_input margin_input">
                      <input type="password" name="mb_password" id="reg_mb_password"
                      {{ "required" if is_register else None }}
                       class="frm_input full_input {% if is_register %} required {% endif %}" minlength="4" maxlength="20" placeholder="">
                        <label for="reg_mb_password" class="text_input">비밀번호 (필수)</label>
                    </li>
                    <li class="left_input">
                      <input type="password" name="mb_password_re" id="reg_mb_password_re"
                        {% if is_register %} 'required' {% endif %}
                        class="frm_input full_input
                        {% if is_register %} required {% endif %}" minlength="4" maxlength="20" placeholder="">
                        <label for="reg_mb_password_re" class="text_input">비밀번호 확인 (필수)</label>
                    </li>
                </ul>
            </div>

            <div class="tbl_frm01 tbl_wrap register_form_inner">
                <h2>개인정보 입력</h2>
                <ul>
                    <li>
                        <input type="text" id="reg_mb_name" name="mb_name"
                               value="{{ member.mb_name|default('', true) }}" 
                               required 
                               {{ form.name_readonly }}
                               class="frm_input full_input required " size="10" placeholder="">
                        <label for="reg_mb_name" class="text_input">이름 (필수)</label>
                    </li>
                    <li>
                        <input type="text" name="mb_nick" value="{{ member.mb_nick|default('', true) }}"
                               id="reg_mb_nick" required class="frm_input required nospace full_input" size="10"
                               maxlength="20" placeholder="">
                        <label for="reg_mb_nick" class="text_input">
                          닉네임 (필수)
                          <button type="button" class="tooltip_icon">
                              <i class="fa fa-regular fa-question-circle" aria-hidden="true"></i>
                              <span class="blind">설명보기</span>
                              <span class="tooltip">공백없이 한글,영문,숫자만 입력 가능 (한글2자, 영문4자 이상)<br> 닉네임을 바꾸시면 앞으로 60일 이내에는 변경 할 수 없습니다.</span>
                          </button>
                        </label>
                        <span id="msg_mb_nick"></span>
                    </li>
                    <li>
                        <input type="hidden" name="old_email" value="">
                        <input type="text" name="mb_email" value="{{ member.mb_email|default('', true) }}"
                              id="reg_mb_email" required class="frm_input email full_input required" size="70"
                              maxlength="100" placeholder="">
                        <label for="reg_mb_email" class="text_input">E-mail (필수)</label>
                        {% if config.cf_use_email_certify %}
                            {% if is_register %}
                                <span class="frm_info">E-mail 로 발송된 내용을 확인한 후 인증하셔야 회원가입이 완료됩니다.</span>
                            {% else %}
                                <span class="frm_info">E-mail 주소를 변경하시면 다시 인증하셔야 합니다.</span>
                            {% endif %}
                        {% endif %}
                    </li>

                    {% if config.cf_use_homepage %}
                    <li>
                        <label for="reg_mb_homepage" class="blind">홈페이지{% if config.cf_req_homepage %} (필수){% endif
                            %}</label>
                        <input type="text" name="mb_homepage" value="{{ member.mb_homepage|default('', true) }}"
                               id="reg_mb_homepage"
                               class="frm_input full_input {% if config.cf_req_homepage %} required{% endif %}"
                               maxlength="255"
                               {% if config.cf_req_homepage %} required {% endif %}
                               placeholder="홈페이지{% if config.cf_req_homepage %} (필수){% endif %}">
                    </li>
                    {% endif %}
                    {% if config.cf_use_tel %}
                    <li>
                        <label for="reg_mb_tel" class="blind">전화번호
                            {% if config.cf_req_tel %} (필수) {% endif %}
                        </label>
                        <input type="text" name="mb_tel" value="{{ member.mb_tel|default('', true) }}"
                               id="reg_mb_tel"
                               class="frm_input full_input {% if config.cf_req_tel %} required{% endif %}"
                               maxlength="20"
                               {% if config.cf_req_tel %}required{% endif %}
                               placeholder="전화번호 {% if config.cf_req_tel %} (필수){% endif %}">
                    </li>
                    {% endif %}

                    {% if config.cf_use_hp %}
                    <li>
                        <label for="reg_mb_hp" class="blind">
                            휴대폰번호{% if config.cf_req_hp %} (필수){% endif %}{{ desc_phone }}
                        </label>
                        <input type="text" name="mb_hp"
                               id="reg_mb_hp" 
                               {{ hp_readonly }}
                               value="{{ member.mb_hp|default('', true) }}"
                               class="frm_input full_input 
                               {% if config.cf_req_hp %}required{% endif %}
                               {{ hp_readonly }}"
                               maxlength="20"
                               placeholder="휴대폰번호{% if config.cf_req_hp %} (필수){% endif %} {{ desc_phone }}"
                        >
                    </li>
                    {% endif %}
                    
                    {% if config.cf_use_addr %}
                    <li>
                        <label>주소 {% if config.cf_req_addr %} (필수) {% endif %}</label> 
                        <label for="reg_mb_zip" class="blind">
                            우편번호 {% if config.cf_req_addr %} (필수) {% endif %}
                        </label>
                        <input type="text" name="mb_zip" 
                               value="{{ member.mb_zip1|default('', true) + member.mb_zip2|default('', true) }}"
                               id="reg_mb_zip"
                               {% if config.cf_req_addr %} required {% endif %}
                               class="frm_input twopart_input {% if config.cf_req_addr %} required {% endif %}"
                               size="5" maxlength="6" placeholder="우편번호">
                        <button type="button" class="btn_frmline"
                                onclick="win_zip('fregisterform', 'mb_zip', 'mb_addr1', 'mb_addr2', 'mb_addr3', 'mb_addr_jibeon');">
                            주소 검색
                        </button>
                        <br>
                        <input type="text" name="mb_addr1" value="{{ member.mb_addr1|default('', true) }}"
                               id="reg_mb_addr1" 
                               {% if config.cf_req_addr %} required {% endif %} 
                               class="frm_input frm_address full_input 
                               {% if config.cf_req_addr %} required {% endif %}"
                               size="50"
                        placeholder="기본주소">
                        <label for="reg_mb_addr1"
                               class="blind">기본주소  {% if config.cf_req_addr %} (필수) {% endif %}  </label><br>
                        <input type="text" name="mb_addr2" value="{{ member.mb_addr2|default('', true) }}"
                               id="reg_mb_addr2" class="frm_input frm_address full_input" size="50" placeholder="상세주소">
                        <label for="reg_mb_addr2" class="blind">상세주소</label>
                        <br>
                        <input type="text" name="mb_addr3" value="{{ member.mb_addr3|default('', true) }}"
                               id="reg_mb_addr3" class="frm_input frm_address full_input" size="50" readonly="readonly"
                               placeholder="참고항목">
                        <label for="reg_mb_addr3" class="blind">참고항목</label>
                        <input type="hidden" name="mb_addr_jibeon"
                               value="{{ member.mb_addr_jibeon|default('', true) }}">
                    </li>
                    {% endif %}
                </ul>
            </div>

            <div class="tbl_frm01 tbl_wrap register_form_inner">
                <h2>기타 개인설정</h2>
                <ul>
                    
                    {% if config.cf_use_signature %}
                    <li>
                        <label for="reg_mb_signature" class="blind">
                            서명 {% if config.cf_req_signature %} (필수){% endif %}
                        </label>
                        <textarea name="mb_signature" id="reg_mb_signature"
                                  class=" {% if config.cf_req_signature %} required {% endif %}"
                                  {% if config.cf_req_signature %} required {% endif %}
                                  placeholder="서명 {% if config.cf_req_signature %} (필수){% endif %}">{{ member.mb_signature|default('', true) }}</textarea>
                    </li>
                    {% endif %}
                    {% if config.cf_use_profile %}
                    <li>
                        <label for="reg_mb_profile" class="blind">자기소개</label>
                        <textarea name="mb_profile" id="reg_mb_profile"
                                  class="{% if config.cf_req_profile %} required{% endif %}" 
                                  {% if config.cf_req_profile %} required {% endif %}
                                  placeholder="자기소개{% if config.cf_req_profile %} (필수){% endif %}">{{ member.mb_profile|default('', true) }}</textarea>
                    </li>
                    {% endif %}
                    
                    {% if config.cf_icon_level|int <= member.mb_level|int %}
                    <li class="reg_mb_img_file">
                        <label for="reg_mb_img" class="frm_label">
                            회원이미지
                            <button type="button" class="tooltip_icon">
                              <i class="fa fa-regular fa-question-circle" aria-hidden="true"></i>
                              <span class="blind">설명보기</span>
                              <span class="tooltip">이미지 크기는 가로 {{ config.cf_member_img_width }} 픽셀, 세로 {{ config.cf_member_img_height }}픽셀로 리사이즈 됩니다.<br>
                                gif, jpg, png파일만 가능하며 용량 {{ config.cf_member_img_size }}바이트 이하만 등록됩니다.</span>
                            </button>
                        </label>
                        <input type="file" name="mb_img" accept="image/*" id="reg_mb_img">
                        
                        {% if not is_register and form.mb_img_url %}
                            <img src="{{ form.mb_img_url }}" alt="">
                            <input type="checkbox" name="del_mb_img" value="1" id="del_mb_img">
                            <label for="del_mb_img" class="inline">삭제</label>
                        {% endif %}
                    </li>
                    <li class="reg_mb_icon_file">
                        <label for="reg_mb_icon" class="frm_label">
                            회원아이콘
                            <button type="button" class="tooltip_icon">
                              <i class="fa fa-regular fa-question-circle" aria-hidden="true"></i>
                              <span class="blind">설명보기</span>
                              <span class="tooltip">이미지 크기는 가로 {{ config.cf_member_icon_width }} 픽셀, 세로 {{ config.cf_member_icon_height }}픽셀로 리사이즈 됩니다.<br>
                                gif, jpg, png파일만 가능하며 용량 {{ config.cf_member_icon_size }}바이트 이하만 등록됩니다.</span>
                            </button>
                        </label>
                        <input type="file" name="mb_icon" accept="image/*" id="reg_mb_icon">
                        {% if not is_register and form.mb_icon_url %}
                            <img src="{{ form.mb_icon_url }}" alt="" width="{{ config.cf_member_icon_width }}" height="{{ config.cf_member_icon_height }}">
                            <input type="checkbox" name="del_mb_icon" value="1" id="del_mb_icon">
                            <label for="del_mb_icon" class="inline">삭제</label>
                        {% endif %}
                    </li>
                    
                    {% endif %}
                    
                    <li class="chk_box">
                        <input type="checkbox" name="mb_mailling" value="1" id="reg_mb_mailling" {% if member.mb_mailling %} checked {% endif %}>
                        <label for="reg_mb_mailling">
                            <span></span>
                            <b class="blind">메일링서비스</b>
                        </label>
                        <span class="chk_li">정보 메일을 받겠습니다.</span>
                    </li>
                    
                    {% if config.cf_use_hp %}
                    <li class="chk_box">
                        <input type="checkbox" name="mb_sms" value="1" id="reg_mb_sms" {% if member.mb_sms %} checked {% endif %}>
                        <label for="reg_mb_sms">
                            <span></span>
                            <b class="blind">SMS 수신여부</b>
                        </label>
                        <span class="chk_li">휴대폰 문자메세지를 받겠습니다.</span>
                    </li>
                    {% endif %}
                    
                    {% if form.is_profile_open %}
                    <li class="chk_box">
                        <input type="checkbox" name="mb_open" value="1" id="reg_mb_open" {% if is_register or member.mb_open %} checked {% endif %}>
                        <label for="reg_mb_open">
                            <span></span>
                            <b class="blind">정보공개</b>
                        </label>
                        <span class="chk_li">다른분들이 나의 정보를 볼 수 있도록 합니다.</span>
                        <span class="frm_info">
                            정보공개를 바꾸시면 앞으로 {{ config.cf_open_modify|default("0") }}일 이내에는 변경이 안됩니다.
                        </span>
                    </li>
                    {% else %}
                    <li>
                        <span class="frm_label">정보공개</span>
                        <input type="hidden" name="mb_open" value="{{ member.mb_open }}">

                        <span class="frm_info">
                            정보공개는 수정 후 앞으로 {{ config.cf_open_modify|default("0") }} 일 이내, 
                            {{ form.profile_open_date }} 까지는 변경이 안됩니다.<br>
                            이렇게 하는 이유는 잦은 정보공개 수정으로 인하여 쪽지를 보낸 후 받지 않는 경우를 막기 위해서 입니다.
                        </span>
                         
                    </li>
                    {% endif %} 
                    {% if is_register and config.cf_use_recommend %}
                    <li>
                        <input type="text" name="mb_recommend" 
                               value="" 
                               id="mb_recommend" 
                               class="frm_input half_input" 
                               placeholder="추천인 아이디">

                    </li>
                    {% endif %}
                    <li>
                    </li>

                    <li class="is_captcha_use">
                        {% include captcha_widget(request) ignore missing %}
                    </li>
                </ul>
            </div>
        </div>
        <div class="btn_confirm">
            <a href="/" class="btn_close">취소</a>
            <button type="submit" id="btn_submit" class="btn_submit" accesskey="s">{% if is_register %}회원가입{% else %}정보수정{% endif %}</button>
        </div>
    </form>
</div>
<script>
    "use strict";
    $(function() {
        $("#reg_zip_find").css("display", "inline-block");
        const pageTypeParam = "pageType=register";
    });
    
    // submit 최종 폼체크
    function fregisterform_submit(f)
    {
        try {
        {% if is_register %}
            // 회원아이디 검사
            let valid_id = valid_register_field("id", f.mb_id.value)
            if (valid_id.success === false) {
                alert(valid_id.message);
                f.mb_id.focus();
                return false;
            }

            // 이름 검사
            if (f.mb_name.value.length < 1) {
                alert("이름을 입력하십시오.");
                f.mb_name.focus();
                return false;
            }
            let valid_name = valid_register_field("name", f.mb_name.value)
            if (valid_name.success === false) {
                alert(valid_name.message);
                f.mb_name.focus();
                return false;
            }
        {% endif %}

            // 비밀번호 검사
            if (typeof(f.mb_password) != "undefined" && f.mb_password.value) {
                if (f.mb_password.value.length < 4 || f.mb_password.value.length > 20) {
                    alert("비밀번호는 4~20자 이내로 입력해주세요.");
                    f.mb_password.focus();
                    return false;
                }
                if (f.mb_password.value != f.mb_password_re.value) {
                    alert("비밀번호 확인이 일치하지 않습니다.");
                    f.mb_password_re.focus();
                    return false;
                }
            }

            // 닉네임 검사
            if (f.mb_nick.defaultValue != f.mb_nick.value) {
                let valid_nickname = valid_register_field("nickname", f.mb_nick.value)
                if (valid_nickname.success === false) {
                    alert(valid_nickname.message);
                    f.reg_mb_nick.focus();
                    return false;
                }
            }

            // E-mail 검사
            if (f.mb_email.defaultValue != f.mb_email.value) {
                let valid_email = valid_register_field("email", f.mb_email.value)
                if (valid_email.success === false) {
                    alert(valid_email.message);
                    f.reg_mb_email.focus();
                    return false;
                }
            }

            // 회원 아이콘,이미지 확장자 검사
            if (typeof f.mb_icon != "undefined") {
                if (f.mb_icon.value) {
                    if (!f.mb_icon.value.toLowerCase().match(/.(gif|jpe?g|png)$/i)) {
                        alert("회원아이콘이 이미지 파일이 아닙니다.");
                        f.mb_icon.focus();
                        return false;
                    }
                }
            }
            if (typeof f.mb_img != "undefined") {
                if (f.mb_img.value) {
                    if (!f.mb_img.value.toLowerCase().match(/.(gif|jpe?g|png)$/i)) {
                        alert("회원이미지가 이미지 파일이 아닙니다.");
                        f.mb_img.focus();
                        return false;
                    }
                }
            }

            // 추천인 검사
            if (typeof(f.mb_recommend) != "undefined" && f.mb_recommend.value) {
                if (f.mb_id.value == f.mb_recommend.value) {
                    alert("본인을 추천할 수 없습니다.");
                    f.mb_recommend.focus();
                    return false;
                }
                const regex_recommend = /[^0-9a-z_]+/i;
                if (regex_recommend.test(f.mb_recommend.value)) {
                    alert("추천인 아이디는 영문자, 숫자, _ 만 입력하세요.");
                    f.mb_recommend.focus();
                    return false;
                }
                let valid_recommend = valid_register_field("recommend", f.mb_recommend.value)
                if (valid_recommend.success === false) {
                    alert(valid_recommend.message);
                    f.mb_recommend.focus();
                    return false;
                }
            }

            // captcha 사용시
            if (typeof check_captcha === "function") {
                if (!check_captcha(f)) return false;
            }

            document.getElementById("btn_submit").disabled = true;

            // 토큰 생성은 폼 체크의 가장 마지막에서 한다.
            f.token.value = generate_token();
            
            return true;
        
        } catch(e) {
            console.log(e)
            alert('회원가입에 실패했습니다')
            return false;
        }
    }
    
    jQuery(function($){
        //tooltip
        $(document).on("click", ".tooltip_icon", function(e){
            $(this).next(".tooltip").fadeIn(400).css("display","inline-block");
        }).on("mouseout", ".tooltip_icon", function(e){
            $(this).next(".tooltip").fadeOut();
        });
    });
</script>
{% endblock content %}