@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-password') }}" id="findPwd">
                            @csrf
                            <!-- 정보입력 -->
                            <div class="input-wrap">
                                <div class="exp-txt">회원가입 시 기재하셨던 이메일을 입력해 주세요.</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>
                                {{-- <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> --}}

                                {{-- <div class="exp-txt">* 등록된 이메일 또는 휴대폰으로 회원님의 비밀번호가 발송됩니다.</div> --}}

                                <div class="button-wrap">
                                    <button type="button" class="button wide" id="btnSubmit" onclick="checkValidation()">확인</button>
                                </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())) {
                $('#btnSubmit').addClass("color");
            } else {
                $('#btnSubmit').removeClass("color");
            }
        })
    });

    function checkValidation() {

        if ($.isEmptyObject($('#join_email').val()) ) {
            alert("이메일을 입력하세요");
            return false;
        }

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

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