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

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);
?>

<!-- 회원가입약관 동의 시작 { -->
<div>

    <?php
    // 소셜로그인 사용시 소셜로그인 버튼
    @include_once(get_social_skin_path().'/social_register.skin.php');
    ?>

    <form  name="fregister" id="fregister" action="<?php echo $register_action_url ?>" onsubmit="return fregister_submit(this);" method="POST" autocomplete="off">

    <?php if(isset($_POST['mb_id']) && $_POST['mb_id']) { ?>
    <input type="hidden" name="mb_id" value="<?php echo get_text($_POST['mb_id']); ?>">
    <?php } ?>

    <div style="padding:10px; margin-bottom:10px; border:1px solid #d9edf7; background:#eef8fd; border-radius:4px;">
        <label for="chk_all" style="margin:0; font-weight:bold; cursor:pointer;">
            <input type="checkbox" name="chk_all" value="1" id="chk_all" checked> 전체 약관에 동의합니다.
        </label>
        <div style="font-size:12px; color:#31708f; margin-top:4px;">이용약관 및 개인정보처리방침 동의를 포함합니다.</div>
        <div style="text-align:right; margin-top:6px;">
            <button type="button" id="btn_toggle_agreement_cards" class="btn_confirm">약관 상세 보기 <i class="fa fa-chevron-down"></i></button>
        </div>
    </div>

    <div id="agreement_detail_cards" style="display:none;">
    <section id="fregister_term">
        <h2><i class="fa fa-check-square-o" aria-hidden="true"></i> 회원가입약관</h2>
        <div style="text-align:right; margin:4px 0 8px 0;">
            <button type="button" id="btn_toggle_provision" style="font-size:12px; padding:2px 8px;">약관 내용 보기 <i class="fa fa-chevron-down"></i></button>
        </div>
        <div id="provision_box" style="display:none;">
            <textarea readonly><?php echo get_text($config['cf_stipulation']) ?></textarea>
        </div>
        <fieldset class="fregister_agree">
            <label for="agree11">회원가입약관의 내용에 동의합니다.</label>
            <input type="checkbox" name="agree" value="1" id="agree11" checked>
        </fieldset>
    </section>

    <section id="fregister_private">
        <h2><i class="fa fa-check-square-o" aria-hidden="true"></i> 개인정보처리방침안내</h2>
        <div style="text-align:right; margin:4px 0 8px 0;">
            <button type="button" id="btn_toggle_privacy" style="font-size:12px; padding:2px 8px;">개인정보 내용 보기 <i class="fa fa-chevron-down"></i></button>
        </div>
        <div id="privacy_box" style="display:none;">
            <table>
                <caption>개인정보처리방침안내</caption>
                <thead>
                <tr>
                    <th>목적</th>
                    <th>항목</th>
                    <th>보유기간</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>이용자 식별 및 본인여부 확인</td>
                    <td>아이디, 이름, 비밀번호</td>
                    <td>회원 탈퇴 시까지</td>
                </tr>
                <tr>
                    <td>고객서비스 이용에 관한 통지,<br>CS대응을 위한 이용자 식별</td>
                    <td>연락처 (이메일, 휴대전화번호)</td>
                    <td>회원 탈퇴 시까지</td>
                </tr>
                </tbody>
            </table>
        </div>

        <fieldset class="fregister_agree">
            <label for="agree21">개인정보처리방침안내의 내용에 동의합니다.</label>
            <input type="checkbox" name="agree2" value="1" id="agree21" checked>
        </fieldset>
    </section>
    </div>

    <div class="btn_confirm">
        <input type="submit" class="btn_submit" value="회원가입">
    </div>

    </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], #agree11, #agree21").prop('checked', true);

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

        // 개별 체크 상태에 따라 전체선택 반영
        $("input[name^=agree]").on('click', function() {
            $("input[name=chk_all]").prop('checked', $("input[name^=agree]").length === $("input[name^=agree]:checked").length);
        });

        // 상세 카드는 의도적으로 볼 때만 표시
        $("#btn_toggle_agreement_cards").on('click', function() {
            var $detail = $("#agreement_detail_cards");
            $detail.stop(true, true).slideToggle(120);
            var isOpen = $detail.is(':visible');
            $(this).html((isOpen ? '약관 상세 숨기기' : '약관 상세 보기') + ' <i class="fa fa-chevron-' + (isOpen ? 'up' : 'down') + '"></i>');
        });

        // 약관 본문 개별 토글
        $("#btn_toggle_provision").on('click', function() {
            var $box = $("#provision_box");
            $box.stop(true, true).slideToggle(120);
            var isOpen = $box.is(':visible');
            $(this).html((isOpen ? '약관 내용 숨기기' : '약관 내용 보기') + ' <i class="fa fa-chevron-' + (isOpen ? 'up' : 'down') + '"></i>');
        });

        // 개인정보 본문 개별 토글
        $("#btn_toggle_privacy").on('click', function() {
            var $box = $("#privacy_box");
            $box.stop(true, true).slideToggle(120);
            var isOpen = $box.is(':visible');
            $(this).html((isOpen ? '개인정보 내용 숨기기' : '개인정보 내용 보기') + ' <i class="fa fa-chevron-' + (isOpen ? 'up' : 'down') + '"></i>');
        });
    });

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