{% extends "base.html" %}

{% block head %}
    <link rel="stylesheet" href="{{ theme_asset(request, 'js/remodal/remodal.css') }}">
    <link rel="stylesheet" href="{{ theme_asset(request, 'js/remodal/remodal-default-theme.css') }}">
    <script src="{{ theme_asset(request, 'js/remodal/remodal.js') }}"></script>
    <script src="/static/js/jquery.register_form.js"></script>

    {% if (config.cf_cert_use and (config.cf_cert_simple or config.cf_cert_ipin or config.cf_cert_hp)) %}
    <script src="/static/js/certify.js"></script>
    {% endif %}
{% endblock head %}

{% block title %}회원가입약관{% endblock title %}
{% block subtitle %}회원가입약관{% endblock subtitle %}

{% block content %}
<div class="social_register">

    <form name="fregisterform" id="fregisterform" action="{{ form.action_url }}"
          onsubmit="return fregisterform_submit(this);" method="POST" autocomplete="off">

        <p>
            <i class="fa fa-check-circle" aria-hidden="true"></i>
            회원가입약관 및 개인정보 수집 및 이용의 내용에 동의하셔야 회원가입 하실 수 있습니다.
        </p>

        <section id="fregister_term">
            <h2>회원가입약관</h2>
            <textarea readonly>{{ config.cf_stipulation }}</textarea>
            <fieldset class="fregister_agree">
                <input type="checkbox" name="agree" value="1" id="agree11" class="selec_chk">
                <label for="agree11"><span></span><b class="blind">회원가입약관의 내용에 동의합니다.</b></label>
            </fieldset>
        </section>

        <section id="fregister_private">
            <h2>개인정보 수집 및 이용</h2>
            <div>
                <table>
                    <caption class="blind">개인정보 수집 및 이용</caption>
                    <thead>
                    <tr>
                        <th>목적</th>
                        <th>항목</th>
                        <th>보유기간</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>이용자 식별 및 본인여부 확인</td>
                        <td>아이디, 이름, 비밀번호 {% if config.cf_cert_use %} 생년월일, 휴대폰 번호(본인인증 할 때만, 아이핀 제외),
                            암호화된 개인식별부호(CI) {% endif %}
                        </td>
                        <td>회원 탈퇴 시까지</td>
                    </tr>
                    <tr>
                        <td>고객서비스 이용에 관한 통지,<br>CS대응을 위한 이용자 식별</td>
                        <td>연락처 (이메일, 휴대전화번호)</td>
                        <td>회원 탈퇴 시까지</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <fieldset class="fregister_agree">
                <input type="checkbox" name="agree2" value="1" id="agree21" class="selec_chk">
                <label for="agree21"><span></span><b class="blind">개인정보 수집 및 이용의 내용에 동의합니다.</b></label>
            </fieldset>
        </section>

        <div id="fregister_chkall" class="chk_all fregister_agree">
            <input type="checkbox" name="chk_all" id="chk_all" class="selec_chk">
            <label for="chk_all"><span></span>회원가입 약관에 모두 동의합니다</label>
        </div>
        <!-- } 회원가입 약관 동의 끝 -->

        <!-- 새로가입 시작 -->
        <input type="hidden" name="action" value="is_register">
        <input type="hidden" name="cert_type" value="{{ request.state.login_member.mb_certify }}">
        <input type="hidden" name="cert_no" value="">
        <input type="hidden" name="mb_id" value="{{ form.social_member_id }}" id="reg_mb_id">
        {% if config.cf_cert_use %}{#  본인인증 #}
            {% if member_name %}
            <input type="hidden" id="reg_mb_name" name="mb_name" value="{{member_name}}">
            {% else %}
            <input type="hidden" id="reg_mb_name" name="mb_name" value="{{member_nick}}">
            {% endif %}
        {% endif %}
        {% if config.cf_use_hp or (config.cf_cert_use and (config.cf_cert_hp or config.cf_cert_simple)) %}
        <input type="hidden" name="mb_hp" value="{{ user_phone }}" id="reg_mb_hp">
        {% if config.cf_cert_use and (config.cf_cert_hp or config.cf_cert_simple) %}
        <input type="hidden" name="old_mb_hp" value="{{ user_phone }}">
        {% endif %}
        {% endif %}

        <div id="register_form" class="form_01">
            <div class="tbl_frm01 tbl_wrap register_form_inner">
                <h2>개인정보 입력</h2>
                <ul>
                    <li>
                        {% if config.cf_cert_use %}
                        {% if config.cf_cert_simple %}
                        <button type="button" id="win_sa_kakao_cert" class="btn_frmline win_sa_cert" data-type="">간편인증
                        </button>
                        {% endif %}
                        {% if config.cf_cert_hp %}
                        <button type="button" id="win_hp_cert" class="btn_frmline">휴대폰 본인확인</button>
                        {% endif %}
                        {% if config.cf_cert_ipin %}
                        <button type="button" id="win_ipin_cert" class="btn_frmline">아이핀 본인확인</button>
                        {% endif %}
                        <span class="cert_req">(필수)</span>
                        <noscript>본인확인을 위해서는 자바스크립트 사용이 가능해야합니다.</noscript>
                        {% endif %}
                    </li>

                    <li>
                        <label for="reg_mb_nick">
                            닉네임 (필수)
                            <button type="button" class="tooltip_icon">
                                <i class="fa fa-regular fa-question-circle" aria-hidden="true"></i>
                                <span class="blind">설명보기</span>
                            </button>
                            <span class="tooltip">공백없이 한글,영문,숫자만 입력 가능 (한글2자, 영문4자 이상)<br> 닉네임을 바꾸시면 앞으로 
                                {{ config.cf_nick_modify }} 일 이내에는 변경 할 수 없습니다.
                            </span>
                        </label>

                        <input type="hidden" name="mb_nick_default"
                               value="{{ form.social_nickname }}">
                        <input type="text" name="mb_nick"
                               value="{{ form.social_nickname }}" id="reg_mb_nick"
                               required class="frm_input required nospace full_input" size="10" maxlength="20"
                               placeholder="닉네임">
                        <span id="msg_mb_nick"></span>
                    </li>
                    <li>
                        <label for="reg_mb_email">E-mail (필수)
                            {% if config.cf_use_email_certify %}
                            <button type="button" class="tooltip_icon">
                                <i class="fa fa-regular fa-question-circle" aria-hidden="true"></i>
                                <span class="blind">설명보기</span>
                            </button>
                            <span class="tooltip">
                                    {% if is_register %}
                                        "E-mail 로 발송된 내용을 확인한 후 인증하셔야 회원가입이 완료됩니다."
                                    {% else %}
                                        "E-mail 주소를 변경하시면 다시 인증하셔야 합니다."
                                    {% endif %}
                                </span>
                            {% endif %}
                        </label>
                        <input type="text" name="mb_email" value="{{ form.social_email }}"
                               id="reg_mb_email"
                               {% if form.social_email and not form.is_exists_email %}
                               readonly
                               {% endif %}
                               required
                               class="frm_input email full_input required" size="70" maxlength="100"
                               placeholder="E-mail">
                        <div class="check">
                            {{ email_msg }}
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="btn_confirm text-end">
            <a href="{{ request.base_url }}" class="btn_close">취소</a>
            <button type="submit" id="btn_submit" class="btn_submit" accesskey="s">
                {% if is_register %}회원가입{% else %}정보수정{% endif %}
            </button>
        </div>

    </form>

</div>


<!-- 기존 계정 연결 -->

<div class="member_connect">
    <p class="strong">혹시 기존 회원이신가요?</p>
    <button type="button" class="connect-opener btn-txt" data-remodal-target="modal">
        기존 계정에 연결하기
        <i class="fa fa-angles-right"></i>
    </button>
</div>

<div id="sns-link-pnl" class="remodal" data-remodal-id="modal" role="dialog" 
     aria-labelledby="modal1Title" aria-describedby="modal1Desc">
    <button type="button" class="connect-close" data-remodal-action="close">
        <i class="fa fa-close"></i>
        <span class="txt">닫기</span>
    </button>
    <div class="connect-fg">
        <form method="post" action="{{ url_for('login') }}" onsubmit="return flogin_submit(this);">
            <input type="hidden" id="provider" name="provider" value="{{ provider_name }}">
            <!--            <input type="hidden" id="action" name="action" value="social_account_linking">-->

            <div class="connect-title">기존 계정에 연결하기</div>

            <div class="connect-desc">
                기존 아이디에 SNS 아이디를 연결합니다.<br>
                이 후 SNS 아이디로 로그인 하시면 기존 아이디로 로그인 할 수 있습니다.
            </div>

            <div id="login_fs">
                <label for="login_id" class="login_id">아이디 (필수)</label>
                <span class="lg_id">
                    <input type="text" name="mb_id" id="login_id" class="frm_input required alnum_" size="20" maxLength="20">
                </span>
                <label for="login_pw" class="login_pw">비밀번호 (필수)</label>
                <span class="lg_pw">
                    <input type="password" name="mb_password" id="login_pw" class="frm_input required" size="20" maxLength="20">
                </span>
                <br>
                <input type="submit" value="연결하기" class="login_submit btn_submit">
            </div>

        </form>
    </div>
</div>

<script>
    const cf_cert_use = "{{config['cf_cert_use']}}"
    const cf_cert_simple = "{{config['cf_cert_simple']}}"
    const cf_cert_hp = "{{config['cf_cert_hp']}}"
    const cf_cert_ipin = "{{config['cf_cert_ipin']|default_if_none('0')}}"
    const cert_url = ""
    const cert_type = ""
    const is_register = "{{is_register}}"
    
    $(function() {
        // 모두선택
        $("input[name=chk_all]").click(function() {
            if ($(this).prop('checked')) {
                $("input[name^=agree]").prop('checked', true);
            } else {
                $("input[name^=agree]").prop("checked", false);
            }
        });

        $("#reg_zip_find").css("display", "inline-block");
        const pageTypeParam = "pageType=register";

        //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();
        });
    });

    // submit 최종 폼체크
    function fregisterform_submit(f) {

        if (!f.agree.checked) {
            alert("회원가입약관의 내용에 동의하셔야 회원가입 하실 수 있습니다.");
            f.agree.focus();
            return false;
        }

        if (!f.agree2.checked) {
            alert("개인정보 수집 및 이용의 내용에 동의하셔야 회원가입 하실 수 있습니다.");
            f.agree2.focus();
            return false;
        }

        {% if (is_register == "" and config["cf_cert_use"] and config["cf_cert_req"]) %}
            // 본인확인 체크
            if (f.cert_no.value == "") {
                alert("회원가입을 위해서는 본인확인을 해주셔야 합니다.");
                return false;
            }
        {% endif %}

        // 닉네임 검사
        if (is_register || (f.mb_nick.defaultValue != f.mb_nick.value)) {
            const msg = reg_mb_nick_check();
            if (msg) {
                alert(msg);
                f.reg_mb_nick.select();
                return false;
            }
        }

        // E-mail 검사
        if (is_register|| (f.mb_email.defaultValue != f.mb_email.value)) {
            const msg = reg_mb_email_check();
            if (msg) {
                alert(msg);
                f.reg_mb_email.select();
                return false;
            }
        }


        return true;
    }

    function flogin_submit(f) {
        const mb_id = $.trim($(f).find("input[name=mb_id]").val()),
            mb_password = $.trim($(f).find("input[name=mb_password]").val());

        if (!mb_id || !mb_password) {
            return false;
        }

        return true;
    }
</script>

<!-- } 회원정보 입력/수정 끝 -->
{% endblock content %}