@extends('layout-membership')

@section('content')
    <div class="layout-container">
        <div class="container membership login">
            <div class="area-pages-content">
                <div class="flex-wrap">
                    @include('layouts.headers.header-membership', ['service' => $service])

                    <div class="area-membership">

                        @include('common.find-nav')

                        <form method="post" action="{{ route('find-id') }}" id='findId'>
                            @csrf
                            <!-- 정보입력 -->
                            <div class="input-wrap">
                                <div class="exp-txt">
                                    회원가입 시 기재하셨던 휴대폰 번호와 이메일을 입력해 주세요.<br>
                                    (이메일이 아닌 아이디로 가입한 경우에 한하여 찾기 가능)
                                </div>

                                <div class="input">
                                    <p class="tit"><label for="join_email">이메일</label></p>
                                    <p class="line-style">
                                        <input type="email" id="join_email" name="email" placeholder="회원가입 시 등록한 이메일 주소를 입력해 주세요." value="{{ old('email') }}" required>
                                    </p>
                                    <div class="message error">@error('loginid') {{ $message }} @enderror</div>
                                </div>
                                <div class="input">
                                    <p class="tit"><label for="join_mobile">휴대폰</label></p>
                                    <p class="line-style">
                                        <input type="tel" id="phone" name="phone" placeholder="'-'없이 입력해 주세요." value="{{ old('phone') }}" required>
                                    </p>
                                    <div class="message error">@error('loginid') {{ $message }} @enderror</div>
                                </div>

                                <div class="input">
                                    <p class="tit">확인방법</p>
                                    <p class="chk-wrap">
                                        <span class="chk"><input type="radio" id="option_email" name="type" value="email" checked=""><label for="option_email">등록된 이메일</label></span>
                                        <span class="chk"><input type="radio" id="option_mobile" name="type" value="phone"><label for="option_mobile">등록된 휴대폰</label></span>
                                    </p>
                                </div>
                                <div class="exp-txt">* 등록된 이메일 또는 휴대폰으로 회원님의 아이디가 발송됩니다.</div>
                                <div class="button-wrap">
                                    <input type="button" class="button wide" onclick="checkValidation()" id="btnSubmit" value="아이디 전송받기">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    $(document).ready(function(){
        $('#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() {
            if (! $.isEmptyObject($('#join_email').val()) && ! $.isEmptyObject($('#phone').val())) {
                $('#btnSubmit').addClass("color");
            } else {
                $('#btnSubmit').removeClass("color");
            }
        })
    });

    function checkValidation() {

        if ($.isEmptyObject($('#join_email').val()) || $.isEmptyObject($('#phone').val())) {
            alert("이메일과 휴대폰을 모두 입력하세요");
            return false;
        }

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

@section('footer')
    @include('footer-membership')
@endsection