@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>
</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: '확인'
                        });
                    }
                });
            });
        });
    </script>
@endsection