@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" data-selected="선택" data-default="선택">선택</button>
                                            <div class="optionListWrap">
                                                <div class="scrollWidth">
                                                    <ul class="optionList scrollWrap">
                                                        @foreach ($countries as $country)
                                                            @if ($country->phone_code == 82)
                                                                @continue
                                                            @endif
                                                            <li class="optionItem"><button type="button" data-account="{{ $country->phone_code }}">+{{ $country->phone_code }}) {{ $country->name }}</button></li>
                                                        @endforeach
                                                    </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" id="phoneValidMsg">@error('not-id-account') {{ $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 small' onclick="onSendAuthNumber()" disabled>인증받기</button>
                                </div>
                            </div>
                            <div class="message error" id="authNumberValidMsg">@error('phone') {{ $message }} @enderror</div>
                        </div>
                        <div class="button-wrap">
                            <input type="button" class="submitBtn" onclick="sendForm()" 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>
    let isCertify = false;
    let nowTimer = 180;
    let timer
    let onTimer;

    $(document).ready(function(){
        keyupEvent();


        $('#authNumber').on("keyup", function() {
            if ($(this).val().length == 6) {
                onCheckAuthNumber();
            } else {
                inputValid($(this), false) ;
            }
        })

        $('#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() {
            inputValid($('#phone'), true);
            $("#phoneValidMsg").text("");
        }

        /* 전화번호 국내, 해외 체크 */
        $('#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 onSendAuthNumber() {
        const $phone       = $('#phone');
        const $phoneCode   = $('#phone_code');
        const $authNumber  = $('#authNumber');
        const $phoneMsg    = $('#phoneValidMsg');
        const $authMsg     = $('#authNumberValidMsg');
        const $sendBtn     = $('.btnSend');
        const $submitBtn   = $('#btnSubmit');
        const isGlobal     = $('#globalChkBtn').is(':checked');

        // 1. 국가번호 선택 여부 검사
        if (isGlobal && !$phoneCode.val()) {
            return showError($phoneMsg, '국가번호를 선택해주세요');
        }

        // 2. 기본 입력 검증
        inputValid($phone);
        inputValid($authNumber);
        $phoneMsg.empty();

        // 3. 서버 요청
        $.ajax({
            url      : '/api/check/phone',
            method   : 'GET',
            dataType : 'json',
            data     : {
                phone      : $phone.val(),
                phone_code : $phoneCode.val(),
                find_id    : true
            },
            success  : handleSuccess,
            error    : handleError
        });

        // --- 내부 헬퍼 ---
        function handleSuccess({ isOverlay }) {
            if (!isOverlay) {
                inputValid($phone, false);
                showError($phoneMsg, '입력한 휴대폰 번호로 등록된 아이디가 없어요');
                return $submitBtn.prop('disabled', true);
            }

            // 인증번호 발송 성공
            $('.timer').show();
            onStartTimer();

            $authNumber
                .prop('disabled', false)
                .val('');

            $authMsg.removeClass('error').text('');
            $sendBtn.text('재전송');

            isCertify = false;
            inputValid($phone, true);
        }

        function handleError(xhr) {
            const { message = '알 수 없는 오류가 발생했습니다.' } = xhr.responseJSON || {};
            alertPopup(message, { confirmText: '확인' });
        }

        function showError($element, message) {
            $element.addClass('error').text(message);
            return false;
        }
    }

    function onResetCertify(isAlert = false) {
        if (isAlert) {
            alertPopup('인증시간이 만료되었습니다. 다시 시도해주세요', {
                confirmText: '확인'
            });
            clearInterval(onTimer);
        }
        nowTimer = 180;
        isCertify = false;

        $('.btnSend').text('인증받기');
        $('#authNumber').val("");
        $('#authNumber').attr("disabled", true);
        $('#phoneValidMsg').empty();

        if ($.isEmptyObject($('#phone').val())) {
            inputValid($('#phone, #authNumber'));
        }
    }

    function onCheckAuthNumber() {
        const $authNumber      = $('#authNumber');
        const $authMsg         = $('#authNumberValidMsg');
        const $sendBtn         = $('.btnSend');
        const $submitBtn       = $('#btnSubmit');
        const $timer           = $('.timer');

        $.ajax({
            url: '/api/check/number',
            method: 'GET',
            dataType: 'json',
            data: {
                authNumber: $authNumber.val()
            },
            success: handleSuccess
        });

        function handleSuccess({ isCheck }) {
            if (isCheck) {
                isCertify = true;
                clearInterval(onTimer);

                inputValid($('#phone'), true);
                inputValid($authNumber, true);

                showSuccess($authMsg, '인증이 완료되었습니다.');

                $sendBtn.text('인증완료').prop('disabled', true);
                $submitBtn.prop('disabled', false);
                $timer.hide();
            } else {
                $submitBtn.prop('disabled', true);
                inputValid($authNumber, false);
                showError($authMsg, '인증번호를 다시 확인해주세요');
            }
        }

        function showError($el, message) {
            $el.addClass('error').text(message);
        }

        function showSuccess($el, message) {
            $el.removeClass('error').text(message);
        }
    }

    function sendForm() {
        if (isCertify) {
            $("#findId").submit();
        }
    }

    const onStartTimer = () => {
        if (onTimer) {
            clearInterval(onTimer);
        }
        nowTimer = 180;
        onTimer = setInterval(() => {
            nowTimer --;
            if (nowTimer <= 0) {
                onResetCertify(true);
            }
            const min = String(Math.floor(nowTimer/60)).padStart(2, "0");
            const sec = String(nowTimer%60).padStart(2,"0");


            $('.timer').text( min + "분 " + sec + "초");
        }, 1000);
    }
</script>



@endsection