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

@section('page')

    <!-- content -->
    <div class="area-mypage-wrap">
        <h2 class="cont-title">수속신청</h2>
        <!-- 단계표시 -->
        <ul class="md-process-step">
            <li class="current"><span class="pc-text">수속</span>기본정보 <span class="pc-text">입력</span></li>
            <li>학교/과정/기타<span class="pc-text">정보 입력</span></li>
            <li><span class="pc-text">수속신청</span>완료</li>
        </ul>

        <div class="area-mypage-form">
            <form method="POST" action="{{ route('mypage.apply.types') }}">
                @csrf
                <p class="af-title">개인기본정보</p>
                <!-- 기본정보 : 수정 불가 -->
                <div class="my-unchangeable">
                    <p class="col3">
                        <em><i class="req">*</i>이름</em>
                        <span>{{ $member->mm_name }}</span>
                    </p>
                    <p class="col3">
                        <em><i class="req">*</i>이메일</em>
                        <span>{{ $member->mm_email }}</span>
                    </p>
                    <p class="col3">
                        <em><i class="req">*</i>휴대폰</em>
                        <span>{{ $member->mm_mobile }}</span>
                    </p>
                </div>
                <!-- 정보입력 -->
                <div class="input-wrap">
                    <div class="input">
                        <p class="tit"><label for="firstName"> <i class="req">*</i>영문이름 (여권 영문이름과 동일하게 작성)</label></p>
                        <div class="column">
                            <div class="col2">
                                <input type="text" id="firstName" name="first_name" value="{{ $member->mm_efname ?: old('first_name') }}" placeholder="이름"/>
                            </div>
                            <div class="col2">
                                <input type="text" id="lastName" name="last_name" value="{{ $member->mm_elname ?: old('last_name') }}" placeholder="성"/>
                            </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 class="input ">
                        <p class="tit"><label for="birthDate"> <i class="req">*</i>생년월일</label></p>
                        <div class="column">
                            <div class="col2 date-picker">
                                <input type="search" id="birthDate" name="birth_date" value="{{ $member->mm_birth ?: old('birth_date') }}" readonly>
                                <button type="button" class="cancel">취소</button>
                            </div>
                        </div>
                        @if (!empty($errors->get('birth_date')))
                            <div class="message error">{{ $errors->first('birth_date') }}</div>
                        @endif
                    </div>
                    <div class="input">
                        <p class="tit"><label for="kakaotalkId">카카오톡 아이디</label></p>
                        <div class="column">
                            <div class="col2">
                                <input type="text" id="kakaotalkId" name="kakaotalk_id" value="{{ $member->mm_kakaotalk ?: old('kakaotalk_id') }}">
                            </div>
                        </div>
                        {{-- @if (!empty($errors->get('kakaotalk_id')))
                            <div class="message error">{{ $errors->first('kakaotalk_id') }}</div>
                        @endif --}}
                    </div>
                    <div class="input">
                        <p class="tit"><label for="address">주소</label></p>
                        <p class="zipcode">
                            <input type="text" name="zipcode" id="zipcode" value="{{ $member->mm_zipcode ?: old('zipcode') }}" size="5">
                            <button type="button" class="button" onclick="sample3_execDaumPostcode(); return false;">우편번호<span class="pc-text">찾기</span></button>
                            <!-- 카카오주소검색 -->
                            <div id="wrap" style="display:none;" class="zipcode-kakao">
                                <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>
                        <p>
                            <input type="text" name="address" id="address" value="{{ $member->mm_address ?: old('address') }}" size="40">
                        </p>
                    </div>
                </div>
                <!-- 수속정보 입력 -->
                <div class="input-wrap">
                    <p class="af-title">수속기본정보</p>
                    <div class="input">
                        <p class="tit"><label for="country"> <i class="req">*</i>유학국가</label></p>
                        <select id="country" name="country">
                            <option value="" >유학국가를 선택해주세요</option>
                            @foreach ($countries as $key => $country)
                                <option value="{{ $country->oldcode }}" @selected(old('country'), $country->oldcode)>{{ $country->name }}</option>
                            @endforeach
                        </select>
                        @if (!empty($errors->get('country')))
                            <div class="message error">{{ $errors->first('country') }}</div>
                        @endif
                    </div>
                    <div class="input">
                        <p class="tit"><label for="uhakType"> <i class="req">*</i>유학타입</label></p>
                        <select id="uhakType" name="uhak_type">
                            <option value="" >유학타입을 선택해주세요</option>
                            <option value="1" @selected(old('uhak_type'), '1')>어학연수</option>
                            <option value="2" @selected(old('uhak_type'), '2')>대학(일반전공)</option>
                            <option value="4" @selected(old('uhak_type'), '4')>대학(아트/디자인전공)</option>
                            <option value="3" @selected(old('uhak_type'), '3')>조기유학(초중고유학)</option>
                            <option value="8" @selected(old('uhak_type'), '8')>캠프(주니어캠프/가족캠프)</option>
                            <option value="7" @selected(old('uhak_type'), '7')>비자</option>
                        </select>
                        <select id="uhakCourse" name="uhak_course" style="{{ old('uhak_course') ? '' : 'display:none;' }}">
                            <option value="" >유학타입을 선택해주세요</option>
                            <option value="학부" @selected(old('uhak_course'), '학부')>학부</option>
                            <option value="학부편입" @selected(old('uhak_course'), '학부편입')>학부편입</option>
                            <option value="석사" @selected(old('uhak_course'), '석사')>석사</option>
                            <option value="파운데이션" @selected(old('uhak_course'), '파운데이션')>대학예비과정(Foundation)</option>
                            <option value="프리마스터" @selected(old('uhak_course'), '프리마스터')>석사예비과정(Pre-master)</option>
                            <option value="프리세셔널" @selected(old('uhak_course'), '프리세셔널')>프리세셔널(Pre-sessional)</option>
                            <option value="박사" @selected(old('uhak_course'), '박사')>박사</option>
                            <option value="디플로마" @selected(old('uhak_course'), '디플로마')>디플로마(Diploma)</option>
                        </select>
                        @if (!empty($errors->get('uhak_type')))
                            <div class="message error">{{ $errors->first('uhak_type') }}</div>
                        @elseif (!empty($errors->get('uhak_course')))
                            <div class="message error">{{ $errors->first('uhak_course') }}</div>
                        @endif
                    </div>
                    <div class="input">
                        <p class="tit"><label for="branch"> <i class="req">*</i>담당지사 <span class="add-text">(기본적으로 담당EC가 소속된 지사에서 수속절차가 진행됩니다.)</span></label></p>
                        <select id="branch" name="branch">
                            <option value="" >담당지사를 선택해주세요</option>
                            {{-- <option value="1" @selected(old('branch'), '1')>강남1</option> --}}
                            <option value="12" @selected(old('branch'), '12')>강남</option>
                            <!-- <option value="2" @selected(old('branch'), '2')>종로</option> -->
                            <option value="6" @selected(old('branch'), '6')>신촌</option>
                            {{-- <option value="3" @selected(old('branch'), '3')>홍대</option> --}}
                            <option value="4" @selected(old('branch'), '4')>부산</option>
                            <option value="9" @selected(old('branch'), '9')>대구</option>
                            <!-- <option value="11" @selected(old('branch'), '11')>대전</option> -->
                            <option value="5" @selected(old('branch'), '5')>런던</option>
                        </select>
                        @if (!empty($errors->get('branch')))
                            <div class="message error">{{ $errors->first('branch') }}</div>
                        @endif
                    </div>
                </div>
                <!-- 다음단계로 -->
                <div class="button-wrap next">
                    <button type="submit" class="button color wide">다음단계로</button>
                </div>
            </form>
        </div>
    </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 $datepicker = $('.layout-container .date-picker input[name="birth_date"]').datepicker({
                autoClose: true,
                onSelect: function(formattedDate, date, inst) {
                    var $el = inst.$el;
                    if ($el.val()) {
                        $el.closest('.date-picker').addClass('exist');
                    } else {
                        $el.closest('.date-picker').removeClass('exist');
                    }
                }
            });

            $('.layout-container .date-picker button.cancel').click(function() {
                $datepicker.data('datepicker').clear();
                $datepicker.closest('.date-picker').removeClass('exist');
            });

            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