@extends('layout-membership')


@section('content')

    <div class="layout-container">
        <div class="container membership login">
            <div class="area-pages-content">
                <div class="flex-wrap">
                    @include('layouts.headers.header-membership', ['service' => $service])

                    <div class="area-membership join">
                        <h1 class="title">
                            <span>통합 회원가입</span>
                            <p>(아이엘츠인강, 아이엘츠어학원,  토익인강)</p>
                        </h1>
                        <form method="POST" action="{{ route('signup.process') }}" data-gtm-form-interact-id="0" id="signupForm">
                            @csrf
                            @isset ($provider)
                                <div class="outside outside-{{ $provider }}">
                                    {{ $provider }} 로 통합 회원가입을 진행중입니다.
                                </div>
                                <input type="hidden" name="provider" value="{{ $provider }}" />
                            @endisset
                            <div class="input-wrap">
                                <div class="input">
                                    <p class="tit"><label for="email"><i class="req">*</i>이메일</label></p>
                                    <p class="line-style">
                                        <input type="email" id="email" name="email" value="{{ ($email ?? '') ?: old('email') }}" maxlength="50" autocomplete="off" placeholder="이메일을 입력해 주세요." required {{ ($email ?? '') ? "disabled" : "" }}>
                                    </p>
                                    <div class="message error" id="emailValidMsg">@error('email') {{ $message }} @enderror</div>
                                </div>
                                @empty ( $provider )
                                    <div class="input join-pw">
                                        <p class="tit"><label for="password"><i class="req">*</i>비밀번호</label></p>
                                        <p class="line-style">
                                            <input type="password" id="password" name="password" value="{{ old('password') }}" maxlength="30" autocomplete="off" placeholder="비밀번호을 입력해 주세요." data-gtm-form-interact-field-id="1" required>
                                        </p>
                                        <div class="message error" id="passwordValidMsg">@error('password') {{ $message }} @enderror</div>
                                        <p class="line-style">
                                            <input type="password" id="passwordCheck" name="password_check" value="{{ old('password_check') }}" maxlength="30" autocomplete="off" placeholder="비밀번호를 다시 한번 입력해 주세요." required>
                                        </p>
                                        <div class="message error" id="passwordCheckMsg">@error('password_check') {{ $message }} @enderror</div>
                                    </div>
                                @endif
                                <div class="input join-name">
                                    <p class="tit"><label for="name"><i class="req">*</i>이름</label></p>
                                    <p class="line-style">
                                        <input type="text" id="name" name="name" value="{{ ($name ?? '') ?: old('name') }}" maxlength="16" autocomplete="off" placeholder="이름을 입력해 주세요." required {{ ($name ?? '') ? "disabled" : "" }}>
                                    </p>
                                    <div class="message error">@error('name') {{ $message }} @enderror</div>
                                </div>

                                <div class="input">
                                    <p class="tit"><label for="phone"><i class="req">*</i>전화번호</label></p>
                                    <p class="line-style">
                                        <select name="phone_code" id="phone_code">
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->phone_code }}" @selected($country->phone_code == 82)> {{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </p>
                                    <p class="line-style row">
                                        <input type="tel" id="phone" name="phone" value="{{ ($phone ?? '') ?: old('phone') }}" maxlength="13" autocomplete="off" placeholder="'-'없이 입력해 주세요." class="onlynumber w-70" required {{ ($phone ?? '') ? "disabled" : "" }}>
                                        <button type="button" class='button color' onclick="onSendAuthNumber()" id="btnSend">인증받기</button>
                                    </p>
                                    <p class="line-style row" id="certifyPhone" style="display: none !important">
                                        <input type="text" id="authNumber" name="authNumber" value="" maxlength="6" autocomplete="off" placeholder="인증번호를 입력하세요" class="onlynumber w-70">
                                        <button type="button" class='button color' onclick="onCheckAuthNumber()">확인</button>
                                        <span class="timer">03:00</span>
                                    </p>
                                    <div class="message error" id="phoneValidMsg">@error('phone') {{ $message }} @enderror</div>
                                </div>
                            </div>

                            <!-- 마케팅 수신 동의 -->
                            <div class="input-wrap">
                                <p class="tit">edm아이엘츠에서 제공하는 콘텐츠 안내 및 이벤트, 각종 소식 등을 받으시겠습니까?</p>
                                <div class="chk-wrap">
                                    <span class="chk">
                                        <input type="checkbox" id="agreeMail" name="agree_mail"{{ old('agree_mail') ? ' checked' : '' }}>
                                        <label for="agreeMail">이메일로받기</label>
                                    </span>
                                    <span class="chk">
                                        <input type="checkbox" id="agreeSms" name="agree_sms"{{ old('agree_sms') ? ' checked' : '' }}>
                                        <label for="agreeSms">문자로받기</label>
                                    </span>
                                </div>
                            </div>

                            <!-- 약관 및 개인정보수집동의 -->
                            <div class="input-wrap agreement">
                                <p class="tit">이용약관 및 개인정보수집 동의</p>
                                <p class="agreement-all">
                                    <span class="chk"><input type="checkbox" name="agreement" id="agreementAll"><label for="agreementAll">전체동의</label></span>
                                </p>
                                <div class="agreement-each">
                                    @foreach ( $terms as $term )
                                    <div class="terms-wrap">
                                        <p class="chk"><input type="checkbox" id="{{ $term->category }}_term" name="{{ $term->category }}_term"{{ old($term->category . '_term') ? ' checked' : '' }} value='{{ $term->id }}'><label for="{{ $term->category }}_term">[필수] {{ $term->categoryName }}</label></p>
                                        <div class="message error">@error( $term->category . '_term') {{ $message }} @enderror</div>
                                        <span class="toggle-btn">자세히보기</span>
                                        <div class="terms-detail" id="{{ $term->category }}_content">
                                            {{ $term->content }}
                                        </div>
                                    </div>
                                    @endforeach
                                    <div class="terms-wrap">
                                        <p class="chk"><input type="checkbox" id="age_term" name="age_term"{{ old('age_term') ? ' checked' : '' }}><label for="age_term">[필수] 만 14세 이상입니다.</label></p>
                                        <div class="message error">@error('age_term') {{ $message }} @enderror</div>
                                    </div>
                                </div>
                            </div>

                            <div class="button-wrap">
                                <button type="submit" class="button color wide">회원가입</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("script")
    {!! setResources(['toastui-viewer']) !!}
@endsection
@section('footer')
    @include('footer-membership')
@endsection