@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">
                <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">
                            <div class="bg-lightgreen pd32 br12">
                                <table class="my-correct-table">
                                    <colgroup>
                                        <col width="173">
                                        <col width="280">
                                        <col width="280">
                                        <col width="281">
                                    </colgroup>
                                    <thead>
                                        <tr>
                                            <th class="text-left">구분</th>
                                            <th><i class="ico-ctable-01"></i>매주 첨삭</th>
                                            <th><i class="ico-ctable-02"></i>무제한 첨삭</th>
                                            <th class="bdr0"><i class="ico-ctable-03"></i>첨삭권</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>미이용시 차감</td>
                                            <td class="text-center">수강일로부터 7일에 한 번씩 가능,<br>기간 내 미등록 시 해당 회차는 자동소멸</td>
                                            <td class="text-center">수강 기간 내 하루 5회까지 첨삭 제출 가능</td>
                                            <td class="text-center bdr0">등록주기 제한 없이 부여된 횟수만큼<br>수강 기간 내 사용 가능</td>
                                        </tr>
                                        <tr>
                                            <td>Premium 서비스 여부</td>
                                            <td class="text-center">불포함</td>
                                            <td class="text-center">불포함</td>
                                            <td class="text-center bdr0">포함</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

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

                            @if ($enrollmentFeedbackPasses->count() > 0)
                                <div class="bg-white pd2416 br12">
                                    <select class="select-option wide" onchange="move(this.value)">
                                        <option value="">상품을 선택해 주세요.</option>
                                        @foreach ($enrollmentFeedbackPasses as $enrolFeedbackPass)
                                            <option
                                                value="{{ $enrolFeedbackPass->id }}"
                                                data-status="{{ $enrolFeedbackPass->enrollment->status }}"
                                                date="수강기간 : {{ $enrolFeedbackPass->enrollment->started_at }}~{{ $enrolFeedbackPass->enrollment->ended_at }}"
                                                correct="{{ $enrolFeedbackPass->name }}"
                                                @selected(isset($feedback_pass_id) && $feedback_pass_id == $enrolFeedbackPass->id)>
                                                @if ($User->is->admin) {{ $enrolFeedbackPass->id }} @endif
                                                @if ($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>
                                                {{ $enrollmentFeedbackPass->enrollment->started_at }}~{{ $enrollmentFeedbackPass->enrollment->ended_at }}
                                            </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 ? '무제한' : $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 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;
        }

        @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 && !$content.val().trim()) {
                $('.error-content').show();
                validated = false;
            }

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

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

            // is speaking
            if ($audioFile1.length > 0) {
                if (!$audioFile1.val().trim() && !$uploadFileUrl1.val().trim()) {
                    $('.error-audio-file1').show();
                    validated = false;
                }

                if (!$audioFile2.val().trim() && !$uploadFileUrl2.val().trim()) {
                    $('.error-audio-file2').show();
                    $audioFile2.focus();
                    validated = false;
                }
            }

            if (validated) return true;
            else return false;
        }
        @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();
        });
    </script>
@endsection