<?php
$skin_id = 'skin-'.uniqid();
$skin_selector = '#'.$skin_id;
add_javascript('<script src="' . G5_PLUGIN_URL . '/sms_auth/js/sms_auth.js"></script>');
?>
<div id="<?php echo $skin_id ?>" class=""  style="">
    <style>
        <?php echo $skin_selector; ?> {}
        #sa-number,#sa-cert{display:none}
    </style>
    <div class="vstack" style="row-gap: var(--wv-md-30,var(--wv-33))">
        <div class="d-flex" style="gap:var(--wv-6)">
            <div class="col">
                <input type="text" class="form-control wv-only-number "   id="<?php echo $skin_id; ?>-parent-hp" required name="<?php echo $field_name; ?>" value="<?php echo $row[$column]; ?>" placeholder="학부모 휴대폰 번호" >

            </div>
            <div class="col-auto">
                <button type="button" class="btn border-0 h-100 w-[180px] sa-req " style="background-color: #164299; ;color:#fff" id="">인증번호 받기</button>
            </div>

        </div>

        <div class="sa-number-wrapper">
            <div class="hstack align-items-start lh1" style="gap:var(--wv-md-5,var(--wv-10))">
                <p class="text1">인증번호</p>
                <span class="text2">*</span>
            </div>
            <div class="mt-[18px]">
                <div class="d-flex" style="gap:var(--wv-6)">
                    <div class="col">
                        <div>
                            <input type="text" class="form-control wv-only-number sa-number "   id="" >
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn border-0 h-100 w-[180px] sa-cert" id="" style="background-color: #6f6f6f; ;color:#fff"  >확인</button>
                    </div>

                </div>
            </div>
        </div>
    </div> 
    <script>
        $(document).ready(function(){
            var $skin = $("<?php echo $skin_selector?>");
            var sms_auth = $(".sa-wrapper").smsAuth({
                saHpEl: "#<?php echo $skin_id?>-parent-hp", // 휴대폰번호입력 인풋
                saReqBtnEl: "<?php echo $skin_selector?> .sa-req", // 인증요청 버튼
                saCertBtnEl: "<?php echo $skin_selector?> .sa-cert", // 인증하기 버튼
                saNumberInputEl: "<?php echo $skin_selector?> .sa-number", // 인증번호 입력 인풋
                saWrapperEl:"<?php echo $skin_selector?> .sa-number-wrapper",

            });
            sms_auth.smsAuthReset();

            $skin.closest('form').submit(function (e) {

                // form submit전 인증여부 확인
                var sms_auth_result = sms_auth.smsAuthCheck()
                if(sms_auth_result!==true){
                    alert(sms_auth_result);
                    e.preventDefault();
                }
            })
        });
    </script>
</div>