@extends('layout-common')

@section('content')
    <div id="membership">
        <div class="findPwd">
            <div class="max-width">
                <h1 class="pageTitle">아이디 찾기</h1>

                <form method="post" action="{{ route('find-id') }}" id='findId'>
                    @csrf
                    <!-- 정보입력 -->
                    <div class="input-wrap formWrap">
                        <div class="messageBox">
                            <figure></figure><em>회원가입 시 기재한 휴대폰번호를 입력해 주세요.</em>
                            <p>(이메일이 아닌 아이디로 가입한 경우에 한하여 찾기 가능)</p>
                        </div>
                        <div class="input phoneWrap">
                            <div class="chk">
                                <label><input type="checkbox" id="globalChkBtn" name=""><span>해외 국가인 경우 선택</span></label>
                            </div>

                            <p class="tit">전화번호</p>
                            <div class="inputBox default">
                                <div class="global">
                                    <!-- select -->
                                    <div class="dropDownMenu type2">
                                        <div class="selectBox">
                                            <button type="button" class="label invalid" data-selected="선택" data-default="선택">선택</button>
                                            <div class="optionListWrap">
                                                <div class="scrollWidth">
                                                    <ul class="optionList scrollWrap">
                                                        <!-- 활성화 메뉴 active class 추가 -->
                                                        <li class="optionItem"><button type="button" data-account="+49">+49) 독일</button></li>
                                                        <li class="optionItem"><button type="button" data-account="+1">+1) 미국</button></li>
                                                        <li class="optionItem"><button type="button" data-account="+65">+65) 싱가포르</button></li>
                                                        <li class="optionItem"><button type="button" data-account="+1">+1) 미국</button></li>
                                                        <li class="optionItem"><button type="button" data-account="+1">+1) 미국</button></li>
                                                        <li class="optionItem"><button type="button" data-account="+1">+1) 미국</button></li>
                                                        <li class="optionItem"><button type="button" data-account="+1">+1) 미국</button></li>
                                                        <li class="optionItem"><button type="button" data-account="+1">+61) 오스트레일리아</button></li>
                                                        <li class="optionItem"><button type="button" data-account="+44">+44) 영국</button></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <label class="domestic">
                                    <input type="tel" id="phone" name="phone" placeholder="번호를 입력해 주세요.('-'제외)" autocomplete="off"  value="{{ old('phone') }}" required>
                                </label>
                            </div>
                            <div class="message error">국가번호를 선택해 주세요.</div>
                            <div class="message error">@error('not-id-account') {{ $message }} @enderror</div>
                            <div class="message error">@error('not-match') {{ $message }} @enderror</div>
                            <div class="certifyPhone">
                                <div class="inputBox row" id="certifyPhone">
                                    <label>
                                        <input type="text" id="authNumber" name="authNumber" value="" maxlength="6" autocomplete="off" placeholder="인증번호를 입력해 주세요." class="onlynumber w-70" disabled required>
                                        <span class="timer">3분 00초</span>
                                    </label>
                                    <button type="button" class='btn-signup btnSend' onclick="" disabled>인증받기</button>
                                </div>
                            </div>
                            <div class="message error">@error('phone') {{ $message }} @enderror</div>
                        </div>
                        <div class="button-wrap">
                            <input type="button" class="submitBtn" onclick="checkValidation()" id="btnSubmit" value="아이디 확인하기" disabled>
                        </div>


                    </div>
                </form>

                <div class="shortcut">
                    <a href="/login">로그인</a>
                    <a href="/signup">회원가입</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    $(document).ready(function(){
        keyupEvent();

        $('#phone').on('input', function() {
            var sanitizedValue = $(this).val().replace(/\D/g, '');
            sanitizedValue = sanitizedValue.substring(0, 11);
            $(this).val(sanitizedValue);
        });

        $('#phone, #join_email').on('keyup', function() {
            keyupEvent()
        });
        function keyupEvent() {
            if (! $.isEmptyObject($('#phone').val())) {
                $('#btnSubmit').attr('disabled',false);
            } else {
                $('#btnSubmit').attr('disabled',true);
            }
        }

        /* 전화번호 국내, 해외 체크 */
        $('#globalChkBtn').on('click',function(){
            if($(this).prop("checked")){
                $('.phoneWrap').addClass('globalPhone');
            }else{
                $('.phoneWrap').removeClass('globalPhone');
            }
        });

        /* 전화번호 인증받기 버튼 */
        $('#phone').on('keyup', function() {
            let phoneVal = $(this).val();
            if(phoneVal.length >= 11){
                $('.btnSend').prop('disabled', false);
            }else{
                $('.btnSend').prop('disabled', true);
            }
        });
    });

    function checkValidation() {

        if ($.isEmptyObject($('#phone').val())) {
            alertPopup('휴대폰을 입력하세요.', {
                confirmText: '확인'
            });
            return false;
        }

        $('form#findId').submit();
    }
</script>
@endsection