@extends('layouts.layout-mypage')


@section('mypage-content')
<form method="POST" id="mypageForm">
    @csrf
    <div class="input-wrap formWrap">
        <div class="inputArea">
            <strong class="customLine">기본정보</strong>

            <div class="wrap-round">
                <input type="hidden" name="register_type" value="{{ $user->register_type }}" id="registerType" />
                <div class="input userWrap">
                    <label>
                        <p>아이디</p>
                        {{-- 250429 모바일 잘리는 문제로 아래 input 주석 --}}
                        @if ($user->edm_id)
                            {{-- <input type="text" value="{{ $user->edm_id }}({{ $user->email }})" readonly> --}}
                            <span>{{ $user->edm_id }}({{ $user->email }})</span>
                        @elseif ($user->register_type == "email")
                            {{-- <input type="text" value="{{ $user->email }}" readonly> --}}
                            <span>{{ $user->email }}</span>
                        @else
                        {{-- <input type="text" value="소셜(SNS) 가입 계정 입니다." readonly> --}}
                            <span>소셜(SNS) 가입 계정<span class="pc-text">입니다.</span></span>
                        @endif
                    </label>
                    <label><p>이름</p><input type="text" value="{{ $user->name }}" readonly></label>
                </div>

                <div class="input snsManagement">
                    <p class="tit">연동 SNS계정관리</p>
                    <div class="roundWrap">
                        @foreach ($providers as $provider)
                            <div class="sns box">
                                <div class="left">
                                    <div class="top">
                                        <figure style="background-image: url('{{ $provider['img_icon'] }}');"></figure>
                                        <p class="name">
                                            @if ($provider['is_connect'])
                                            {{ $provider['name'] }}({{ $provider['connect_at'] }})
                                            @endif
                                        </p>
                                    </div>
                                    <p class="email">{{ $provider['is_connect'] ? $provider['email'] : "-" }}</p>
                                </div>
                                <div class="right">
                                    <!-- 버튼 상태에 따라 buttonWrap에 class active -->
                                    <div @class(["buttonWrap","flex", 'provider-box', "active" => $provider['is_connect']])>
                                        <button type="button" class="provider" data-name="{{ $provider['provider'] }}"></button>
                                        @if ($provider['is_connect'])
                                        <span class="pc-text">연결</span>해제
                                        @else
                                        연결<span class="pc-text">하기</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                @if ($user->register_type != "social")
                    <div class="input password">
                        <p class="tit">비밀번호<i></i></p>
                        <button type="button" class="btn-signup popupOn">변경</button>
                    </div>
                @endif

                <div class="input phoneNumber">
                    <p class="tit">휴대폰번호<i></i></p>
                    <div class="inputBox flex phoneBox">
                        <input type="hidden" name="old_phone_code" id="old_phone_code" value="{{ $user->phone_code }}" />
                        <input type="hidden" name="old_phone" id="old_phone" value="{{ $user->phone }}" />


                        <div class="dropDownMenu type2 small">
                            <div class="selectBox">
                                <button type="button" class="label" data-selected="" data-default="{{ $user->phone_code }}">+{{ $user->phone_code }}) {{ $user->country?->name }}</button>
                                <input type="hidden" name="phone_code" id="phone_code" value="{{ $user->phone_code }}" />
                                <div class="optionListWrap">
                                    <div class="scrollWidth">
                                        <ul class="optionList scrollWrap">
                                            @foreach ($countries as $country)
                                                <li @class(['optionItem', 'selected' => $country->phone_code == $user->phone_code] )>
                                                    <button type="button" data-account="{{ $country->phone_code }}">+{{ $country->phone_code }}) {{ $country->name }}</button>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <label>
                            <input type="tel" id="phone" name="phone" value="{{ $user->phone }}" maxlength="13" autocomplete="off" placeholder="번호를 입력해 주세요.('-'제외)" class="onlynumber" required>
                            <div class="message error" id="phoneValidMsg">@error('phone') {{ $message }} @enderror</div>
                        </label>
                    </div>
                    <div class="inputBox flex certifyPhone" style="display: none">
                        <label>
                            <input type="text" id="authNumber" name="authNumber" value="" maxlength="6" autocomplete="off" placeholder="인증번호를 입력해 주세요." class="onlynumber">
                            <span class="timer" style="display: none">3분 00초</span>
                        </label>
                        <button type="button" class='btn-signup btnSend small' onclick="onSendAuthNumber()" disabled>인증받기</button>
                    </div>
                </div>

                <div class="input address">
                    <p class="tit">주소</p>
                    <div class="inputBox flex">
                        <label><input type="text" name="zip_code" readonly placeholder="우편번호" id="zip_code" value="{{ $user->zip_code }}"></label>
                        <button type="button" class="btn-signup" onclick="getKakaoPostCode()">우편번호 검색</button>
                    </div>
                    <div class="inputBox"><label><input type="text" name="address" readonly placeholder="기본주소" id="address" value="{{ $user->address }}"></label></div>
                    <div class="inputBox"><label><input type="text" name="address_detail" placeholder="상세주소" id="address_detail" value="{{ $user->address_detail }}"></label></div>
                </div>
            </div>
        </div>

        <div class="inputArea">
            <strong class="customLine">추가정보</strong>

            {{-- <div class="wrap-pc-round type2"> --}}
                <div class="wrap-round">
                <div class="input">
                    <div class="messageBox type2">
                        <em>시험응시정보</em>
                        <p>*응시권 구입 시, 상품 결제 페이지> 응시자정보에서 가장 최근 입력한 정보가 저장됩니다.</p>
                    </div>
                </div>
                <!--
                    시험응시정보 :: 회원 수정이 불가합니다 (결제페이지에서 입력된 데이터 호출)
                    todo: 240910 회원과 응시권 1:N 으로 매칭되어야 하나, 현재 1:1 매칭으로 되어 있어서 해당 부분 수정 후 진행예정
                -->
                <div class="input examInfo borderN">
                    <div class="roundWrap">
                        <div class="box">
                            <p class="tit">여권 영문명</p>
                            <div class="flex name right">
                                <label><input type="text" autocomplete="off" name="en_first_name" value="{{ $examTicket?->en_first_name }}" disabled></label>
                                <label><input type="text" autocomplete="off" name="en_last_name" value="{{ $examTicket?->en_last_name }}" disabled></label>
                            </div>
                        </div>
                        <div class="box">
                            <p class="tit">여권 한글명</p>
                            <label class="right"><input type="text" autocomplete="off" name="passport_name" value="{{ $examTicket?->passport_name }}" disabled></label>
                        </div>
                        <div class="box">
                            <p class="tit">여권 생년월일</p>
                            <label class="right"><input type="date" name="brithday" value="{{ $examTicket?->birthday }}" disabled></label>
                        </div>
                        <div class="box">
                            <p class="tit">시험 신청 시 사용 연락처</p>
                            <label class="right"><input type="tel" autocomplete="off" name="exam_phone" value="{{ $examTicket?->exam_phone }}" class="onlynumber" disabled></label>
                        </div>
                    </div>
                </div>
                <div class="input notification borderN">
                    <p class="tit">알림발송</p>
                    <div class="roundWrap">
                        <div class="box">
                            <p class="tit">카카오톡ID <span>(해외배송 알림용)</span></p>
                            <label class="right"><input type="text" name="kakao_id" id="kakao_id" placeholder="카톡ID입력" value="{{ $user->kakao_id }}" ></label>
                        </div>
                        <div class="box agreeTit">
                            <p class="tit">마케팅 정보 활용동의 <span>(상품 업데이트 소식 및 혜택, 이벤트, 쿠폰 정보)</span></p>
                        </div>
                        <div class="box chkWrap">
                            <div class="flex chk">
                                <label>
                                    <input type="checkbox" name="is_marketing" id="is_marketing" @checked($user->is_accepted_email == 1 && $user->is_accepted_phone == 1)><span>전체</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="is_accepted_phone" id="is_accepted_phone" class="is_marketing" @checked($user->is_accepted_phone == 1)><span>SMS</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="is_accepted_email" id="is_accepted_email" class="is_marketing" @checked($user->is_accepted_email == 1)><span>이메일</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="delete">
        <div class="box flex">
            <div class="txt"><figure></figure> edm서비스를 더 이상 이용하지 않으실 건가요?</div>
            @if ($enrollCount > 0)
                <button type="button" class="popupOn">회원 탈퇴</button>
            @else
                <button type="button" class="popupOn" onclick="location.href='{{ route('mypage.deactivate') }}'">회원 탈퇴</button>
            @endif
            <!--
                회원 탈퇴 클릭
                1) 탈퇴 가능 : 탈퇴 페이지로 이동 (/mypage-delete)
                2) 탈퇴 불가 : 팝업 보이기
                -->
        </div>
    </div>

    <div class="button-wrap">
        <button type="button" class="submitBtn" onclick="onSubmit()" disabled>저장</button>
    </div>

    <!-- popup wrap -->


</form>

<div class="popupArea">
    <!--
        비밀번호 변경 팝업
        비밀번호 변경 후 확인 버튼 클릭시 popupWrap class="active" 에서 active가 제거됩니다. (팝업 닫기)
    -->
    @if ($user->register_type != "social")
        <div class="popupWrap {{ session('errors') ? "active" : "" }}">
            <form action="{{ route("mypage.main.password") }}" method="POST" id="securityForm">
                @csrf
                <div class="popup">
                    <div class="closeIcon closeBtn"></div>
                    <div class="textWrap">
                        <p class="title">비밀번호 변경</p>
                        <p class="info">6~15자 영문 대・소문자, 숫자, 특수문자 조합으로 입력해 주세요.</p>
                        <div class="passwordWrap">
                            <div class="box">
                                <p>현재 비밀번호</p>
                                <label>
                                    <input type="password" name="oldPassword" id="oldPassword" class="@error("not_valid") invalid @enderror">
                                    <div class="message error" id="oldPasswordValidMsg">@error("not_valid") {{ $message }} @enderror</div>
                                </label>
                            </div>
                            <div class="box">
                                <p>신규 비밀번호</p>
                                <label>
                                    <input type="password" name="password" id="password">
                                    <div class="message error" id="passwordValidMsg">@error("password") {{ $message }} @enderror</div>
                                </label>
                            </div>
                            <div class="box">
                                <p>신규 비밀번호 확인</p>
                                <label>
                                    <input type="password" name="passwordCheck" id="passwordCheck">
                                    <div class="message error" id="passwordCheckMsg"></div>
                                </label>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="payment-popupClose popupClose" onclick="checkSecurityValidation()">확인</button>
                </div>
            </form>
            <div class="dim"></div>
        </div>
    @endif

    @if ($enrollCount > 0)
    <!-- 회원탈퇴 불가 팝업 -->
    <div class="popupWrap">
        <div class="popup textPopup">
            <div class="closeIcon closeBtn"></div>
            <div class="textWrap">
                <p>회원님은 현재 [수강중] 상태입니다. <br>1:1 게시판 별도 접수를 통해 수강환불 or 교재회수 처리 후 환불이 가능합니다.</p>
            </div>
            <button type="button" class="popupClose closeBtn">확인</button>
        </div>
        <div class="dim"></div>
    </div>
    @endif
</div>
@endsection
@section("mypage-script")


    <script>
        function getKakaoPostCode() {
            execKakaoPostcode()
        }

        let socialPopup;
        function onSocialPopup(provider) {
            const link = "{{ route('social.redirect', ['provider' => ':provider']) }}"
            socialPopup = window.open(link.replace(":provider", provider), 'social', 'width=617px, height=936px');
        }

        function onSuccess(type, provider, is_additional) {
            socialPopup.close();
            alertPopup("SNS 연동에 성공하였습니다.", {
                confirmText: '확인',
                onConfirm: function() {
                    location.reload();
                }
            })

        }

        function onFail(message) {
            socialPopup.close();
            alertPopup(message, {
                confirmText: '확인'
            })
        }

        async function onSubmit() {
            const formData = new FormData(document.getElementById('mypageForm'));


            const result = await useFetch("{{ route('mypage.main.process') }}", {
                method: "POST",
                body: formData
            });

            if ( result.status ) {
                alertPopup("저장되었습니다.", {
                    onConfirm: function() {
                        location.reload();
                    }, onClose: function () {
                        location.reload();
                    }
                })
            }
        }
    </script>
@endsection