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

@section('page')
    <!-- password : content -->
            <div class="area-mypage">
                <h3 class="cont-title">내정보수정</h3>

                <div class="form-content area-mypage-form">
                    <p class="title">기본정보</p>
                    <!-- 기본정보 : 수정 불가 -->
                    <div class="my-unchangeable ">
                        <p class="col2">
                            <em> <i class="req">*</i>아이디</em>
                            <span>{{ substr($member->mm_id,8) }}</span>
                        </p>
                        <p class="col2">
                            <em> <i class="req">*</i>이름</em>
                            <span>{{ $member->mm_name }}</span>
                        </p>
                    </div>

                    <div class="input-box">
                        <div class="modify-password">
                            <form method="POST" name="form_password" action="{{ route('mypage.password.update') }}">
                                @method('patch')
                                @csrf
                                <em class="mp-title">
                                    <label for="mm_password">비밀번호</label>
                                    <span class="toggle-btn button">
                                        <span class="open" >변경</span>
                                        <span class="close">취소</span>
                                    </span>
                                </em>
                                <div class="mp-setup">
                                    <p class="input">
                                        <em class="tit">현재비밀번호</em>
                                        <span class="tf password"><input type="password" id="password" name="password"></span>
                                    </p>
                                    <p class="input">
                                        <em class="tit">새비밀번호</em>
                                        <span class="tf password"><input type="password" id="passwordNew" name="password_new"></span>
                                        <span id="passwordValidMsg" class="message error"></span>
                                    </p>
                                    <p class="input">
                                        <em class="tit">새 비밀번호 확인</em>
                                        <span class="tf password"><input type="password" id="passwordCheck" name="password_check"></span>
                                        <span id="passwordCheckMsg" class="message error"></span>
                                        <button type="button" class="button color" onclick="updatePassword();">확인</button>
                                    </p>
                                </div>
                            </form>
                        </div>

                    <form method="POST" name="form_info" action="{{ route('mypage.update') }}">
                        @method('patch')
                        @csrf
                        <div>
                            <em class="tit"><label for="req_email"> 이메일</label></em>
                            <span class="tf email">
                                <input type="text" id="email" name="email" value="{{ $member->mm_email }}">
                            </span>
                        </div>

                        <div>
                            <em class="tit"><label for="phone"> 휴대폰</label></em>
                            <span class="tf email">
                                <input type="tel" name="phone" value="{{ $member->mm_mobile }}">
                            </span>
                        </div>

                        <div class="marketing-agree">
                            <h3 class="tit">UAL 입학정보 및 프로모션 정보를 받아보시겠습니까?</h3>
                            <p class="tf">
                                <span class="chk">
                                    <input type="checkbox" name="agree_mail" id="agreeEmail" value="MAIL">
                                    <label for="agreeEmail">이메일로 받기</label>
                                </span>
                                <span class="chk">
                                    <input type="checkbox" name="agree_sms" id="agreeSms" value="Y">
                                    <label for="agreeSms">문자로 받기</label>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>


                <div class="form-content">
                    <p class="title">추가정보</p>
                    <div class="input-box">
                        <div>
                            <em class="tit">주소</em>
                            <p class="tf zipcode">
                                <input type="text" name="zipcode" id="zipcode" value="{{ $member->mm_zipcode }}" size="5">
                                <button type="button" class="button" onclick="sample3_execDaumPostcode(); return false;">우편번호<span class="pc-text"> 찾기</span></button>
                            </p>
                            <!-- 카카오주소검색 -->
                            <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>
                        </div>

                        <p>
                            <span class="tf"><input type="text" name="address" id="address" value="{{ $member->mm_address }}" size="40"></span>
                        </p>

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

                        <div>
                            <em class="tit">희망국가</em>
                            <p class="tf chk-wrap">
                                <span class="chk"><input type='checkbox' name='country[]' value='US' id='countryUS' ><label for="countryUS">미국</label></span>
                                <span class="chk"><input type='checkbox' name='country[]' value='UK' id='countryUK' ><label for="countryUK">영국</label></span>
                                <span class="chk"><input type='checkbox' name='country[]' value='CA' id='countryCA' ><label for="countryCA">캐나다</label></span>
                                <span class="chk"><input type='checkbox' name='country[]' value='AU' id='countryAU' ><label for="countryAU">호주</label></span>
                                <span class="chk"><input type='checkbox' name='country[]' value='PH' id='countryPH' ><label for="countryPH">필리핀</label></span>
                                <span class="chk"><input type='checkbox' name='country[]' value='IE' id='countryIE' ><label for="countryIE">아일랜드</label></span>
                                <span class="chk"><input type='checkbox' name='country[]' value='NZ' id='countryNZ' ><label for="countryNZ">뉴질랜드</label></span>
                                <span class="chk"><input type='checkbox' name='country[]' value='MT' id='countryMT' ><label for="countryMT">몰타</label></span>
                            </p>
                        </div>

                        <div>
                            <em class="tit">관심분야</em>
                            <p class="tf chk-wrap">
                                <span class="chk"><input type='checkbox' name='type[]' value='ART' id='typeART' ><label for="artcheck">대학(아트/디자인전공)</label></span>
                                <span class="chk"><input type='checkbox' name='type[]' value='FORMAL' id='typeFORMAL' ><label for="formalcheck">대학(일반전공)</label></span>
                                <span class="chk"><input type='checkbox' name='type[]' value='40004' id='type40004' ><label for="portfoliocheck">포트폴리오</label></span>
                                <span class="chk"><input type='checkbox' name='type[]' value='LANG' id="typeLANG" ><label for="langcheck">어학연수</label></span>
                                <span class="chk"><input type='checkbox' name='type[]' value='VISA' id="typeVISA" ><label for="visacheck">비자</label></span>
                            </p>
                        </div>

                        <div>
                            <em class="tit">출국예상일</em>
                            <p class="tf">
                                <input type='text' id='departDate' name='depart_date' value='{{ $consultation['counsel_depart_date'] }}' placeholder="출국예상일을 입력하세요">
                            </p>
                            <script>
                                $( function() {
                                    $("#departDate").datepicker({ dateFormat: 'yy-mm-dd',changeYear: true, showMonthAfterYear: true});
                                });
                            </script>
                        </div>

                        <!-- 회원탈퇴 -->
                        <div class="button-wrap withdraw">
                            <span>탈퇴를 원하시면 우측의 회원탈퇴 버튼을 눌러주세요</span> <a href='{{ route('mypage.leave') }}' class="button">회원탈퇴</a>
                        </div>

                        <!-- 저장버튼 -->
                        <div class="button-wrap">
                            <button type="button" class="button color wide" onclick="updateInfo();">저장</button>
                        </div>
                    </form>
                </div>
            </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">
        // $('.mp-setup').hide();
        // $('.toggle-btn .close').hide();

        $(document).ready(function() {
            // 마이페이지 비밀번호 변경 토글
            $('.modify-password').find('.toggle-btn').click(function () {
                $(this).parents('.modify-password').toggleClass('open');
            });

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

                if (!password) {
                    $('#passwordValidMsg').empty();
                    $('#passwordCheck').val('');
                    $('#passwordCheckMsg').empty();
                } else if (/\s/g.test(password)) {
                    $('#passwordValidMsg').text('사용할 수 없는 비밀번호입니다. 공백이 들어가면 안 됩니다.');
                    $('#passwordValidMsg').addClass('error');
                } else if (password.length < minLength) {
                    $('#passwordValidMsg').text('사용할 수 없는 비밀번호입니다. 6글자 이상이어야 합니다.');
                    $('#passwordValidMsg').addClass('error');
                } else if (/[^_0-9a-z#~:.?=%@!$^*-]/gi.test(password)) {
                    $('#passwordValidMsg').text('사용할 수 없는 비밀번호입니다. 사용가능한 특수문자(#~:.?=%@!$^*-_)');
                    $('#passwordValidMsg').addClass('error');
                } else if (/[#~:.?=%@!$^*-]/gi.test(password)) {
                    $('#passwordValidMsg').text('사용가능한 비밀번호입니다.');
                    $('#passwordValidMsg').removeClass('.error');
                } else {
                    $('#passwordValidMsg').text('사용가능하나 보안에 취약합니다.');
                    $('#passwordValidMsg').addClass('error');
                }
                if(password != '' && passwordCheck != ''){
                    if(password != passwordCheck){
                        $('#passwordCheckMsg').text('비밀번호가 일치하지 않습니다.');
                        $('#passwordCheckMsg').addClass('error');
                    } else {
                        $('#passwordCheckMsg').text('비밀번호가 일치합니다.');
                        $('#passwordCheckMsg').removeClass('error');
                    }
                }
            });

            //새비밀번호 확인
            $('#passwordCheck').keyup(function(){
                var password=$('#passwordNew').val();
                var passwordCheck=$('#passwordCheck').val();

                if(password != '' && passwordCheck != ''){
                    if(password != passwordCheck){
                        $('#passwordCheckMsg').text('비밀번호가 일치하지 않습니다.');
                        $('#passwordCheckMsg').addClass('error');
                    } else {
                        $('#passwordCheckMsg').text('비밀번호가 일치합니다.');
                        $('#passwordCheckMsg').removeClass('error');
                    }
                } else {
                    $('#passwordCheckMsg').empty();
                }
            });

            //정보 받기 동의 (이메일) 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'] !!}";
            // var country = "US|UK|NZ";
            country = country.split('|');

            $.each (country, function (key, value){
                    $("input:checkbox[id='country"+value+"']").prop("checked",true);
            });

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

        })

        //비밀번호 변경
        function updatePassword() {
            var $form = $('form[name="form_password"]');

            alert('비밀번호를 변경중입니다.\n잠시만 기다려 주세요.');

            $.ajax({
                url : $form.attr('action'),
                type : $form.attr('method'),
                data : $form.serialize(),

                success : function(data) {
                    alert('비밀번호 변경에 성공했습니다.');
                },
                error : function(error) {
                    alert('비밀번호 변경에 실패했습니다.');
                }
            });
        }

        //회원정보 변경
        function updateInfo() {
            var $form = $('form[name="form_info"]');
            var $error = null;

            alert('회원정보를 수정 중입니다.\n잠시만 기다려 주세요.');

            $.ajax({
                url : $form.attr('action'),
                type : $form.attr('method'),
                data : $form.serialize(),

                success : function(data) {
                    alert('회원정보 수정에 성공했습니다.');
                    location.href=`/mypage/info`;
                },
                error : function(error) {
                    alert('회원정보 수정에 실패했습니다.');
                }
            });
        }

    </script>
@endsection