@extends('layouts.layout-mypage')


@section('mypage-content')
@php
    $reasons = [
        "콘텐츠 이용 부족",
        "아이엘츠 준비 의사 없어짐",
        "배송불만",
        "사이트 속도 및 안정성 불만",
        "이벤트 및 혜택 부족",
        "교환/환불/반품 불만",
        "사이트 이용 불편",
        "타사에 원하는 수강상품 구입",
        "상품 가격 불만",
    ];
@endphp

<form method="post" action="{{ route("mypage.deactivate.process") }}" id='deactivateForm'>
    @csrf
    <div class="input-wrap formWrap">
        <p class="title">그동안 edm 아이엘츠 서비스를 이용해 주셔서 대단히 감사합니다. <br class="pc-br">회원 탈퇴 전 아래 안내 사항을 꼭 확인해 주세요.</p>
        <div class="input">
            <div class="messageBox read">
                <div class="message-title"><figure class="red"></figure><em>꼭 확인해주세요.</em></div>
                <ul class="dotList">
                    <li>
                        회원 탈퇴 시 회원님의 정보는 전기통신사업법, 정보통신망 이용 촉진 및 정보보호 등에 관한 법률, 통신비밀보호법, 개인정보보호법 등 상법 및 '전자상거래 등에서 소비자 보호에 관한 법률' 등 관련 법령의 규정에 의하여 다음과 같이 ‘거래 관련 관리의무 관계 확인’ 등을 이유로 일정 기간 보관 후 삭제 처리 되며 이후에는 복구가 불가합니다.
                        <p>- 결제 및 혜택 제공 등에 관한 기록 : 2년</p>
                        <p>- 결제자의 민원 또는 민원 처리에 관한 기록 : 2년</p>
                    </li>
                    <li>회원 탈퇴 시 보유 중인 강좌 및 쿠폰이 모두 소멸 되며 재 가입시복구가 되지 않습니다.</li>
                    <li>회원이 통합 관리 됨에 따라 탈퇴 시 아이엘츠 어학원/인강 사이트에서 모두 탈퇴 처리됩니다.</li>
                    <li>회원 탈퇴 하신 후, 30일 내 동일한 계정으로 재 가입이 불가능합니다. 탈퇴 후 재가입 시에는 신규 회원 가입으로 처리 되며, 탈퇴 전의 회원정보와 거래정보 및 포인트, 쿠폰 정보 등은 복구되지 않습니다.</li>
                </ul>
                <p>*상세한 내용은 사이트 내 개인정보 처리방침을 참고해 주시기 바랍니다. </p>
            </div>
        </div>
        <div class="input">
            <div class="messageBox chk">
                <div class="message-title"><figure></figure><em>탈퇴 사유를 체크해 주세요. (최대 2개까지 선택 가능)</em></div>

                @foreach ($reasons as $reason)
                    <label class="chk-two">
                        <input type="checkbox" class="txt_reason" name="reason[]" value="{{ $reason }}" @checked( ! empty(old("reason")) && in_array($reason, old("reason")) )>
                        <span>{{ $reason }}</span>
                    </label>
                @endforeach

                <div class="last-chk">
                    <label><input type="checkbox" required name="is_agree" value="1" id="is_agree" @checked( old("is_agree") )>
                        <span>edm아이엘츠 회원탈퇴 시 처리사항에 대해 숙지했습니다.</span>
                    </label>
                </div>

                @if ($user->register_type != 'social')
                    <div class="last-password flex">
                        <span>비밀번호</span>
                        <label>
                            <input type="password" placeholder="비밀번호를 입력해 주세요." autocomplete="off" required name="password" id="password" value="">
                            <div class="message error" id="passwordValidMsg">@error("not_valid") {{ $message }} @enderror</div>
                        </label>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div class="button-wrap">
        <button type="button" class="submitBtn" disabled onclick="onSubmit()">회원 탈퇴</button>
    </div>
    <!-- 회원 탈퇴가 완료되면 메인으로 이동 -->
</form>
@endsection
@section("mypage-script")
    <script>

        function checkPwdValidation(isMessageView = false) {
            let isValidation = true;
            if ($('.txt_reason:checked').length == 0) {
                isValidation = false;
            }

            if ($('#password').length == 1) {
                if ($.isEmptyObject($('#password').val())) {

                    if (isMessageView) {
                        inputValid($('#password'), false);
                        $('#passwordValidMsg').text('비밀번호를 입력해주세요.');
                        $('#passwordValidMsg').addClass('error');
                    }

                    isValidation = false;
                } else {
                    inputValid($('#password'), true);
                    $('#passwordValidMsg').empty();
                    $('#passwordValidMsg').removeClass('error');
                }
            }

            if (! $("#is_agree").is(":checked")) {
                isValidation = false;
            }

            $('.submitBtn').attr("disabled", ! isValidation)
            return isValidation;
        }


        $(function(){
            // 체크박스 최대 2개까지만 선택 가능
            $('.messageBox.chk input[type="checkbox"]').on('click',function(e){
                let count = $('.messageBox.chk input[type="checkbox"]:checked').length;
                $('.messageBox.chk input[type="checkbox"]:checked').parent().addClass('active');
                if(count >= 2){
                    $('.messageBox.chk .chk-two.active').siblings().addClass('deactivate');
                }else{
                    $('.messageBox.chk .chk-two').removeClass('deactivate active');
                }

                checkPwdValidation();
            });

            $(document).on("keyup", '#password', function(){
                checkPwdValidation(true);
            });

            $('.submitBtn').on("click", function() {
                if (checkPwdValidation(true)) {
                    $("#deactivateForm").submit();
                };
            })
        });
    </script>
@endsection