@extends(env('APP_NAME').'.layout')

@push('head')
    {!! resource('asset/main.css') !!}
    {!! resource('asset/main.js') !!}
    {!! resource('asset/daum-postcode/js/daum-postcode.js') !!}
    {!! resource('component/member/asset/member.css') !!}
    {!! resource('component/member/asset/member.js') !!}
@endpush

@section('content')
    <main id="main" class="member-home">
        <div class="container">
            <h1>
                개인정보수정
            </h1>

            @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/process" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{ $member->id }}">
                        @csrf

                        <div class="member-grid">
                        <div class="profile-input-wrap">
                            <div>
                                <div class="profile ms-2">
                                    {!! profilePicture($member->profile_picture) !!}
                                </div>
                                <input class="upload-files" value="첨부파일" placeholder="첨부파일">
                                <label for="file-input">파일찾기</label>
                                <input type="file" id="file-input" name="profile_picture">
                            </div>
                        </div>

                        <div>
                            <div class="login-input-wrap">
                                <label>이름</label>
                                <input type="hidden" name="name" id="name" autocomplete="off" value="{{ $member->name }}" placeholder="Name" required>
                                <input type="text" name="lastname" id="lastname" autocomplete="off" value="{{ $member->mm_lname }}" placeholder="LastName(성)" required>
                                <input type="text" name="firstname" id="firstname" autocomplete="off" value="{{ $member->mm_fname }}" placeholder="FirstName(이름)" required>
                            </div>

                            <div class="login-input-wrap">
                                <label>비밀번호</label>
                                <input type="password" name="pwd" id="pwd" autocomplete="off" placeholder="Password" aria-describedby="pwd_msg">
                                <small id="pwd_msg" class="message error"></small>
                            </div>

                            <div class="login-input-wrap">
                                <label>휴대폰</label>
                                <input type="text"  autocomplete="off" name="phone" id="phone" value="{{ $member->phone }}" placeholder="01X-XXXX-XXXX" aria-describedby="phone_msg">
                                <small id="phone_msg" class="message error"></small>
                            </div>

                            <div class="login-input-wrap">
                                <label>이메일</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>카카오톡 ID</label>
                                <input type="text"  autocomplete="off" name="kakaotalk" id="kakaotalk" placeholder="카카오톡 ID" value="{{ $member->mm_homepage }}" aria-describedby="kakaotalk_msg" required>
                                <small id="kakaotalk_msg" class="message error"></small>
                            </div>

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


                        <h2 class="member-title">추가정보</h2>

                        <div class="map-input-wrap">
                            <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 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>
                                <label></label>
                                <span class="tf"><input type="text" name="address" id="address" value="{{ $member->mm_address }}" size="40"></span>
                            </p>
                        </div>



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

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

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

                        <div>
                            <em class="tit">출국예상일</em>
                            <p class="tf">
                                <input 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">
                            <span>탈퇴를 원하시면 우측의 회원탈퇴 버튼을 눌러주세요</span> <a href='/member/leave' class="button hana-btn">회원탈퇴</a>
                        </div>

                        <div class="submit input-btn-wrap">
                            <button type="submit" class="button hana-btn">저장하기</button>
                        </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'] !!}";
            // 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);
            });

            //새 비밀번호 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