@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}
    {!! resource('css/common/nice-select.css') !!}
    {!! resource('css/myclass/my_class.css') !!}

    <style>
        .recorder button, .recorder a { border: solid 1px #333; padding: 0.5em}
    </style>
@endsection

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

            <div class="my-class-contents feedback-page">
                <div class="row">
                    <div class="column c100p">
                        <div class="my-tab">
                            <ul>
                                <li class="on"><a href="#none">첨삭신청</a></li>
                                <li><a href="{{ route('classroom.feedback-list', ['service' => 'ielts']) }}">첨삭내역</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            @if ($enrollmentFeedbackPasses->count() > 0)
                                @php
                                    $show = $enrollmentFeedbackPasses->contains(function ($cdtPass) {
                                    $enrollment = $cdtPass->enrollment;
                                    return $enrollment && should_show_content($enrollment->started_at, $enrollment->ended_at);
                                    });
                                @endphp
                                @if($show)
                                    <div class="notice-container">
                                        <a href="/ielts/board/faq/view/28" target="_blank"
                                           class="notice-link">
                                            <svg width="24" height="24" class="notice-icon-left" fill="none" viewBox="0 0 24 24"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="12" cy="12" r="9" stroke="#0059FF" stroke-width="2"/>
                                                <line x1="12" y1="8" x2="12" y2="12" stroke="#0059FF" stroke-width="2" stroke-linecap="round"/>
                                                <circle cx="12" cy="15" r="1" fill="#0059FF"/>
                                            </svg>
                                            출석률, 이용횟수가 이전과 다르게 보이시나요?
                                        </a>
                                    </div>
                                @endif
                            @endif
							<div class="serviceGuide">
								<table>
									<colgroup>
										<col width="25%">
										<col width="25%">
										<col width="25%">
										<col width="25%">
									</colgroup>
									<thead>
										<tr>
											<th>첨삭 유형</th>
											<th><p><i style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/my_class/feedback-serviceGuide-icon1.svg');"></i>매주 첨삭</p></th>
											<th><p><i style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/my_class/feedback-serviceGuide-icon2.svg');"></i>무제한 첨삭</p></th>
											<th><p><i style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/my_class/feedback-serviceGuide-icon3.svg');"></i>첨삭권(쿠폰)</p></th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th>제공방식</th>
											<td>매주 1회 첨삭권 자동 지급 <br>수강 시작일 기준 매 7일마다</td>
											<td>수강 기간 중 제한 없이 <br>자유롭게 신청 가능</td>
											<td>정해진 회수 내 자유 사용, <br>소진형 첨삭 신청 쿠폰 사용</td>
										</tr>
										<tr>
											<th>유의사항</th>
											<td>기간 내 미등록 시 <br>해당 회차 첨삭권 자동 소멸</td>
											<td>1일 최대 5회 작성 가능, <br>수강 기간 내 자유 사용 가능</td>
											<td>수강 기간 내에서만 사용 가능, <br>잔여 횟수 확인 필요</td>
										</tr>
									</tbody>
								</table>
								<div class="bottomTxt">
									<p>모든 첨삭은 수강 기간 내에서만 신청 가능 하니, 기간을 꼭 /확인해 주세요.</p>
									<p>문의 사항이 있을 경우 고객센터 또는 1:1 게시판을 통해 연락 주시기 바랍니다.</p>
								</div>
							</div>

                            <div class="list-info mt40">
                                {{-- <a href="#none">임시저장한 내용 불러오기</a> --}}
                            </div>

                            @if ($enrollmentFeedbackPasses->count() > 0)
                                <div class="bg-white pd2416 br12 product-select-area">
                                    <select class="select-option wide" onchange="checkLimitAndMove(this.value)">
                                        <option value="">상품을 선택해 주세요.</option>
                                            @foreach ($enrollmentFeedbackPasses as $enrolFeedbackPass)
                                                <option
                                                    value="{{ $enrolFeedbackPass->id }}"
                                                    data-status="{{ $enrolFeedbackPass->enrollment->status }}"
                                                    data-course="{{ $enrolFeedbackPass->enrollment->enrollmentCourses()->exists() ? 'true' : 'false' }}"
                                                    data-limit-exceeded="{{ $feedbackLimitStatus[$enrolFeedbackPass->id]['isLimitExceeded'] ? 'true' : 'false' }}"
                                                    data-limit-day="{{ $feedbackLimitStatus[$enrolFeedbackPass->id]['limit_day'] }}"
                                                    data-limit-count="{{ $feedbackLimitStatus[$enrolFeedbackPass->id]['limit_count'] }}"
                                                    date="수강기간 : {{ \Illuminate\Support\Carbon::parse($enrolFeedbackPass->enrollment->started_at)->format('Y.m.d') }}~{{ \Illuminate\Support\Carbon::parse($enrolFeedbackPass->enrollment->ended_at)->format('Y.m.d') }}"
                                                    correct="{{ $enrolFeedbackPass->name }}"
                                                    @selected(isset($feedback_pass_id) && $feedback_pass_id == $enrolFeedbackPass->id)>
                                                    {{-- @if ($User->is->admin) {{ $enrolFeedbackPass->id }} @endif --}}
                                                    @if ($enrolFeedbackPass->enrollment->enrollmentCourses()->exists() && $enrolFeedbackPass->enrollment->status == 'READY')[강좌시작전]@endif
                                                    {{ $enrolFeedbackPass->enrollment->product->name }} {{ $enrolFeedbackPass->enrollment->productOption->name }}
                                                </option>
                                            @endforeach
                                    </select>

                                    @if (isset($feedback_pass_id))
                                    <div class="option-category pd2416 pb0">
                                        <dl>
                                            <dt>
                                                선택상품
                                            </dt>
                                            <dd>
                                                {{ $enrollmentFeedbackPass->enrollment->product->name }} {{ $enrollmentFeedbackPass->enrollment->productOption->name }}
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                서비스 구분
                                            </dt>
                                            <dd id="feedback_type" data-value="{{ $enrollmentFeedbackPass->feedbackPass->type }}">
                                                {{ $enrollmentFeedbackPass->feedbackPass->type }}
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                이용기간
                                            </dt>
                                            <dd>
                                                {{ \Illuminate\Support\Carbon::parse($enrollmentFeedbackPass->enrollment->started_at)->format('Y.m.d') }} ~ {{ \Illuminate\Support\Carbon::parse($enrollmentFeedbackPass->enrollment->ended_at)->format('Y.m.d') }}
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                첨삭명
                                            </dt>
                                            <dd>
                                                {{ $enrollmentFeedbackPass->name }}
                                            </dd>
                                        </dl>
                                        @if ($enrollmentFeedbackPass->unused_deduction_day > 0)
                                        <dl class="w100p">
                                            <dt>
                                                미이용 차감일(등록주기)
                                            </dt>
                                            <dd>
                                                {{ $enrollmentFeedbackPass->unused_deduction_day }}일
                                            </dd>
                                        </dl>
                                        @endif
                                        <dl class="w100p">
                                            <dt>
                                                첨삭명
                                            </dt>
                                            <dd>
                                                <span>총 첨삭회수 {{ $enrollmentFeedbackPass->total_use_count == 0 ? '무제한' : $enrollmentFeedbackPass->total_use_count.'회' }}</span>
                                                @if ($enrollmentFeedbackPass->total_use_count > 0)<span>첨삭 소진 횟수 : {{ $enrollmentFeedbackPass->total_use_count - $enrollmentFeedbackPass->remaining_count }}회</span>@endif
                                                <span>잔여 첨삭 횟수 <strong>{{ $enrollmentFeedbackPass->total_use_count == 0 ? '무제한' : intval($enrollmentFeedbackPass->remaining_count).'회' }}</strong></span>
                                            </dd>
                                        </dl>
                                    </div>
                                    @endif
                                </div>

                                @if (isset($feedback_pass_id))
                                <h5 class="option-title mt60">
                                    {{ $enrollmentFeedbackPass->total_use_count - $enrollmentFeedbackPass->remaining_count + 1 }}회차 첨삭 등록
                                </h5>

                                <div class="option-cont">
                                    <div class="option-category between">
                                        <dl>
                                            <dt>
                                                과목 선택
                                            </dt>
                                            <dd>
                                                <select name="subject" onchange="setType(this.value)">
                                                    <option value="">과목 선택</option>
                                                    @foreach ($feedbackPatterns as $subject => $types)
                                                    <option value="{{ $subject }}">{{ $subject }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                        </dl>
                                        <dl disabled>
                                            <dt>
                                                첨삭타입 선택
                                            </dt>
                                            <dd>
                                                <select name="type" disabled onchange="setPattern(this.value)">
                                                    <option value="">타입 선택</option>
                                                </select>
                                            </dd>
                                        </dl>
                                        <dl disabled>
                                            <dt>
                                                모듈 선택
                                            </dt>
                                            <dd>
                                                <select name="module" disabled onchange="setPattern(this.value)">
                                                    <option value="">모듈 선택</option>
                                                    @foreach ($modules as $module)
                                                    <option value="{{ $module }}">{{ ucfirst($module) }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                        </dl>
                                    </div>

                                    <div class="correct-process mt40 d-none" id="topic-box">
                                        <div class="correct-process-header">
                                            <ul id="tab-container"></ul>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @else
                                <div class="noData editing"><div class="flex"><p>사용 가능한 첨삭 상품이 없습니다.</p></div></div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('ielts-script')
    @if (isset($feedback_pass_id))
    <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']) }}';
        const feedbackId = '{{ $feedback_pass_id ?? null }}';
    </script>

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

    {!! resource('js/common/jquery.nice-select.js') !!}

    <script>
        function checkLimitAndMove(feedback_pass_id) {
            if (!feedback_pass_id) return;

            // 선택된 옵션 요소 가져오기
            const selectedOption = $(`select.select-option option[value="${feedback_pass_id}"]`);

            // 선택된 옵션의 data 속성 확인
            const status = selectedOption.data('status');
            const course = selectedOption.data('course');
            const isLimitExceeded = selectedOption.data('limit-exceeded') === true;
            const limitDay = selectedOption.data('limit-day');
            const limitCount = selectedOption.data('limit-count');

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

            // 이용 제한에 걸린 경우 알림 표시 후 이동
            if (isLimitExceeded) {
                let message = '현재 이용 제한 기간 내 횟수를 모두 사용하셨습니다.';
                if (limitDay && limitCount) {
                    message += ` (${limitDay}일에 ${limitCount}회 제한)`;
                }

                alertPopup(message, function() {
                    // 알림 후 해당 페이지로 이동 (제한 상태를 표시하기 위해)
                    location.href = "{{ route('classroom.feedback', ['service' => 'ielts']) }}/" + feedback_pass_id;
                });

                resetSelect();
                return;
            }

            // 제한 없는 경우 바로 이동
            location.href = "{{ route('classroom.feedback', ['service' => 'ielts']) }}/" + feedback_pass_id;
        }

        function resetSelect() {
            // 기존에 선택된 값이 있는지 확인
            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');
            }
        }

        // 기존 move 함수는 새로운 checkLimitAndMove 함수로 대체
        function move(feedback_pass_id) {
            checkLimitAndMove(feedback_pass_id);
        }
        // function move(feedback_pass_id) {
        //     // 선택된 옵션 요소 가져오기
        //     const selectedOption = $(`select.select-option option[value="${feedback_pass_id}"]`);

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

        //     // READY 상태인 경우 알림 표시 후 함수 종료
        //     if (status === 'READY' && course) {
        //         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;
        // }

        @if (isset($feedback_pass_id))
        function validateForm(requestForm) {
            const $form = $(requestForm);
            const $content = $form.find('textarea[name="content"]');
            const $agree = $form.find('input[name="agree"]');
            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) {
                if (!$content.val().trim()) {
                    $('.error-content').show();
                    $content.focus();
                    validated = false;
                } else {
                    $('.error-content').hide();
                }
            }

            if (!$agree.is(':checked')) {
                $('.error-agree').show();
                validated = false;
            } else {
                $('.error-agree').hide();
            }

            if ($teacher.length > 0 && !$teacher.is(':checked')) {
                $('.error-teacher').show();
                validated = false;
            } else {
                $('.error-teacher').hide();
            }

            // is speaking
            if ($audioFile1.length > 0) {
                // Part 2 (audioRecorder1) 검증
                if (!$audioFile1.val().trim() && !$uploadFileUrl1.val().trim()) {
                    // 녹음이 완료되었는지 확인
                    const hasRecordedAudio1 = checkRecordingStatus('audioRecorder1');

                    if (hasRecordedAudio1) {
                        // 녹음은 했지만 업로드하지 않은 경우
                        $('.error-audio-file1').html('<p>Part 2 답변이 녹음되었습니다.<br>"녹음 완료" 버튼을 클릭하여 업로드를 완료해주세요.</p>').show();
                    } else {
                        // 녹음도 파일 업로드도 하지 않은 경우
                        $('.error-audio-file1').html('<p>Part 2 답변을 녹음하거나 음성파일을 업로드해주세요.</p>').show();
                    }
                    validated = false;
                } else {
                    $('.error-audio-file1').hide();
                }

                // Part 3 (audioRecorder2) 검증
                if (!$audioFile2.val().trim() && !$uploadFileUrl2.val().trim()) {
                    // 녹음이 완료되었는지 확인
                    const hasRecordedAudio2 = checkRecordingStatus('audioRecorder2');

                    if (hasRecordedAudio2) {
                        // 녹음은 했지만 업로드하지 않은 경우
                        $('.error-audio-file2').html('<p>Part 3 답변이 녹음되었습니다.<br>"녹음 완료" 버튼을 클릭하여 업로드를 완료해주세요.</p>').show();
                    } else {
                        // 녹음도 파일 업로드도 하지 않은 경우
                        $('.error-audio-file2').html('<p>Part 3 답변을 녹음하거나 음성파일을 업로드해주세요.</p>').show();
                    }
                    validated = false;
                } else {
                    $('.error-audio-file2').hide();
                }
            }

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

        function checkRecordingStatus(recorderId) {
            const $recorder = $('#' + recorderId);
            const $player = $recorder.find('.player');
            const $audio = $player.find('audio');
            const $controlButton = $recorder.find('button.control-button');

            // 플레이어가 표시되고 오디오 소스가 있으면 녹음이 완료된 상태
            // 하지만 uploadedFileUrl이 없으면 "녹음 완료" 버튼을 누르지 않은 상태
            const hasAudioSource = $audio.attr('src') && $audio.attr('src').trim() !== '';
            const isPlayerVisible = $player.is(':visible') || $player.hasClass('on');
            const hasUploadedUrl = $recorder.find('.uploadedFileUrl').val().trim() !== '';

            // 녹음은 했지만 업로드하지 않은 상태
            return hasAudioSource && isPlayerVisible && !hasUploadedUrl;
        }
        @endif

        $(document).ready(function () {
            /*$('.sub-tab ul li').on('click', function () {
                $(this).addClass('on').siblings('li').removeClass('on')
                var nowTab = $(this).index() + 1;
                $('.sub-tab').children('#tab-cont'+nowTab).show().siblings('[id^="tab-cont"]').hide()
            });*/

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