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

@push('head')
    {!! resource('asset/main.css') !!}
    {!! resource('asset/main.css') !!}
    {!! resource('asset/main.js') !!}
    {!! resource('component/member/asset/member.css') !!}
    {!! resource('component/member/asset/member.js') !!}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

    <script type="text/javascript" defer src="/js/default.js?date=20200310"></script>
    <script type="text/javascript" defer src="/js/core_resource_default.js"></script>
    <script type="text/javascript" defer src="/js/common.js"></script>

    <script type="text/javascript" src="/js/form.js?ver=20200716"></script>
    <script type="text/javascript" src="/js/ui-ajax.js"></script>
@endpush

@section('content')
    <!-- content -->
    <div class="area-mypage" align="center">
        <div class="container">
        <h1 class="title">수속신청</h1>

        <form class="applyForm" method="POST" action="/hanaedu/process/apply-types" enctype="multipart/form-data">
            @csrf
            <div class="form-content">
                <h2>개인기본정보</h2>
                <p><span class='desc'>* 표시는 필수 입력 사항입니다.</span></p>
                <div class="my-unchangeable member-grid">
                    <div class="login-input-wrap">
                        <label for="fullName">이름 *</label>
                        <input type='text' value="{{ $user->name }}" id="fullName" name='full-name' readonly>
                    </div>
                    <div class="login-input-wrap">
                        <label for="birthDate">생년월일 *</label>
                        <div class="column mline-one">
                                <span class="tf">
                                    <input type='text' id="birthDate" name="birth_date" value='{{ old('birth_date') }}' placeholder="연도.월.일을 입력해 주세요 (ex: 1986.11.14)" required>
                                </span>
                                <script>
                                    $( function() {
                                        $("#birthDate").datepicker({ dateFormat: 'yy.mm.dd',changeYear: true, showMonthAfterYear: true,yearRange: "-50:+0"});
                                    });
                                </script>
                        </div>
                    </div>

                    <div class="login-input-wrap">
                        <label for="emailAddress">이메일 *</label>
                        <input type='text' value="{{ $user->email }}" id="emailAddress" name='email-address' readonly>
                    </div>
                    <div class="login-input-wrap">
                        <label for="phone">휴대폰 *</label>
                        <input type='text' value="{{ $user->phone }}" id="phone" name='phone' readonly>
                    </div>
                    <div class="login-input-wrap">
                        <label for="mm_efname">영문이름*</label>
                        <input type='text' value='' id="firstName" name='first_name' placeholder="First name (이름)" required>
                        <input type='text' value='' id="lastName" name='last_name' placeholder="Last name (성)" required>
                        @if (!empty($errors->get('first_name')) || !empty($errors->get('last_name')))
                        <div class="message error">{{ $errors->first('first_name') ?: $errors->first('last_name') }}</div>
                    @endif
                        <label>* 여권과 동일하게 입력해 주세요</label>
                    </div>
                    <div class="login-input-wrap">
                        <label for="">학생번호</label>
                        <input type='text' value='{{ old('formal_student_no') }}' name='formal_student_no' placeholder="대학 지원 고객만 입력해 주세요">
                    </div>
                </div>

                <div class="input-box">
                    <div class="map-input-wrap">
                        <p class="tit">주소</p>
                        <p class="tf zipcode">
                            <input type="text" name="zipcode" id="zipcode" value="{{ old('zipcode') }}" size="5">
                            <button type="button" class="button hana-btn" onclick="sample3_execDaumPostcode(); return false;">우편번호 찾기</button>
                        </p>
                        <!-- 카카오주소검색 -->
                        <div id="wrap" style="display:none;" class="zipcode-kakao kakao-zipcode-app">
                            <img src="//i1.daumcdn.net/localimg/localimages/07/postcode/320/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼">
                        </div>
                        <p>
                            <label></label>
                            <span class="tf"><input type="text" name="address" id="address" value="{{ old('address') }}" size="40"></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="form-content">
                <h2>수속기본정보</h2>
                <div class="member-grid">
                    <div class="login-input-wrap">
                        <label for="country">유학국가 *</label>
                        <select name="country" id="country" autocomplete="off" class="sel-box" required>
                            <option value="">선택해 주세요</option>
                            <option value="5">미국</option>
                            <option value="1">영국</option>
                            <option value="6">캐나다</option>
                            <option value="7">호주</option>
                            <option value="4">필리핀</option>
                            <option value="2">아일랜드</option>
                            <option value="8">뉴질랜드</option>
                            <option value="3">몰타</option>
                            <option value="9">스위스</option>
                            <option value="11">네덜란드</option>
                            <option value="16">싱가포르</option>
                            <option value="17">말레이시아</option>
                            <option value="100">기타국가</option>
                        </select>
                    </div>
                    <div class="login-input-wrap">
                        <label for="uhakType">유학타입 *</label>
                        <select name="uhak_type" id="uhakType" autocomplete="off" class="sel-box" required>
                            <option value="">선택해 주세요</option>
                            <option value="4">대학(아트/디자인전공)</option>
                            <option value="2">대학(일반전공)</option>
                            {{-- <option value="1">어학연수</option> --}}
                            {{-- <option value="7">비자</option> --}}
                        </select>
                        <select name="uhak_course" id="uhakCourse" class="sel-box" style='display:none;' required>
                            <option value="학부">학부</option>
                            <option value="석사">석사</option>
                            <option value="파운데이션">파운데이션</option>
                            <option value="프리마스터">프리마스터</option>
                            <option value="박사">박사</option>
                            <option value="디플로마">디플로마</option>
                            <option value="프리세셔널">프리세셔널</option>
                        </select>
                    </div>
                    <div class="login-input-wrap">
                        <label for="">담당사무실</label>
                        <select name="branch" id="branch" autocomplete="off" class="sel-box">
                            <option value="13" selected>하나에듀케이션</option>
                        </select>
                        <label>기본적으로 담당EC가 소속된 지사에서 수속절차가 진행됩니다.</label>
                    </div>
                </div>
                <div class="input-box">
                    <div class="button-wrap next">
                        {{--                        <input type='submit' class="button color wide" value="다음단계로" onclick="formSubmit()">--}}
{{--                        <input type='submit' class="button color wide" value="다음단계로">--}}
                        <button class="btn btn-danger btn-lg" type="submit">다음 단계로</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript" src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script>
    {{-- <script type="text/javascript" src="/assets/daum-postcode/js/daum-postcode.js"></script> --}}
    <script type="text/javascript">
        $(document).ready(function(){
            var uhakType = $("#uhakType option:selected").val();
            uhakTypeCheck(uhakType);

            $("#uhakType").change(function(){
                uhakTypeCheck($(this).val());
            });
        });

        var uhakTypeCheck = function(uhakType) {
            if (uhakType==4 || uhakType==2) {
                $("#uhakCourse").show();
            } else {
                $("#uhakCourse").hide();
            }
        }

        // 우편번호 찾기 찾기 화면을 넣을 element
        var element_wrap = document.getElementById('wrap');

        function foldDaumPostcode() {
            // iframe을 넣은 element를 안보이게 한다.
            element_wrap.style.display = 'none';
        }

        function sample3_execDaumPostcode() {
            // 현재 scroll 위치를 저장해놓는다.
            var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
            new daum.Postcode({
                oncomplete: function(data) {
                    // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                    // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                    // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                    var fullAddr = data.address; // 최종 주소 변수
                    var extraAddr = ''; // 조합형 주소 변수

                    // 기본 주소가 도로명 타입일때 조합한다.
                    if(data.addressType === 'R'){
                        //법정동명이 있을 경우 추가한다.
                        if(data.bname !== ''){
                            extraAddr += data.bname;
                        }
                        // 건물명이 있을 경우 추가한다.
                        if(data.buildingName !== ''){
                            extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                        }
                        // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
                        fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
                    }

                    // 우편번호와 주소 정보를 해당 필드에 넣는다.
                    document.getElementById('zipcode').value = data.zonecode; //5자리 새우편번호 사용
                    document.getElementById('address').value = fullAddr;

                    // iframe을 넣은 element를 안보이게 한다.
                    // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
                    element_wrap.style.display = 'none';

                    // 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
                    document.body.scrollTop = currentScroll;
                },
                // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
                onresize : function(size) {
                    element_wrap.style.height = size.height+'px';
                },
                width : '100%',
                height : '100%'
            }).embed(element_wrap);

            // iframe을 넣은 element를 보이게 한다.
            element_wrap.style.display = 'block';
        }

    </script>
@endsection