<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (!$config['cf_social_login_use']) {     //소셜 로그인을 사용하지 않으면
    return;
}

add_javascript('<script src="<?php echo G5_JS_URL ?>/jquery.register_form.js"></script>', 14);
if ($config['cf_cert_use'] && ($config['cf_cert_simple'] || $config['cf_cert_ipin'] || $config['cf_cert_hp']))
    add_javascript('<script src="'.G5_JS_URL.'/certify.js?v='.G5_JS_VER.'"></script>', 15);

add_javascript('<script src="<?php echo G5_JS_URL ?>/jquery.register_form.js"></script>', 14);
$email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.다른 이메일을 입력해 주세요.' : ''; 
?>

<style>
  .selec_chk_c {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .selec_chk_c + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  .selec_chk_c + label > span {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
  }

  .selec_chk_c:checked + label > span:before {
    content: '✓';
    display: block;
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #ff6a06;
    transform: translate(-50%, -50%);
    font-size:20px;
  }
  
  
    .selec_chk_ac {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .selec_chk_ac + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  .selec_chk_ac + label > span {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
  }

  .selec_chk_ac:checked + label > span:before {
    content: '✓';
    display: block;
    position: absolute;
    top: -40%;
    left: 50%;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #ff6a06;
    transform: translate(-50%, -50%);
    font-size:20px;
  }

  .fregister {
  justify-content: center;
  align-items: center;
  background-color:#fff;
  z-index:999999999999;
  width: 100%;
  padding:20px;
  top: 0 !important
}

.register_content {
  margin-top:25px !important;
  max-width:550px;
  margin:auto
}

.register-button {
  margin-top: 30px;
  min-width: 250px;
  width: 95%;
  max-width: 600px;
  height: 45px;
  font-weight: bold;
  font-size: 1.25em;
  background-color: #2a2a2a;
  position: fixed;
  bottom:0;
  left: 50%;
  transform: translateX(-50%);
  margin:10px 0;
  border-radius:5px
}
input:focus {outline:none;}
.register_head {
  margin:auto;
  max-width:550px;
}
</style>

<!-- 회원가입약관 동의 시작 { -->
<div class="register" style="display: flex;justify-content: center;align-items: center;">
<form name="fregister" id="fregister" class="fregister" action="<?php echo $register_action_url ?>" onsubmit="return fregister_submit(this);" method="POST" autocomplete="off">

<div class="register_head">
<h1 style="color:#3a3a3a; font-size:2.3em; font-weight:520;padding-bottom:10px">서비스 가입</h1>
<span style="color:#4a4a4a;">회원 프로필 생성 및 관리를 위해 이용약관에 동의해주세요.</span>
</div>

<div class="register_content">
  <!-- 회원가입 약관 동의 -->
   <section id="fregister_term" style="border:none;padding-top:5px">
  <a href="#" class="view-terms"><span style="color:#2a2a2a">(필수) 회원가입 약관 동의</span></a>
  <fieldset class="fregister_agree">
    <input type="checkbox" name="agree" value="1" id="agree11" class="selec_chk_c">
  <label for="agree11"><span style="top:-10px;"></span><b class="sound_only" >회원가입약관의 내용에 동의합니다.</b></label>
    </fieldset>  
    <div class="modal" id="termsModal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <textarea readonly style="min-height:300px;height:80%;max-height:520px;width:100%;border-radius:5px;background-color: #f9f9f9;padding:15px;border:none"><?php echo get_text($config['cf_stipulation']) ?></textarea>
    </div>
</div>
     </section>
  <div class="terms-container" style="margin-bottom:10px">
    <div class="terms-item">
      <a href="#" class="view-terms" style="color:#3a86ff;text-decoration-line: underline;">보기</a>
    </div>
  </div>

  <!-- 개인정보 수집 및 이용 동의 -->
  <section id="fregister_private" style="border:none;top:5px">
   <a href="#" class="view-privacy"><span style="color:#2a2a2a">(필수) 개인정보 수집 및 이용 동의</span></a>
  <fieldset class="fregister_agree">
    <input type="checkbox" name="agree2" value="1" id="agree21" class="selec_chk_c">
  <label for="agree21"><span style="top:-10px;"></span><b class="sound_only">개인정보 수집 및 이용의 내용에 동의합니다.</b></label>
   </fieldset>
   <div class="modal" id="privacyModal" style="background-color: rgba(0, 0, 0, 0.15);">
    <div class="modal-content" style="max-height:450px">
        <span class="close-button">&times;</span>
        <div class="privacy-policy">
            <h2>개인정보 수집 및 이용</h2>
            <div class="policy-item">
                <h3>이용자 식별 및 본인 확인</h3>
                <ul>
                    <li>수집항목:</br>아이디, 이름, 비밀번호, cookie<?php echo ($config['cf_cert_use'])? ", 생년월일, 휴대폰 번호(본인인증 할 때만, 아이핀 제외), 암호화된 개인식별부호(CI)" : ""; ?></li>
                    <li>보유기간: </br>회원 탈퇴 시까지</li>
                </ul>
            </div>
            <div class="policy-item">
                <h3>서비스 이용에 관한 통지, 이용자 식별</h3>
                <ul>
                    <li>수집항목:</br>연락처 (이메일)</li>
                    <li>보유기간:</br>회원 탈퇴 시까지</li>
                </ul>
            </div>
        </div>
    </div>
</div>
    </section>
  <div class="privacy-container">
    <div class="privacy-item">
      <a href="#" class="view-privacy" style="color:#3a86ff;text-decoration-line: underline;">보기</a>
    </div>
  </div>
    <section id="fregister" style="border:none;padding-top:15px;border-top:1px solid #f1f1f1">
  <fieldset class="fregister_agree">
    <input type="checkbox" name="chk_all" id="chk_all" class="selec_chk_c">
        <label for="chk_all"><span style="top:10px;"></span></label>
                  </fieldset>
        <span style="color:#3a3a3a;font-weight:520;font-size:1.2em;border:none">전체 동의</span>
        </section>
        
                <!-- 새로가입 시작 -->
                <span style="margin-top:30px;font-size:1.4em;font-weight:520;color:#3a3a3a;">간편 프로필 작성</span>
        <input type="hidden" name="w" value="<?php echo $w; ?>">
        <input type="hidden" name="url" value="<?php echo $urlencode; ?>">
        <input type="hidden" name="provider" value="<?php echo $provider_name; ?>">
        <input type="hidden" name="action" value="register">
        <input type="hidden" name="cert_type" value="<?php echo $member['mb_certify']; ?>">
        <input type="hidden" name="cert_no" value="">
        <input type="hidden" name="mb_id" value="<?php echo $user_id; ?>" id="reg_mb_id">
        <?php if ($config["cf_cert_use"]) { ?>
            <input type="hidden" id="reg_mb_name" name="mb_name" value="<?php echo $user_name ? $user_name : $user_nick ?>">
        <?php } ?>
        <?php if ($config['cf_use_hp'] || ($config["cf_cert_use"] && ($config['cf_cert_hp'] || $config['cf_cert_simple']))) {  ?>
            <input type="hidden" name="mb_hp" value="<?php echo get_text($user_phone); ?>" id="reg_mb_hp">
            <?php if ($config['cf_cert_use'] && ($config['cf_cert_hp'] || $config['cf_cert_simple'])) { ?>
                <input type="hidden" name="old_mb_hp" value="<?php echo get_text($user_phone); ?>">
            <?php } ?>
        <?php }  ?>

        <div id="register_form" style="margin-top:10px;">
            <ul>
                <li>
                    <?php 
                    if ($config['cf_cert_use']) {
                        if ($config['cf_cert_simple']) {
                            echo '<button type="button" id="win_sa_kakao_cert" class="btn_frmline btn win_sa_cert" data-type="">간편인증</button>'.PHP_EOL;
                        }
                        if ($config['cf_cert_hp'])
                            echo '<button type="button" id="win_hp_cert" class="btn_frmline btn">휴대폰 본인확인</button>' . PHP_EOL;
                        if ($config['cf_cert_ipin'])
                            echo '<button type="button" id="win_ipin_cert" class="btn_frmline btn">아이핀 본인확인</button>' . PHP_EOL;

                        echo '<span class="cert_req">(필수)</span>';
                        echo '<noscript>본인확인을 위해서는 자바스크립트 사용이 가능해야합니다.</noscript>' . PHP_EOL;
                    }
                    ?>
                </li>
                <?php if ($req_nick) {  ?>
                    <li>
                        <input type="hidden" name="mb_nick_default" value="<?php echo isset($user_nick) ? get_text($user_nick) : ''; ?>">
                        <input type="text" name="mb_nick" value="<?php echo isset($user_nick) ? get_text($user_nick) : ''; ?>" id="reg_mb_nick" required class="frm_input required nospace full_input" size="10" maxlength="20" placeholder="닉네임 (필수)" style="border:1px solid #f1f1f1;background-color:#f9f9f9;border-radius:15px;padding:10px;margin-bottom:5px">
                        <span id="msg_mb_nick"></span>
                    </li>
                <?php }  ?>
                <li>
                    <label for="reg_mb_email" class="sound_only">E-mail (필수)</label>
                    <?php if ($config['cf_use_email_certify']) {  ?>
                    <span class="frm_info">
                        <?php if ($w=='') { echo "E-mail 로 발송된 내용을 확인한 후 인증하셔야 회원가입이 완료됩니다."; }  ?>
                        <?php if ($w=='u') { echo "E-mail 주소를 변경하시면 다시 인증하셔야 합니다."; }  ?>
                    </span>
                    <?php }  ?>
                    <input type="hidden" name="old_email" value="<?php echo $member['mb_email'] ?>">
                    <input type="text" name="mb_email" value="<?php echo isset($user_email) ? $user_email : ''; ?>" id="reg_mb_email" required <?php echo (isset($user_email) && $user_email != '' && !$is_exists_email)? "readonly":''; ?> class="frm_input email full_input required" size="70" maxlength="100" placeholder="E-mail (필수)" style="border:1px solid #f1f1f1;background-color:#f9f9f9;border-radius:15px;padding:10px;margin-bottom:5px">
                    <div class="check"><?php echo $email_msg; ?></div>
                </li>
            </ul>
        </div>
        
  <button type="submit" id="btn_submit" class="register-button" accesskey="s" style="color:#f9f9f9;border:none"><?php echo $w == '' ? '회원가입' : '정보수정'; ?></button>
</div>
</form>


<script>
    // 회원가입 약관 보기 버튼 클릭 이벤트
    document.querySelectorAll('.view-terms').forEach(function(button) {
        button.addEventListener('click', function() {
            document.getElementById('termsModal').style.display = 'block';
        });
    });

    // 개인정보 수집 및 이용 보기 버튼 클릭 이벤트
    document.querySelectorAll('.view-privacy').forEach(function(button) {
        button.addEventListener('click', function() {
            document.getElementById('privacyModal').style.display = 'block';
        });
    });

    // 모달 닫기 버튼 클릭 이벤트
    document.querySelectorAll('.close-button').forEach(function(button) {
        button.addEventListener('click', function() {
            document.querySelectorAll('.modal').forEach(function(modal) {
                modal.style.display = 'none';
            });
        });
    });

    // 모달 외부 클릭 시 닫기
    window.addEventListener('click', function(event) {
        document.querySelectorAll('.modal').forEach(function(modal) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        });
    });
</script>

<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        height:80%;
    }

    .close-button {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close-button:hover,
    .close-button:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.privacy-policy {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
  border-radius: 10px;
}

.privacy-policy h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.policy-item {

}

.policy-item h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.policy-item ul {
  list-style-type: none;
  padding: 0;
}

.policy-item li {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

    .terms-item label, .privacy-item label {
        margin-right: 10px;
    }

    .terms-item a, .privacy-item a {
        margin-left: auto;
    }
</style>

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

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

        return true;
    }
    
    jQuery(function($){
        // 모두선택
        $("input[name=chk_all]").click(function() {
            if ($(this).prop('checked')) {
                $("input[name^=agree]").prop('checked', true);
            } else {
                $("input[name^=agree]").prop("checked", false);
            }
        });
    });

    </script>
</div>
<!-- } 회원가입 약관 동의 끝 -->

<script>
// 체크박스 요소 선택
const chkAll = document.getElementById('chk_all');
const registerButton = document.querySelector('.register-button');

// 체크박스 상태 변화 이벤트 리스너 등록
chkAll.addEventListener('change', function() {
  if (this.checked) {
    registerButton.style.backgroundColor = '#ec632a';
    registerButton.style.transition = 'background-color 0.3s ease'; // 부드러운 전환을 위한 트랜지션 설정
  } else {
    registerButton.style.backgroundColor = ''; // 기본 스타일로 변경
    registerButton.style.transition = 'background-color 0.3s ease'; // 부드러운 전환을 위한 트랜지션 설정
  }
});
</script>
<script>
// 회원가입 약관 동의 체크박스
const agreeCheckbox = document.getElementById('agree11');
// 개인정보 수집 및 이용 동의 체크박스
const privacyCheckbox = document.getElementById('agree21');
// 전체 동의 체크박스
const allAgreeCheckbox = document.getElementById('chk_all');

// 두 개의 체크박스 상태를 감시하고 전체 동의 체크박스를 업데이트하는 함수
function updateAllAgreeCheckbox() {
  if (agreeCheckbox.checked && privacyCheckbox.checked) {
    allAgreeCheckbox.checked = true;
  } else {
    allAgreeCheckbox.checked = false;
  }
}

// 체크박스 상태 변화 이벤트 리스너 등록
agreeCheckbox.addEventListener('change', updateAllAgreeCheckbox);
privacyCheckbox.addEventListener('change', updateAllAgreeCheckbox);
</script>
<script>
window.onload = function() {
  // 체크박스와 버튼 요소 선택
  const agree1 = document.getElementById('agree11');
  const agree2 = document.getElementById('agree21');
  const registerButton = document.querySelector('.register-button');

  // 체크박스 상태 변화 감지
  agree1.addEventListener('change', checkAgreement);
  agree2.addEventListener('change', checkAgreement);

  // 체크박스 상태 확인 및 버튼 색상 변경 함수
  function checkAgreement() {
    if (agree1.checked && agree2.checked) {
      registerButton.style.backgroundColor = '#ec632a';
      registerButton.style.transition = 'background-color 0.3s ease';
    } else {
      registerButton.style.backgroundColor = '';
      registerButton.style.transition = 'background-color 0.3s ease';
    }
  }
};
</script>

<script>
    $(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");
        var pageTypeParam = "pageType=register";

        <?php if ($config['cf_cert_use'] && $config['cf_cert_simple']) { ?>
            // 이니시스 간편인증
            var url = "<?php echo G5_INICERT_URL; ?>/ini_request.php";
            var type = "";
            var params = "";
            var request_url = "";
            
            $(".win_sa_cert").click(function() {
                if (!cert_confirm()) return false;
                type = $(this).data("type");
                params = "?directAgency=" + type + "&" + pageTypeParam;
                request_url = url + params;
                call_sa(request_url);
            });
        <?php } ?>
        <?php if ($config['cf_cert_use'] && $config['cf_cert_ipin']) { ?>
            // 아이핀인증
            var params = "";
            $("#win_ipin_cert").click(function() {
                if (!cert_confirm()) return false;
                params = "?" + pageTypeParam;
                var url = "<?php echo G5_OKNAME_URL; ?>/ipin1.php" + params;
                certify_win_open('kcb-ipin', url);
                return;
            });

        <?php } ?>
        <?php if ($config['cf_cert_use'] && $config['cf_cert_hp']) { ?>
            // 휴대폰인증
            var params = "";
            $("#win_hp_cert").click(function() {
                if (!cert_confirm()) return false;
                params = "?" + pageTypeParam;
                <?php
                switch ($config['cf_cert_hp']) {
                    case 'kcb':
                        $cert_url = G5_OKNAME_URL.'/hpcert1.php';
                        $cert_type = 'kcb-hp';
                        break;
                    case 'kcp':
                        $cert_url = G5_KCPCERT_URL.'/kcpcert_form.php';
                        $cert_type = 'kcp-hp';
                        break;
                    case 'lg':
                        $cert_url = G5_LGXPAY_URL.'/AuthOnlyReq.php';
                        $cert_type = 'lg-hp';
                        break;
                    default:
                        echo 'alert("기본환경설정에서 휴대폰 본인확인 설정을 해주십시오");';
                        echo 'return false;';
                        break;
                }
                ?>

                certify_win_open("<?php echo $cert_type; ?>", "<?php echo $cert_url; ?>" + params);
                return;
            });
        <?php } ?>

        //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 fregister_submit(f) {

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

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

        <?php if ($w == '' && $config['cf_cert_use'] && $config['cf_cert_req']) { ?>
            // 본인확인 체크
            if (f.cert_no.value == "") {
                alert("회원가입을 위해서는 본인확인을 해주셔야 합니다.");
                return false;
            }
        <?php } ?>

        // 닉네임 검사
        if ((f.w.value == "") || (f.w.value == "u" && f.mb_nick.defaultValue != f.mb_nick.value)) {
            var msg = reg_mb_nick_check();
            if (msg) {
                alert(msg);
                f.reg_mb_nick.select();
                return false;
            }
        }

        // E-mail 검사
        if ((f.w.value == "") || (f.w.value == "u" && f.mb_email.defaultValue != f.mb_email.value)) {
            var msg = reg_mb_email_check();
            if (msg) {
                alert(msg);
                f.reg_mb_email.select();
                return false;
            }
        }

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

        return true;
    }

    function flogin_submit(f) {
        var 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>

<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
