@extends('mypage.template', [
    'menu' => 'apply',
])

@push('head')
    <script type="text/javascript" src="/js/form.js?ver=20200716"></script>
@endpush

@section('page')
<!-- content -->
    <div class="area-mypage">
        <h3 class="title">수속신청</h3>

        <ul class="process-view">
            <li class="current">1. <span class="pc-text">수속</span>기본정보 <span class="pc-text">입력</span></li>
            <li>2. 학교/과정/기타<span class="pc-text">정보 입력</span></li>
            <li>3. <span class="pc-text">수속신청</span>완료</li>
        </ul>

        <form method="POST" action="{{ route('mypage.apply.types') }}">
            @csrf
            <div class="form-content">
                <p class="title">개인기본정보<span class='desc'>* 표시는 필수 입력 사항입니다.</span></p>
                <div class="my-unchangeable">
                    <p class="col3">
                        <em>이름*</em>
                        <span>{{ $member->mm_name }}</span>
                    </p>
                    <p class="col3">
                        <em>이메일*</em>
                        <span>{{ $member->mm_email }}</span>
                    </p>
                    <p class="col3">
                        <em>휴대폰*</em>
                        <span>{{ $member->mm_mobile }}</span>
                    </p>
                </div>

                <div class="input-box">
                    <div>
                        <em class="tit"><label for="mm_efname">영문이름*</label></em>
                        <div class="column name">
                            <div class='name-input-wrap'>
                                <div class="col2"><span class="tf name"><input type='text' value='{{ $member->mm_efname ?: old('first_name') }}' id="firstName" name='first_name' placeholder="First name (이름)"></span></div>
                                <div class="col2"><span class="tf name"><input type='text' value='{{ $member->mm_elname ?: old('last_name') }}' id="lastName" name='last_name' placeholder="Last name (성)"></span></div>
                            </div>
                            <div class="exp-txt">* 여권과 동일하게 입력해주세요</div>
                        </div>
                        @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
                    </div>
                    <div>
                        <em class="tit"><label for="mm_birth">생년월일*</label></em>
                        <div class="column mline-one">
                            <p class="col2">
                                <span class="tf">
                                    <input type='text' id="birthDate" name="birth_date" value='{{ $member->mm_birth ?: old('birth_date') }}' placeholder="연도.월.일을 입력해주세요 (ex: 1986.11.14)">
                                </span>
                                <script>
                                    $( function() {
                                        $("#birthDate").datepicker({ dateFormat: 'yy.mm.dd',changeYear: true, showMonthAfterYear: true,yearRange: "-50:+0"});
                                    });
                                </script>
                            </p>
                        </div>
                    </div>

                    <div>
                        <em class="tit"><label for=""> 학생번호</label></em>
                        <div class="column mline-one">
                            <p class="col2">
                                <span class="tf phon"><input type='text' value='{{ old('formal_student_no') }}' name='formal_student_no' placeholder="대학 지원 고객만 입력해주세요"></span>
                            </p>
                        </div>
                    </div>

                    <div>
                        <em class="tit">주소</em>
                        <p class="tf zipcode">
                            <input type="text" name="zipcode" id="zipcode" value="{{ $member->mm_zipcode ?: old('zipcode') }}" size="5">
                            <button id="addrBtn" onclick="sample3_execDaumPostcode(); return false;" class="button ">우편번호<span class="pc-text">찾기</span></button>
                        </p>
                        <!-- 카카오주소검색 -->
                        <div id="wrap" class="kakao-zipcode-app" style="display:none; height:444px;">
                            <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>
                            <span class="tf"><input type="text" name="address" id="address" value="{{ $member->mm_address }}" size="40"></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="form-content">
                <p class="title">수속기본정보</p>
                <div class="input-box">
                    <div>
                        <em class="tit"><label for="mm_efname">유학국가*</label></em>
                        <div class="tf">
                            <select name="country" id="country" autocomplete="off" class="sel-box">
                                <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>
                    <div>
                        <em class="tit"><label for=""> 유학타입 *</label></em>
                        <p class="tf">
                            <select name="uhak_type" id="uhakType" autocomplete="off" class="sel-box">
                                <option value="">선택하세요</option>
                                <option value="4">대학(아트/디자인전공)</option>
                                <option value="2">대학(일반전공)</option>
                                <option value="1">어학연수</option>
                                <option value="7">비자</option>
                            </select>
                        </p>
                        <p class="tf">
                            <select name="uhak_course" id="uhakCourse" class="sel-box" style='display:none;'>
                                <option value="학부">학부</option>
                                <option value="석사">석사</option>
                                <option value="파운데이션">파운데이션</option>
                                <option value="프리마스터">프리마스터</option>
                                <option value="박사">박사</option>
                                <option value="디플로마">디플로마</option>
                                <option value="프리세셔널">프리세셔널</option>
                            </select>
                        </p>
                    </div>

                    <div>
                        <em class="tit"><label for=""> 담당사무실</label></em>
                        <div class="tf">
                            <select name="branch" id="branch" autocomplete="off" class="sel-box">
                                <option value="13">하나에듀케이션</option>
                            </select>
                            <p class="exp-txt">기본적으로 담당EC가 소속된 지사에서 수속절차가 진행됩니다.</p>
                        </div>
                    </div>

                    <div class="button-wrap next">
{{--                        <input type='submit' class="button color wide" value="다음단계로" onclick="formSubmit()">--}}
                        <input type='submit' class="button color wide" value="다음단계로">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <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();
            }
        }
    </script>
@endsection