@extends('views.layouts.master')

<link rel="stylesheet" href="{{ csset('/themes/pro/modunawa/resources/css/user-auth.css') }}">

@section('content')



<!--=====================================

                    USER FORM PART START

        =======================================-->

        <section class="user-form-part signup">

            <div class="container">

                <div class="row justify-content-center">

                    <div class="col-12 col-sm-10 col-md-12 col-lg-12 col-xl-6">

                        <!--

						<div class="user-form-logo">

                            <a href="index.html"><img src="images/logo.png" alt="logo"></a>

                        </div>

						-->

                        <div class="user-form-card">

                            <div class="user-form-title">

                                <h2>개인 회원가입</h2>

                                <p>회원가입을 위해 아래 폼을 작성해 주세요.</p>

                            </div>

                            <h5 class="mb-2">회원가입</h5>
                            <div class="user-form-group">

								<form id="signup-form" action="{{ route('member-signup.store') }}" method="POST" class="user-form form-prevent-multiple-submits">
                                    @csrf

                                    <input type="hidden" name="mobile_no" value="{{ session('smsCert.mobile_no') }}">

                                    <div class="form-group">

                                        <input type="text" class="form-control" name="first_name" placeholder="이름을 입력해 주세요.">

                                        @error('mobile_no')

                                            <span class="text-danger"><i class="icon-cancel-circle2 mr-2"></i>{{ $message }}</span>

                                        @enderror

                                    </div>

                                    <div class="form-group">

                                        <input type="email" name="email" class="form-control" placeholder="이메일 주소를 입력해 주세요.">

                                        @error('email')

                                            <span class="text-danger"><i class="icon-cancel-circle2 mr-2"></i>{{ $message }}</span>

                                        @enderror

                                    </div>

                                    <div class="form-group">

                                        <input type="password" id="password-txt" name="password" class="form-control" onchange="check_pw(this)" placeholder="비밀번호를 입력해 주세요.">

                                    </div>

                                    <div class="form-group">

                                        <input type="password" id="password-confirmation-txt" name="password_confirmation" class="form-control" onchange="check_pw(this)" placeholder="비밀번호 한번 더 입력해 주세요.">

                                        @error('password')

                                        <span class="text-danger"><i class="icon-cancel-circle2 mr-2"></i>{{ $message }}</span>

                                        @enderror

                                    </div>

                                    <div class="mb-3 text-center text-danger">

                                        <em id="policy-desc-em">{{ $passwdPolicy['PolicyDesc'] }}</em>

                                    </div>

                                    <h5 class="mb-2">추천인 코드 등록</h5>

                                    <ul class="join_form mb-3">
                                        <li class="recomm">
                                            <input type="text" class="form-control mb-3" name="sgroup_code" placeholder="추천인 코드 등록">
                                            {{--                    <span class="btn_wrap">--}}
                                            {{--                        <button type="button" class="btn btn_dgray" tabindex="-1">확인</button>--}}
                                            {{--                    </span>--}}
                                            <div class="text-center text-danger">
                                                <em>리워드 코드는 가입 이후 추가 수정 및 입력이 불가합니다.</em>
                                            </div>
                                        </li>
                                    </ul>

                                    <div class="form-check mb-3">

                                        <input class="form-check-input" type="checkbox" id="verifiy-ck">

                                        <label class="form-check-label" for="verifiy-ck">약관에 동의합니다.

                                            <a href="{{ route('policy.index') }}" target="_blank">약관보기</a>

                                        </label>

                                    </div>

                                    <div class="form-button">

                                        <button type="submit" class="button-prevent-multiple-submits">

                                            <i class="spinner fa fa-spinner fa-spin"></i>

                                            확인

                                        </button>

                                    </div>

                                </form>

                                <!--

								<div class="user-form-divider">

                                    <p>or</p>

                                </div>

								<ul class="user-form-social">

                                    <li><a href="#" class="facebook"><i class="fab fa-facebook-f"></i>Join with facebook</a></li>

                                    <li><a href="#" class="twitter"><i class="fab fa-twitter"></i>Join with twitter</a></li>

                                    <li><a href="#" class="google"><i class="fab fa-google"></i>Join with google</a></li>

                                    <li><a href="#" class="instagram"><i class="fab fa-instagram"></i>Join with instagram</a></li>

                                </ul>

								-->

                            </div>

                        </div>

                        <div class="user-form-remind">

                            <p>이미 회원이시면 로그인해 주세요.<a href="{{ route('member-login') }}">로그인</a></p>

                        </div>

                        <!--

						<div class="user-form-footer">

                            <p>Greeny | &COPY; Copyright by <a href="#">Mironcoder</a></p>

                        </div>

						-->

                    </div>

                </div>

            </div>

        </section>

        <!--=====================================

                    USER FORM PART END

        =======================================-->

@endsection



@push('js')
    <script>
        $(document).ready(function() {
        });

        function check_pw($this) {
            const pw = $($this).val();

            const upper = pw.search(/[A-Z]/ig);
            const spece = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

            let error = false

            if (pw.length < passwd_policy['MinLength']) {
                iziToast.info({ title: 'Info', message: passwd_policy['MinLength'] + '자리 이상으로 입력해주세요' });
                error = true
            }

            if (passwd_policy['IsSpecialMixed'] && spece < 0) {
                iziToast.info({ title: 'Info', message: '특수문자를 혼합하여 입력해주세요' });
                error = true
            }

            if (passwd_policy['IsUpperMixed'] && upper < 0) {
                iziToast.info({ title: 'Info', message: '대문자를 혼합하여 입력해주세요' });
                error = true
            }

            if (error === true) {
                $('#policy-desc-em').text(passwd_policy['PolicyDesc'])
                return false
            }

            if ( $('#password-txt').val() === $('#password-confirmation-txt').val() ) {
                $('#policy-desc-em').text('비밀번호가 정상적으로 입력되었습니다.')
            }
            return true;
        }

        $('#signup-form').on('submit', function(event) {
            event.preventDefault();

            if ($('#verifiy-ck').is(':checked')) {

                this.submit()

                return

            }

            iziToast.info({ title: 'Info', message: "@lang('이용약관에 동의하셔야 합니다')" });

            return false

        });

        const passwd_policy = @json($passwdPolicy);
    </script>
@endpush