@extends('classroom.feedback.layout')

@section("feedback-css")
    @if ($service == 'academy')
        <style>
            /* Swiper가 페이지네이션을 숨기는 CSS를 오버라이드 */
            .swiper-pagination-lock {
                display: flex !important;
                justify-content: center;
            }

            /* 슬라이드가 하나일 때 네비게이션 버튼 숨김 */
            .swiper-button-lock {
                display: none !important;
            }

            .swiper-pagination-bullet:only-child {
                display: flex !important;
            }

            .my-class-wrapper .correct-table tbody td .swiper-pagination {
                margin: 0 auto;
            }
        </style>
        @endif
@endsection

@section('feedback-content')
    <table class="correct-table">
        <thead>
            <tr>
                <th>Speaking</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-center bdb0">
                    <div class="swiper-pagination"></div>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="ctSwiper-wrap mt24">
        <!-- teacher -->
        <div class="swiper ctSwiper">
            <div class="swiper-wrapper">
                @for ($i = 1 ; $i <= 3 ; $i++)
                    @php
                        $field = "speaking_part".$i."_audio_url";
                    @endphp
                        @if(!empty($feedbackRequest->{$field}))
                        <div class="swiper-slide">
                            <div class="speaking-wrap">
                                <div class="speaking-contents">
                                    {!! $feedbackRequest->feedbackTopic->question !!}
                                </div>
                                <div class="speaking-play">
                                    <div class="speaking-player" id="player1">
                                        <audio controls src="{{ $feedbackRequest->{$field} }}"></audio>

                                        <div class="playbar">
                                            <div class="bar">
                                                <div class="bar-ing"></div>
                                            </div>
                                            <div class="playtime">
                                                <span class="now">0:00</span>
                                                <span class="total">0:00</span>
                                            </div>
                                        </div>
                                        <div class="playbtn">
                                            <a href="#none" class="ico-speaker">
                                                <div class="volume">
                                                    @for ($v = 6 ; $v >= 1 ; $v--)
                                                        <input type="radio" id="volume{{ $v }}-{{ $i }}" name="volume{{ $i }}" value="{{ $v }}" @checked($v == 5) />
                                                        <label for="playx{{ $v }}-{{ $i }}" title="volume"></label>
                                                    @endfor

                                                </div>
                                            </a>
                                            <a href="#none" class="ico-play playPauseBtn"></a>
                                            <a href="#none" class="ico-setting">
                                                <div class="playx">
                                                    <span>재생속도</span>

                                                    @php
                                                        $minSpeed = 7;
                                                    @endphp
                                                    @for ($s = 7 ; $s >= 1 ; $s--)
                                                        @php
                                                            $speed =  ($minSpeed - $s + 1) * 0.25;
                                                        @endphp
                                                        <input type="radio" id="playx{{ $s }}-{{ $i }}" name="playx{{ $i }}" value="{{ $speed }}" @checked($speed == 1) />
                                                        <label for="playx{{ $s }}-{{ $i }}" title="playx">x {{ $speed }}</label>
                                                    @endfor

                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endfor

            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>


    @if ($feedbackRequest->enrollmentFeedbackResponse)
        @php
            $feedbackResponse = $feedbackRequest->enrollmentFeedbackResponse;
        @endphp
        <h4 class="correct-title">
            <i class="ico-clipboard"></i>
            첨삭 피드백
        </h4>
        @include('classroom.feedback.partials.grade', ['subject' => 'Speaking'])
        <h5 class="correct-sub-title mt60">
            첨삭 내용
        </h5>
        @if (in_array($feedbackRequest->enrollmentFeedbackPass->feedbackPass->type, ['Basic', 'CDT']))
            <div class="speaking-textarea">
                <div class="swiper-pagination2"></div>
                <div class="swiper skSwiper">
                    <div class="swiper-wrapper">
                        @for ($i = 1 ; $i <= 3 ; $i ++)
                            @php
                                $field = "feedback_part_" . $i;
                            @endphp
                            @if (!empty($feedbackResponse->{$field}))
                            <div class="swiper-slide">
                                <div class="speaking-textarea-wrap">
                                    <div class="textarea-header">
                                        <span><i class="ico-file"></i>Part {{ $i }}</span>
                                        <a href="#none" onclick="downloadFeedback({{ $i }})">다운로드<i class="ico-download"></i></a>
                                        <span class="date">(첨부일자) {{ \Carbon::parse($feedbackResponse->updated_at)->locale('ko')->isoFormat('YY.MM.DD(dd)') }}</span>
                                    </div>
                                    <textarea>{{ $feedbackResponse->{$field} }}</textarea>
                                </div>
                            </div>
                            @endif
                        @endfor
                    </div>
                </div>
            </div>
        @else
            @include('classroom.feedback.partials.files', ['subject' => 'Speaking'])
        @endif

    @endif

    <x-comment.comment-replay page="feedback" />
@endsection


@section('feedback-script')
    {!! resource('js/ielts/feedback-audio-player.js') !!}

    <script>
        function setSwiper(bullet, container) {
            // bullet이 비어있으면 기본값 설정
            if (bullet.length === 0) {
                bullet = ['Part 2', 'Part 3'];
            }

            let option = {
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                    renderBullet: function (index, className) {
                        return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
                    }
                }
            };
            if ( container == '.ctSwiper' ) {
                option['navigation'] = {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                };
            } else {
                option.pagination.el = ".swiper-pagination2";
            }
            new Swiper(container, option);
        }

        let reqBullet = [];
        @if(!empty($feedbackRequest->speaking_part1_audio_url))
            reqBullet.push('Part 1');
        @endif
        @if(!empty($feedbackRequest->speaking_part2_audio_url))
            reqBullet.push('Part 2');
        @endif
        @if(!empty($feedbackRequest->speaking_part3_audio_url))
            reqBullet.push('Part 3');
        @endif

        setSwiper(reqBullet, '.ctSwiper')


        @if (in_array($feedbackRequest->enrollmentFeedbackPass->feedbackPass->type, ['Basic', 'CDT']))

            let resBullet = [];
            @if (!empty($feedbackResponse->feedback_part_1))
                resBullet.push('Part 1');
            @endif

            @if (!empty($feedbackResponse->feedback_part_2))
                resBullet.push('Part 2');
            @endif

            @if (!empty($feedbackResponse->feedback_part_3))
                resBullet.push('Part 3');
            @endif
            setSwiper(resBullet, '.skSwiper');

            function downloadFeedback(part) {
                $.ajax({
                    url: '{{ route("classroom.download-request-text", ['id' => $feedbackRequest->id, 'service' => $service]) }}&part=' + part,
                    method: 'GET',
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(data) {
                        const blob = new Blob([data], { type: 'application/pdf' });
                        const link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = 'Speaking_Part_'+part+'.pdf';
                        link.click();
                    },
                    error: function() {
                        alert('Failed to download PDF.');
                    }
                });
            }

        @endif
    </script>
@endsection