@extends('ielts.layout')

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

    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_ielts.css') !!}
    {!! resource('css/common/nice-select-mo.css') !!}
@endsection



@section("ielts-content")
    <div class="container_m">

        <div id="nav">
            <a href="{{ route('classroom.dashboard', ['service' => ! empty($service)&& in_array($service, ['ielts', 'academy']) ? $service : 'ielts' ]) }}" class="ico-back">뒤로가기</a>
            <h2>첨삭학습</h2>
        </div>
        <div id="tab">
            <ul>
                <li class="on">
                    <a href="#none">첨삭 등록</a>
                </li>
                <li>
                    <a href="{{ route('classroom.feedback-list', ['service' => 'ielts']) }}">첨삭 내역</a>
                </li>
               <li>
                   <a href="#none">임시저장</a>
               </li>
            </ul>
        </div>
        <div id="container" class="bg-gray">
            <ul class="product-list">
                @foreach ($enrollmentFeedbackPasses as $enrollmentFeedbackPass)
                <li>
                    <div class="title header">
                        <div class="header text">
                            <dl class="badge">
                                <dd class="bg-{{$enrollmentFeedbackPass->feedbackPass->type === 'Premium'? 'red' : 'blue'}}">{{ $enrollmentFeedbackPass->feedbackPass->type }}</dd>
                            </dl>
                            <div class="header-desc">
                                <img src="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/mo/{{$enrollmentFeedbackPass->feedbackPass->type === 'Premium'? 'ico-correct-pr' : 'ico-correct-bs'}}.svg" alt="" class="ml4">
                                <div>
                                    <h4>
                                        @if ($enrollmentFeedbackPass->enrollment->enrollmentCourses()->exists() && $enrollmentFeedbackPass->enrollment->status == 'READY')
                                            [강좌시작전]
                                        @endif
                                        {{ $enrollmentFeedbackPass->enrollment->product->name }}
                                        <span>{{ $enrollmentFeedbackPass->enrollment->productOption->name }}</span>
                                    </h4>
                                    <p>{{ $enrollmentFeedbackPass->name }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="detail correct">
                        <dl>
                            <dt>이용기간</dt>
                            <dd>{{ Carbon::parse($enrollmentFeedbackPass->enrollment->started_at)->format('y.m.d') }}~{{ Carbon::parse($enrollmentFeedbackPass->enrollment->ended_at)->format('y.m.d') }}</p></dd>
                        </dl>
                        <dl>
                            <dt>총 첨삭 횟수</dt>
                            <dd>{{ $enrollmentFeedbackPass->total_use_count == 0 ? '무제한' : (int) $enrollmentFeedbackPass->total_use_count.'회' }}</dd>
                        </dl>
                        <dl>
                            <dt>잔여 첨삭 횟수</dt>
                            <dd class="red">{{ $enrollmentFeedbackPass->total_use_count == 0 ? '무제한' : (int) $enrollmentFeedbackPass->remaining_count.'회' }}
                                @if ($enrollmentFeedbackPass->total_use_count > 0)<span>({{ $enrollmentFeedbackPass->total_use_count - (int) $enrollmentFeedbackPass->remaining_count }}회소진)</span>@endif
                            </dd>
                        </dl>
                        @if ($enrollmentFeedbackPass->unused_deduction_day > 0)
                        <dl class="w100">
                            <dt>미이용 차감일(등록주기)</dt>
                            <dd>{{ $enrollmentFeedbackPass->unused_deduction_day }}일</dd>
                        </dl>
                        @endif
                    </div>
                    <a href="#none" class="btn-go feedback-start"
                        data-status="{{ $enrollmentFeedbackPass->enrollment->status }}"
                        data-course="{{ $enrollmentFeedbackPass->enrollment->enrollmentCourses()->exists() ? 'true' : 'false' }}"
                        data-type="{{$enrollmentFeedbackPass->feedbackPass->type}}" data-id="{{$enrollmentFeedbackPass->id}}"
                        data-limit-exceeded="{{ $feedbackLimitStatus[$enrollmentFeedbackPass->id]['isLimitExceeded'] ? 'true' : 'false' }}"
                        data-limit-day="{{ $feedbackLimitStatus[$enrollmentFeedbackPass->id]['limit_day'] }}"
                        data-limit-count="{{ $feedbackLimitStatus[$enrollmentFeedbackPass->id]['limit_count'] }}"
                       >
                        첨삭등록
                    </a>
                </li>
                @endforeach
            </ul>
            <a href="#none" class="info-pop" data-info="info01">
                매주 첨삭, 무제한 첨삭, 모두의 첨삭은 어떻게 다른가요?
            </a>
        </div>
        <div id="info01" class="info-popup-wrap">
            <div class="info-popup">
                <a href="#none" class="close-info">닫기</a>
                <ul class="correct-info">
                    <li>
                        <img src="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/mo/ico-correct-01.svg" alt="">
                        <div>
                            <strong>매주 첨삭</strong>
                            <p>수강일로부터 7일에 한 번씩 가능</p>
                            <p>기간 내 미등록 시 해당 회차는 자동소멸</p>
                            <p>Premium 서비스 불포함</p>
                        </div>
                    </li>
                    <li>
                        <img src="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/mo/ico-correct-02.svg" alt="">
                        <div>
                            <strong>무제한 첨삭</strong>
                            <p>수강 기간 내 무제한 첨삭 등록</p>
                            <p>Premium 서비스 불포함</p>
                        </div>
                    </li>
                    <li>
                        <img src="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/mo/ico-correct-03.svg" alt="">
                        <div>
                            <strong>모두의 첨삭</strong>
                            <p>등록주기 제한 없이 부여된 횟수만큼 수강 기간 내 사용 가능</p>
                            <p>Premium 서비스 포함</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
            <div id="correct01" class="correct-popup-wrap">
                <div class="correct-popup-header">
                    <h2>
                        <span>첨삭 작성</span>
                        <strong>기본 옵션 선택</strong>
                    </h2>
                    <a href="#none" class="ico-close">닫기</a>
                </div>
                <div class="correct-popup-container">
                    <div class="correct-popup-button">
                        <a href="#none" class="btn-go " onClick="setPattern(this)">다음</a>
                    </div>
                    <div class="correct-popup-contents">
                        <ul class="border-list">
                            <li>
                                <dl>
                                    <dt>모듈 선택</dt>
                                    <dd>
                                        <input type="radio" id="module01" name="module" value="academic" checked>
                                        <label for="module01">Academic</label>
                                    </dd>
                                    <dd>
                                        <input type="radio" id="module02" name="module" value="general">
                                        <label for="module02">General</label>
                                    </dd>
                                </dl>
                            </li>
                            <li>
                                <dl>
                                    <dt>과목 선택</dt>
                                    <dd>
                                        <input type="radio" id="subject01" name="subject" value="writing" checked>
                                        <label for="subject01">Writing</label>
                                    </dd>
                                    <dd>
                                        <input type="radio" id="subject02" name="subject" value="speaking">
                                        <label for="subject02">Speaking</label>
                                    </dd>
                                </dl>
                            </li>
                            <li>
                                <dl>
                                    <dt>타입 선택</dt>
                                    <dl class="vertical">
                                        <dd>
                                            <input type="radio" id="type01" name="type" value="task 1" checked>
                                            <label for="type01">Task1</label>
                                        </dd>
                                        <dd>
                                            <input type="radio" id="type02" name="type" value="task 2">
                                            <label for="type02">Task2</label>
                                        </dd>
                                        <dd>
                                            <input type="radio" id="type03" name="type" value="part 2&3" disabled>
                                            <label for="type03">Part 2&3</label>
                                        </dd>
                                    </dl>
                                </dl>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="correct02" class="correct-popup-wrap">
                <div class="correct-popup-header">
                    <a href="#none" class="ico-back">뒤로가기</a>
                    <h2>
                        <span>첨삭 작성</span>
                        <strong class="topic-title">패턴 선택</strong>
                    </h2>
                    <a href="#none" class="ico-close">닫기</a>
                </div>
                <div class="correct-popup-container" id="topic-box">
                </div>
            </div>

        </div>
    </div>
@endsection


<style>
    input[type="radio"]:disabled + label {
        opacity: 0.5;
        cursor: not-allowed;
        color: #999;
    }
</style>
@section('ielts-script')
        <script>

            const feedbackPatterns = @json($feedbackPatterns);
            const teachers = @json($teachers);
            const AWS_S3_IMG_URL = '{{ env('AWS_S3_IMG_URL') }}';
            const formRoute = '{{ route('classroom.feedback-request', ['service' => 'ielts']) }}';
            let feedbackType = '{{$enrollmentFeedbackPass->feedbackPass->type ?? null}}';
            let feedbackId = '{{ $feedback_pass_id ?? null }}';
        </script>

        {!! resource('js/ielts/feedback-topic-mobile.js') !!}
        {!! resource('js/ielts/feedback-audio-recorder-mobile.js') !!}

    {!! resource('js/common/jquery.nice-select-mo.js') !!}
    <script>
        function move(feedback_pass_id) {
            // 선택된 옵션 요소 가져오기
            const selectedOption = $(`select.select-option option[value="${feedback_pass_id}"]`);

            // 선택된 옵션의 data-status 속성 확인
            const status = selectedOption.data('status');

            // READY 상태인 경우 알림 표시 후 함수 종료
            if (status === 'READY') {
                alertPopup('강좌시작전입니다.');

                // 기존에 선택된 값이 있는지 확인
                const currentPath = window.location.pathname;
                const pathParts = currentPath.split('/');
                const currentFeedbackPassId = pathParts[pathParts.length - 1];

                // URL에 피드백 ID가 있으면 해당 값으로, 없으면 빈 값으로 설정
                if (currentFeedbackPassId && !isNaN(currentFeedbackPassId)) {
                    $('select.select-option').val(currentFeedbackPassId).niceSelect('update');
                } else {
                    // URL에 ID가 없는 경우 선택 초기화
                    $('select.select-option').val('').niceSelect('update');
                }

                return;
            }

            // 정상 상태라면 페이지 이동
            location.href = "{{ route('classroom.feedback', ['service' => 'ielts']) }}/" + feedback_pass_id;
        }

        function validateForm(requestForm) {

            const $form = $(requestForm);
            const $content = $form.find('textarea[name="content"]');

            const $uploadFileUrl1 = $form.find('input[name="uploadedFileUrl1"]');
            const $uploadFileUrl2 = $form.find('input[name="uploadedFileUrl2"]');
            const $audioFile1 = $form.find('input[name="audio_file1"]');
            const $audioFile2 = $form.find('input[name="audio_file2"]');
            const $teacher = $form.find('input[name="teacher"]');
            let validated = true;

            if ($content.length > 0 && !$content.val().trim()) {
                alertPopup('내용을 입력해주세요.');
                return false;
            }


            if ($teacher.length > 0 && !$teacher.is(':checked')) {
                alertPopup('첨삭선생님을 선택해 주세요.');
                return false;
            }

            // is speaking
            if ($audioFile1.length > 0) {
                if (!$audioFile1.val().trim() && !$uploadFileUrl1.val().trim()) {
                    $("#speaking1").trigger('click');
                    alertPopup("등록되지 않은 part가 있습니다. 녹음파일을 모두 업로드 해주세요.");
                    return false;
                }

                if (!$audioFile2.val().trim() && !$uploadFileUrl2.val().trim()) {
                    alertPopup("등록되지 않은 part가 있습니다. 녹음파일을 모두 업로드 해주세요.");
                    return false;
                }
            }

            if (validated) return true;
            else return false;
        }

        $(document).ready(function () {
            $('.select-option').niceSelect();
            // 팝업 열기
            $(document).on("click", ".info-pop", function (e) {
                var target = $(this).attr("data-info");
                $('#' + target).addClass("on");
            });
            // 외부영역 클릭 시 팝업 닫기
            $(document).mouseup(function (e) {
                var LayerPopup = $(".info-popup-wrap");
                if (LayerPopup.has(e.target).length === 0) {
                    LayerPopup.removeClass("on");
                }
            });
            // 팝업 열기
            $(document).on("click", ".close-info", function (e) {
                var targetId = $(e.target).closest('.info-popup-wrap').attr('id');
                $('#' + targetId).toggleClass('on')
            });
            // 팝업 닫기
            $(document).on("click", ".ico-close", function (e) {
                $(e.target).closest('.correct-popup-wrap').hide()
            });


            $(document).on("click", ".feedback-start", function (e) {
                const status = $(this).data('status');
                const course = $(this).data('course');
                if (status === 'READY' && course) {
                    alertPopup('강좌시작전입니다.');
                    return;
                }
                feedbackType = $(this).data('type');
                feedbackId = $(this).data('id');

                const isLimitExceeded = $(this).data('limit-exceeded') === true;
                const limitDay = $(this).data('limit-day');
                const limitCount = $(this).data('limit-count');

                if ( isLimitExceeded ) {
                    let message = '현재 이용 제한 기간 내 횟수를 모두 사용하셨습니다.';
                    if (limitDay && limitCount) {
                        message += ` (${limitDay}일에 ${limitCount}회 제한)`;
                    }

                    alertPopup(message);
                    return;
                }

                $("#correct01").show();
            });

            $(document).on("click", '.ico-speaker, .ico-setting', function (e){
                $(this).toggleClass('on');
            });

            $(document).on('click', ".notice-icon-right-wrapper", function () {
                event.preventDefault();
                $(this).parents('.notice-container').hide();
            });
        });
    </script>
@endsection