@php
    $service = 'ielts';
@endphp
@extends('classroom.feedback.layout')

@section("feedback-css")
{!! resource('css/common/nice-select.css') !!}
{!! resource('css/components/audio.css') !!}
<style>
        .recorder button, .recorder a { border: solid 1px #333; padding: 0.5em}
    </style>
@endsection

@section("feedback-content")
<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 x-data="feedbackWrap" id="feedbackWrap">
    <input type="hidden" name="device" value="desktop" id="device">
    <div class="list-info mt40" x-show=" ! $.isEmptyObject($store.feedback.temporary )">
        <a href="javascript:void(0)" @click=" isOpenTemporary = ! isOpenTemporary ">임시저장한 내용 불러오기</a>
    </div>

    @include("classroom.ielts.partials.feedback-pass")

    <div x-show="$store.feedback.pass && $store.feedback.pass.isAvailable" >
        <h5 x-text="($store.feedback.pass.totalUseCount + 1) + `회차 첨삭등록`" class="option-title mt60"></h5>

        <div class="option-cont">
            <div class="option-category between">
                <dl>
                    <dt>과목 선택</dt>
                    <dd>
                        <select x-ref="pSubject" name="subject" @change="component.onChangeSubject()" x-bind:disabled="$store.feedback.isDisabled">
                            <option value="" x-show="$.isEmptyObject($store.feedback.categories.subject)">과목 선택</option>
                            <template x-for="(item , subject) in $store.feedback.config">
                                <option :key="subject" :value="subject" x-text="subject" x-bind:selected="subject == $store.feedback.categories.subject"></option>
                            </template>
                        </select>
                    </dd>
                </dl>
                <dl :disabled="$.isEmptyObject($store.feedback.categories.subject)">
                    <dt>첨삭타입 선택</dt>
                    <dd>
                        <select x-ref="pType" name="type" :disabled="$.isEmptyObject($store.feedback.categories.subject)" @change="component.onChangePattern()" x-bind:disabled="$store.feedback.isDisabled">
                            <option value="" x-show="$.isEmptyObject($store.feedback.config[$store.feedback.categories.subject])">타입 선택</option>
                            <template x-if="! $.isEmptyObject($store.feedback.config[$store.feedback.categories.subject])">
                                <template x-for="(pattern, pIndex) in $store.feedback.config[$store.feedback.categories.subject]" >
                                    <option :key="pIndex" :value="pIndex" x-text="pIndex" x-show="pIndex != 0"></option>
                                </template>
                            </template>
                        </select>
                    </dd>
                </dl>
                <dl :disabled="$store.feedback.categories.type != 'Task 1'">
                    <dt>모듈 선택</dt>
                    <dd>
                        <select x-ref="pModule" name="module" :disabled="$store.feedback.categories.type != 'Task 1'" @change="component.onChangePattern()" x-bind:disabled="$store.feedback.isDisabled">
                            <option value="" x-show="$store.feedback.categories.type != 'Task 1'">모듈 선택</option>
                            <template x-if="$store.feedback.categories.type == 'Task 1'">
                                <template x-for="(pattern, m) in $store.feedback.config[$store.feedback.categories.subject][$store.feedback.categories.type]" >
                                    <option :key="m" :value="m" x-text="capitalizeFirstLetter(m)"></option>
                                </template>
                            </template>
                        </select>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="correct-process mt40" id="topic-box" x-show="! $.isEmptyObject($store.feedback.patterns)">
            <div class="correct-process-header">
                <ul>
                    <template x-for="(s , index) in steps ">
                        <li :class="{ 'on' : step.key == s.key , 'off' : step.key != s.key }" :key="index" @click="component.onChangeStep(s.key)" >
                            <i :class="'ico-' + s.key"></i>
                            <span x-text="`${s.name}`"></span>
                        </li>
                    </template>
                </ul>
            </div>
            <div :class="{'correct-process-body' : true, 'active' : step.key == 'pattern'}">
                <ul class="select-crt-prc">
                    {{-- 패턴단락 --}}
                    <template x-for="(content , pattern) in $store.feedback.patterns">
                        <li @click="setFeedbackCategory('pattern', pattern)">
                            <input type="radio" name="pattern" x-bind:checked="pattern == $store.feedback.categories.pattern">
                            <label for="pt1">
                                <dl>
                                    <dt x-text="pattern"></dt>
                                    <dd x-text="content"></dd>
                                </dl>
                            </label>
                        </li>
                    </template>
                </ul>
            </div>
            <div :class="{'correct-process-body' : true, 'active' : step.key == 'chart'}">
                <ul class="select-crt-prc">
                    <template x-for="(chart , index) in $store.feedback.charts">
                        <li @click="setFeedbackCategory('chart', chart)">
                            <input type="radio" name="chart" x-bind:checked="chart == $store.feedback.categories.chart">
                            <label>
                                <dl>
                                    <dt x-text="`Chart ${index + 1}`"></dt>
                                    <dd x-text="`${chart} CHART`"></dd>
                                </dl>
                            </label>
                        </li>
                    </template>
                </ul>
            </div>
            <div :class="{'correct-process-body' : true, 'active' : step.key == 'topic'}" x-data="{ 'isOpenTopic' : true }">
                <div :class="{ 'topic-title' : true, 'on' : isOpenTopic }" @click=" ! $.isEmptyObject($store.feedback.topics) ? isOpenTopic = ! isOpenTopic : isOpenTopic = false ">
                    <strong x-text="$store.feedback.topics.length > 0 ? '토픽선택' : '선택한 조건에 해당하는 토픽이 없습니다. 다른 조건을 선택해 주세요.' "></strong>
                    <i class="ico-option-arrow"></i>
                </div>
                <ul class="select-crt-prc topic" @click="isOpenTopic = ! isOpenTopic" >
                    <template x-for="(topic , index) in $store.feedback.topics">
                        <li @click="subComponent.setFeedbackTopic(topic)">
                            <input type="radio" name="topic" x-bind:checked="topic.id == $store.feedback.topic.id">
                            <label>
                                <dl>
                                    <dt x-text="`Topic ${index + 1}`"></dt>
                                    <dd x-html="topic.question"></dd>
                                </dl>
                            </label>
                        </li>
                    </template>
                </ul>
                <template x-if="! $.isEmptyObject($store.feedback.topic)">
                    <div :class="{'topic-contents' : true, 'active' : true }">
                        <dl>
                            <dt x-text="$store.feedback.categories.pattern"></dt>
                            <dd x-text="$store.feedback.patterns[$store.feedback.categories.pattern]"></dd>
                        </dl>
                        <dl x-show="$store.feedback.categories.chart">
                            <dt x-text="`Chart ` + ($store.feedback.charts.indexOf($store.feedback.categories.chart) + 1)"></dt>
                            <dd x-text="`${$store.feedback.categories.chart} CHART`"></dd>
                        </dl>
                        <dl class="topic">
                            <dt x-text="$store.feedback.categories.type"></dt>
                            <dd x-html="$store.feedback.topic ? $store.feedback.topic.question : ''"></dd>
                        </dl>
                        <template x-if="! $.isEmptyObject($store.feedback.topic) && ! $.isEmptyObject($store.feedback.topic.chart_s3_key) ">
                            <div class="text-center">
                                <img :src="! $.isEmptyObject($store.feedback.topic) && ! $.isEmptyObject($store.feedback.topic.chart_s3_key) ? $store.feedback.topic.chart_s3_key : ''" alt="">
                            </div>
                        </template>
                        <div class="text-center mt16">
                            <a href="javascript:void(0)" class="my-btn-default lg" @click="setFeedbackStep('essay'); isOpenTopic = true; ">에세이 작성</a>
                        </div>
                    </div>
                </template>
            </div>

            <div :class="{'correct-process-body' : true, 'active' : step.key == 'essay'}">
                <template x-if="! $.isEmptyObject($store.feedback.pass) && $store.feedback.pass.feedback_pass.type == 'Premium'">
                    <div class="essay-contents pd24 essay-teacher">
                        <h4>첨삭선생님 선택</h4>
                        <div class="select-teacher">
                            <div class="tcSwiper-wrap">
                                <div class="swiper tcSwiper" id="teacherSwiper">
                                <div class="swiper-wrapper">
                                        <template x-for="(teacher, index) in $store.feedback.teachers" >
                                            <div class="swiper-slide" :key="index" @click="setFeedbackTeacher(index)">
                                                <input type="radio" id="" name="teacher" x-bind:checked="! $.isEmptyObject($store.feedback.teacher) && teacher.id == $store.feedback.teacher.id">
                                                <label for="tc1">
                                                    <img :src="teacher.photo_url" :alt="teacher.name">
                                                    <p class="tc-name">
                                                        <strong x-text="teacher.name"></strong>
                                                        <span>선생님</span>
                                                    </p>
                                                    <a :href="teacher.sample_video_url" class="go-video" target="_blank">
                                                        샘플영상
                                                        <i class="ico-video"></i>
                                                    </a>
                                                </label>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>
                </template>

                @include("classroom.ielts.partials.feedback-writing")
                @include("classroom.ielts.partials.feedback-speaking")

            </div>
        </div>

    </div>



    <div :class="{'popup-wrap' : true, 'w740' : true, 'on' : isOpenTemporary }" id="temporary">
        <div class="popup-header">
            <p>임시저장 리스트</p>
            <a href="javascript:void(0)" class="ico-close" @click=" isOpenTemporary = ! isOpenTemporary "></a>
        </div>
        <div class="popup-contents imsi">
            <template x-for="(t , tIndex) in $store.feedback.temporary">
                <div>
                    <input type="radio" :id="`imsi${tIndex}`" name="imsi" @click="setTempFeedback(tIndex)" x-bind:checked="t.id == contents.temp_id">
                    <label :for="`imsi${tIndex}`">
                        <dl class="imsi-wrap">
                            <dt class="ico-imsi"></dt>
                            <dd>
                                <div class="badge-wrap">
                                    <span class="badge" x-text="t.pass_type">Basic</span>
                                    <span class="badge" x-text="t.subject">Writing</span>
                                    <span class="badge gray" x-text="`${t.round}회차`"></span>
                                    <span class="date" x-text="`작성일 ${t.date}`"></span>
                                </div>
                                <div class="title" x-text="t.pass_name">첨삭명이 들어갑니다.첨삭명이 들어갑니다.첨삭명이 들어갑니다.</div>
                                <div class="subject" x-html="t.question"></div>
                                <div class="contents" x-text="t.writing_text"></div>
                            </dd>
                        </dl>
                    </label>
                </div>
            </template>
        </div>
    </div>


</div>

@endsection


@section("feedback-script")
    {!! resource('js/common/jquery.nice-select.js') !!}
    {!! resource( 'js/ielts/feedback/api.js') !!}
    {!! resource( 'js/ielts/feedback/common.js') !!}
    {!! resource( 'js/ielts/feedback/record.js') !!}

    <script type="module">
        import main from "{{ resource( 'js/ielts/feedback/modules/desktop-main.js', true) }}"
        import writing from "{{ resource( 'js/ielts/feedback/modules/writing.js', true) }}"
        import speaking from "{{ resource( 'js/ielts/feedback/modules/speaking.js', true) }}"
        import audio from "{{ resource( 'js/ielts/feedback/modules/audio-recorder.js', true) }}"

        window.feedbackModules = {
            "main" : main,
            "writing" : writing,
            "speaking" : speaking,
            'audio' : audio
        }
    </script>

    <script>
        $(function(){
            $('#feedbackWrap a').on('click', function (e) {
                e.preventDefault(); // 기본 동작 방지 (스크롤 이동 방지)
            });
        })
    </script>


@endsection