@extends("domains.common.layouts.layout-popup")
@section("header")
@vite([
    'resources/js/domains/common/kakaoPost.js'
])
<style>
    .invalid-feedback {
        color: red;
    }
</style>
@endsection
@section("main-content")
<div class="window-popup">
    <div class="window-popup-titleBox">
        <h2>회원 등록</h2>
        <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
    </div>
    <div class="window-popup-con">
        <p class="mb-1">회원을 등록합니다. <br>등록 이후에는 삭제가 불가합니다.</p>
        <form class="needs-validation register-user-form" action="" onsubmit="handleSubmit(event)" novalidate>
            <div class="user-add-popup-row  flex-box">
                <div class="flex-box w50" style="align-items: center">
                    <h3 class="req">활성 구분</h3>
                    <div>
                        <span class="form-check form-check-inline">
                            <input type="radio" id="customRadio3" name="activated" value=1 class="form-check-input" checked>
                            <label class="form-check-label" for="customRadio3">활성</label>
                        </span>
                    </div>
                </div>
                <div class="w50 flex-box radio-select" style="align-items: center">
                    <h3 class="req">회원 구분</h3>
                    <div>
                        <span class="form-check form-check-inline">
                            <input type="radio" id="customRadio5" name="role" value="학생" class="form-check-input" checked>
                            <label class="form-check-label" for="customRadio5">학생</label>
                        </span>
                        <span class="form-check form-check-inline">
                            <input type="radio" id="customRadio4" name="role" value="직원" class="form-check-input">
                            <label class="form-check-label" for="customRadio4">직원</label>
                        </span>
                    </div>
                </div>
            </div>
            <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 invalid" id="validationCustom01" name="edm_id" placeholder="6~12자의 영문, 숫자, 특수기호 - 만 사용 가능" required>
                        {{-- <div class="flex-box">
                            <input type="text" class="form-control" id="validationCustom01" placeholder="6~12자의 영문, 숫자, 특수기호 - 만 사용 가능" required>
                            <button class="btn btn-primary" type="button">중복확인</button>
                        </div> --}}
                        <div class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="input-wrapper mb-3">
                    <label class="form-label req" for="validationCustom02">비밀번호</label>
                    <div>
                        <input type="text" class="form-control invalid" id="validationCustom02" name="password" placeholder="6자 이상 영문, 대/소문자, 숫자, 특수문자 사용 가능" required>
                        <div class="invalid-feedback"></div>
                    </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글자 이상, 영문/한글 혼합 사용 불가" required autocomplete='off'>
                        <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="숫자만 입력 가능" required oninput="oninputPhone(this)" maxlength="13" autocomplete='off'>
                        <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="이메일 주소를 입력해 주세요." required autocomplete='off'>
                        <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="">국가 선택</option>
                            @foreach ($countries as $country)
                                <option value="{{ $country->id }}" @selected($country->name == "대한민국")>{{ $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="" 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="" readonly="">
                        <input type="text" id="validationCustom07-2" class="form-control" name="address_detail" value="" placeholder="상세를 입력해 주세요.">
                    </div>
                </div>
                <div class="example-select-box student active">
                    <div class="input-wrapper mb-3">
                        <label class="form-label" for="validationCustom08">카카오톡ID</label>
                        <div>
                            <input type="text" id="validationCustom08" name="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="">담당자명</option>
                                @foreach ($staffs as $staff)
                                    <option value="{{ $staff->id }}" @selected($staff->id == \Auth::user()->id)>{{ $staff->name }}</option>
                                @endforeach
                            </select>
                        </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 class="input-wrapper mb-3 example-select-box staff">
                    <label class="form-label req" for="example-select1">부서</label>
                    <div>
                        <select class="form-select invalid"  id="example-select1" name="team_id">
                            <option value="">부서명</option>
                            @foreach ($teams as $team)
                                <option value="{{ $team->id }}" @selected($team->id == \Auth::user()?->team_id)>{{ $team->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="invalid-feedback"></div>
                </div>
            </div>
            <div class="text-center">
                <button class="button btn-style-1" type="submit">등록</button>
            </div>
        </form>

    </div>
</div>

@endsection
@push("script")
<script>
    window.addEventListener("load", () => {
        const $radioSelect = document.querySelectorAll('.radio-select input');
        const $exampleSelectBox = document.querySelectorAll('.example-select-box');
        const $requiredElements = document.querySelectorAll(".invalid");

        for (let i = 0; i < $radioSelect.length; i++) {
            $radioSelect[i].addEventListener('input', ()=> {
                for (const $exampleSelectBoxAll of $exampleSelectBox) {
                    $exampleSelectBoxAll.classList.remove('active')
                }
                $exampleSelectBox[i].classList.add('active')

                let userOptionFields = null;
                if ($exampleSelectBox[i].classList.contains("student"))
                    userOptionFields = document.querySelectorAll('.example-select-box.staff input, .example-select-box.staff select');
                else if ($exampleSelectBox[i].classList.contains("staff"))
                    userOptionFields = document.querySelectorAll('.example-select-box.student input, .example-select-box.student select');

                if (userOptionFields != null && userOptionFields.length > 0) {
                    for (const userOptionField of userOptionFields) {
                        userOptionField.value = "";
                    }
                }
            })
        }

        for (const elem of $requiredElements) {
            elem.addEventListener("change", function(e) {
                e.target.classList.add("invalid");
            });
        }

        fitWindowSize();
    });

    function handleSubmit(e) {
        e.preventDefault();

        let isVerifed = addUserFormValidate();
        if (!isVerifed)
            return;

        let formData = new FormData(e.target);
        // let bodyData = Object.fromEntries(formData.entries());
        let options = {
            // headers: {
            //     "X-CSRF-TOKEN": edmClassCsrf
            // }
        };

        let registerUrl = "{{ route('api.user.set') ?? '' }}";
        axios.post(registerUrl, formData, options).then((response) => {
            if (response.status == 200) {
                let data = response.data;
                if (data.head.code == 100) {
                    alertify.alert("성공", "등록이 완료되었습니다.", () => {
                        opener.location.reload();
                        window.close();
                    });
                } else if (data.head.code == -200) {
                    let body = data.body;
                    if (body.includes("edm_id")) {
                        let edmId = document.querySelector("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("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("input[name='phone']");
                        phone.classList.add("invalid");
                        let feedbackElem = phone.nextElementSibling;
                        feedbackElem.innerHTML = "이미 등록된 휴대폰 번호입니다.";
                        feedbackElem.style.display = "inline-block";
                    }
                }
            }
        }).catch((error) => {
            console.log("Error:", error);
        });
    }

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

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

        let result = true;
        // ID Validation
        let edmId = document.querySelector("input[name='edm_id']");
        let regExpId = /^[a-z]+[a-z0-9\-]{6,12}$/g;
        let value = edmId.value;
        if (value == null || value == "" || !regExpId.test(value)) {
            edmId.classList.add("invalid");
            let feedbackElem = edmId.nextElementSibling;
            feedbackElem.innerHTML = "6~12자의 영문, 숫자, 특수기호 - 만 사용 가능합니다.";
            feedbackElem.style.display = "inline-block";
            result = false;
        }

        // Password Validation
        let password = document.querySelector("input[name='password']");
        let regExpPassword = /^.*(?=^.{6,20}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[`~!@#$%^&*()_+-={}[\]\\|'";:,./<>?]).*$/;
        value = password.value;
        if (value == null || value == "" || !regExpPassword.test(value)) {
            password.classList.add("invalid");
            let feedbackElem = password.nextElementSibling;
            feedbackElem.innerHTML = "6자 이상의 영문, 숫자, 특수기호만 사용 가능합니다.";
            feedbackElem.style.display = "inline-block";
            result = false;
        }

        // Name Validation
        let name = document.querySelector("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("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("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;
        }

        // Team Validation if role is "staff"
        let role = document.querySelector("input[name='role']:checked");
        if (role.value == "staff") {
            let teamId = document.querySelector("select[name='team_id']");
            value = teamId.value;
            if (value == null || value == undefined || value == "") {
                teamId.classList.add("invalid");
                let feedbackElem = teamId.nextElementSibling;
                feedbackElem.innerHTML = "선택된 항목이 없습니다.";
                feedbackElem.style.display = "inline-block";
                result = false;
            }
        }

        return result;
    }
</script>
@endpush