document.addEventListener("DOMContentLoaded", () => {

    // 아이디 중복 체크
    const btn_id_check = document.querySelector("#btn_id_check")
    btn_id_check.addEventListener("click", () => {
        const f_id = document.querySelector("#f_id")

        if (f_id.value.trim() === '') {
            alert('아이디를 입력해 주세요');
            f_id.focus();
            return;
        }


        // AJAX
        const f1 = new FormData()
        f1.append('id', f_id.value)
        f1.append('mode', 'id_chk')

        const xhr = new XMLHttpRequest()
        xhr.open("POST", "/member/pg/member_process.php", true); //절대경로

        xhr.send(f1)

        xhr.onload = () => {
            if (xhr.status == 200) {
                const data = JSON.parse(xhr.responseText)
                if (data.result == 'success') {
                    alert('사용이 가능한 아이디입니다.')
                    document.input_form.id_chk.value = "1"
                } else if (data.result == 'fail') {
                    alert('이미 사용 중인 아이디입니다. 다른 아이디를 입력해 주세요.')
                    document.input_form.id_chk.value = "0"
                    f_id.value = ''
                    f_id.focus()
                } else if (data.result == 'empty_id') {
                    alert('아이디가 입력되지 않았습니다.')
                    f_id.focus()
                }
            }
        }

    })

    // Email 중복 체크
    const btn_email_check = document.querySelector("#btn_email_check")
    btn_email_check.addEventListener("click", () => {
        const f_email = document.querySelector("#f_email")

        if (f_email.value.trim() === '') {
            alert('이메일을 입력해 주세요');
            f_email.focus();
            return;
        }


        // AJAX
        const f1 = new FormData()
        f1.append('email', f_email.value)
        f1.append('mode', 'email_chk')

        const xhr = new XMLHttpRequest()
        xhr.open("POST", "/member/pg/member_process.php", true); //절대경로

        xhr.send(f1)

        xhr.onload = () => {
            if (xhr.status == 200) {
                const data = JSON.parse(xhr.responseText)
                if (data.result == 'success') {
                    alert('사용이 가능한 이메일입니다.')
                    document.input_form.email_chk.value = "1"
                } else if (data.result == 'fail') {
                    alert('이미 사용 중인 이메일입니다. 다른 이메일을 입력해 주세요.')
                    document.input_form.email_chk.value = "0"
                    f_email.value = ''
                    f_email.focus()
                } else if (data.result == 'empty_id') {
                    alert('이메일이 입력되지 않았습니다.')
                    f_email.focus()
                }
            }
        }

    })


    // 가입 버튼 클릭 시 비밀번호 일치 체크
    const btn_submit = document.querySelector("#btn_submit")
    btn_submit.addEventListener("click", () => {
        const f = document.input_form
        if (f.id.value == '') {
            alert('아이디를 입력해 주세요.')
            f.id.focus()
            return false
        }
        // 아이디 중복 체크 여부
        if (f.id_chk.value == 0) {
            alert('아이디 중복확인이 필요합니다.')
            return false
        }
        // 비밀번호 입력 여부
        if (f.f_pwd.value == '') {
            alert('비밀번호를 입력하세요.')
            f.f_pwd.focus()
            return false
        }
        if (f.f_pwd2.value == '') {
            alert('비밀번호 확인이 필요합니다.')
            f.f_pwd2.focus()
            return false
        }

        // 비밀번호 일치 여부
        if (f.f_pwd.value != f.f_pwd2.value) {
            alert('비밀번호가 일치하지 않습니다.')
            //f.f_pwd.value = ''
            f.f_pwd2.value = ''
            f.f_pwd2.focus()
            return false
        }

    })

    // 우편번호 찾기

    const btn_zipcode = document.querySelector("#btn_zipcode")
    btn_zipcode.addEventListener("click", () => {
        new daum.Postcode({
            oncomplete: function (data) {

                console.log(data)
                let addr = ''
                let extra_addr = ''

                //기본 주소
                if (data.userSelectedType === 'J') {
                    addr = data.jibunAddress
                } else if (data.userSelectedType === 'R') {
                    addr = data.roadAddress
                }

                // 동/리 (법정동명)
                if (data.bname !== '') {
                    extra_addr = data.bname
                }
                // 건물명
                if (data.buildingName !== '') {
                    if (extra_addr === '') {
                        extra_addr = data.buildingName
                    } else {
                        extra_addr += ',' + data.buildingName
                    }
                    // 괄호 추가
                    if (extra_addr !== '') {
                        extra_addr = ' (' + extra_addr + ')'
                    }
                }
                // 주소 + 참고항목
                const f_addr1 = document.querySelector("#f_addr1")
                f_addr1.value = addr + extra_addr
                // 우편번호 입력
                const f_zipcode = document.querySelector("#f_zipcode")
                f_zipcode.value = data.zonecode

                const f_addr2 = document.querySelector("#f_addr2")
                f_addr2.focus()
            }
        }).open();
    })

    const f_photo = document.querySelector("#f_photo")
    f_photo.addEventListener("change", (e) => {
        //console.log(e)
        const reader = new FileReader()
        reader.readAsDataURL(e.target.files[0])

        reader.onload = function (event) {
            // console.log(event)
            // const img = document.createElement("img")
            // img.setAttribute("src", event.target.result)
            // document.querySelector("#f_preview").appendChild(img)
            const f_preview = document.querySelector("#f_preview")
            f_preview.setAttribute("src", event.target.result)
        }
    })
})