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

@push('head')
<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/ui-ajax.js"></script>
@endpush

@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="/process/types">
                @csrf
                <p class="af-title">개인기본정보</p>
                <!-- 기본정보 : 수정 불가 -->
                <div class="my-unchangeable">
                    <p class="col3">
                        <em><i class="req">*</i>이름</em>
                        <span>{{ $member->name }}</span>
                    </p>
                    <p class="col3">
                        <em><i class="req">*</i>이메일</em>
                        <span>{{ $member->email }}</span>
                    </p>
                    <p class="col3">
                        <em><i class="req">*</i>휴대폰</em>
                        <span>{{ $member->phone }}</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="이름 (first name)"/>
                            </div>
                            <div class="col2">
                                <input type="text" id="lastName" name="last_name" value="{{ $member->mm_elname ?: old('last_name') }}" placeholder="성 (last name)"/>
                            </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>
                            <script>
                                $( function() {
                                    $("#birthDate").datepicker({ dateFormat: 'yy.mm.dd',changeYear: true, showMonthAfterYear: true,yearRange: "-50:+0"});
                                });
                            </script>
                        </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_homepage ?: 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'), '파운데이션')>대학예비과정(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>
                            <option value="국제학생특별전형" @selected(old('uhak_course'), '국제학생특별전형')>국제학생특별전형(Pathway)</option>
                            <option value="커뮤니티컬리지" @selected(old('uhak_course'), '커뮤니티컬리지')>커뮤니티컬리지</option>
                            <option value="2,3년제컬리지" @selected(old('uhak_course'), '2,3년제컬리지')>2,3년제컬리지</option>
                            <option value="아이비리그" @selected(old('uhak_course'), '아이비리그')>아이비리그</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="12" @selected(old('branch'), '12')>강남</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="5" @selected(old('branch'), '5')>런던</option>
                            {{-- <option value="1" @selected(old('branch'), '1')>강남1</option> --}}
                            {{-- <option value="2" @selected(old('branch'), '2')>종로</option> --}}
                            {{-- <option value="6" @selected(old('branch'), '6')>신촌</option> --}}
                            {{-- <option value="11" @selected(old('branch'), '11')>대전</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="/asset/daum-postcode/js/daum-postcode.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // var $datepicker = $('.input-wrap .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');
            //         }
            //     }
            // });

            // $('.input-wrap .date-picker button.cancel').click(function() {
            //     alert('날짜 지우기!');
            //     $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