@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회만 가능하며, 재응시 시 모든 과목의 응시 내역(작성한 답 또는 결과 등)이 전체 삭제 및 초기화됩니다. <br>
                                        @if($service === 'ielts')
                                        · 무료로 제공되는 CDT모의고사의 경우 Speaking을 제외한 Writing/ Reading/ Listening에 한하여 응시 가능합니다.<br>
                                        · 해당 월에 이벤트 참여 또는 수강기간 변경이 있을 경우, 무료 CDT 모의고사 제공 대상에서 제외됩니다.<br>
                                        · 무료 CDT 모의고사는 매월 20일에 일괄 지급되며, 해당 월 19일 자정까지 결제를 완료하신 분들에 한해 제공됩니다.<br>
                                        · 제공되는 무료 CDT 모의고사는 Listening, Reading, Writing 영역 응시가 가능하며, Writing 영역의 모범 답안은 별도로 제공되지 않습니다.
                                        @endif
                                    </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일이 소요됩니다.<br>
                                        · 첨삭 1회권은 Writing 또는 Speaking 중 한 과목을 선택하여 1회 사용하실 수 있으며, 해당 과목의 모든 Task에 대해 신청이 가능합니다.
                                    </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>
                                    @if (config('app.debug'))
                                        <ul class="debug">
                                            <li><label>enrollment_cdt_passes.id</label> {{ $enrollmentCdtPass->id }}</li>
                                            <li><label>provide_type</label> {{ $enrollmentCdtPass->provide_type }}</li>
                                            <li><label>product.name</label> {{ $enrollmentCdtPass->enrollment->product->name }}</li>
                                            <li><label>productOption.name</label> {{ $enrollmentCdtPass->enrollment->productOption->name }}</li>
                                        </ul>
                                    @endif

                                    CDT 응시 가능 기간: {{ explode(' ', $enrollmentCdtPass->enrollment->started_at)[0] }} ~ {{ explode(' ', $enrollmentCdtPass->enrollment->ended_at)[0] }}

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

                                    @if ($feedbackUsage)
                                        @php
                                            $feedback_remaining_count = $feedbackUsage->remaining_count;
                                        @endphp

                                        @if (!$isCompleted && $feedback_remaining_count > 0 && $enrollmentCdtPass->provide_type != '매달 20일' )
                                        | 첨삭(Speaking, Writing) 이용 가능 횟수: {{ floor($feedback_remaining_count) }}회
                                        @endif

                                        @if (config('app.debug'))
                                            <ul class="debug">
                                                <li><label>enrollment_feedback_passes.remaining_count</label> {{ $feedback_remaining_count }}</li>
                                                <li><label>조건</label>NOT isCompleted (종료목록) / enrollment_cdt_passes.provide_type is NOT 매달 20일</li>
                                            </ul>
                                        @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 = $isCompleted ? false : $enrollmentCdtSet->is_active;
                                        $isFeedbackActive = $enrollmentCdtSet->isFeedbackActive();
                                    @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>

                                        @if (config('app.debug'))
                                            <ul class="debug">
                                                <li><label>enrollment_cdt_sets.id</label> {{ $enrollmentCdtSet->id }}</li>
                                                <li><label>cdt_set_id</label> {{ $cdtSetId }}</li>
                                            </ul>
                                        @endif

                                        <ul class="cdt-score" data-enset-id="{{ $enrollmentCdtSet->id }}">
                                            @php
                                                $enrollmentFeedbackPass = $enrollmentCdtSet->enrollmentCdtPass->getAvailableCdtFeedbackPass();
                                                $hasFeedback = $enrollmentFeedbackPass && $enrollmentCdtPass->provide_type != '매달 20일';
                                            @endphp

                                            @foreach(['L' => 'listening', 'R' => 'reading', 'W' => 'writing', 'S' => 'speaking'] as $code => $subject)
                                                @php
                                                    $isAvailable = in_array($code, $subjects);
                                                    $status = $enrollmentCdtSet->{$subject . '_status'};
                                                    $score = $enrollmentCdtSet->{$subject . '_score'};
                                                    $subjectName = ucfirst($subject);
                                                    $iconClass = 'ico-' . substr($subject, 0, -3);
                                                    if ($subject === 'listening') $iconClass = 'ico-listen';
                                                    if ($subject === 'reading') $iconClass = 'ico-read';
                                                    if ($subject === 'writing') $iconClass = 'ico-write';
                                                    if ($subject === 'speaking') $iconClass = 'ico-speak';
                                                @endphp

                                                <li @class(['cdt-' . $subject, 'disabled' => !$isAvailable])>
                                                    <h6>
                                                        <i class="{{ $iconClass }}"></i>
                                                        {{ $subjectName }}
                                                    </h6>

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

                                                    @if($isAvailable)
                                                        @if($isCompleted)
                                                            {{-- 완료된 수강: 결과보기만 가능 --}}
                                                            @include('classroom.cdt.partials.cdt-buttons-completed', [
                                                                'status' => $status,
                                                                'subject' => $subject,
                                                                'enrollmentCdtSet' => $enrollmentCdtSet,
                                                                'hasFeedback' => $hasFeedback,
                                                            ])
                                                        @else
                                                            {{-- 진행중 수강: 모든 액션 가능 --}}
                                                            @include('classroom.cdt.partials.cdt-buttons-active', [
                                                                'status' => $status,
                                                                'subject' => $subject,
                                                                'enrollmentCdtSet' => $enrollmentCdtSet,
                                                                'hasFeedback' => $hasFeedback,
                                                                'isActive' => $isActive,
                                                                "isFeedbackActive" => $isFeedbackActive
                                                            ])
                                                        @endif
                                                    @endif
                                                </li>
                                            @endforeach

                                            {{-- Overall 점수 --}}
                                            <li class="cdt-overall">
                                                <h6>Overall</h6>
                                                <div class="score">{{ $enrollmentCdtSet->overall_score ?? '-' }}</div>

                                                @php
                                                    $allCompleted = collect(['L', 'R', 'W', 'S'])
                                                        ->filter(fn($code) => in_array($code, $subjects))
                                                        ->every(fn($code) => in_array($enrollmentCdtSet->{['L'=>'listening', 'R'=>'reading', 'W'=>'writing', 'S'=>'speaking'][$code] . '_status'}, ['COMPLETED', 'FINISHED']));
                                                @endphp

                                                @if($isCompleted || $allCompleted)
                                                    <a href="{{ route('classroom.cdt-result', ['service'=>$service, 'id'=>$enrollmentCdtSet->id, 'subject'=>'all']) }}"
                                                    class="cdt-btn overall enabled"
                                                    data-action="result"
                                                    data-subject="all"
                                                    data-subjects="{{ implode(',', $subjects) }}">전체결과보기</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>
</div>
@endsection

@section($service.'-script')
    {!! resource('js/common/jquery.nice-select.js') !!}
	{!! resource('js/cdt/cdt-result.js') !!}

    <script>
        const cdtResultManager = new CDTResultManager();

        function removePopup() {
            $('.popupWrap').remove();
            $('body,html').removeClass('noScroll');
        }

        function resultPopup(url, subject, subjects = '') {
            cdtResultManager.openResultPopup(url, subject, subjects);
        }

        $(document).ready(function () {
            $('.select-option').niceSelect();

            $('#selectCdt').on('change', function () {
                location.href = '{{ $isCompleted ? route('classroom.cdt-completed', ['service' => $service]) : 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 subjects = $(this).data('subjects') || '';

                    // 윈도우 크기 및 중앙 위치 계산
                    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) {
                        popup( {
                            title: 'CDT 모의고사 응시',
                            confirmText: '확인',
                            closeText: '취소',
                            icon: 'icon-q',
                            size: "large",
                            content: '선택한 CDT 테스트를 시작하시겠습니까?<br><br>응시 진행 중 [X] 또는 새로고침 시 작성한 모든 답변이 저장되지 않고 초기화됩니다.<br>결과를 확인하기 위해서는 꼭 제출을 완료해주시기 바랍니다.',
                            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, subjects);
                    } else if (action === 'retest') {
                        popup({
                            title: 'CDT 모의고사 재응시',
                            confirmText: '확인',
                            closeText: '취소',
                            icon: 'icon-q',
                            content: '선택한 CDT 과목을 재응시하시겠습니까?<br><br>재응시는 Listening, Reading 과목에 한해 한 번만 가능하며<br>재응시 후에는 더 이상 응시할 수 없습니다.<br>또한 기존 응시 결과는 모두 덮어씌워집니다.',
                            onConfirm: function () {
                                // test 창 열기 - 크게
                                window.open(url, '_blank', testWindowOptions);
                            }
                        });
                    } else if (action === 'feedback-request') {
                        @if (isset($feedback_remaining_count) && $feedback_remaining_count > 0)
                            popup({
                                title: 'CDT 모의고사 첨삭신청',
                                confirmText: '확인',
                                closeText: '취소',
                                icon: 'icon-q',
                                content: '첨삭 신청을 하시겠습니까?<br>신청 이후에는 수정 및 삭제가 불가합니다.',
                                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: '확인'
                                            });
                                        }
                                    });

									// const form = $('<form>', {
									// 	method: 'POST',
									// 	action: url
									// });
									// form.append($('<input>', {
									// 	type: 'hidden',
									// 	name: '_token',
									// 	value: '{{ csrf_token() }}'
									// }));
									// $('body').append(form);
									// form.submit();
                                }
                            });
                        @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: '확인'
                        });
                    }
                });
            });
        });
    </script>
@endsection