@php
    $service = 'ielts';
    $type = $type ?? 'pass'
@endphp
@extends('classroom.feedback.layout-mobile')

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

    {!! resource('css/myclass/my_class_mo.css') !!} --}}
    {!! resource('css/components/audio.css') !!}
    {!! resource('css/myclass/my_class_mo_ielts.css') !!}
@endsection



@section("feedback-content")

    <div x-data="feedbackWrap" id="feedbackWrap">
        <input type="hidden" name="device" value="mobile" id="device">

        @if ($type == 'pass')
            @include("classroom.ielts.partials.feedback-mobile-pass")
        @else
            @include("classroom.ielts.partials.feedback-mobile-temp")
        @endif



        <div :class="{'correct-popup-wrap' : true, 'active' : $store.feedback.isStarted }">
            <div class="correct-popup-header" style="display: none" x-show="$store.feedback.isStarted">
                <a href="#none" class="ico-back" @click="component.onChangeStep(false)" x-show="step.seq > 0 && ! $store.feedback.isDisabled"></a>
                <h2>
                    <span>첨삭 작성</span>
                    <strong x-text="`${step.name}`"></strong>
                </h2>
                <a href="#none" class="ico-close" @click="component.onClose()" data-disabled="false">닫기</a>
            </div>
            <div class="correct-popup-container" x-show="stepId == 'intro' " style="display: none">
                <div class="correct-popup-button">
                    <button :class="{'btn-go': true, 'disabled' : $.isEmptyObject($store.feedback.patterns) } " @click="component.onChangeStep(true)">다음</button>
                </div>
                <div class="correct-popup-contents">
                    <ul class="border-list">
                        <li>
                            <dl>
                                <dt>과목 선택</dt>
                                <template x-for="(item , subject) in $store.feedback.config">
                                    <dd>
                                        <input type="radio" name="subject" :id="subject" @click="component.onChangeSubject(subject)" x-bind:checked="subject == $store.feedback.categories.subject">
                                        <label :for="subject" x-text="subject"></label>
                                    </dd>
                                </template>
                            </dl>
                        </li>
                        <li x-show="! $.isEmptyObject($store.feedback.categories.subject)">
                            <dl>
                                <dt>타입 선택</dt>
                                <dl class="vertical">
                                    <template x-if="! $.isEmptyObject($store.feedback.config[$store.feedback.categories.subject])">
                                        <template x-for="(pattern, pIndex) in $store.feedback.config[$store.feedback.categories.subject]" >
                                            <dd x-show="pIndex != 0">
                                                <input type="radio" :id="pIndex" name="type" x-bind:checked="pIndex == $store.feedback.categories.type" @click="component.onChangeType(pIndex)">
                                                <label :for="pIndex" x-text="pIndex">Task1</label>
                                            </dd>
                                        </template>
                                    </template>
                                </dl>
                            </dl>
                        </li>
                        <li x-show="$store.feedback.categories.type == 'Task 1'">
                            <dl>
                                <dt>모듈 선택</dt>
                                <template x-if="! $.isEmptyObject($store.feedback.config[$store.feedback.categories.subject])">
                                    <template x-for="(pattern, m) in $store.feedback.config[$store.feedback.categories.subject][$store.feedback.categories.type]" >
                                        <dd>
                                            <input type="radio" :id="m" name="module" :value="m"  x-bind:checked="m == $store.feedback.categories.module">
                                            <label :for="m" x-text="capitalizeFirstLetter(m)"  @click="component.onChangeModule(m)"></label>
                                        </dd>
                                    </template>
                                </template>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="correct-popup-container" x-show="stepId == 'pattern' " style="display: none">
                <div class="correct-popup-contents">
                    <ul class="label-list">
                        <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 >
                                    <dl>
                                        <dt x-text="pattern"></dt>
                                        <dd x-text="content"></dd>
                                    </dl>
                                </label>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
            <div class="correct-popup-container" x-show="stepId == 'chart' " style="display: none">
                <div class="correct-popup-contents">
                    <ul class="label-list">
                        <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>
            <div class="correct-popup-container" x-show="stepId == 'topic' " style="display: none">
                <div class="correct-popup-button">
                    <a href="#none" class="btn-go" @click="component.onChangeStep(true)" >에세이 작성</a>
                </div>
                <div class="correct-popup-contents">
                    <ul class="topic-select">
                        <template x-for="(topic , index) in $store.feedback.topics">
                            <li :class="{'on' : topic.id == $store.feedback.topic.id}"  @click="subComponent.setFeedbackTopic(topic)">
                                <a href="#none" x-text="`Topic ${index + 1}`"></a>
                            </li>
                        </template>
                    </ul>
                    <template x-if="! $.isEmptyObject($store.feedback.topic)">
                        <div class="topic-wrap">
                            <div class="topic">
                                <p x-text="$store.feedback.categories.pattern"></p>
                                <p x-text="$store.feedback.patterns[$store.feedback.categories.pattern]"></p>
                            </div>
                            <div class="topic">
                                <p>Topic</p>
                                <p x-html="$store.feedback.topic ? $store.feedback.topic.question : ''">The charts below show the levels of participation in education and science in developing and industrialised countries in 1980 and 1990. Summarise the information by selecting and reporting the main features and make comparisons where relevant. Write at least 150 words</p>
                            </div>
                            <template x-if="! $.isEmptyObject($store.feedback.topic) && ! $.isEmptyObject($store.feedback.topic.chart_s3_key) ">
                                <div class="topic-chart">
                                    <img :src="! $.isEmptyObject($store.feedback.topic) && ! $.isEmptyObject($store.feedback.topic.chart_s3_key) ? $store.feedback.topic.chart_s3_key : ''"  alt="">
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </div>
            <div class="correct-popup-container" x-show="stepId == 'teacher' " style="display: none">
                <div class="correct-popup-contents">
                    <ul class="teacher-list">
                        <template x-for="(teacher, index) in $store.feedback.teachers" >
                            <li @click="component.setFeedbackTeacher(index)">
                                <input type="radio" name="teacher" :key="index" x-bind:checked="teacher.id == $store.feedback.teacher.id">
                                <label for="teacher01">
                                    <dl>
                                        <dt>
                                            <img :src="teacher.photo_url" :alt="teacher.name">
                                            <strong x-text="teacher.name"></strong>
                                        </dt>
                                        <dd>
                                            <a :href="teacher.sample_video_url" class="go-video" target="_blank">
                                                샘플영상
                                                <i class="ico-video"></i>
                                            </a>
                                        </dd>
                                    </dl>
                                </label>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>

            @include("classroom.ielts.partials.feedback-mobile-writing")
            @include("classroom.ielts.partials.feedback-mobile-speaking")
        </div>

    </div>


    @if ( $type != 'temp')
    <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>
    @endif
@endsection


<style>
    input[type="radio"]:disabled + label {
        opacity: 0.5;
        cursor: not-allowed;
        color: #999;
    }
</style>

@section("feedback-script")
    {!! 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/mobile-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:not(#openPopup)').on('click', function (e) {
                e.preventDefault(); // 기본 동작 방지 (스크롤 이동 방지)
            });
        })
    </script>


@endsection