@extends('layout-membership')


@section('content')
    <div class="layout-container">
        <div class="container membership login">
            <div class="area-pages-content">
                <div class="flex-wrap">
                    <div class="login-edm-logo-wrap">
                        <a href="/"><img class="login-edm-logo" src="{{ env('AWS_S3_IMG_URL') }}/common/logo.svg"></a>
                    </div>
                    <div class="area-membership join">
                        <h1 class="title">
                            <span>통합 회원가입</span>
                            <p>(아이엘츠인강, 아이엘츠어학원,  토익인강)</p>
                        </h1>
                        <form method="POST" action="/signup" data-gtm-form-interact-id="0">
                            @csrf
                            <div class="input-wrap">
                                <div class="input join-id">
                                    <p class="tit"><label for="id"><i class="req">*</i>아이디</label></p>
                                    <p class="line-style">
                                        <input type="text" id="id" name="id" value="{{ old('id') }}" maxlength="12" autocomplete="off" autofocus placeholder="사용하실 아이디를 입력해 주세요." data-gtm-form-interact-field-id="0" required>
                                    </p>
                                    <div class="message error" id="idValidMsg">@error('id') {{ $message }} @enderror</div>
                                </div>
                                <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>
                                <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="{{ old('name') }}" maxlength="16" autocomplete="off" placeholder="이름을 입력해 주세요." required>
                                    </p>
                                    <div class="message error">@error('name') {{ $message }} @enderror</div>
                                </div>
                                <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="{{ old('email') }}" maxlength="50" autocomplete="off" placeholder="이메일을 입력해 주세요." required>
                                    </p>
                                    <div class="message error" id="emailValidMsg">@error('email') {{ $message }} @enderror</div>
                                </div>
                                <div class="input">
                                    <p class="tit"><label for="phone"><i class="req">*</i>전화번호</label></p>
                                    <p class="line-style">
                                        <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" maxlength="13" autocomplete="off" placeholder="'-'없이 입력해 주세요." class="onlynumber" required>
                                    </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">
                                            {{-- 240723 이희선 추후 약관 컨텐츠 보고 디테일 css 추가예정 --}}
                                            {{ $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']) !!}
    <script>
        $(function(){
            $.each($('.terms-detail'), function() {
                new toastui.Editor({
                    el: document.getElementId( $(this).attr('id')),
                    viewer: true,
                    initialValue : $(this).text()
                })
            })
        })
    </script>
@endsection
@section('footer')
    @include('footer-membership')
@endsection