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

@section('page')
    <main class="area-mypage-wrap personal-information mt-0">
        <div>
            @if ($member->uid == $user->uid)
                <section>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form id="member-form" name="member-form" class="form register" method="post" action="/member/updateProfile" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" autocomplete="off" name="id" id="id-hidden" value="{{ $member->id }}" readonly>
                        <input type="hidden" autocomplete="off" name="name" id="name-hidden" value="{{ $member->name }}" readonly>
                        <div class="member-grid area-mypage-form mt-0 mb-2">
                            <p class="af-title">개인기본정보</p>
                            <div class="my-unchangeable mb-2">
                                <div class="login-input-wrap">
                                    <p class="col2">
                                        <em>아이디</em>
                                        <span>{{ $member->id }}</span>
                                    </p>
                                    <p class="col2">
                                        <em>이름</em>
                                        <span>{{ $member->name }}</span>
                                    </p>
                                </div>
                            </div>
                            <div>
                                <div class="login-input-wrap">
                                    <label class="mb-05 dis-ib">비밀번호</label>
                                    <input type="password" name="pwd" id="pwd" autocomplete="off" placeholder="변경을 원할 경우 입력해 주세요." aria-describedby="pwd_msg">
                                    <small id="pwd_msg" class="message error"></small>
                                </div>

                                <div class="login-input-wrap">
                                    <label class="mb-05 dis-ib">이메일</label>
                                    <input type="text"  autocomplete="off" name="email" id="email" placeholder="이메일을 입력해 주세요." value="{{ $member->email }}" aria-describedby="email_msg" required>
                                    <small id="email_msg" class="message error"></small>
                                </div>

                                <div class="login-input-wrap">
                                    <label class="mb-05 dis-ib">휴대폰</label>
                                    <input type="text"  autocomplete="off" name="phone" id="phone" value="{{ $member->phone }}" placeholder="'-'없이 입력해 주세요." aria-describedby="phone_msg" required>
                                    <small id="phone_msg" class="message error"></small>
                                </div>

                                <div class="login-input-wrap">
                                    <label class="mb-05 dis-ib">카카오톡 ID</label>
                                    <input type="text"  autocomplete="off" name="kakaotalkid" id="kakaotalkid" placeholder="카카오톡 ID를 입력해 주세요." value="{{ $member->mm_homepage }}" aria-describedby="kakaotalkid_msg">
                                    <small id="kakaotalkid_msg" class="message error"></small>
                                </div>

                                <div class="login-input-wrap">
                                    <label class="mb-05 dis-ib">거주지역</label>
                                    <select id="region" name="region" required>
                                        <option value="">거주지역을 선택해 주세요</option>
                                        @foreach ($regions as $region)
                                        <option value="{{ $region }}" @selected($member->mm_region, $region)>{{ $region }}</option>
                                        @endforeach
                                    </select>
                                    <small id="region_msg" class="message error"></small>
                                </div>

                                <div class="check-input-wrap">
                                    <p>유학정보 및 프로모션 정보를 받아보시겠습니까?</p>
                                    <div class="check-input-wrap-grid chk-wrap">
                                        <div class="chk">
                                            <input type="checkbox" name="agree_mail" id="agreeEmail" value="MAIL">
                                            <label for="agreeEmail">이메일로 받기</label>
                                        </div>
                                        <div class="chk">
                                            <input type="checkbox" name="agree_sms" id="agreeSms" value="Y">
                                            <label for="agreeSms">문자로 받기</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="area-mypage-form">


                        <p class="af-title">추가정보입력</p>

                        <div class="map-input-wrap mt-1">
                            <em class="tit">주소</em>
                            <p class="tf zipcode mb-05">
                                <input type="text" name="zipcode" id="zipcode" value="{{ $member->mm_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>
                               <input type="text" name="address" id="address" class="w-100" value="{{ $member->mm_address }}" size="40">
                            </p>
                        </div>

                        <input type='hidden' name='counsel_uid' value=''>

                        <div class="input hope mt-1">
                            <p class="tit"><label for="">희망유학</label></p>
                            <div class="column m-full po-r">
                                <div class="col2 country" style="display: inline-block">
                                    <p class="line-style">
                                        <input type="text" name="country_names" value="{{ !empty($consultation['country_names']) ? $consultation['country_names'] : old('country_names') }}" class="select-style" placeholder="국가를 선택해주세요" autocomplete="off" required>
                                    </p>
                                    <div class="input-multi-select">
                                        <div class="chk-custom-wrap">
                                        @foreach ($countries as $key => $country)
                                            <span>
                                                <input type="checkbox" id="aif-country{{ $country->code }}" name="country[]" value="{{ $country->code }}" @checked(old('country.'.$key), $country->code)>
                                                <label for="aif-country{{ $country->code }}">{{ $country->name }}</label>
                                            </span>
                                        @endforeach
                                        </div>
                                        <div class="button-wrap">
                                            <input type="button" class="reset button half" value="선택해지" data-class="country">
                                            <input type="button" class="save button color half" value="선택완료" data-class="country">
                                        </div>
                                    </div>
                                </div>
                                <div class="col2 type" style="display: inline-block">
                                    <p class="line-style">
                                        <input type="text" name="type_names" value="{{ !empty($consultation['type_names']) ? $consultation['type_names'] : old('type_names') }}" class="select-style" placeholder="관심분야를 선택해주세요" autocomplete="off" required>
                                    </p>
                                    <div class="input-multi-select">
                                        <div class="chk-custom-wrap">
                                        @foreach ($types as $key => $type)
                                            <span>
                                                <input type="checkbox" id="aif-interest{{ $type->code }}" name="type[]" value="{{ $type->code }}" @checked(old('type.'.$key), $type->code)>
                                                <label for="aif-interest{{ $type->code }}">{{ $type->name }}</label>
                                            </span>
                                        @endforeach
                                        </div>
                                        <div class="button-wrap">
                                            <input type="button" class="reset button half" value="선택해지" data-class="type">
                                            <input type="button" class="save button color half" value="선택완료" data-class="type">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-1">
                            <em class="tit">출국예상일</em>
                            <p class="tf" style="margin-top: .5rem">
                                <input style="width: 100%" type='text' id='departDate' name='depart_date' value="{{ $consultation['counsel_depart_date'] }}" placeholder="" disabled>
                            </p>
                            <script>
                                $( function() {
                                    $("#departDate").datepicker({ dateFormat: 'yy-mm-dd',changeYear: true, showMonthAfterYear: true});
                                });
                            </script>
                        </div>

                        <!-- 회원탈퇴 -->
                        <div class="button-wrap withdraw input-btn-wrap mb-2">
                            <span>탈퇴를 원하시면 우측의 회원탈퇴 버튼을 눌러주세요</span> <a href='/member/leave' class="button">회원탈퇴</a>
                        </div>

                        <div class="button-wrap next">
                            <button type="submit" class="button color wide">저장</button>
                        </div>

                        </div>
                    </form>
                </section>
            @endif
        </div>

        @if(session('success'))
        <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>{!! session('success') !!}</p>
                    </div>
                </div>
            </div>
        </div>
        @elseif(session('error'))
        <div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>{!! session('error') !!}</p>
                    </div>
                </div>
            </div>
        </div>
        @endif

    </main>

    <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">
        function checkPassword(password) {
            //영어 대문자, 영어 소문자, 숫자, 특수기호를 포함하고 공백을 허용하지 않도록 체크하는 정규표현식
            //const regex = /^(?=.*[a-z])(?=.*\d)(?=.*[~!@#$%^&*()_+[\]{}|\\,.?:-])(?=\S{8,})(?!.*\s).+$/i;
            const regex = {{ rule('password') }};
            return regex.test(password);
        }

        function checkEmail(email) {
            // 일반적인 이메일 주소 양식을 기준으로 하는 정규표현식
            // const regex = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
            const regex = {{ rule('email') }};
            return regex.test(email);
        }

        function checkPhone(phone) {
            // 일반적인 핸드폰 번호 양식을 기준으로 하는 정규표현식
            //const regex = /^(?:(010-?\d{4})|(01[1|6|7|8|9]-?\d{3,4}))-?\d{4}$/;
            const regex = {{ rule('phone') }};
            return regex.test(phone);
        }


        $(document).ready(function() {
            //정보 받기 동의 (이메일) default set
            var agreeEmail = "{!! $member->mm_agree !!}";
            if (agreeEmail == "MAIL") {
                $("input:checkbox[id='agreeEmail']").prop("checked",true);
            }

            //정보 받기 동의 (문자) default set
            var agreeSms = "{!! $member->mm_sms !!}";
            if (agreeSms == "Y") {
                $("input:checkbox[id='agreeSms']").prop("checked",true);
            }

            //희망국가 default set
            var country = "{!! $consultation['country'] !!}";
            country = country.split('|');
            $.each (country, function (key, value){
                $("input:checkbox[id='aif-country"+value+"']").prop("checked",true);
            });

            //관심분야 default set
            var type = "{!! $consultation['uhak_type'] !!}";
            type = type.split('|');
            $.each (type, function (key, value){
                $("input:checkbox[id='aif-interest"+value+"']").prop("checked",true);
            });

            //희망유학 국가, 분야 control
            $('.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);
                const data = $(this).data('class');
                $('.hope .'+data+' input[type=text]').val('');
            });

            $('.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');
            });



            //새 비밀번호 validation
            $('#pwd').keyup(function(){
                var password = $('#pwd').val();

                if (!password) {
                    $('#pwd_msg').empty();
                } else if (checkPassword(password)) {
                    $('#pwd_msg').html('사용가능한 비밀번호입니다: <span class="fw-bold text-success">'+password+'</span>').removeClass('error');
                } else {
                    $('#pwd_msg').html('사용할 수 없는 비밀번호입니다. (길이 8자리 이상, 알파벳 및 숫자와 특수문자 모두 포함, 공백 사용 불가): <span class="fw-bold text-danger">'+password+'</span>').addClass('error');
                }
            });

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

                if (!email) {
                    $('#email_msg').empty();
                } else if (checkEmail(email)) {
                    $('#email_msg').text('사용가능한 이메일 주소입니다.').removeClass('error');
                } else {
                    $('#email_msg').text('사용할 수 없는 이메일 주소입니다.').addClass('error');
                }
            });

            //새 핸드폰번호 validation
            $('#phone').keyup(function(){
                var phone = $('#phone').val();

                if (!phone) {
                    $('#phone_msg').empty();
                } else if (checkPhone(phone)) {
                    $('#phone_msg').text('사용가능한 핸드폰 번호입니다.').removeClass('error');
                } else {
                    $('#phone_msg').text('사용할 수 없는 핸드폰 번호입니다.').addClass('error');
                }
            });

            $("#file-input").on('change',function(){
                var fileName = $("#file-input").val();
                $(".upload-files").val(fileName);
            });
        })

        // 우편번호 찾기 찾기 화면을 넣을 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>



    @if(session('success'))
    <script>
        $(document).ready(function() {
            $('#successModal').modal('show');
        });
    </script>
    @elseif(session('error'))
    <script>
        $(document).ready(function() {
            $('#errorModal').modal('show');
        });
    </script>
    @endif
    <!-- <script type="text/javascript">
        $(document).ready(function(){
            @if (Session::has('success'))
                msg('{!! Session::get('success') !!}');
            @endif

            @if (Session::has('error'))
                msg('{!! Session::get('error') !!}');
            @endif
        });
    </script> -->
@endsection