@extends("common.layout")

@section("header")
{!! resource('js/common/kakaoPost.js') !!}
@endsection

@section("content")

<form method="post" class="default register-user-form" action="{{ route('api.user.create') }}">
    @csrf
    <h1>
        회원 등록

        <div class="fixed-btns d-flex align-items-center">
            <div class="form-check form-switch me-2">
                <input class="form-check-input" type="checkbox" role="switch" id="activated" name="activated" value="1" checked>
                <label class="form-check-label" for="activated">활성</label>
            </div>

            <button class="btn btn-primary" type="submit">확인</button>
        </div>
    </h1>

    <div class="alert alert-info" role="alert">
        등록 이후에는 삭제가 되지 않습니다.
    </div>

    <div class="layout-2-cols">
        <section>
            <header>
                기본정보
            </header>

            <main>
                <div class="row g-2 mt-0">
                    <div class="col">
                        <label class="form-label required">역할</label>
                        <div>
                            <input type="radio" class="btn-check" name="role" id="role0" autocomplete="off" value="student" @checked((old('role')=='student') or empty(old('student')))>
                            <label class="btn btn-outline-secondary" for="role0">학생</label>
    
                            @if($User->role->name == 'root')
                                @foreach ($roles as $role)
                                    <input type="radio" class="btn-check" name="role" id="role{{ $role->id }}" autocomplete="off" value="{{ $role->name }}" @checked(old('role')==$role->name)>
                                    <label class="btn btn-outline-secondary" for="role{{ $role->id }}">{{ $role->name }}</label>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>

                <div class="row g-2">
                    <div class="col">
                        <label for="name" class="form-label required">이름</label>
                        <div>
                            <input type="text" class="form-control" name="name" id="name" placeholder="2글자 이상, 영문/한글 혼합 사용 불가" required autocomplete='off' value="{{ old('name') }}">
                            @error('name')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col">
                        <label for="edm_id" class="form-label required">아이디</label>
                        <div>
                            <input type="text" class="form-control" id="edm_id" name="edm_id" placeholder="6~12자의 영문, 숫자, 특수기호 - 만 사용 가능" required value="{{ old('edm_id') }}">
                            @error('edm_id')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                    
                <div class="row g-2">
                    <div class="col">
                        <label class="form-label required" for="phone">휴대폰</label>
                        <div class="input-group">
                            <select class="form-select" id="phone_code" name="phone_code" style="flex: 0 0 120px">
                                <option value="">국가번호</option>
                                @foreach ($countries as $country)
                                    @if ($country->phone_code and $country->iso_code!='CA')
                                    <option value="{{ $country->phone_code }}" @selected($country->phone_code == '82' or (!empty(old('phone_code')) and old('phone_code')==$country->phone_code))>{{ $country->phone_code }} ({{ $country->iso_code }})</option>
                                    @endif
                                @endforeach
                            </select>

                            <input type="text" class="form-control" id="phone" name="phone" placeholder="숫자만 입력 가능" required oninput="oninputPhone(this)" maxlength="13" autocomplete='off' value="{{ old('phone') }}">
                        </div>
                        @error('phone')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col">
                        <label class="form-label required" for="password">비밀번호</label>
                        <div>
                            <input type="text" class="form-control" id="password" name="password" placeholder="6자 이상 영문, 대/소문자, 숫자, 특수문자 사용 가능" required value="{{ old('password') }}">
                            @error('password')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row g-2">
                    <div class="col">
                        <label class="form-label required" for="email">이메일</label>
                        <div>
                            <input type="text" class="form-control" id="email" name="email" placeholder="이메일 주소를 입력해 주세요." required autocomplete='off' value="{{ old('email') }}">
                            @error('email')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </main>
        </section>

        <div>
            <section>
                <header>주소</header>
                
                <main>
                    <div class="input-group mb-1">
                        <select class="form-select" id="country" name="country_id">
                            <option value="">국가 선택</option>
                            @foreach ($countries as $country)
                                <option value="{{ $country->id }}" @selected($country->name == "대한민국" or old('country_id')==$country->id)>{{ $country->name }}</option>
                            @endforeach
                        </select>
                        <input type="text" id="validationCustom07" class="form-control" name="zip_code" placeholder="우편번호를 검색해 주세요." readonly="" value="{{ old('zip_code') }}">
                        <input type="button" class="btn btn-outline-secondary kakao-post-code-btn" value="우편번호" onclick="execKakaoPostcode()">
                    </div>
                    <input type="text" class="mb-1 form-control" id="validationCustom07-1" name="address" readonly="" value="{{ old('address') }}">
                    <input type="text" id="validationCustom07-2" class="form-control" name="address_detail" placeholder="상세를 입력해 주세요." value="{{ old('address_detail') }}">
                </main>
            </section>

            <section class="mt-3" id="student">
                <header>학생 추가정보</header>

                <main>
                    <div>
                        <label class="form-label" for="kakao_id">카카오톡ID</label>
                        <div>
                            <input type="text" class="form-control" id="kakao_id" name="kakao_id" placeholder="카카오톡 ID를 입력해 주세요." value="{{ old('kakao_id') }}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="charged_by">담당자</label>
                        <div>
                            <select class="form-select" id="charged_by" 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="form-group">
                        <label class="form-label">마케팅 수신 동의</label>
                        <div class="form-check-wrap">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="check-email" name="is_accepted_email" value="1" @checked(old('is_accepted_email'))>
                                <label class="form-check-label" for="check-email">이메일</label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="check-sms" name="is_accepted_phone" value="1" @checked(old('is_accepted_phone'))>
                                <label class="form-check-label" for="check-sms">문자</label>
                            </div>
                        </div>
                    </div>
                </main>
            </section>
        </div>
    </div>
</form>

@endsection

@push("script")
<script>
    const countrySelect = document.getElementById('country');
    const zipCodeInput = document.getElementById('validationCustom07');
    const addressInput = document.getElementById('validationCustom07-1');
    const postCodeBtn = document.querySelector('.kakao-post-code-btn');

    window.addEventListener("load", () => {
        const $roleSelect = document.querySelectorAll("input[name='role']");
        const $studentInputs = document.querySelectorAll("#student input, #student select");

        $roleSelect.forEach(function(input) {
            input.addEventListener('change', function() {
                if (input.value == 'student') { // student
                    document.querySelector("#student").classList.remove("d-none");
                } else {
                    if ($studentInputs != null && $studentInputs.length > 0) {
                        for (const studentInput of $studentInputs) {
                            studentInput.value = "";
                        }
                    }

                    document.querySelector("#student").classList.add("d-none");
                }
              
            });
        });

        countrySelect.addEventListener('change', updateZipCodeField);
    });

    function updateZipCodeField() {
        if (countrySelect.value === '30') {
            zipCodeInput.readOnly = true;
            addressInput.readOnly = true;
            postCodeBtn.disabled = false;
            zipCodeInput.placeholder = "우편번호를 검색해 주세요.";
        } else {
            zipCodeInput.readOnly = false;
            zipCodeInput.placeholder = "우편번호";
            addressInput.readOnly = false;
            postCodeBtn.disabled = true;
            //zipCodeInput.value = '';
            //addressInput.value = '';
            addressInput.placeholder = '주소를 입력해 주세요.';
        }
    }
</script>
@endpush