@extends('cdt.layout')

@section("content")
    @foreach ($cdtSet->feedbackTopics->sortBy('type') as $feedbackTopic)
        @php
            $taskNumbers = [];
            
            if ($feedbackTopic->type == 'Part 1') {
                $taskNumbers[] = 1;
            } else {
                $taskNumbers[] = 2;
                $taskNumbers[] = 3;
            }
        @endphp

        @foreach ($taskNumbers as $taskNumber)
            <div class="cdt-content" id="cdtContentPack{{ $taskNumber }}">
                <div class="rubric-block">
                    SPEAKING TASK {{ $taskNumber }}
                </div>

                <div class="column multistage writing">
                    <div class="left given-text">
                        <p class="question en">
                            @if ($taskNumber == 1 || $taskNumber == 3)
                            Answer each of the questions below for 4 to 5 minutes (if there are more than 2 topics, select one and answer it).
                            @else
                            Answer each of the questions below for 2 minutes.
                            @endif
                        </p>

                        <div>
                            {!! $taskNumber == 3 ? $feedbackTopic->question2 : $feedbackTopic->question !!}
                        </div>

                        @if (!empty($feedbackTopic->chart_s3_key))
                        <img src="{{ $feedbackTopic->chart_image }}" alt="">
                        @endif
                    </div>

                    <div class="right">
                        <div class="speaking-record">
                            <div class="recorder-wrapper">
                                <div class="recording-header">
                                    <h3>Part {{ $taskNumber }}</h3>
                                </div>
                                
                                <div class="recorder-tabs">
                                    <ul class="tab-list">
                                        <li class="tab-item">
                                            <button type="button" class="tab-btn active" data-mode="record" data-task="{{ $taskNumber }}">
                                                <i class="icon-mike"></i> Voice Recording
                                            </button>
                                        </li>
                                        <li class="tab-item">
                                            <button type="button" class="tab-btn" data-mode="upload" data-task="{{ $taskNumber }}">
                                                <i class="icon-upload"></i> Upload Voice File
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                                
                                <div class="recorder-content">
                                    <!-- 녹음 탭 패널 -->
                                    <div id="record-panel-{{ $taskNumber }}" class="tab-panel active">
                                        <div class="recorder-controls">
                                            <div class="record-timer" id="timer-display-{{ $taskNumber }}">00:00</div>
                                            <div class="control-buttons">
                                                <button type="button" class="btn-record" id="start-record-{{ $taskNumber }}">
                                                    <i class="icon-mike"></i> Start Recording
                                                </button>
                                                <button type="button" class="btn-pause" id="pause-record-{{ $taskNumber }}" disabled>
                                                    <i class="icon-pause"></i> Pause
                                                </button>
                                                <button type="button" class="btn-stop" id="stop-record-{{ $taskNumber }}" disabled>
                                                    <i class="icon-stop"></i> Stop
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="recorder-status">
                                            <p id="record-status-{{ $taskNumber }}">Ready to record</p>
                                        </div>
                                        
                                        <div class="audio-preview" id="record-preview-{{ $taskNumber }}">
                                            <div class="audio-label">Recording Preview:</div>
                                            <audio id="record-audio-{{ $taskNumber }}" controls></audio>
                                        </div>

                                        <div class="reset-container" id="record-reset-{{ $taskNumber }}" style="display:none;">
                                            <button type="button" class="btn-reset" data-task="{{ $taskNumber }}" data-mode="record">
                                                <i class="icon-trash"></i> Remove Recording
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <!-- 업로드 탭 패널 -->
                                    <div id="upload-panel-{{ $taskNumber }}" class="tab-panel">
                                        <div class="file-upload-controls">
                                            <div class="file-input-wrapper">
                                                <input type="file" id="file-input-{{ $taskNumber }}" accept="audio/*" class="file-input">
                                                <label for="file-input-{{ $taskNumber }}" class="file-label">
                                                    <i class="icon-upload"></i> Select Audio File
                                                </label>
                                                <span class="file-name" id="file-name-{{ $taskNumber }}">No file selected</span>
                                            </div>
                                            
                                            <button type="button" class="btn-upload" id="upload-file-{{ $taskNumber }}" disabled>
                                                Upload
                                            </button>
                                        </div>
                                        
                                        <div class="upload-status">
                                            <p id="upload-status-{{ $taskNumber }}">Select a file to upload</p>
                                        </div>
                                        
                                        <div class="audio-preview" id="upload-preview-{{ $taskNumber }}">
                                            <div class="audio-label">File Preview:</div>
                                            <audio id="upload-audio-{{ $taskNumber }}" controls></audio>
                                        </div>

                                        <div class="reset-container" id="upload-reset-{{ $taskNumber }}" style="display:none;">
                                            <button type="button" class="btn-reset" data-task="{{ $taskNumber }}" data-mode="upload">
                                                <i class="icon-trash"></i> Remove File
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="submission-status">
                                    <div class="status-indicator" id="task-status-{{ $taskNumber }}">
                                        <span class="status-icon"></span>
                                        <span class="status-text">Ready</span>
                                    </div>
                                </div>
                                
                                <!-- 이전 form 필드를 숨김 필드로 유지 -->
                                <input type="hidden" id="voiceType-{{ $taskNumber }}" value="record">
                                <input type="hidden" id="recordingUrl-{{ $taskNumber }}" value="">
                                <input type="hidden" id="taskStatus-{{ $taskNumber }}" value="ready">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    @endforeach
    
    <div class="speaking-submit-container">
        <button id="submit-speaking-test" class="submit-btn">Submit Speaking Test</button>
    </div>
@endsection