@extends($service.'.layout')

@section($service.'-css')
    {!! resource('css/'.$service.'/sub.css') !!}
    {!! resource('css/myclass/my_class.css') !!}

    @if ($service == 'academy')
    {!! resource('css/myclass/my_class_academy.css') !!}

    <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($service.'-content')
<div class="container">
    <div class="my-class-wrapper">
        <div class="wrapper">
            @include('classroom.'.$service.'.menu')

            <div class="my-class-contents">
                @if ($service == 'ielts')
                    <div class="row">
                        <div class="column c100p">
                            <div class="my-tab">
                                <ul>
                                    <li><a href="{{ route('classroom.feedback', ['service' => 'ielts']) }}">첨삭신청</a></li>
                                    <li class="on"><a href="{{ route('classroom.feedback-list', ['service' => 'ielts']) }}">첨삭내역</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                @else
                    @include('classroom.'.$service.'.cdt-tab-menu')
                @endif

                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            <table class="correct-table gray">
                                <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">
                                        <!-- Part 1 슬라이드 -->
                                        @if(!empty($feedbackRequest->speaking_part1_audio_url))
                                        <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->speaking_part1_audio_url }}"></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">
                                                                    <input type="radio" id="volume6-1" name="volume1" value="6" />
                                                                    <label for="volume6-1" title="volume"></label>
                                                                    <input type="radio" id="volume5-1" name="volume1" value="5" checked />
                                                                    <label for="volume5-1" title="volume"></label>
                                                                    <input type="radio" id="volume4-1" name="volume1" value="4" />
                                                                    <label for="volume4-1" title="volume"></label>
                                                                    <input type="radio" id="volume3-1" name="volume1" value="3" />
                                                                    <label for="volume3-1" title="volume"></label>
                                                                    <input type="radio" id="volume2-1" name="volume1" value="2" />
                                                                    <label for="volume2-1" title="volume"></label>
                                                                    <input type="radio" id="volume1-1" name="volume1" value="1" />
                                                                    <label for="volume1-1" title="volume"></label>
                                                                </div>
                                                            </a>
                                                            <a href="#none" class="ico-play playPauseBtn"></a>
                                                            <a href="#none" class="ico-setting">
                                                                <div class="playx">
                                                                    <span>재생속도</span>
                                                                    <input type="radio" id="playx7-1" name="playx1" value="0.25">
                                                                    <label for="playx7-1" title="playx">x 0.25</label>
                                                                    <input type="radio" id="playx6-1" name="playx1" value="0.5">
                                                                    <label for="playx6-1" title="playx">x 0.5</label>
                                                                    <input type="radio" id="playx5-1" name="playx1" value="1" checked>
                                                                    <label for="playx5-1" title="playx">x 1</label>
                                                                    <input type="radio" id="playx4-1" name="playx1" value="1.25">
                                                                    <label for="playx4-1" title="playx">x 1.25</label>
                                                                    <input type="radio" id="playx3-1" name="playx1" value="1.5">
                                                                    <label for="playx3-1" title="playx">x 1.5</label>
                                                                    <input type="radio" id="playx2-1" name="playx1" value="1.75">
                                                                    <label for="playx2-1" title="playx">x 1.75</label>
                                                                    <input type="radio" id="playx1-1" name="playx1" value="2">
                                                                    <label for="playx1-1" title="playx">x 2</label>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif

                                        <!-- Part 2 슬라이드 -->
                                        @if(!empty($feedbackRequest->speaking_part2_audio_url))
                                        <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="player2">
                                                        <audio controls src="{{ $feedbackRequest->speaking_part2_audio_url }}"></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">
                                                                    <input type="radio" id="volume6-2" name="volume2" value="6" />
                                                                    <label for="volume6-2" title="volume"></label>
                                                                    <input type="radio" id="volume5-2" name="volume2" value="5" checked />
                                                                    <label for="volume5-2" title="volume"></label>
                                                                    <input type="radio" id="volume4-2" name="volume2" value="4" />
                                                                    <label for="volume4-2" title="volume"></label>
                                                                    <input type="radio" id="volume3-2" name="volume2" value="3" />
                                                                    <label for="volume3-2" title="volume"></label>
                                                                    <input type="radio" id="volume2-2" name="volume2" value="2" />
                                                                    <label for="volume2-2" title="volume"></label>
                                                                    <input type="radio" id="volume1-2" name="volume2" value="1" />
                                                                    <label for="volume1-2" title="volume"></label>
                                                                </div>
                                                            </a>
                                                            <a href="#none" class="ico-play playPauseBtn"></a>
                                                            <a href="#none" class="ico-setting">
                                                                <!-- 기존 코드 유지 -->
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif

                                        <!-- Part 3 슬라이드 -->
                                        @if(!empty($feedbackRequest->speaking_part3_audio_url))
                                        <div class="swiper-slide">
                                            <div class="speaking-wrap">
                                                <div class="speaking-contents">
                                                    @if($feedbackRequest->feedbackTopic->type == 'Part 2&3')
                                                        {!! $feedbackRequest->feedbackTopic->question2 !!}
                                                    @endif
                                                </div>
                                                <div class="speaking-play">
                                                    <div class="speaking-player" id="player3">
                                                        <audio controls src="{{ $feedbackRequest->speaking_part3_audio_url }}"></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">
                                                                    <input type="radio" id="volume6-3" name="volume3" value="6" />
                                                                    <label for="volume6-3" title="volume"></label>
                                                                    <input type="radio" id="volume5-3" name="volume3" value="5" checked />
                                                                    <label for="volume5-3" title="volume"></label>
                                                                    <input type="radio" id="volume4-3" name="volume3" value="4" />
                                                                    <label for="volume4-3" title="volume"></label>
                                                                    <input type="radio" id="volume3-3" name="volume3" value="3" />
                                                                    <label for="volume3-3" title="volume"></label>
                                                                    <input type="radio" id="volume2-3" name="volume3" value="2" />
                                                                    <label for="volume2-3" title="volume"></label>
                                                                    <input type="radio" id="volume1-3" name="volume3" value="1" />
                                                                    <label for="volume1-3" title="volume"></label>
                                                                </div>
                                                            </a>
                                                            <a href="#none" class="ico-play playPauseBtn"></a>
                                                            <a href="#none" class="ico-setting">
                                                                <!-- 기존 코드 유지 -->
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                            <script>
                                var bullet = [];
    
                                @if(!empty($feedbackRequest->speaking_part1_audio_url))
                                    bullet.push('Part 1');
                                @endif
                                
                                @if(!empty($feedbackRequest->speaking_part2_audio_url))
                                    bullet.push('Part 2');
                                @endif
                                
                                @if(!empty($feedbackRequest->speaking_part3_audio_url))
                                    bullet.push('Part 3');
                                @endif
                                
                                // bullet이 비어있으면 기본값 설정
                                if (bullet.length === 0) {
                                    bullet = ['Part 2', 'Part 3'];
                                }
                                
                                var swiper = new Swiper(".ctSwiper", {
                                    navigation: {
                                        nextEl: ".swiper-button-next",
                                        prevEl: ".swiper-button-prev",
                                    },
                                    pagination: {
                                        el: ".swiper-pagination",
                                        clickable: true,
                                        renderBullet: function (index, className) {
                                            return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
                                        }
                                    },
                                });
                            </script>

                            @if ($feedbackRequest->enrollmentFeedbackResponse)
                                @php
                                    $feedbackResponse = $feedbackRequest->enrollmentFeedbackResponse;
                                @endphp
                                <h4 class="correct-title">
                                    <i class="ico-clipboard"></i>
                                    첨삭 피드백
                                </h4>
                                <h5 class="correct-sub-title">
                                    <span class="point-color">항목별</span> 점수
                                </h5>
                                <ul class="score-ul">
                                    <li>
                                        <div class="bg-gradient">
                                            Fluency
                                        </div>
                                        <div>
                                            {{ number_format($feedbackResponse->grade_1, 1) }}
                                        </div>
                                    </li>
                                    <li>
                                        <div class="bg-gradient">
                                            Lexical<br>Resources
                                        </div>
                                        <div>
                                            {{ number_format($feedbackResponse->grade_2, 1) }}
                                        </div>
                                    </li>
                                    <li>
                                        <div class="bg-gradient">
                                            Grammatical Range<br>& Accuracy
                                        </div>
                                        <div>
                                            {{ number_format($feedbackResponse->grade_3, 1) }}
                                        </div>
                                    </li>
                                    <li>
                                        <div class="bg-gradient">
                                            Pronunciation
                                        </div>
                                        <div>
                                            {{ number_format($feedbackResponse->grade_4, 1) }}
                                        </div>
                                    </li>
                                    <li>
                                        <div class="bg-gradient">
                                            Band Score
                                        </div>
                                        <div>
                                            {{ number_format($feedbackResponse->band_score, 1) }}
                                        </div>
                                    </li>
                                </ul>
                                <h5 class="correct-sub-title mt60">
                                    첨삭 내용
                                </h5>

                                @if ($feedbackRequest->enrollmentFeedbackPass->feedbackPass->type == 'Basic' || $feedbackRequest->enrollmentFeedbackPass->feedbackPass->type == 'CDT')
                                <div class="speaking-textarea">
                                    <div class="swiper-pagination2"></div>
                                    <div class="swiper skSwiper">
                                        <div class="swiper-wrapper">
                                            @if (!empty($feedbackResponse->feedback_part_1))
                                            <div class="swiper-slide">
                                                <div class="speaking-textarea-wrap">
                                                    <div class="textarea-header">
                                                        <span><i class="ico-file"></i>Part 1</span>
                                                        <a href="#none" onclick="downloadFeedback(1)">다운로드<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->feedback_part_1 }}</textarea>
                                                </div>
                                            </div>
                                            @endif

                                            @if (!empty($feedbackResponse->feedback_part_2))
                                            <div class="swiper-slide">
                                                <div class="speaking-textarea-wrap">
                                                    <div class="textarea-header">
                                                        <span><i class="ico-file"></i>Part 2</span>
                                                        <a href="#none" onclick="downloadFeedback(2)">다운로드<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->feedback_part_2 }}</textarea>
                                                </div>
                                            </div>
                                            @endif

                                            @if (!empty($feedbackResponse->feedback_part_3))
                                            <div class="swiper-slide">
                                                <div class="speaking-textarea-wrap">
                                                    <div class="textarea-header">
                                                        <span><i class="ico-file"></i>Part 3</span>
                                                        <a href="#none" onclick="downloadFeedback(3)">다운로드<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->feedback_part_3 }}</textarea>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                    <script>
                                        var bullet = [];
    
                                        @if (!empty($feedbackResponse->feedback_part_1))
                                            bullet.push('Part 1');
                                        @endif
                                        
                                        @if (!empty($feedbackResponse->feedback_part_2))
                                            bullet.push('Part 2');
                                        @endif
                                        
                                        @if (!empty($feedbackResponse->feedback_part_3))
                                            bullet.push('Part 3');
                                        @endif
                                        
                                        // bullet이 비어있으면 기본값 설정
                                        if (bullet.length === 0) {
                                            bullet = ['Part 2', 'Part 3'];
                                        }


                                        var swiper = new Swiper(".skSwiper", {
                                            pagination: {
                                                el: ".swiper-pagination2",
                                                clickable: true,
                                                renderBullet: function (index, className) {
                                                    return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
                                                }
                                            },
                                        });

                                        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.');
                                                }
                                            });
                                        }
                                    </script>
                                </div>
                                @else
                                <div class="file-list">
                                    <span class="name">
                                        <i class="ico-file"></i>
                                        {{ $feedbackResponse->teacher->name }} 선생님
                                    </span>

                                    @if (!empty($feedbackResponse->feedback_files))
                                        <ul>
                                            @foreach(json_decode($feedbackResponse->feedback_files) as $file)
                                            <li>
                                                <a href="{{ app(S3Helper::class)->getDownloadPresignedUrl($file->s3_path) }}" target="_blank">{{ $file->original_name }}</a>
                                                <a href="{{ app(S3Helper::class)->getDownloadPresignedUrl($file->s3_path) }}" target="_blank">
                                                    다운로드
                                                    <i class="ico-download"></i>
                                                </a>
                                            </li>
                                            @endforeach
                                        </ul>
                                    @endif

                                    <span class="date">
                                        (첨부일자) {{ \Carbon::parse($feedbackResponse->updated_at)->locale('ko')->isoFormat('YY.MM.DD(dd)') }}
                                    </span>
                                </div>
                                @endif

                            @endif

                            @include('classroom.feedback-comment')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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