@extends($service.'.layout')

@section($service.'-css')
    {!! resource('css/'.$service.'/sub.css') !!}

    {!! resource('css/common/nice-select.css') !!}
    {!! resource('css/myclass/my_class.css') !!}
    @if ($service == 'academy')
    {!! resource('css/myclass/my_class_academy.css') !!}
    @endif
    {!! resource('css/myclass/cdt_content.css') !!}
@endsection

@section($service."-content")
<div class="container classRoomPage">
    <div class="my-class-wrapper">
        <div class="wrapper">
            @include('classroom.'.$service.'.menu')

            <div class="my-class-contents">
                @include('classroom.'.$service.'.cdt-tab-menu')

                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            <div class="bg-gray pd24 br12">
                                <div class="text-gray">
                                    <strong>
                                        응시 및 결과 안내
                                    </strong>
                                    <div>
                                        · CDT 모의고사 응시는 PC에서만 가능하며, Mobile에서는 응시한 CDT 모의고사 결과조회만 가능합니다.<br>
                                        · 과목별 결과확인 및 첨삭신청은 해당 과목의 전체 테스트를 완료해야만 가능합니다. <br>
                                        · 재응시는 수강기간 내 Test 별로 1회만 가능하며, 재응시 시 모든 과목의 응시 내역(작성한 답 또는 결과 등)이 전체 삭제 및 초기화됩니다.
                                    </div>
                                </div>
                                <div class="text-gray">
                                    <strong>
                                        첨삭안내 (Writing/ Speaking)
                                    </strong>
                                    <div>
                                        · 첨삭 신청은 ‘CDT 풀패키지’ 이용 고객만 신청이 가능합니다. (‘CDT 모의고사’는 첨삭이 제공되지 않습니다.) <br>
                                        · ‘CDT 모의고사’는 Reading, Listening은 답안 및 해설과 결과가 제공되며 Writing, Speaking은 모범답안이 제공됩니다.<br>
                                        · 첨삭 제출이 완료된 후에는 수정이 불가하며 횟수가 차감됩니다. <br>
                                        · 첨삭 결과는 신청 완료 후 확인할 수 있습니다. <br>
                                        · 첨삭신청은 CDT 풀패키지 이용자에 한해 제공되며, 신청 후 첨삭 완료까지 영업일 기준 약 3~5일이 소요됩니다.
                                    </div>
                                </div>
                            </div>

                            <select class="select-option wide mt40" id="selectCdt">
                                <option value="" disabled selected>CDT 세트를 선택해 주세요.</option>
                                @foreach ($enrollmentCdtPasses as $cp)
                                    <option value="{{ $cp->id }}" @selected($cp->id == $enrollmentCdtPass->id)>{{ $cp->cdtPass->name }}</option>
                                @endforeach
                            </select>

                            <h4 class="dot-title mt36">
                                {{ $enrollmentCdtPass->name }}
                            </h4>

                            <div class="pd16">
                                <p>
                                    CDT 응시 가능 기간: {{ explode(' ', $enrollmentCdtPass->enrollment->started_at)[0] }} ~ {{ explode(' ', $enrollmentCdtPass->enrollment->ended_at)[0] }}

                                    @php
                                        $feedbackUsage = $enrollmentCdtPass->enrollment->enrollmentFeedbackPasses->first();
                                    @endphp

                                    @if ($feedbackUsage)
                                        @php
                                            $feedback_remaining_count = $feedbackUsage->remaining_count;
                                        @endphp
                                        @if ($feedback_remaining_count > 0)
                                        | 첨삭(Speaking, Writing) 이용 가능 횟수: {{ floor($feedback_remaining_count) }}회
                                        @endif
                                    @endif
                                </p>
                            </div>

                            @if ($enrollmentCdtSets->count()>0)
                                @foreach($enrollmentCdtSets as $enrollmentCdtSet)
                                    @php
                                        $subjects = explode("|", $enrollmentCdtSet->cdtSet?->subjects);
                                        $cdtSetId = $enrollmentCdtSet->cdt_set_id ?? 0;
                                        $isActive = $enrollmentCdtSet->is_active;
                                    @endphp

                                    <div @class(['cdt-score-wrap', 'disabled' => !$isActive])>
                                        <h5 class="cdt-title">
                                            {{ $enrollmentCdtSet->cdtSet?->name }}

                                            @if ($isActive)
                                                @if ($enrollmentCdtSet->enrollmentCdtPass->unused_deduction_day)
                                                    <span>({{ Carbon::parse($enrollmentCdtSet->provide_date)->addDays($enrollmentCdtSet->enrollmentCdtPass->unused_deduction_day)->format('Y-m-d') }}까지 사용가능)</span>
                                                @else
                                                    <span>({{ Carbon::parse($enrollmentCdtSet->expiry_date)->format('Y-m-d') }}까지 사용가능)</span>
                                                @endif
                                            @elseif ($enrollmentCdtSet->provide_date > now())
                                                <span>
                                                    ({{ Carbon::parse($enrollmentCdtSet->provide_date)->format('Y-m-d') }} 지급예정@if ($enrollmentCdtSet->enrollmentCdtPass->unused_deduction_day), {{ Carbon::parse($enrollmentCdtSet->provide_date)->addDays($enrollmentCdtSet->enrollmentCdtPass->unused_deduction_day)->format('Y-m-d') }}까지 사용가능@endif)
                                                </span>
                                            @endif
                                        </h5>
                                        <ul class="cdt-score" data-enset-id="{{ $enrollmentCdtSet->id }}">

                                            <li @class(['cdt-listen', 'disabled' => !in_array('L', $subjects)])>
                                                <h6>
                                                    <i class="ico-listen"></i>
                                                    Listening
                                                </h6>

                                                <div class="score">
                                                    {{ $enrollmentCdtSet->listening_score ?? '-' }}
                                                </div>

                                                @if ($enrollmentCdtSet->listening_status == 'NOT_STARTED')
                                                    <a href="{{ route('classroom.cdt-test', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'listening']) }}" class="cdt-btn">응시하기</a>
                                                @endif

                                                @if ($enrollmentCdtSet->listening_status == 'COMPLETED' || $enrollmentCdtSet->listening_status == 'FINISHED')
                                                    <a href="{{ route('classroom.cdt-result', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'listening']) }}" class="cdt-btn" data-action="result" data-subject="listening">결과보기</a>

                                                    @if ($enrollmentCdtSet->listening_status == 'FINISHED')
                                                        <a href="#none" class="cdt-btn disabled">재응시하기</a>
                                                    @else
                                                        <a href="{{ route('classroom.cdt-test', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'listening']) }}" class="cdt-btn" data-action="retest">재응시하기</a>
                                                    @endif
                                                @endif
                                            </li>

                                            <li @class(['cdt-read', 'disabled' => !in_array('R', $subjects)])>
                                                <h6>
                                                    <i class="ico-read"></i>
                                                    Reading
                                                </h6>

                                                <div class="score">
                                                    {{ $enrollmentCdtSet->reading_score ?? '-' }}
                                                </div>

                                                @if ($enrollmentCdtSet->reading_status == 'NOT_STARTED')
                                                    <a href="{{ route('classroom.cdt-test', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'reading']) }}" class="cdt-btn">응시하기</a>
                                                @endif

                                                @if ($enrollmentCdtSet->reading_status == 'COMPLETED' || $enrollmentCdtSet->reading_status == 'FINISHED')
                                                    <a href="{{ route('classroom.cdt-result', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'reading']) }}" class="cdt-btn" data-action="result" data-subject="reading">결과보기</a>

                                                    @if ($enrollmentCdtSet->reading_status == 'FINISHED')
                                                        <a href="#none" class="cdt-btn disabled">재응시하기</a>
                                                    @else
                                                        <a href="{{ route('classroom.cdt-test', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'reading']) }}" class="cdt-btn" data-action="retest">재응시하기</a>
                                                    @endif
                                                @endif
                                            </li>

                                            <li @class(['cdt-write', 'disabled' => !in_array('W', $subjects)])>
                                                <h6>
                                                    <i class="ico-write"></i>
                                                    Writing
                                                </h6>

                                                <div class="score">
                                                    {{ $enrollmentCdtSet->writing_score ?? '-' }}
                                                </div>

                                                @php
                                                    $enrollmentFeedbackPass = $enrollmentCdtSet->enrollmentCdtPass->getAvailableFeedbackPass();
                                                @endphp

                                                @if ($enrollmentCdtSet->writing_status == 'NOT_STARTED')
                                                    <a href="{{ route('classroom.cdt-test', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'writing']) }}" class="cdt-btn">응시하기</a>
                                                    @if ($enrollmentFeedbackPass)
                                                        <a href="#none" class="cdt-btn disabled">첨삭신청</a>
                                                    @endif
                                                @else
                                                    <a href="{{ route('classroom.cdt-result', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'writing']) }}" class="cdt-btn" data-action="result" data-subject="writing">모범답안보기</a>
                                                @endif

                                                @if ($enrollmentCdtSet->writing_status == 'COMPLETED')
                                                    <a href="{{ route('classroom.cdt-feedback-request', ['service'=>$service, 'enrollmentCdtSetId'=>$enrollmentCdtSet->id, 'subject'=>'writing']) }}" class="cdt-btn" data-action="feedback-request">첨삭신청</a>
                                                @elseif($enrollmentCdtSet->writing_status == 'REQUESTED')
                                                    <a href="{{ route('classroom.feedback-list', ['service'=>$service]) }}" class="cdt-btn" data-action="feedback-result">첨삭대기</a>
                                                @elseif($enrollmentCdtSet->writing_status == 'FINISHED')
                                                    @if ($enrollmentFeedbackPass)
                                                    <a href="{{ route('classroom.feedback-list', ['service'=>$service]) }}" class="cdt-btn" data-action="feedback-result">첨삭결과보기</a>
                                                    @else
                                                    <a href="#none" class="cdt-btn" data-action="feedback-not-available">첨삭신청</a>
                                                    @endif
                                                @endif
                                            </li>

                                            <li @class(['cdt-speak', 'disabled' => !in_array('S', $subjects)])>
                                                <h6>
                                                    <i class="ico-speak"></i>
                                                    Speaking
                                                </h6>

                                                <div class="score">
                                                    {{ $enrollmentCdtSet->speaking_score ?? '-' }}
                                                </div>

                                                @if ($enrollmentCdtSet->speaking_status == 'NOT_STARTED')
                                                    <a href="{{ route('classroom.cdt-test', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'speaking']) }}" class="cdt-btn">응시하기</a>
                                                @else
                                                    <a href="{{ route('classroom.cdt-result', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'speaking']) }}" class="cdt-btn" data-action="result" data-subject="speaking">모범답안보기</a>
                                                @endif

                                                @if ($enrollmentCdtSet->speaking_status == 'COMPLETED')
                                                    <a href="{{ route('classroom.cdt-feedback-request', ['service'=>$service, 'enrollmentCdtSetId'=>$enrollmentCdtSet->id, 'subject'=>'speaking']) }}" class="cdt-btn" data-action="feedback-request">첨삭신청</a>
                                                @elseif($enrollmentCdtSet->speaking_status == 'REQUESTED')
                                                    <a href="{{ route('classroom.feedback-list', ['service'=>$service]) }}" class="cdt-btn" data-action="feedback-result">첨삭대기</a>
                                                @elseif($enrollmentCdtSet->speaking_status == 'FINISHED')
                                                    @if ($enrollmentFeedbackPass)
                                                    <a href="{{ route('classroom.feedback-list', ['service'=>$service]) }}" class="cdt-btn" data-action="feedback-result">첨삭결과보기</a>
                                                    @else
                                                    <a href="#none" class="cdt-btn" data-action="feedback-not-available">첨삭신청</a>
                                                    @endif
                                                @endif
                                            </li>

                                            <li class="cdt-overall">
                                                <h6>Overall</h6>

                                                <div class="score">
                                                    {{ $enrollmentCdtSet->overall_score ?? '-' }}
                                                </div>

                                                @if ((in_array('L', $subjects) && $enrollmentCdtSet->listening_status == 'COMPLETED') &&
                                                    (in_array('R', $subjects) && $enrollmentCdtSet->reading_status == 'COMPLETED') &&
                                                    (in_array('W', $subjects) && $enrollmentCdtSet->writing_status == 'COMPLETED') &&
                                                    (in_array('S', $subjects) && $enrollmentCdtSet->speaking_status == 'COMPLETED'))
                                                    <a href="{{ route('classroom.cdt-result', ['service'=>$service, 'enrollmentCdtSetId'=>$enrollmentCdtSet->id, 'subject'=>'all']) }}" class="cdt-btn overall">전체결과보기</a>
                                                @else
                                                    <a href="#none" class="cdt-btn overall disabled">전체결과보기</a>
                                                @endif
                                            </li>
                                        </ul>
                                    </div>
                                @endforeach
                            @else
                                @if (in_array($enrollmentCdtPass->provide_type, ['즉시지급', '매달 20일', 'CDT 모의고사일마다']))
                                    <div style="padding: 0 1rem; color: #ff6531">
                                        지급된 CDT 세트가 없습니다. 담당자에게 문의해 주세요.
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- TODO CDT모의고사 결과 (팝업) / class="popupWrap" 에 active가 추가되면 팝업이 보입니다.-->
    <div class="popupArea">
        <div class="allResult popupWrap active">
			<div class="popup active">
				<div class="tabWrap flex">
					<button type="button" class="tabBtn active">Listening</button>
					<button type="button" class="tabBtn">Reading</button>
					<button type="button" class="tabBtn">Writing</button>
					<button type="button" class="tabBtn">Speaking</button>
				</div>
	            <div class="popupAll">
	            	<div class="popupInfo listening active">
		                <div class="closeIcon closeBtn"></div>
		                <div class="textWrap">
		                    <div class="scrollWidth">
		                        <div class="scrollWrap">
		                            <p class="title-1">Test Result <span>Listening</span></p>
		                            <div class="infoArea result">
		                                <div class="info scoreWrap flex">
		                                    <div class="roundBox band">
		                                        <p class="subject">Band Score</p>
		                                        <p class="score"><strong>5.0</strong></p>
		                                    </div>
		                                    <ul class="roundBox other flex">
		                                        <li>
		                                            <p class="subject">All Passage</p>
		                                            <p class="score"><b>8</b>/14</p>
		                                        </li>
		                                        <li>
		                                            <p class="subject">Section1</p>
		                                            <p class="score"><b>2</b>/14</p>
		                                        </li>
		                                        <li>
		                                            <p class="subject">Section2</p>
		                                            <p class="score"><b>2</b>/14</p>
		                                        </li>
		                                        <li>
		                                            <p class="subject">Section3</p>
		                                            <p class="score"><b>2</b>/14</p>
		                                        </li>
		                                        <li>
		                                            <p class="subject">Section4</p>
		                                            <p class="score"><b>2</b>/14</p>
		                                        </li>
		                                    </ul>
		                                </div>
		                                <div class="info table">
		                                    <div class="roundBox">
		                                        <p class="sub-title">Listening 채점기준 및 점수표</p>
		                                        <div class="tableWrap">
		                                            <table>
		                                                @php
		                                                    $listeningScore = [
		                                                        ['9','39~40'],
		                                                        ['8.5','37-38'],
		                                                        ['8','35-36'],
		                                                        ['7.5','32-34'],
		                                                        ['7','30-31'],
		                                                        ['6.5','26-29'],
		                                                        ['6','23-25'],
		                                                        ['5.5','18-22'],
		                                                        ['5','16-17'],
		                                                        ['4.5','13-15'],
		                                                        ['4','10-12'],
		                                                        ['3.5','8-9'],
		                                                        ['3','6-7'],
		                                                        ['2.5','4-5']
		                                                    ];
		                                                @endphp
		                                                <thead>
		                                                    <tr>
		                                                        <th class="first">Band Score</th>
		                                                        <!-- TODO 상단 Band Score 점수와 같은 th에 class="point"가 추가됩니다. -->
		                                                        @foreach ($listeningScore as $item)
		                                                            <th>{{ $item[0] }}</th>
		                                                        @endforeach
		                                                    </tr>
		                                                </thead>
		                                                <tbody>
		                                                    <tr>
		                                                        <td class="first">Score/40</td>
		                                                        <!-- TODO 상단 Band Score 점수와 같은 td에 class="point"가 추가됩니다. -->
		                                                        @foreach ($listeningScore as $item)
		                                                            <td>{{ $item[1] }}</td>
		                                                        @endforeach
		                                                    </tr>
		                                                </tbody>
		                                            </table>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <div class="infoArea reviewing">
		                                <p class="title-2">문제 다시보기</p>
		                                <div class="info">
		                                    <div class="roundBox">
		                                        <div class="sectionBtnWrap flex">
		                                            <!-- TODO 선택된 탭은 class="active"가 추가됩니다. -->
		                                            <a href="" class="btn active"><p>Section1</p><b>음성듣기</b><i></i></a>
		                                            <a href="" class="btn"><p>Section2</p><b>음성듣기</b><i></i></a>
		                                            <a href="" class="btn"><p>Section3</p><b>음성듣기</b><i></i></a>
		                                            <a href="" class="btn"><p>Section4</p><b>음성듣기</b><i></i></a>
		                                        </div>
		                                        <div class="sectionContents">
		                                            <!-- 문항화면 -->
		                                        </div>
		                                        <div class="sectionPageBtn flex">
		                                            <a href="" class="prev btn">이전</a>
		                                            <a href="" class="next btn">다음</a>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <div class="infoArea checkOut">
		                                <p class="title-2">정답 확인하기</p>
		                                <div class="info">
		                                    <div class="roundBox">
		                                        <div class="sectionBtnWrap flex">
		                                            <!-- TODO 선택된 탭은 class="active"가 추가됩니다. -->
		                                            <a href="" class="btn active"><b>Section1</b><p>(Q. 1~10)</p></a>
		                                            <a href="" class="btn"><b>Section2</b><p>(Q. 1~10)</p></a>
		                                            <a href="" class="btn"><b>Section3</b><p>(Q. 1~10)</p></a>
		                                            <a href="" class="btn"><b>Section4</b><p>(Q. 1~10)</p></a>
		                                        </div>
		
		                                        <!-- TODO class="box"가 반복됩니다. -->
		                                        <div class="box">
		                                            <div class="top style1">
		                                                <b class="area-1">문제</b>
		                                                <b class="area-2">정답</b>
		                                                <b class="area-3">내답안</b>
		                                                <b class="area-4">정답여부</b>
		                                            </div>
		                                            <div class="text style1">
		                                                <p class="area-1">1</p>
		                                                <p class="area-2">B</p>
		                                                <p class="area-3">B</p>
		                                                <p class="area-4">O</p>
		                                            </div>
		                                            <div class="explanation">
		                                                <div class="wrap">
		                                                    <b>해설</b>
		                                                    <p>1번 문제의 키워드는 'local library'이기 때문에 누가 Jane에게 도서관에 가입하라고 조언했는지를 잡아낼 수 있어야 한다. 질문에서, 우리는 Jane이 Kevin에게 ""My roommate said I should join the local library – do you think that I need to?""라고 물었고, 케빈이 ""Well, I think it’d be a good idea.""라고 했으므로 보기 'C'가 정답이다.</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                        <div class="box">
		                                            <div class="top style1">
		                                                <b>문제</b>
		                                                <b>정답</b>
		                                                <b>내답안</b>
		                                                <b>정답여부</b>
		                                            </div>
		                                            <div class="text style1">
		                                                <p>2</p>
		                                                <p>C, D</p>
		                                                <p class="error">A</p> <!-- TODO 틀린 정답에는 class="error"가 추가됩니다. -->
		                                                <p class="error">X</p>
		                                            </div>
		                                            <div class="explanation">
		                                                <div class="wrap">
		                                                    <b>해설</b>
		                                                    <p>1번 문제의 키워드는 'local library'이기 때문에 누가 Jane에게 도서관에 가입하라고 조언했는지를 잡아낼 수 있어야 한다. 질문에서, 우리는 Jane이 Kevin에게 ""My roommate said I should join the local library – do you think that I need to?""라고 물었고, 케빈이 ""Well, I think it’d be a good idea.""라고 했으므로 보기 'C'가 정답이다.</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                        <div class="box">
		                                            <div class="top style1">
		                                                <b>문제</b>
		                                                <b>정답</b>
		                                                <b>내답안</b>
		                                                <b>정답여부</b>
		                                            </div>
		                                            <div class="text style1">
		                                                <p>3</p>
		                                                <p>innate 또는 not learned 둘다 정답</p>
		                                                <p class="error">Extreme Tour</p>
		                                                <p class="error">X</p>
		                                            </div>
		                                            <div class="explanation">
		                                                <div class="wrap">
		                                                    <b>해설</b>
		                                                    <p>1번 문제의 키워드는 'local library'이기 때문에 누가 Jane에게 도서관에 가입하라고 조언했는지를 잡아낼 수 있어야 한다. 질문에서, 우리는 Jane이 Kevin에게 ""My roommate said I should join the local library – do you think that I need to?""라고 물었고, 케빈이 ""Well, I think it’d be a good idea.""라고 했으므로 보기 'C'가 정답이다.</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		                <button type="button" class="popupClose closeBtn">확인</button>
		            </div>
					<div class="popupInfo reading">
		                <div class="closeIcon closeBtn"></div>
		                <div class="textWrap">
		                    <div class="scrollWidth">
		                        <div class="scrollWrap">
		                            <p class="title-1">Test Result <span>Reading</span></p>
		                            <div class="infoArea result">
		                                <div class="info scoreWrap flex">
		                                    <div class="roundBox band">
		                                        <p class="subject">Band Score</p>
		                                        <p class="score"><strong>5.0</strong></p>
		                                    </div>
		                                    <ul class="roundBox other flex">
		                                        <li>
		                                            <p class="subject">All Passage</p>
		                                            <p class="score"><b>8</b>/14</p>
		                                        </li>
		                                        <li>
		                                            <p class="subject">Section1</p>
		                                            <p class="score"><b>2</b>/14</p>
		                                        </li>
		                                        <li>
		                                            <p class="subject">Section2</p>
		                                            <p class="score"><b>2</b>/14</p>
		                                        </li>
		                                        <li>
		                                            <p class="subject">Section3</p>
		                                            <p class="score"><b>2</b>/14</p>
		                                        </li>
		                                        <li>
		                                            <p class="subject">Section4</p>
		                                            <p class="score"><b>2</b>/14</p>
		                                        </li>
		                                    </ul>
		                                </div>
		                                <div class="info table">
		                                    <div class="roundBox">
		                                        <p class="sub-title">Listening 채점기준 및 점수표</p>
		                                        <div class="tableWrap">
		                                            <table>
		                                                @php
		                                                    $listeningScore = [
		                                                        ['9','39~40'],
		                                                        ['8.5','37-38'],
		                                                        ['8','35-36'],
		                                                        ['7.5','32-34'],
		                                                        ['7','30-31'],
		                                                        ['6.5','26-29'],
		                                                        ['6','23-25'],
		                                                        ['5.5','18-22'],
		                                                        ['5','16-17'],
		                                                        ['4.5','13-15'],
		                                                        ['4','10-12'],
		                                                        ['3.5','8-9'],
		                                                        ['3','6-7'],
		                                                        ['2.5','4-5']
		                                                    ];
		                                                @endphp
		                                                <thead>
		                                                    <tr>
		                                                        <th class="first">Band Score</th>
		                                                        <!-- TODO 상단 Band Score 점수와 같은 th에 class="point"가 추가됩니다. -->
		                                                        @foreach ($listeningScore as $item)
		                                                            <th>{{ $item[0] }}</th>
		                                                        @endforeach
		                                                    </tr>
		                                                </thead>
		                                                <tbody>
		                                                    <tr>
		                                                        <td class="first">Score/40</td>
		                                                        <!-- TODO 상단 Band Score 점수와 같은 td에 class="point"가 추가됩니다. -->
		                                                        @foreach ($listeningScore as $item)
		                                                            <td>{{ $item[1] }}</td>
		                                                        @endforeach
		                                                    </tr>
		                                                </tbody>
		                                            </table>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <div class="infoArea reviewing">
		                                <p class="title-2">문제 다시보기</p>
		                                <div class="info">
		                                    <div class="roundBox">
		                                        <div class="sectionContents">
		                                            <!-- 문항화면 -->
		                                        </div>
		                                        <div class="sectionPageBtn flex">
		                                            <a href="" class="prev btn">이전</a>
		                                            <a href="" class="next btn">다음</a>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <div class="infoArea checkOut">
		                                <p class="title-2">정답 확인하기</p>
		                                <div class="info">
		                                    <div class="roundBox">
		                                        <div class="sectionBtnWrap flex">
		                                            <!-- TODO 선택된 탭은 class="active"가 추가됩니다. -->
		                                            <a href="" class="btn active"><b>Section1</b><p>(Q. 1~13)</p></a>
		                                            <a href="" class="btn"><b>Section2</b><p>(Q. 14~27)</p></a>
		                                            <a href="" class="btn"><b>Section3</b><p>(Q. 28~40)</p></a>
		                                        </div>
		
		                                        <!-- TODO class="box"가 반복됩니다. -->
		                                        <div class="box">
		                                            <div class="top style1">
		                                                <b class="area-1">문제</b>
		                                                <b class="area-2">정답</b>
		                                                <b class="area-3">내답안</b>
		                                                <b class="area-4">정답여부</b>
		                                            </div>
		                                            <div class="text style1">
		                                                <p class="area-1">1</p>
		                                                <p class="area-2">B</p>
		                                                <p class="area-3">B</p>
		                                                <p class="area-4">O</p>
		                                            </div>
		                                            <div class="explanation">
		                                                <div class="wrap">
		                                                    <b>해설</b>
		                                                    <p>1번 문제의 키워드는 'local library'이기 때문에 누가 Jane에게 도서관에 가입하라고 조언했는지를 잡아낼 수 있어야 한다. 질문에서, 우리는 Jane이 Kevin에게 ""My roommate said I should join the local library – do you think that I need to?""라고 물었고, 케빈이 ""Well, I think it’d be a good idea.""라고 했으므로 보기 'C'가 정답이다.</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                        <div class="box">
		                                            <div class="top style1">
		                                                <b>문제</b>
		                                                <b>정답</b>
		                                                <b>내답안</b>
		                                                <b>정답여부</b>
		                                            </div>
		                                            <div class="text style1">
		                                                <p>2</p>
		                                                <p>C, D</p>
		                                                <p class="error">A</p> <!-- TODO 틀린 정답에는 class="error"가 추가됩니다. -->
		                                                <p class="error">X</p>
		                                            </div>
		                                            <div class="explanation">
		                                                <div class="wrap">
		                                                    <b>해설</b>
		                                                    <p>1번 문제의 키워드는 'local library'이기 때문에 누가 Jane에게 도서관에 가입하라고 조언했는지를 잡아낼 수 있어야 한다. 질문에서, 우리는 Jane이 Kevin에게 ""My roommate said I should join the local library – do you think that I need to?""라고 물었고, 케빈이 ""Well, I think it’d be a good idea.""라고 했으므로 보기 'C'가 정답이다.</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                        <div class="box">
		                                            <div class="top style1">
		                                                <b>문제</b>
		                                                <b>정답</b>
		                                                <b>내답안</b>
		                                                <b>정답여부</b>
		                                            </div>
		                                            <div class="text style1">
		                                                <p>3</p>
		                                                <p>innate 또는 not learned 둘다 정답</p>
		                                                <p class="error">Extreme Tour</p>
		                                                <p class="error">X</p>
		                                            </div>
		                                            <div class="explanation">
		                                                <div class="wrap">
		                                                    <b>해설</b>
		                                                    <p>1번 문제의 키워드는 'local library'이기 때문에 누가 Jane에게 도서관에 가입하라고 조언했는지를 잡아낼 수 있어야 한다. 질문에서, 우리는 Jane이 Kevin에게 ""My roommate said I should join the local library – do you think that I need to?""라고 물었고, 케빈이 ""Well, I think it’d be a good idea.""라고 했으므로 보기 'C'가 정답이다.</p>
		                                                </div>
		                                            </div>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		                <button type="button" class="popupClose closeBtn">확인</button>
		            </div>
					<div class="popupInfo speaking">
		                <div class="closeIcon closeBtn"></div>
		                <div class="textWrap">
		                    <div class="scrollWidth">
		                        <div class="scrollWrap">
		                            <p class="title-1">Test Result <span>Reading</span></p>
		                            <div class="infoArea reviewing">
		                                <p class="title-2">문제 다시보기</p>
		                                <div class="info">
		                                    <div class="roundBox">
		                                        <div class="sectionContents">
		                                            <!-- 문항화면 -->
		                                        </div>
		                                        <div class="sectionPageBtn flex">
		                                            <a href="" class="prev btn">이전</a>
		                                            <a href="" class="next btn">다음</a>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <div class="infoArea myAnswer">
		                                <p class="title-2">내 답안</p>
		                                <p class="small-text">*첨삭신청을 하신 경우 내강의실 → 첨삭학습 → 첨삭내역에서 확인하실 수 있습니다.</p>
		                                <div class="info">
		                                    <div class="roundBox partWrap">
		                                        <div class="part flex align-c">
		                                            <b>Part1</b>
		                                            <div class="playBarWrap">
		                                                <audio src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/my_class/sample-audio1.mp3"></audio>
		                                                <div class="playBar">
		                                                    <a href="" class="btn control play"></a>
		                                                    <div class="time"><p class="current">00:00</p>&nbsp;/&nbsp;<p class="all">01:00</p></div>
		                                                    <div class="timeline"><span></span></div>
		                                                </div>
		                                                <a href="" class="btn speaker default"></a>
		                                                <a href="" class="btn download"></a>
		                                            </div>
		                                        </div>
		                                        <div class="part flex">
		                                            <b>Part2</b>
		                                            <div class="playBarWrap">
		                                                <audio src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/my_class/sample-audio2.mp3"></audio>
		                                                <div class="playBar">
		                                                    <a href="" class="btn control play"></a>
		                                                    <div class="time"><p class="current">00:00</p>&nbsp;/&nbsp;<p class="all">01:00</p></div>
		                                                    <div class="timeline"><span></span></div>
		                                                </div>
		                                                <a href="" class="btn speaker"></a>
		                                                <a href="" class="btn download"></a>
		                                            </div>
		                                        </div>
		                                        <div class="part flex">
		                                            <b>Part3</b>
		                                            <div class="playBarWrap">
		                                                <audio src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/my_class/sample-audio1.mp3"></audio>
		                                                <div class="playBar">
		                                                    <a href="" class="btn control play"></a>
		                                                    <div class="time"><p class="current">00:00</p>&nbsp;/&nbsp;<p class="all">01:00</p></div>
		                                                    <div class="timeline"><span></span></div>
		                                                </div>
		                                                <a href="" class="btn speaker"></a>
		                                                <a href="" class="btn download"></a>
		                                            </div>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		                <button type="button" class="popupClose closeBtn">확인</button>
		            </div>
					<div class="popupInfo writing">
		                <div class="closeIcon closeBtn"></div>
		                <div class="textWrap">
		                    <div class="scrollWidth">
		                        <div class="scrollWrap">
		                            <p class="title-1">Test Result <span>Writing</span></p>
		                            <div class="infoArea reviewing">
		                                <p class="title-2">문제 다시보기</p>
		                                <div class="info">
		                                    <div class="roundBox">
		                                        <div class="sectionContents">
		                                            <!-- 문항화면 -->
		                                        </div>
		                                        <div class="sectionPageBtn flex">
		                                            <a href="" class="prev btn">이전</a>
		                                            <a href="" class="next btn">다음</a>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <div class="infoArea myAnswer">
		                                <p class="title-2">내 답안</p>
		                                <p class="small-text">*첨삭신청을 하신 경우 내강의실 → 첨삭학습 → 첨삭내역에서 확인하실 수 있습니다.</p>
		                                <div class="info">
		                                    <div class="roundBox textAnswer">
		                                        <!-- TODO ul태그가 반복됩니다. -->
		                                        <!-- TODO 관리자 입력값이 있을 때는 ul태그에 class="yes-answer"가 추가됩니다.  -->
		                                        <ul class="yes-answer">
		                                            <li class="subject">
		                                                <b class="task">Task</b>
		                                                <b class="my-a">내답안</b>
		                                                <b class="right-a">모범답안</b>
		                                            </li>
		                                            <li>
		                                                <div class="task"><b>Task1</b></div>
		                                                <div class="my-a">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, dolores ullam. Rem non dolorum ipsa vitae cumque tempore saepe, et aliquam nulla, dolorem vel qui id porro quaerat debitis eum.</div>
		                                                <!-- TODO class="blur"가 있으면 모범답안이 가려져있습니다. -->
		                                                <div class="right-a blur">
		                                                    <a href="" class="viewBtn">모범답안 보기</a>
		                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ad maxime suscipit deserunt ullam esse perferendis doloremque ducimus debitis quis natus temporibus unde, iusto, quisquam dolor maiores iste sit magni!
		                                                    Nobis, in! Perferendis adipisci recusandae dolor quae, ab, similique quo repellat, explicabo dignissimos esse quidem facilis sint! Harum ex vero consectetur, nesciunt exercitationem dolores facilis modi obcaecati tenetur suscipit dolorum.
		                                                    Accusamus consequuntur hic, ratione fugiat inventore laudantium minima quisquam alias aperiam quo sed itaque accusantium assumenda magni ipsum soluta aut cumque dicta illo atque libero? Fuga laudantium quo corrupti voluptate!
		                                                </div>
		                                            </li>
		                                        </ul>
		                                        <ul>
		                                            <li class="subject">
		                                                <b class="task">Task</b>
		                                                <b class="my-a">내답안</b>
		                                                <b class="right-a">모범답안</b>
		                                            </li>
		                                            <li>
		                                                <div class="task"><b>Task1</b></div>
		                                                <div class="my-a">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur cum veniam, doloremque aut eligendi voluptatum iusto alias recusandae nihil asperiores eius dolores minima adipisci enim nostrum. Repellat dolores tempore excepturi.
		                                                Recusandae incidunt at beatae veniam libero eveniet ea, cum sunt molestias ipsam culpa vero rerum dolores. Incidunt deleniti illo sequi, laborum ea nesciunt error? Voluptates aspernatur sunt deserunt doloribus mollitia?</div>
		                                            </li>
		                                        </ul>
		                                    </div>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		                <button type="button" class="popupClose closeBtn">확인</button>
		            </div>
	            </div>
			</div>
            <div class="dim"></div>
        </div>
    </div>
</div>
@endsection

@section($service.'-script')
    {!! resource('js/common/jquery.nice-select.js') !!}
    <script>
        function removePopup() {
            $('.popupWrap').remove();
            $('body,html').removeClass('noScroll');
        }

        function resultPopup(url, subject) {
            const html = `<div class="popupWrap active">
                <div class="popup ${subject}">
                    <div class="closeIcon" onclick="removePopup();"></div>
                    <div class="textWrap">
                        <div class="scrollWidth">
                            <div class="scrollWrap" id="result"></div>
                        </div>
                    </div>
                    <button type="button" class="popupClose" onclick="removePopup();">확인</button>
                </div>
                <div class="dim" style="display: block"></div>
            </div>`;

            $('.classRoomPage').append(html);

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'html',
                success: function (data) {
                    $('#result').html(data);
                    $('.popupWrap').fadeIn(300);
                    $('body,html').addClass('noScroll');
                },
                error: function (xhr, status, error) {
                    console.error('Error loading result:', error);
                    alertPopup('결과를 불러오는 중 오류가 발생했습니다. 다시 시도해 주세요.', {
                        confirmText: '확인'
                    });
                }
            });
        }

        $(document).ready(function () {
            // resultPopup("https://front.edmclass.local/ielts/classroom/cdt/result/15/listening", "listening");

            $('.select-option').niceSelect();

            $('#selectCdt').on('change', function () {
                location.href = '{{ route('classroom.cdt-list', ['service' => $service]) }}/' + $(this).val();
            });

            // 세션에서 완료 정보를 확인하여 글로우 효과 적용
            @if(session()->has('cdt_just_finished'))
                (function() {
                    const cdtInfo = @json(session('cdt_just_finished'));
                    const setId = cdtInfo.set_id;
                    const subject = cdtInfo.subject;

                    // 해당 과목 찾기
                    const subjectMap = {
                        'listening': 'cdt-listen',
                        'reading': 'cdt-read',
                        'writing': 'cdt-write',
                        'speaking': 'cdt-speak'
                    };

                    const subjectClass = subjectMap[subject];
                    if (!subjectClass) return;

                    // 정확한 세트 ID로 요소 찾기 (data-enset-id 속성 사용)
                    const $cdtScore = $(`.cdt-score[data-enset-id="${setId}"]`);

                    if ($cdtScore.length > 0) {
                        const $targetElement = $cdtScore.find(`li.${subjectClass}`);

                        if ($targetElement.length > 0) {
                            // 글로우 효과 추가
                            $targetElement.addClass('just-finished');

                            // 30초 후 제거
                            setTimeout(function() {
                                $targetElement.removeClass('just-finished');
                            }, 30000);

                            // 요소로 스크롤 (선택적)
                            $('html, body').animate({
                                scrollTop: $targetElement.offset().top - 100
                            }, 500);

                            console.log(`Applied glow effect to ${subject} element for set ID ${setId}`);
                        } else {
                            console.warn(`Subject element ${subjectClass} not found in set ${setId}`);
                        }
                    } else {
                        console.warn(`CDT score element with set ID ${setId} not found`);
                    }
                })();
            @endif

            $('.cdt-btn').each(function() {
                $(this).on('click', function(e) {
                    e.preventDefault();

                    const action = $(this).data('action');
                    const url = $(this).attr('href');
                    // if (url === '#none') return;
                    const subject = $(this).data('subject');

                    // 윈도우 크기 및 중앙 위치 계산
                    const getWindowOptions = function(width, height) {
                        // 화면 크기 가져오기
                        const screenWidth = window.screen.width;
                        const screenHeight = window.screen.height;

                        // 창의 중앙 위치 계산
                        const left = (screenWidth - width) / 2;
                        const top = (screenHeight - height) / 2;

                        return `width=${width},height=${height},left=${left},top=${top},toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes`;
                    };

                    // 창 크기 정의
                    const testWindowOptions = getWindowOptions(1280, 838);
                    const resultWindowOptions = getWindowOptions(800, 800);
                    const feedbackWindowOptions = getWindowOptions(1280, 838);

                    if (!action) {                        
                        alertPopup('선택한 CDT 테스트를 시작하시겠습니까?<br><br>응시 진행 중 [X] 또는 새로고침 시 작성한 모든 답변이 저장되지 않고 초기화됩니다.<br>결과를 확인하기 위해서는 꼭 제출을 완료해주시기 바랍니다.', {
                            title: 'CDT 모의고사 응시',
                            confirmText: '확인',
                            closeText: '취소',
                            icon: 'icon-q',
                            onConfirm: function () {
                                // Safari 호환성을 위해 변수에 창 객체 저장
                                const newWindow = window.open(url, '_blank', testWindowOptions);

                                if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {
                                    alertPopup('팝업이 차단되었습니다. 브라우저 설정에서 팝업을 허용해주세요.', {
                                        confirmText: '확인'
                                    });
                                }
                            }
                        });
                    } else if (action === 'result') {
                        // 결과 보기 창 열기 - 중간 크기
                        // window.open(url, '_blank', resultWindowOptions);
                        resultPopup(url, subject);
                    } else if (action === 'retest') {
                        alertPopup('선택한 CDT 과목을 재응시하시겠습니까?<br><br>재응시는 Listening, Reading 과목에 한해 한 번만 가능하며<br>재응시 후에는 더 이상 응시할 수 없습니다.<br>또한 기존 응시 결과는 모두 덮어씌워집니다.', {
                            title: 'CDT 모의고사 재응시',
                            confirmText: '확인',
                            closeText: '취소',
                            icon: 'icon-q',
                            onConfirm: function () {
                                // test 창 열기 - 크게
                                window.open(url, '_blank', testWindowOptions);
                            }
                        });
                    } else if (action === 'feedback-request') {
                        @if (isset($feedback_remaining_count) && $feedback_remaining_count > 0)
                            alertPopup('첨삭 신청을 하시겠습니까?<br>신청 이후에는 수정 및 삭제가 불가합니다.', {
                                title: 'CDT 모의고사 첨삭신청',
                                confirmText: '확인',
                                closeText: '취소',
                                icon: 'icon-q',
                                onConfirm: function () {
                                    // ajax request and return message
                                    $.ajax({
                                        url: url,
                                        type: 'POST',
                                        data: {
                                            _token: '{{ csrf_token() }}'
                                        },
                                        success: function(response) {
                                            if (response.result === 'success') {
                                                alertPopup('첨삭 신청이 완료되었습니다.<br>답변은 등록일로부터 3~5일 정도 소요(영업일 기준)되며, 내강의살->첨삭학습->첨삭내역에서 확인하실 수 있습니다.', {
                                                    title: 'CDT 모의고사 첨삭 신청 완료!',
                                                    confirmText: '확인',
                                                    icon: 'icon-c',
                                                    onConfirm: function() {
                                                        location.reload();
                                                    }
                                                });
                                            } else {
                                                alertPopup(response.message || '첨삭 신청 중 오류가 발생했습니다.', {
                                                    confirmText: '확인'
                                                });
                                            }
                                        },
                                        error: function(response) {
                                            console.log(response);
                                            alertPopup('첨삭 신청 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.'+response.message, {
                                                confirmText: '확인'
                                            });
                                        }
                                    });
                                }
                            });
                        @else
                        alertPopup('첨삭 상품 보유(구매)회원에 한해<br>신청 가능합니다.', {
                            confirmText: '확인'
                        });
                        @endif
                    } else if (action === 'feedback-result') {
                        // 첨삭 결과 창 열기 - 크게 https://front.edmclass.local/ielts/classroom/feedback-view/1
                        //window.open(url, '_blank', feedbackWindowOptions);
                        //console.log(url);
                        location.href = url;
                    } else if (action === 'feedback-not-available') {
                        alertPopup('첨삭 상품 보유(구매)회원에 한해<br>신청 가능합니다.', {
                            confirmText: '확인'
                        });
                    }
                });
            });

			/* Overall > 전체결과보기 버튼 클릭 (팝업) */
			$('.classRoomPage .popupWrap.allResult .popup .tabWrap .tabBtn').on('click', function() {
				let thisTabIndex = $(this).index();
				$(this).addClass('active').siblings().removeClass('active');
				$('.classRoomPage .popupWrap.allResult .popup .popupInfo').eq(thisTabIndex).addClass('active').siblings().removeClass('active');
			});
        });
    </script>
@endsection