@extends(env('APP_NAME').'.layout')

@push('head')
    {!! resource('asset/css/uhak/edm/edm.css') !!}
    {!! resource('asset/css/uhak/pages.css') !!}
    <script src="/asset/swiper/swiper.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/asset/swiper/swiper.min.css"/>

    <link rel="stylesheet" type="text/css" href="/css/inquiry.css"/>
    <script type="text/javascript" src="/js/form.js?ver=20200716"></script>
@endpush

@section('content')
    <div>
        회원가입 창!! (resources/views/edmuhak/component/member/register-form.blade.php)
    </div>
    <link rel="stylesheet" type="text/css" href="/css/membership.css"/>

    <div class="container membership signup">
        <div class="area-pages-content">
            <div class="login-mo-back button wide color" onclick="history.back();">
                <a href="javascript:;">뒤로가기</a>
            </div>
            <div class="flex-wrap">
                <div class="login-edm-logo-wrap"><svg class="login-edm-logo" viewBox="0 0 83.722 32"><g transform="translate(-420 -74)"><path d="M68.068,19.436a2.757,2.757,0,1,0,2.756,2.757,2.758,2.758,0,0,0-2.756-2.757" transform="translate(397.839 67.405)" fill="#313133"/><path d="M68.068,36.961a2.757,2.757,0,1,0,2.756,2.758,2.759,2.759,0,0,0-2.756-2.758" transform="translate(397.839 61.459)" fill="#313133"/><path d="M106.768,24.041v12.6a.183.183,0,0,1,.011.04.269.269,0,0,0,.264.244h4.049a.277.277,0,0,0,.277-.276V23.769c0-.333-.014-.65-.035-.96a7.809,7.809,0,0,0-1.313-4.162.4.4,0,0,0-.082-.118c-.077-.1-.165-.209-.289-.348-.07-.073-.11-.119-.152-.16a7.13,7.13,0,0,0-5.214-2.159h-.957c-.069,0-.223-.009-.458,0a9.725,9.725,0,0,0-4.61,1.339,8.08,8.08,0,0,0-1.367.966.214.214,0,0,1-.3-.017,6.8,6.8,0,0,0-2.012-1.517,7.316,7.316,0,0,0-3.324-.769h-.973a10.7,10.7,0,0,0-1.5.149.2.2,0,0,1-.032,0c-.06.009-.2.035-.394.08l-.057.014a9.433,9.433,0,0,0-2.086.739.219.219,0,0,1-.289-.092l-.514-.793a.232.232,0,0,1-.026-.036.273.273,0,0,0-.338-.124l-3.4,1.348a.271.271,0,0,0-.168.252V36.649a.274.274,0,0,0,.276.276h3.958a.276.276,0,0,0,.276-.276l0-.059a.231.231,0,0,1,0-.057V24.1a3.445,3.445,0,0,1,2.546-3.709,4.687,4.687,0,0,1,1.378-.174h.175a4.765,4.765,0,0,1,1.611.262,3.635,3.635,0,0,1,2.328,3.333l.005.233v12.6a.09.09,0,0,1,.01.042.271.271,0,0,0,.267.242h4.138a.275.275,0,0,0,.276-.276l0-.059a.267.267,0,0,1,0-.057V24.1a3.444,3.444,0,0,1,2.546-3.709,4.685,4.685,0,0,1,1.378-.174h.174a4.776,4.776,0,0,1,1.613.262,3.634,3.634,0,0,1,2.327,3.333Z" transform="translate(392.353 68.645)" fill="#69a82c"/><path d="M12.184,23.816a.241.241,0,0,1,0,.03v.185H4.431v-.463h0V22.6c0-2.628,1.975-3.582,3.823-3.595h.1c1.849.013,3.822.967,3.822,3.595ZM8.33,15.23C2.881,15.23,0,17.979,0,23.181v6.162c0,5.266,2.752,7.825,8.414,7.825a22.817,22.817,0,0,0,7.351-1.2.268.268,0,0,0,.172-.3l-.458-2.8a.2.2,0,0,1-.009-.031l-.087-.457c-.012-.091-.082-.1-.135-.1a.681.681,0,0,0-.141.018l-.144.038a30.173,30.173,0,0,1-5.085.945c-.262.018-.527.026-.793.026a5.237,5.237,0,0,1-3.634-1.046A4.581,4.581,0,0,1,4.436,29.3V28.057a.215.215,0,0,1,.215-.214h11.4a.272.272,0,0,0,.271-.27V23.267c0-5.332-2.689-8.037-7.992-8.037" transform="translate(420 68.833)" fill="#313133"/><path d="M40.063,28.053a2.8,2.8,0,0,1-2.223-.894c-.047-.05-.067-.07-.083-.092-.048-.06-.1-.125-.145-.2-.022-.034-.04-.068-.061-.1a4.228,4.228,0,0,1-.527-2.156v-6.8a3.811,3.811,0,0,1,.88-2.641,3.238,3.238,0,0,1,2.477-.923,8.276,8.276,0,0,1,2.727.535c.079.03.151.065.221.1A2.037,2.037,0,0,1,44.2,16.8v8.8a1.9,1.9,0,0,1-.383,1.3,2.638,2.638,0,0,1-.784.484,8.442,8.442,0,0,1-2.971.675m8.645-28a.273.273,0,0,0-.229-.05L44.388.889a.269.269,0,0,0-.2.262V3.834a.2.2,0,0,1,.016.077v6.376a.215.215,0,0,1-.276.208,12.035,12.035,0,0,0-3.323-.432c-5.443,0-8.32,2.75-8.32,7.95v6.162c0,5.025,2.5,7.579,7.636,7.8a10.805,10.805,0,0,0,2.476-.221,8.235,8.235,0,0,0,1.376-.466l.007.009c.431-.17,1.006-.451,1.006-.451l.181.544a.268.268,0,0,0,.255.18h3.324a.268.268,0,0,0,.267-.27V.269a.269.269,0,0,0-.1-.212" transform="translate(409.046 74)" fill="#313133"/></g></svg></div>
                <div class="area-membership join">
                    <h1 class="title">
                        <span>회원가입</span>
                    </h1>
                    <div class="require-notice"><i class="req">*</i> 표시 항목은 필수입력사항이며, <br class="mo-br">만 14세이상만 회원가입이 가능합니다</div>
                    <form method="POST" action="{{ route('auth.signup.store') }}">
                        <input type="hidden" name="register_root[category]" value="회원가입">
                        <input type="hidden" name="counsel_type" value="simple">
                        @csrf
                        <!-- 기본정보 -->
                        <div class="input-wrap">
                            <div class="input join-id">
                                <p class="tit"><label for="id"><i class="req">*</i>아이디</label></p>
                                <p class="line-style active">
                                    <input type="text" id="id" name="id" value="{{ old('id') }}" autocorrect="off" autocapitalize="off" autofocus placeholder="사용하실 아이디를 입력해 주세요."/>
                                </p>
                                <div id="idValidMsg" class="message error">
                                @if (!empty($errors->get('id')))
                                    {{ $errors->first('id') }}
                                @elseif (!empty($errors->get('message')))
                                    {{ $errors->first('message') }}
                                @endif
                                </div>
                            </div>
                            <div class="input join-pw">
                                <p class="tit"><label for="password"><i class="req">*</i>비밀번호</label></p>
                                <p class="line-style">
                                    <input type="password" id="password" name="password" value="" placeholder="비밀번호을 입력해 주세요."/>
                                </p>
                                <div id="passwordValidMsg" class="message error">{{ !empty($errors->get('password')) ? $errors->first('password') : '' }}</div>
                                <p class="line-style">
                                    <input type="password" id="passwordCheck" name="password_check" value="" placeholder="비밀번호를 다시 한번 입력해 주세요."/>
                                </p>
                                <div id="passwordCheckMsg" class="message error">{{ !empty($errors->get('password_check')) ? $errors->first('password_check') : '' }}</div>
                            </div>
                            <div class="input join-name">
                                <p class="tit"><label for="lastName"><i class="req">*</i>이름</label></p>
                                <div class="column">
                                    <div class="col2 line-style">
                                        <input type="text" id="lastName" name="lastname" value="{{ old('lastname') }}" placeholder="성을 입력해 주세요."/>
                                    </div>
                                    <div class="col2 line-style">
                                        <input type="text" id="firstName" name="firstname" value="{{ old('firstname') }}" placeholder="이름을 입력해 주세요."/>
                                    </div>
                                </div>
                                <div class="message error">
                                @if (!empty($errors->get('lastname')))
                                    {{ $errors->first('lastname') }}
                                @elseif (!empty($errors->get('firstname')))
                                    {{ $errors->first('firstname') }}
                                @endif
                                </div>
                            </div>
                            <div class="input">
                                <p class="tit"><label for="email"><i class="req">*</i>이메일</label></p>
                                <p class="line-style">
                                    <input type="text" id="email" name="email" value="{{ old('email') }}" placeholder="이메일을 입력해 주세요."/>
                                </p>
                                <div id="emailValidMsg" class="message error">
                                    @if (!empty($errors->get('email')))
                                        {{ $errors->first('email') }}
                                    @endif
                                </div>
                            </div>
                            <div class="input">
                                <p class="tit"><label for="phone"><i class="req">*</i>전화번호</label></p>
                                <p class="line-style">
                                    <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" placeholder="'-'없이 입력해 주세요." maxlength="11"/>
                                </p>
                                <div id="phoneValidMsg" class="message error">
                                @if (!empty($errors->get('phone')))
                                    {{ $errors->first('phone') }}
                                @endif
                                </div>
                            </div>
                            <div class="input sel-box">
                                <p class="tit"><label for="region"><i class="req">*</i>거주지역</label></p>
                                <p class="line-style">
                                    <select id="region" name="region">
                                        <option value="">거주지역을 선택해 주세요.</option>
                                        @foreach ($regions as $region)
                                            <option value="{{ $region }}" @selected(old('region'), $region)>{{ $region }}</option>
                                        @endforeach
                                    </select>
                                </p>
                                @if (!empty($errors->get('region')))
                                    <div class="message error">{{ $errors->first('region') }}</div>
                                @endif
                            </div>
                        </div>
                        <div class="input-wrap hope">
                            <div class="input">
                                <p class="tit"><i class="req">*</i>희망유학</p>
                                <div class="column">
                                    <div class="col2 m-full country">
                                        <p class="line-style">
                                            <input type="text" id="country_names" name="country_names" value="{{ old('country_names') }}" class="select-style" placeholder="국가를 선택해 주세요" autocomplete="off" readonly>
                                        </p>
                                        <div class="input-multi-select">
                                            <div class="chk-custom-wrap">
                                            @foreach ($countries as $key => $country)
                                                <span><input type="checkbox" id="aif-country{{ $key }}" name="country[]" value="{{ $country->code }}" @checked(old('country.'.$key), $country->code)><label for="aif-country{{ $key }}">{{ $country->name }}</label></span>
                                            @endforeach
                                            </div>
                                            <div class="button-wrap">
                                                <input type="button" class="reset button half" value="선택해지">
                                                <input type="button" class="save button color half" value="선택완료" data-class="country">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col2 m-full type">
                                        <p class="line-style">
                                            <input type="text" id="type_names" name="type_names" value="{{ old('type_names') }}" class="select-style" placeholder="관심분야를 선택해 주세요." autocomplete="off" readonly>
                                        </p>
                                        <div class="input-multi-select">
                                            <div class="chk-custom-wrap">
                                            @foreach ($types as $key => $type)
                                                <span><input type="checkbox" id="aif-interest{{ $key }}" name="type[]" value="{{ $type->code }}" @checked(old('type.'.$key), $type->code)><label for="aif-interest{{ $key }}">{{ $type->name }}</label></span>
                                            @endforeach
                                            </div>
                                            <div class="button-wrap">
                                                <input type="button" class="reset button half" value="선택해지">
                                                <input type="button" class="save button color half" value="선택완료" data-class="type">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 마케팅 수신 동의 -->
                        <div class="input-wrap">
                            <p class="tit">유학정보 및 프로모션 정보를 받아보시겠습니까?</p>
                            <div class="chk-wrap">
                        <span class="chk">
                            <input type="checkbox" name="agree_mail" id="agreeMail" value="MAIL" @checked(old('agree_mail'), 'MAIL')/>
                            <label for="agreeMail">이메일로받기</label>
                        </span>
                                <span class="chk">
                            <input type="checkbox" name="agree_sms" id="agreeSms" value="Y" @checked(old('agree_sms'), 'Y')/>
                            <label for="agreeSms">문자로받기</label>
                        </span>
                            </div>
                        </div>

                        <!-- 약관 및 개인정보수집동의 -->
                        <div class="input-wrap agreement">
                            <p class="tit">이용약관 및 개인정보수집 동의</p>
                            <p class="agreement-all">
                                <span class="chk"><input type="checkbox" name="agreement" id="agreementAll" /><label for="agreementAll">전체동의</label></span>
                            </p>
                            <div class="agreement-each">
                                <div class="terms-wrap">
                                    <p class="chk"><input type="checkbox" name="agreement_service" id="service" /><label for="service">[필수] 서비스이용약관</label></p>
                                    <span class="toggle-btn">자세히보기</span>
                                    <div class="terms-detail">
                                        {{ !empty(S3Policy::find('service')) ? S3Policy::find('service')->render():'' }}
                                    </div>
                                </div>
                                <div class="terms-wrap">
                                    <p class="chk"><input type="checkbox" name="agreement_privacy" id="privacy" /><label for="privacy">[필수] 개인정보수집 및 이용</label></p>
                                    <span class="toggle-btn">자세히보기</span>
                                    <div class="terms-detail">
                                        {{ !empty(S3Policy::find('data-collection')) ? S3Policy::find('data-collection')->render():'' }}
                                    </div>
                                </div>
                            </div>
                            @if (!empty($errors->get('agreement')))
                                <div class="message error">{{ $errors->first('agreement') }}</div>
                            @endif
                        </div>

                        <div class="button-wrap">
                            <button type="submit" class="button color wide">회원가입</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            new Swiper('.area-promotion-mb .aip-slide', {
                loop: true,
                autoplay: true,
                slideClass: 'swiper-slide',
                slidesPerView: 1,
                navigation: {
                    prevEl: '.area-promotion-mb .swiper-button-prev',
                    nextEl: '.area-promotion-mb .swiper-button-next',
                },
            });
            //ID validation
            $('#id').keyup(function(){
                var id = $('#id').val();
                const minLength = 5;

                if (!id) {
                    $('#idValidMsg').empty();
                } else if (id.length < minLength) {
                    $('#idValidMsg').text('사용할 수 없는 아이디입니다. ID 는 다섯 글자 이상이어야 합니다.');
                } else {
                    var url = '/auth/signup/check/id?id='+id;

                    load(url).then(function(data) {
                        if (data.flag) {
                            $('#idValidMsg').removeClass('error');
                            $('#idValidMsg').text(data.message);
                        } else {
                            $('#idValidMsg').addClass('error');
                            $('#idValidMsg').text(data.message);
                        }

                    });
                }
            });

            //input text validation 메시지 비우기
            // $('input[type=text]').keyup(function(){
            //     $(this).parent().next().empty();
            // });

            //비밀번호 validation
            $('#password').keyup(function(){
                const minLength = 6;
                var password=$('#password').val();
                var passwordCheck=$('#passwordCheck').val();

                if (!password) {
                    $('#passwordValidMsg').empty();
                    $('#passwordCheck').val('');
                    $('#passwordCheckMsg').empty();
                } else if (/\s/g.test(password)) {
                    $('#passwordValidMsg').text('사용할 수 없는 비밀번호입니다. 공백이 들어가면 안 됩니다.');
                    $('#passwordValidMsg').addClass('error');
                } else if (password.length < minLength) {
                    $('#passwordValidMsg').text('사용할 수 없는 비밀번호입니다. 6글자 이상이어야 합니다.');
                    $('#passwordValidMsg').addClass('error');
                } else if (/[^_0-9a-z#~:.?=%@!$^*-]/gi.test(password)) {
                    $('#passwordValidMsg').text('사용할 수 없는 비밀번호입니다. 사용가능한 특수문자(#~:.?=%@!$^*-_)');
                    $('#passwordValidMsg').addClass('error');
                } else if (/[#~:.?=%@!$^*-]/gi.test(password)) {
                    $('#passwordValidMsg').text('사용가능한 비밀번호입니다.');
                    $('#passwordValidMsg').removeClass('error');
                } else {
                    $('#passwordValidMsg').text('사용가능하나 보안에 취약합니다.');
                    $('#passwordValidMsg').addClass('error');
                }
                if(password != '' && passwordCheck != ''){
                    if(password != passwordCheck){
                        $('#passwordCheckMsg').text('비밀번호가 일치하지 않습니다.');
                        $('#passwordCheckMsg').addClass('error');
                    } else {
                        $('#passwordCheckMsg').text('비밀번호가 일치합니다.');
                        $('#passwordCheckMsg').removeClass('error');
                    }
                }
            });

            //비밀번호 확인
            $('#passwordCheck').keyup(function(){
                var password=$('#password').val();
                var passwordCheck=$('#passwordCheck').val();

                if(password != '' && passwordCheck != ''){
                    if(password != passwordCheck){
                        $('#passwordCheckMsg').text('비밀번호가 일치하지 않습니다.');
                        $('#passwordCheckMsg').addClass('error');
                    } else {
                        $('#passwordCheckMsg').text('비밀번호가 일치합니다.');
                        $('#passwordCheckMsg').removeClass('error');
                    }
                } else {
                    $('#passwordCheckMsg').empty();
                }
            });

            //이메일 validation
            $('#email').keyup(function(){
                var email = $('#email').val();

                if (!email) {
                    $('#emailValidMsg').empty();
                } else if (!/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i.test(email)) {
                    $('#emailValidMsg').addClass('error');
                    $('#emailValidMsg').text('정확한 이메일 주소를 입력해 주세요.');
                } else {
                    $('#emailValidMsg').removeClass('error');
                    $('#emailValidMsg').text('유효한 이메일입니다.');
                }
            });

            //전화번호 validation
            $('#phone').keyup(function(){
                const maxLength = 11;
                var phone = $('#phone').val();

                if (!phone) {
                    $('#phoneValidMsg').empty();
                } else if (!/^(?:(010-?\d{4})|(01[1|6|7|8|9]-?\d{3,4}))-?\d{4}$/.test(phone)) {
                    $('#phoneValidMsg').addClass('error');
                    $('#phoneValidMsg').text('정확한 번호를 입력해 주세요.');
                } else if (phone.length <= maxLength) {
                    var url = '/auth/signup/check/phone?phone='+phone;

                    load(url).then(function(data) {
                        if (data.flag) {
                            $('#phoneValidMsg').removeClass('error');
                            $('#phoneValidMsg').text(data.message);
                        } else {
                            $('#phoneValidMsg').addClass('error');
                            $('#phoneValidMsg').text(data.message);
                        }

                    });
                }
            });

            //희망유학 국가,분야 선택
            $('.hope .line-style').click(function(){
                if ($(this).parent().siblings().hasClass('ims-active')) {
                    $(this).parent().siblings().toggleClass('ims-active');
                }
                $(this).parent().toggleClass('ims-active');
            });

            $('.hope .reset').click(function(){
                $(this).parent().parent().find('input[type=checkbox]').prop('checked', false);
            });

            $('.hope .save').click(function(){
                const data = $(this).data('class');
                var value = [];
                $('.hope .'+data+' input[type=checkbox]:checked').each(function() {
                    var checkedId = $(this).attr('id');
                    value.push($('label[for='+checkedId+']').text());
                });
                $('.hope .'+data+' input[type=text]').val(value.join(','));
                $('.hope .'+data).toggleClass('ims-active');
            });

            //약관 체크박스
            $('.agreement input[type=checkbox]').click(function(){
                if ($(this).attr('id') == 'agreementAll') {
                    if ($(this).prop("checked")) {
                        $(".agreement-each input[type=checkbox]").prop("checked",true);
                    } else {
                        $(".agreement-each input[type=checkbox]").prop("checked",false);
                    }
                } else {
                    if ($('.agreement-each input[type=checkbox]:checked').length == $('.agreement-each input[type=checkbox]').length) {
                        $('#agreementAll').prop('checked',true);
                    } else {
                        $('#agreementAll').prop('checked',false);
                    }
                }
            });

            $('.layout-container form').submit(function() {
                if($('#id').val() == '') {
                    alert('아이디 입력은 필수입니다!');
                    $('#id').focus();
                    return false;
                }
                if($('#password').val() == '') {
                    alert('비밀번호 입력은 필수입니다!');
                    $('#password').focus();
                    return false;
                }
                if($('#passwordCheck').val() == '') {
                    alert('비밀번호 확인 입력은 필수입니다!');
                    $('#passwordCheck').focus();
                    return false;
                }
                if($('#lastName').val() == '') {
                    alert('성 입력은 필수입니다!');
                    $('#lastName').focus();
                    return false;
                }
                if($('#firstName').val() == '') {
                    alert('이름 입력은 필수입니다!');
                    $('#firstName').focus();
                    return false;
                }
                if($('#email').val() == '') {
                    alert('이메일 입력은 필수입니다!');
                    $('#email').focus();
                    return false;
                }
                if($('#phone').val() == '') {
                    alert('전화번호 입력은 필수입니다!');
                    $('#phone').focus();
                    return false;
                }
                if($('#region').val() == '') {
                    alert('거주지역 선택은 필수입니다!');
                    $('#region').focus();
                    return false;
                }
                if($('#country_names').val() == '') {
                    alert('희망유학 국가 선택은 필수입니다!');
                    $('#country_names').focus();
                    return false;
                }
                if($('#type_names').val() == '') {
                    alert('관심분야 선택은 필수입니다!');
                    $('#type_names').focus();
                    return false;
                }
                if($(".agreement-each input:checkbox[name=agreement_service]").is(":checked") == false ) {
                    alert('서비스 이용약관 동의는 필수입니다!');
                    $(".agreement-each input:checkbox[name=agreement_service]").focus();
                    return false;
                }
                if($(".agreement-each input:checkbox[name=agreement_privacy]").is(":checked") == false ) {
                    alert('개인정보수집 및 이용 동의는 필수입니다!');
                    $(".agreement-each input:checkbox[name=agreement_privacy]").focus();
                    return false;
                }
            });
        });
    </script>

@endsection