@extends('layout-common')

@section("css")

    {!! resource('js/user/check-validation.js') !!}
    {!! resource('js/user/signup.js') !!}
@endsection

@section('content')
    <div id="membership">
        <div class="signUp">
            <div class="max-width">
                <h1 class="pageTitle">회원가입</h1>

                <div class="join">
                    <form method="POST" action="{{ route('signup.process') }}" data-gtm-form-interact-id="0" id="signupForm">
                        @csrf
                        @isset ($provider)
                            <input type="hidden" name="provider" value="{{ $provider }}" />
                        @endisset
                        <div class="input-wrap formWrap">
                            <div class="input">
                                <p class="tit">아이디(이메일)</p>
                                <div class="inputBox">
                                    <input type="email" id="email" name="email" value="{{ ($email ?? '') ?: old('email') }}" maxlength="50" autocomplete="off" placeholder="이메일을 입력해 주세요." required {{ ($email ?? '') ? "disabled" : "" }}>
                                </div>
                                <div class="message error" id="emailValidMsg">@error('email') {{ $message }} @enderror</div>
                            </div>
                            @empty ( $provider )
                                <div class="input join-pw">
                                    <p class="tit">비밀번호</p>
                                    <div class="inputBox">
                                        <input type="password" id="password" name="password" value="{{ old('password') }}" maxlength="30" autocomplete="off" placeholder="비밀번호을 입력해 주세요." data-gtm-form-interact-field-id="1" required>
                                        <div class="message error" id="passwordValidMsg">@error('password') {{ $message }} @enderror</div>
                                    </div>

                                    <div class="inputBox">
                                        <input type="password" id="passwordCheck" name="password_check" value="{{ old('password_check') }}" maxlength="30" autocomplete="off" placeholder="비밀번호를 다시 한번 입력해 주세요." required>
                                        <div class="message error" id="passwordCheckMsg">@error('password_check') {{ $message }} @enderror</div>
                                        <span>6~15자 영문 대・소문자, 숫자, 특수문자 조합으로 입력해 주세요.</span>
                                    </div>
                                </div>
                            @endif
                            <div class="input join-name">
                                <p class="tit">이름</p>
                                <div class="inputBox">
                                    <input type="text" id="name" name="name" value="{{ ($name ?? '') ?: old('name') }}" maxlength="16" autocomplete="off" placeholder="이름을 입력해 주세요." required>
                                    <span @class(['message' => ! $isNameValid, 'error' => ! $isNameValid])>이름은 반드시 실명을 입력해 주세요.</span>
                                </div>
                                <div class="message error">
                                    @error('name') {{ $message }} @enderror
                                </div>
                            </div>

                            <div class="input phoneWrap">
                                <p class="tit">전화번호</p>
                                <div class="chk">
                                    <label><input type="checkbox" id="globalChkBtn" name=""><span>해외 국가인 경우 선택</span></label>
                                </div>
                                <div class="phoneBefore inputBox row">
                                    <div class="global">

                                        <!-- select -->
                                        <div class="dropDownMenu type2">
                                            <div class="selectBox">
                                                <button type="button" class="label" data-selected="선택" data-default="선택">선택</button>
                                                <input type="hidden" name="phone_code" id="phone_code" value="82" />
                                                <div class="optionListWrap">
                                                    <div class="scrollWidth">
                                                        <ul class="optionList scrollWrap">
                                                            @foreach ($countries as $country)
                                                                @if ($country->phone_code == 82)
                                                                    @continue
                                                                @endif
                                                                <li class="optionItem"><button type="button" data-account="{{ $country->phone_code }}">+{{ $country->phone_code }}) {{ $country->name }}</button></li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <label class="domestic">
                                        <input type="tel" id="phone" name="phone" value="{{ ($phone ?? '') ?: old('phone') }}" maxlength="13" autocomplete="off" placeholder="번호를 입력해 주세요.('-'제외)" class="onlynumber w-70" required {{ ($phone ?? '') ? "disabled" : "" }}>
                                    </label>
                                </div>
                                <div class="certifyPhone">
                                    <div class="inputBox row" id="certifyPhone">
                                        <label>
                                            <input type="text" id="authNumber" name="authNumber" value="" maxlength="6" autocomplete="off" placeholder="인증번호를 입력해 주세요." class="onlynumber w-70" required>
                                            <span class="timer">3분 00초</span>
                                        </label>
                                        <button type="button" class='btn-signup btnSend' onclick="onSendAuthNumber()" disabled>전송</button>
                                    </div>
                                </div>

                                <div class="message error" id="phoneValidMsg">@error('phone') {{ $message }} @enderror</div>
                            </div>
                        </div>

                        <div class="agreementWrap">
                            <div class="chk-all">
                                <label><input type="checkbox" type="checkbox" name="agreement" id="agreementAll"><span>회원가입을 위한 약관 전체 동의</span></label>
                            </div>
                            <div class="chk-list">
                                @foreach ( $terms as $term )
                                    <div class="terms-wrap">
                                        <div class="terms-header">
                                            <button type="button" @class(["toggle-btn", 'move' => $term->status == 1]) @if ($term->status == 1) onclick="onTerms('{{ $term->category }}')" @endif><span>자세히보기</span></button>
                                            <label>
                                                <input type="checkbox" id="{{ $term->category }}_term" name="{{ $term->category }}_term"{{ old($term->category . '_term') ? ' checked' : '' }} value='{{ $term->id }}' data-is-required="{{ $term->status }}">
                                                <span>{{ $term->categoryName }}({{ $term->status == 1 ? "필수" : "선택" }})</span>
                                            </label>
                                        </div>
                                        <div class="message error">@error( $term->category . '_term') {{ $message }} @enderror</div>

                                        @if ($term->status > 1)
                                            <div class="terms-detail" id="{{ $term->category }}_content">
                                                <div class="scrollWrap terms-viewer" id="{{ $term->category }}_viewer" >{{ $term->content }}</div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                                <!-- 마케팅 활용 동의 및 광고 수신 동의(선택) end -->
                                <div class="terms-wrap">
                                    <label>
                                        <input type="checkbox" id="age_term" name="age_term"{{ old('age_term') ? ' checked' : '' }} data-is-required="1">
                                        <span>만 14세 이상입니다(필수)</span>
                                    </label>
                                    <div class="message error">@error('age_term') {{ $message }} @enderror</div>
                                </div>
                            </div>
                        </div>

                        <div class="button-wrap">
                            <button type="submit" class="submitBtn" disabled>가입 완료</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("script")
    {!! setResources(['toastui-viewer']) !!}
    <script>
        $(function() {
            let viewers = [];
            $('.terms-viewer').each(function(index) {
                viewers[index] = new toastui.Editor({
                    el : document.getElementById($(this).attr("id")),
                    initialValue : $(this).text()
                })
            })
        })

        function onTerms(category) {
            const href = "{{ route('term', ':category') }}";
            window.open(href.replace(':category', category.toLowerCase()));
        }
    </script>
@endsection