@extends("domains.common.layouts.layout")
@section("header")
@vite([
    'resources/js/domains/common/kakaoPost.js',
    'resources/js/domains/common/fullCalendar.js',
])
@endsection

@section("main-content")
    <div class="container-fluid detail">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h1>회원 관리</h1>
                    <ul class="page-wayfinding">
                        <li><a href="{{ route('user.list') }}">회원 관리</a></li>
                        <li>상세</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row detail-con-wrap">
            <div class="detail-con card">
                <form action="" class="set-user-form" onsubmit="handleSubmit(event)">
                    @csrf
                    <input type="hidden" name="id" value="{{ $user->id }}">
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w40" style="margin-bottom: 1rem;">
                                <h2 class="detail-title">회원 구분</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>회원 번호</dt>
                                        <dd><span>{{ $user->id }}</span> <span>({{ date("Y.m.d", strtotime($user->created_at)) }})</span></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">활성 구분</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio1" name="activated" class="form-check-input" value="1" @checked($user->activated)>
                                                <label class="form-check-label" for="customRadio1">활성</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio2" name="activated" class="form-check-input" value="0" @checked(!$user->activated)>
                                                <label class="form-check-label" for="customRadio2">휴면
                                                    @if (!$user->activated && $user->deactivated_at)
                                                        <span>({{date("Y.m.d", strtotime($user->deactivated_at)) }})</span>
                                                    @endif
                                                </label>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">회원 구분</dt>
                                        <dd>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="customRadio3" name="role" class="form-check-input" value="학생"
                                                    @checked($user->hasRole("학생"))>
                                                <label class="form-check-label" for="customRadio3">학생</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="customRadio4" name="role" class="form-check-input" value="직원"
                                                    @checked($user->hasRole(["직원", "관리자"]))>
                                                <label class="form-check-label" for="customRadio4">직원</label>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>등록 기기</dt>
                                        <dd>
                                            <span onclick="edmModalOpen(event, '{{ route('user.popup.device', $user->id) ?? '' }}', null)">
                                                <strong class="text-primary user-device-count-strong">
                                                    {{ empty($user->userDevices) ? 0 : count($user->userDevices) }}
                                                </strong> / <span>3</span>
                                                <span @class([
                                                    'device-unlimited-info-span',
                                                    'display-none' => $user->is_device_unlimited != 1
                                                ])>
                                                    (기기제한 해제)
                                                </span>
                                            </span>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>회원 이미지</dt>
                                        <dd class="detail-img-wrap">
                                            <div class="detail-img-btn-wrap">
                                                <button class="button btn-style-1 w100" type="button" onclick="this.nextElementSibling.click();">이미지 등록</button>
                                                <input onchange="previewImage(event);" type="file" id="user_profile_img" name="photo" accept="image/*" style="display: none;"/>
                                            </div>
                                            <div class="detail-img mb-1">
                                                <button class="btn-delete" type="button" onclick="deleteProfileImage({{ $user->id }})">이미지 삭제</button>
                                                <img id="user_image" src="{{ $user->photo }}" alt="" onerror="this.src='{{ Vite::asset('resources/images/no-photo.svg') }}'; this.style.width='60%'">
                                            </div>
                                            <div class="detail-img-notice">
                                                * 이미지 사이즈(권장) : 130 x 150<br>
                                                * 파일 형식 : jpg, jpeg, png<br>
                                                * 파일 크기 : 10MB 이하<br>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="w60">
                                <h2 class="detail-title">기본 정보</h2>
                                <div class="user-add-popup-row">
                                    <div class="input-wrapper mb-3">
                                        <label class="form-label req" for="validationCustom01">아이디</label>
                                        <div>
                                            <input type="text" class="form-control" id="validationCustom01" name="edm_id" placeholder="6~12자의 영문, 숫자, 특수기호 - 만 사용 가능" value="{{ $user->edm_id }}" required @readonly($user->edm_id)>
                                        </div>
                                    </div>
                                    <div class="input-wrapper mb-3">
                                        <label class="form-label" for="validationCustom02">비밀번호</label>
                                        <div>
                                            {{-- <input type="text" class="form-control" id="validationCustom02" placeholder="6자 이상 영문, 대/소문자, 숫자, 특수문자 사용 가능" value="" required> --}}
                                            <input type="button" id="validationCustom02" class="button btn-style-1" onclick="passwordInit({{ $user->id }})" value="비밀번호 초기화" style="width: 100%; margin: 0;">
                                        </div>
                                    </div>
                                    <div class="input-wrapper mb-3">
                                        <label class="form-label req" for="validationCustom03">이름</label>
                                        <div>
                                            <input type="text" class="form-control invalid" id="validationCustom03" name="name" placeholder="2글자 이상, 영문/한글 혼합 사용 불가" value="{{ $user->name }}" required>
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <div class="input-wrapper mb-3">
                                        <label class="form-label req" for="validationCustom04">휴대폰</label>
                                        <div>
                                            <input type="text" class="form-control invalid" id="validationCustom04" name="phone" placeholder="숫자만 입력 가능" value="{{ $user->phone }}" required oninput="oninputPhone(this)" maxlength="13">
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <div class="input-wrapper mb-3">
                                        <label class="form-label req" for="validationCustom05">이메일</label>
                                        <div>
                                            <input type="text" class="form-control invalid" id="validationCustom05" name="email" placeholder="이메일 주소를 입력해 주세요." value="{{ $user->email }}" required>
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <div class="input-wrapper mb-3">
                                        <label class="form-label" for="example-select">국가</label>
                                        <div>
                                            <select class="form-select" id="example-select" name="country_id">
                                                <option value="" @selected(empty($user->country_id))>국가 선택</option>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}" @selected($country->id == $user->country_id)>{{ $country->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="input-wrapper mb-3">
                                        <label class="form-label" for="validationCustom07">주소</label>
                                        <div>
                                            <div class="input-flex mb-1">
                                                <input type="text" id="validationCustom07" class="form-control" name="zip_code" value="{{ $user->zip_code }}" placeholder="우편번호를 검색해 주세요." readonly>
                                                <input type="button" class="button btn-style-1 kakao-post-code-btn" value="우편번호" onclick="execKakaoPostcode()">
                                            </div>
                                            <input type="text" class="mb-1 form-control" id="validationCustom07-1" name="address" value="{{ $user->address }}" readonly>
                                            <input type="text" id="validationCustom07-2" class="form-control" name="address_detail" value="{{ $user->address_detail }}" placeholder="상세주소를 입력해 주세요.">
                                        </div>
                                    </div>
                                    <div class="example-select-box active">
                                        <div class="input-wrapper mb-3">
                                            <label class="form-label" for="validationCustom08">카카오톡ID</label>
                                            <div>
                                                <input type="text" class="form-control" id="validationCustom08" name="kakao_id" value="{{ $user->kakao_id }}" placeholder="카카오톡 ID를 입력해 주세요.">
                                            </div>
                                        </div>
                                        <div class="input-wrapper mb-3">
                                            <label class="form-label" for="example-select0">담당자</label>
                                            <div>
                                                <select class="form-select"  id="example-select0" name="charged_by">
                                                    <option value="" @selected(empty($user->charged_by))>담당자명</option>
                                                    @foreach ($staffs as $staff)
                                                        <option value="{{ $staff->id }}" @selected($staff->id == $user->charged_by)>{{ $staff->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input-wrapper mb-3">
                                        <label class="form-label" for="validationCustom07">마케팅 수신 동의</label>
                                        <div class="form-check-wrap">
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="check-email" name="check-email" class="form-check-input">
                                                <label class="form-check-label" for="check-email">이메일</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="check-sms" name="check-sms" class="form-check-input">
                                                <label class="form-check-label" for="check-sms">문자</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-end">
                        <button class="button btn-style-1" type="submit">저장</button>
                    </div>
                </form>
            </div>

            <div class="detail-con card">
                <div class="card-body">
                    <div class="schedule-calendar"></div>
                    <div class="detail-calendar-text">
                        <dl>
                            <dt>어학원 회차</dt>
                            <dd><strong class="text-primary">N</strong>일</dd>
                        </dl>
                        <dl>
                            <dt>인강 수강일</dt>
                            <dd><strong class="text-primary">N</strong>일</dd>
                        </dl>
                        <dl>
                            <dt>게시글</dt>
                            <dd><strong class="text-primary">N</strong>건</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>

    <div class="tab-content-warpper row">
        <nav class="detail-tab-menu">
            <ul>
                <li><a id="online-lecture" href="#online-lecture">인강정보</a></li>
                <li><a id="language-school" href="#language-school">어학원정보</a></li>
                <li><a id="payment-info" href="#payment-info">결제 정보</a></li>
                <li><a id="refund-info" href="#refund-info">환불 정보</a></li>
            </ul>
        </nav>
        <div class="tab-close tab-content online-lecture">@include("domains.user.online-lecture")</div>
        <div class="tab-close tab-content language-school">@include("domains.user.language-school")</div>
        <div class="tab-close tab-content payment-info">@include("domains.user.payment-info")</div>
        <div class="tab-close tab-content refund-info">@include("domains.user.refund-info")</div>
    </div>
@endsection

@push("script")
<script>
    const userId = {{ $user->id }};
    const userSetUrl = "{{ route('api.user.set') ?? '' }}";
    const createMemoUrl = "{{ route('api.user.create-memo') }}";
    const deleteMemoUrl = "{{ route('api.user.delete-memo') }}/";
    const passwordInitUrl = "{{ route('api.user.password-init') }}";
    const deleteUserPhotoUrl = "{{ route('api.user.delete-photo') }}";

    window.addEventListener("load", () => {
        const currentUrl = document.URL;
        const urlArray = currentUrl.split("#");

        if (urlArray.length > 1) {
            const tabClassName = urlArray[1];

            let activeTab = document.querySelector("#" + tabClassName);
            let activeTabContent = document.querySelector(".tab-content-warpper div." + tabClassName);
            activeTab.classList.add("activated");
            activeTabContent.classList.remove("tab-close");
        }

        const tabButtons = document.querySelectorAll(".detail-tab-menu ul li a");
        const tabContents = document.querySelectorAll(".tab-content-warpper div.tab-content");
        for (let i=0; i<tabButtons.length; i++) {
            tabButtons[i].addEventListener("click", (e) => {
                // e.preventDefault();
                for (const j=0; j<tabButtons.length; j++) {
                    tabButtons[j].classList.remove("activated");
                    tabContents[j].classList.add("tab-close");
                }

                this.classList.add("activated");
                let activeTabContent = document.querySelector(".tab-content-warpper div." + this.id);
                activeTabContent.classList.remove("tab-close");
            });
        }

        let requiredElements = document.querySelectorAll(".set-user-form .invalid");
        for (const elem of requiredElements) {
            elem.addEventListener("change", (e) => {
                e.target.classList.add("invalid");
            });
        }

        // 어학원정보탭 드롭다운
        let dropdownBar = document.querySelectorAll('.table-wrap')
        let dropdownBarBtn = document.querySelectorAll('.dropdown-bar button')
        for (let i = 0; i < dropdownBarBtn.length; i++) {
            dropdownBarBtn[i].addEventListener('click', () => {
                dropdownBar[i].classList.toggle('open')
            })
        }
    });

    function formValidate() {
        for (const a of document.querySelectorAll(".set-user-form .invalid-feedback")) {
            a.innerHTML = "";
            a.style.display = "none";
        }

        for (const a of document.querySelectorAll(".set-user-form .invalid")) {
            a.classList.remove("invalid");
        }

        let result = true;

        // Name Validation
        let name = document.querySelector(".set-user-form input[name='name']");
        let regExpKorean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
        let regExpEnglish = /[a-z|A-Z]/;
        value = name.value;
        if (value == null || value == "" || value.length < 2 || (regExpKorean.test(value) && regExpEnglish.test(value))) {
            name.classList.add("invalid");
            let feedbackElem = name.nextElementSibling;
            feedbackElem.innerHTML = "2자 이상, 영문/한글 혼합 사용은 불가능합니다.";
            feedbackElem.style.display = "inline-block";
            result = false;
        }

        // Phone Validation
        let phone = document.querySelector(".set-user-form input[name='phone']");
        value = phone.value;
        if (value == null || value == "") {
            phone.classList.add("invalid");
            let feedbackElem = phone.nextElementSibling;
            feedbackElem.innerHTML = "입력된 내용이 없습니다.";
            feedbackElem.style.display = "inline-block";
            result = false;
        }

        // Email Validation
        let email = document.querySelector(".set-user-form input[name='email']");
        let regExpEmail = /[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]$/i;
        value = email.value;
        if (value == null || value == "" || !regExpEmail.test(value)) {
            email.classList.add("invalid");
            let feedbackElem = email.nextElementSibling;
            feedbackElem.innerHTML = "올바른 이메일 형식이 아닙니다.";
            feedbackElem.style.display = "inline-block";
            result = false;
        }

        return result;
    }

    function handleSubmit(e) {
        e.preventDefault();
        let isVerifed = formValidate();
        if (!isVerifed)
            return;

        let formData = new FormData(e.target);
        let options = {};

        axios.post(userSetUrl, formData, options)
        .then((response) => {
            if (response.status == 200) {
                let data = response.data;
                if (data.head.code == 100) {
                    // location.replace(location.href);
                    location.reload();
                } else if (data.head.code == -200) {
                    console.log("error", response);
                    let body = data.body;
                    if (body.includes("edm_id")) {
                        let edmId = document.querySelector(".set-user-form input[name='edm_id']");
                        edmId.classList.add("invalid");
                        let feedbackElem = edmId.nextElementSibling;
                        feedbackElem.innerHTML = "이미 등록된 아이디 입니다.";
                        feedbackElem.style.display = "inline-block";
                    }
                    if (body.includes("email")) {
                        let email = document.querySelector(".set-user-form input[name='email']");
                        email.classList.add("invalid");
                        let feedbackElem = email.nextElementSibling;
                        feedbackElem.innerHTML = "이미 등록된 이메일 주소입니다.";
                        feedbackElem.style.display = "inline-block";
                    }
                    if (body.includes("phone")) {
                        let phone = document.querySelector(".set-user-form input[name='phone']");
                        phone.classList.add("invalid");
                        let feedbackElem = phone.nextElementSibling;
                        feedbackElem.innerHTML = "이미 등록된 휴대폰 번호입니다.";
                        feedbackElem.style.display = "inline-block";
                    }
                } else
                    console.log("Error:", response);
            }
        })
        .catch((error) => {
            console.log("Error:", error);
        });
    }

    function previewImage(event) {
        let fileName = event.target.value;
        if (fileName == null || fileName == undefined || fileName == "")
            return;

        let fileNameArray = fileName.split(".");
        let fileExtension = fileNameArray[fileNameArray.length - 1];
        fileExtension = fileExtension.toLowerCase();
        if (fileExtension != 'jpg' && fileExtension != 'jpeg' && fileExtension != 'png' && fileExtension != 'bmp') {
            event.target.value = "";
            alert("이미지 파일만 업로드 가능합니다.");
            return;
        }

        // 파일리더 생성
        var preview = new FileReader();
        preview.onload = e => {
            // img id 값
            document.getElementById("user_image").src = e.target.result;
        };
        // input id 값
        preview.readAsDataURL(document.getElementById("user_profile_img").files[0]);
    };

    function passwordInit(id) {
        let options = {};

        axios.post(passwordInitUrl, {"user_id": id}, options)
        .then((response) => {
            if (response.status == 200) {
                let data = response.data;
                if (data.head.code == 100) {;
                    alert(data.body);
                } else {
                    console.log("Error:", response);
                    alert("error!");
                }
            }
        })
        .catch((error) => {
            console.log("Error:", error);
            alert("error!");
        });
    }

    function deleteProfileImage(id) {
        let options = {};

        axios.post(deleteUserPhotoUrl, {"user_id": id}, options)
        .then((response) => {
            if (response.status == 200) {
                location.reload();
            }
        })
        .catch((error) => {
            console.log("Error:", error);
            alert("error!");
        });
    }
</script>
@endpush