@extends('ielts.layout')

@section('ielts-css')
{!! resource('css/common/leveltest.css') !!}
@endsection

@section('ielts-content')

    <div id="wrap" class="level-test intro">
        <div class="contents">
            <div class="pageTitle">
                <h1>레벨 테스트</h1>
            </div>

            <div class="innerArea max-width">
                <!-- 배너 -->
                <div class="bannerWrap">
                    <picture class="banner">
                        <source srcset="{{ env('AWS_S3_IMG_URL') }}/common/level-test/level-test-banner-pc.png" media="(min-width: 1200px)">
                        <source srcset="{{ env('AWS_S3_IMG_URL') }}/common/level-test/level-test-banner-tablet.png" media="(min-width: 576px)">
                        <img src="{{ env('AWS_S3_IMG_URL') }}/common/level-test/level-test-banner.png" alt="응시 완료시 수강할인권 제공">
                    </picture>
                </div>

                <div class="imgWrap">
                    <p class="txt1 paperlogy">현재 나의 아이엘츠 <br class="mo_tab-br">실력을 확인해보세요!</p>
                    <h2 class="paperlogy">무료레벨 <br class="mo_tab-br">테스트 <span>온라인</span></h2>
                    <picture class="img">
                        <source srcset="{{ env('AWS_S3_IMG_URL') }}/common/level-test/level-test-intro-img-pc.png" media="(min-width: 1200px)">
                        <source srcset="{{ env('AWS_S3_IMG_URL') }}/common/level-test/level-test-intro-img-tablet.png" media="(min-width: 576px)">
                        <img src="{{ env('AWS_S3_IMG_URL') }}/common/level-test/level-test-intro-img.png" alt="성공적인 아이엘츠를 위한 첫걸음">
                    </picture>
                </div>

                <div class="bottom-fix-btn">
                    <a href="javascript:start()" class="btn">레벨테스트 시작</a>
                </div>
            </div>
        </div>
    </div>

	<div id="wrap" class="level-test exam">
		<div class="contents">
            <div class="pageTitle">
                <h1>레벨 테스트</h1>
            </div>
			<div class="innerArea max-width">
                <form action="{{ route('leveltest-process', ['service' => $service]) }}" method="post" name="examFrm">
                    @csrf
                    <ul class="sequence flex">
                        <li class="active" data-page="1"><span>Step1</span>준비</li>
                        <li data-page="2"><span>Step2</span>어휘테스트</li>
                        <li data-page="3"><span>Step3</span>영작테스트</li>
                        <li data-page="4"><span>Step4</span>결과제출</li>
                    </ul>
                    <div class="pageWrap">
                        <div class="selectWrap active" data-page="1">
                            <h2 class="first">
                                @isset($member_name)<strong>{{ $member_name }}</strong> @endisset회원님께 적합한 추천 강좌와 레벨을 <br>제시해 드리기 위한 사전 조사 단계입니다.
                            </h2>
                            <div class="q-box">
                                <p class="q">학습 모듈을 선택해 주세요.</p>
                                <div class="a">
                                    <label><input type="radio" name="q_module" value="아카데믹"><span>Academic</span></label>
                                    <label><input type="radio" name="q_module" value="제너럴"><span>General</span></label>
                                </div>
                            </div>
                            <div class="q-box">
                                <p class="q">목표 점수를 선택해 주세요.</p>
                                <div class="a col4-pc">
                                    <label><input type="radio" name="q_goal_score" value="5.0미만"><span>5.0 미만</span></label>
                                    <label><input type="radio" name="q_goal_score" value="5.0~6.0"><span>5.0 - 6.0</span></label>
                                    <label><input type="radio" name="q_goal_score" value="6.0~7.0"><span>6.0 - 7.0</span></label>
                                    <label><input type="radio" name="q_goal_score" value="7.0~8.0"><span>7.0 - 8.0</span></label>
                                </div>
                            </div>
                        </div>
                        <div class="selectWrap" data-page="2">
                            <div class="innerWrap">
                                <h2><b>Q. 1–4</b> Match the words with their correct definitions from the list given below.</h2>
                                <div class="q-box">
                                    <p class="q">Q1</p>
                                    <div class="q-view roundBox">경험</div>
                                    <div class="a col2">
                                        <label><input type="radio" name="q_1" value="experience"><span>1.experience</span></label>
                                        <label><input type="radio" name="q_1" value="pleasant"><span>2.pleasant</span></label>
                                        <label><input type="radio" name="q_1" value="express"><span>3.express</span></label>
                                        <label><input type="radio" name="q_1" value="useful"><span>4.useful</span></label>
                                    </div>
                                    <div class="message error">답안을 선택해 주세요.</div>
                                </div>
                                <div class="q-box">
                                    <p class="q">Q2</p>
                                    <div class="q-view roundBox">환경</div>
                                    <div class="a col2">
                                        <label><input type="radio" name="q_2" value="pollution"><span>1.pollution</span></label>
                                        <label><input type="radio" name="q_2" value="social"><span>2.social</span></label>
                                        <label><input type="radio" name="q_2" value="environment"><span>3.environment</span></label>
                                        <label><input type="radio" name="q_2" value="nature"><span>4.nature</span></label>
                                    </div>
                                    <div class="message error">답안을 선택해 주세요.</div>
                                </div>
                                <div class="q-box">
                                    <p class="q">Q3</p>
                                    <div class="q-view roundBox">교통체증</div>
                                    <div class="a col2">
                                        <label><input type="radio" name="q_3" value="public transit"><span>1.public transit</span></label>
                                        <label><input type="radio" name="q_3" value="traffic rules"><span>2.traffic rules</span></label>
                                        <label><input type="radio" name="q_3" value="traffic violation"><span>3.traffic violation</span></label>
                                        <label><input type="radio" name="q_3" value="traffic congestion"><span>4.traffic congestion</span></label>
                                    </div>
                                    <div class="message error">답안을 선택해 주세요.</div>
                                </div>
                                <div class="q-box">
                                    <p class="q">Q4</p>
                                    <div class="q-view roundBox">외국어</div>
                                    <div class="a col2">
                                        <label><input type="radio" name="q_4" value="second Language"><span>1.second Language</span></label>
                                        <label><input type="radio" name="q_4" value="foreign language"><span>2.foreign language</span></label>
                                        <label><input type="radio" name="q_4" value="language school"><span>3.language school</span></label>
                                        <label><input type="radio" name="q_4" value="native language"><span>4.native language</span></label>
                                    </div>
                                    <div class="message error">답안을 선택해 주세요.</div>
                                </div>
                            </div>
                            <div class="innerWrap text">
                                <h2><b>Q. 5–7</b> Write the given Korean words in English.</h2>
                                <div class="q-box">
                                    <p class="q">Q5</p>
                                    <div class="q-view roundBox">야채</div>
                                    <div class="a text roundBox">
                                        <label><input type="text" name="q_5" placeholder="답안을 입력해 주세요." maxlength="20" value="" autocomplete="off"><div class="message error">답안을 입력해 주세요.</div></label>
                                        <label class="btn"><input type="checkbox"><span>모르겠음</span></label>
                                    </div>
                                </div>
                                <div class="q-box">
                                    <p class="q">Q6</p>
                                    <div class="q-view roundBox">실업</div>
                                    <div class="a text roundBox">
                                        <label><input type="text" name="q_6" placeholder="답안을 입력해 주세요." maxlength="20" value="" autocomplete="off"><div class="message error">답안을 입력해 주세요.</div></label>
                                        <label class="btn"><input type="checkbox"><span>모르겠음</span></label>
                                    </div>
                                </div>
                                <div class="q-box">
                                    <p class="q">Q7</p>
                                    <div class="q-view roundBox">정부</div>
                                    <div class="a text roundBox">
                                        <label><input type="text" name="q_7" placeholder="답안을 입력해 주세요." maxlength="20" value="" autocomplete="off"><div class="message error">답안을 입력해 주세요.</div></label>
                                        <label class="btn"><input type="checkbox"><span>모르겠음</span></label>
                                    </div>
                                </div>
                            </div>
                            <div class="innerWrap">
                                <h2><b>Q. 8</b> Choose TWO words related to the given vocabulary.</h2>
                                <div class="q-box">
                                    <p class="q">Q1</p>
                                    <div class="q-view roundBox">Health</div>
                                    <div class="a col2 col3-pc maximum2">
                                        <label><input type="checkbox" name="q_8[]" value="obesity"><span>obesity</span></label>
                                        <label><input type="checkbox" name="q_8[]" value="achievement"><span>achievement</span></label>
                                        <label><input type="checkbox" name="q_8[]" value="urbanization"><span>urbanization</span></label>
                                        <label><input type="checkbox" name="q_8[]" value="crime"><span>crime</span></label>
                                        <label><input type="checkbox" name="q_8[]" value="punish"><span>punish</span></label>
                                        <label><input type="checkbox" name="q_8[]" value="stress"><span>stress</span></label>
                                    </div>
                                    <div class="message error">답안을 2개 선택해 주세요.</div>
                                </div>
                            </div>
                        </div>
                        <div class="selectWrap" data-page="3">
                            <h2 class="writing"><b>For each question, complete the second so that it means the same as the first, using no more than three words</b> <em>ex) This novel is by Joan Brady./ Joan Brady is the author of this novel.</em></h2>
                            <div class="q-box">
                                <p class="q">Q9</p>
                                <div class="writing roundBox">
                                    <div class="w-q">My sister has borrowed the novel from me.</div>
                                    <div class="w-a">
                                        <div class="line">I <input type="text" maxlength="150" name="q_9" placeholder="답안을 입력해 주세요." autocomplete="off"></div>
                                        my sister the novel.
                                    </div>
                                </div>
                                <div class="message error">답안을 입력해 주세요.</div>
                            </div>
                            <div class="q-box">
                                <p class="q">Q10</p>
                                <div class="writing roundBox">
                                    <div class="w-q">She hasn't read a novel by Joan Brady before.</div>
                                    <div class="w-a">
                                        <div class="line">This is <input type="text" maxlength="150" name="q_10" placeholder="답안을 입력해 주세요." autocomplete="off"></div>
                                        novel by joan Brady that she has read.
                                    </div>
                                </div>
                                <div class="message error">답안을 입력해 주세요.</div>
                            </div>
                            <div class="q-box">
                                <p class="q">Q11</p>
                                <div class="writing roundBox">
                                    <div class="w-q">The novel is longer than Joan Brady's other books.</div>
                                    <div class="w-a">
                                        Joan Brady's other books are not as
                                        <div class="line"><input type="text" maxlength="150" name="q_11" placeholder="답안을 입력해 주세요." autocomplete="off">this one.</div>
                                    </div>
                                </div>
                                <div class="message error">답안을 입력해 주세요.</div>
                            </div>
                            <div class="q-box">
                                <p class="q">Q12</p>
                                <div class="writing roundBox">
                                    <div class="w-q">How much does the novel cost?</div>
                                    <div class="w-a">
                                        <div class="line">What is <input type="text" maxlength="150" name="q_12" placeholder="답안을 입력해 주세요." autocomplete="off"></div>
                                        the novel.
                                    </div>
                                </div>
                                <div class="message error">답안을 입력해 주세요.</div>
                            </div>
                            <div class="q-box">
                                <p class="q">Q13</p>
                                <div class="writing roundBox">
                                    <div class="w-q">A family ticket costs $10.</div>
                                    <div class="w-a">
                                        The cost of a family ticket
                                        <div class="line"><input type="text" maxlength="150" name="q_13" placeholder="답안을 입력해 주세요." autocomplete="off">$10.</div>
                                    </div>
                                </div>
                                <div class="message error">답안을 입력해 주세요.</div>
                            </div>
                            <div class="q-box">
                                <p class="q">Q14</p>
                                <div class="writing roundBox">
                                    <div class="w-q">You don't have to pay to visit the zoo on Thursdays.</div>
                                    <div class="w-a">
                                        You can visit the zoo
                                        <div class="line"><input type="text" maxlength="150" name="q_14" placeholder="답안을 입력해 주세요." autocomplete="off"></div>
                                        paying on Thursdays.
                                    </div>
                                </div>
                                <div class="message error">답안을 입력해 주세요.</div>
                            </div>
                            <div class="q-box">
                                <p class="q">Q15</p>
                                <div class="writing roundBox">
                                    <div class="w-q">Feeding the animals is not allowed.</div>
                                    <div class="w-a">
                                        You must not
                                        <div class="line"><input type="text" maxlength="150" name="q_15" placeholder="답안을 입력해 주세요." autocomplete="off"></div>
                                        the animals.
                                    </div>
                                </div>
                                <div class="message error">답안을 입력해 주세요.</div>
                            </div>
                        </div>
                        <div class="selectWrap" data-page="4">
                            <div class="lastPage">
                                <div class="textWrap">
                                    <figure></figure>
                                    <p>IELTS <span id="module-txt"></span> <br><span id="goal-score-txt"></span>을 목표로 하는 @isset($member_name)<b class="name">{{ $member_name }}</b>@endisset회원님!</p>
                                    <h2><b>아래 결과보기를 신청하시면 정답을 <br>확인하실 수 있으며  강좌, 학습 가이드 및 <br>할인쿠폰을 받을 수 있습니다.</b></h2>

                                    <div class="userInput">
                                        @if(empty($member_name))
                                        <div class="inputWrap">
                                            <div class="input">
                                                <label><input type="text" name="name" value="" maxlength="20" placeholder="이름을 입력해 주세요." autocomplete="off"></label>
                                                <div class="message error">이름을 입력해 주세요.</div>
                                            </div>
                                            <div class="input">
                                                <label><input type="tel" name="phone" value="" maxlength="11" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="휴대폰번호를 입력해 주세요." autocomplete="off"></label>
                                                <div class="message error">휴대폰번호를 입력해 주세요.</div>
                                            </div>
                                        </div>
                                        <div class="privacyBox">
                                            <div class="agree">
                                                <label><input type="checkbox" id="privacy-agree"><span>개인정보 수집 및 이용에 동의합니다.</span></label>
                                                <button type="button" class="toggle-btn"><span>자세히보기</span></button>
                                            </div>
                                            <div class="message error">개인정보 수집 및 이용에 동의해 주세요.</div>
                                            <div class="terms-detail">
                                                <div class="terms-viewer">
                                                    <p class="tit">1. 개인정보 수집목적 및 항목</p>
                                                    <p class="dotTxt">edm교육그룹㈜이디엠글로벌캠퍼스의 학습상담, 유학상담, 문의응대, 각종 이벤트 등 최신정보 제공 및 홍보성 정보 제공</p>
                                                    <p class="dotTxt">수집 항목 : 이름, 휴대전화번호, 주소</p>
                                                    <p class="tit">2. 개인정보 보유 및 이용기간</p>
                                                    <p class="dotTxt">이용목적 달성 또는 신청자의 삭제요청 시까지</p>
                                                    <p class="tit">3. 신청자는 개인정보 수집/이용 동의를 거부하실 수 있습니다.</p>
                                                    <p class="dotTxt">단, 동의 거부 시 학습상담 및 관련 서비스 이용에 제한이 있을 수 있습니다.</p>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
			</div>

			<div class="nextPage bottom-fix-btn">
				<div class="max-width flex">
                    <button type="button" name="q_prev" class="btn prev">이전</button>
                    <button type="button" name="q_next" class="btn next" disabled data-page="1" data-conf="0">다음</button>
                    <button type="button" onclick="viewResult()" id="result-btn" class="btn result" data-page="4">결과보기</button>
                </div>
			</div>
		</div>
	</div>
@endsection

@section('ielts-script')
    <script>
        @if(session('alert'))
            alert("{{ session('alert') }}");
        @endif

        $(function(){
            let page = 1,
                step = 0;

            $('button[name="q_next"]').click(function(){
                let $activeWrap = $('.selectWrap[data-page].active');
                let chkObjWrap = (page == '2') ? $activeWrap.find('.innerWrap.active') : $activeWrap;
                let fields = chkObjWrap.find('input[name]');
                $('button[name="q_next"]').data('conf', '0');
                let originObjNames = [];
                $(fields).each(function(k, obj){
                    let valueChk = false;
                    let originObj = $(obj).attr('name');
                    if (!originObjNames.includes(originObj)) {
                        originObjNames.push(originObj);
                    }
                });
                let valueChkLen = 0;

                if (
                    $('[name="q_module"]:checked').length > 0 &&
                    $('[name="q_goal_score"]:checked').length > 0 &&
                    $('#module-txt').text() == '' &&
                    $('#goal-score-txt').text() == ''
                ) {
                    $('#module-txt').text($('[name="q_module"]:checked').closest('label').find('span').text());
                    $('#goal-score-txt').text($('[name="q_goal_score"]:checked').closest('label').find('span').text());
                }

                if(page == '2'){
                    $(originObjNames).each(function(k, n) {
                        const $this = $('input[name="'+n+'"]');
                        let valueChk = false
                        if($this.attr('type') == 'radio'){
                            valueChk = $this.is(':checked');
                        }else if($this.attr('type') == 'text'){
                            valueChk = ($this.val() != '' || $this.is(':disabled')) ? true : false;
                        }else if($this.attr('type') == 'checkbox'){
                            valueChk = ($('input[name="'+n+'"]:checked').length >= 2) ? true : false;
                        }
                        if (!valueChk) {
                            $this.closest('.q-box').find('.message.error').show();
                        } else {
                            $this.closest('.q-box').find('.message.error').hide();
                            valueChkLen++;
                        }
                    });
                }

                if(page == '3'){
                    $(originObjNames).each(function(k, n) {
                        const $this = $('input[name="'+n+'"]');
                        let valueChk = ($this.val() != '') ? true : false;
                        if (!valueChk) {
                            $this.closest('.q-box').find('.message.error').show();
                        } else {
                            $this.closest('.q-box').find('.message.error').hide();
                            valueChkLen++;
                        }
                    });
                }

                if(valueChkLen == $(originObjNames).length) $('button[name="q_next"]').data('conf', '1');
            });

            function render() {
                $('.selectWrap').removeClass('active');
                $('.innerWrap').removeClass('active');

                if (page === 2) {
                    $('[data-page="2"]').addClass('active').find('.innerWrap').eq(step).addClass('active');
                } else {
                    $(`[data-page="${page}"]`).addClass('active');
                }

                // 버튼 표시
                $('.nextPage .btn').hide();
                if (page === 1) {
                    $('.btn.next').show().attr('data-page', page);
                } else if (page === 2 || page === 3) {
                    $('.btn.prev').show();
                    $('.btn.next').show().attr('data-page', page);
                } else if (page === 4) {
                    $('.btn.result').show();
                }

                // 상단 step 활성화
                $('.sequence li').removeClass('active');
                $(`.sequence li[data-page="${page}"]`).addClass('active');

                $('button[name="q_next"]').text((page==3 ? '제출하기' : '다음'));

                $(window).scrollTop(0); // 스크롤 맨 위로
            }

            $('.nextPage .btn[data-page]').on('click', function () {
                if (page !== 1 && $(this).data('conf') == '0') return true;

                if (page === 1) {
                    page = 2; step = 0;
                } else if (page === 2) {
                    step++;
                    if (step >= $('[data-page="2"] .innerWrap').length) page = 3;
                } else if (page === 3) {
                    page = 4;
                }
                render();
            });

            $('.nextPage .btn.prev').on('click', function () {
                if (page === 4) page = 3;
                else if (page === 3) {
                    page = 2;
                    step = $('[data-page="2"] .innerWrap').length - 1;
                } else if (page === 2 && step > 0) step--;
                else page = 1;

                render();
            });

            render(); // 초기 실행

            /* input text/checkbox 비활성화 */
            $('.selectWrap .a.text input[type="text"]').each(function(index, item){
                let $textInput = $(item);
                let $checkbox = $textInput.closest('.a.text').find('input[type="checkbox"]');

                // 텍스트
                $textInput.on('input', function () {
                    let hasText = $(this).val().trim().length > 0;
                    $checkbox.prop('disabled', hasText);
                });

               // 체크박스
               $checkbox.on('change', function () {
                    if ($(this).prop('checked')) {
                        $textInput.prop('disabled', true);
                    } else {
                        $textInput.prop('disabled', false);
                    }
                });
            });

            /* 체크박스 최대 2개까지만 선택 가능 */
            $('.a.maximum2').each(function(index, item){
                $(item).find('input[type="checkbox"]').on('click',function(){
                    let checkedCount = $(item).find('input[type="checkbox"]:checked').length;

                    if (checkedCount === 2) {
                        $(item).find('input[type="checkbox"]:not(:checked)').prop('disabled', true);
                    } else {
                        $(item).find('input[type="checkbox"]').prop('disabled', false);
                    }
                });
            });

            $('.privacyBox .toggle-btn').on('click',function(){
                $('.privacyBox .terms-detail').stop().slideToggle(300);
            });

            $('[name="q_module"], [name="q_goal_score"]').on('click', function () {
                let $activeWrap = $('.selectWrap[data-page].active');
                if ($activeWrap.data('page') == '1') {
                    let moduleChecked = $('[name="q_module"]').is(':checked');
                    let scoreChecked = $('[name="q_goal_score"]').is(':checked');

                    if (moduleChecked && scoreChecked) {
                        $('button[name="q_next"]').prop('disabled', false);
                    } else {
                        $('button[name="q_next"]').prop('disabled', true);
                    }
                }
            });
        });

        function start(){
            $('#wrap.level-test.intro').remove();
            $('#wrap.level-test.exam').show();
        }

        function viewResult() {
            const $name = $('[name="name"]');
            let vd_chk = true;
            @if(empty($member_name))
            if ($name.length > 0) {
                if ($name.val().trim() === '') {
                    vd_chk = false;
                    $name.closest('.input').find('.message.error').show();
                }else{
                    $name.closest('.input').find('.message.error').hide();
                }
            }

            const $phone = $('[name="phone"]');
            if ($phone.length > 0) {
                if ($phone.val().trim() === '') {
                    vd_chk = false;
                    $phone.closest('.input').find('.message.error').show();
                }else{
                    $phone.closest('.input').find('.message.error').hide();
                }
            }

            const $privacy = $('#privacy-agree');
            if (!$privacy.is(':checked')) {
                vd_chk = false;
                $privacy.closest('.privacyBox').find('.message.error').show();
            }else{
                $privacy.closest('.privacyBox').find('.message.error').hide();
            }
            @endif

            if(vd_chk){
                $('#result-btn').prop('disabled', true);
                document.examFrm.submit();
            }
        }


    </script>
@endsection