@if($quizSurvey->passing_score > 0)
<div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
    <div class="card-body">
        @php
            $showCertificateDownload = $team->guest_download
                && $quizResult->quiz_result >= $quizResult->survey->passing_score
                && $quizResult->survey->passing_score > 0;
        @endphp
        <h5>
            {{$quizResult->survey->name}}
            @if ($quizResult->quiz_result >= $quizResult->survey->passing_score)
                <span class="link-go"><b>{!! __("team-quiz.complete.passing") !!}</b></span>
            @else
                <span class="">{!! __("team-quiz.complete.not_passing") !!}</span>
            @endif
        </h5>
        <div class="row justify-content-center">
            <h4 class>
                {!! __("team-quiz.complete.score") !!} {{ $quizResult->quiz_result }}{!! __("team-quiz.complete.unit") !!}
                / {!! __("team-quiz.complete.passing_score") !!} {{ $quizResult->survey->passing_score }}{!! __("team-quiz.complete.unit") !!}
            </h4>
        </div>
        @if ($showCertificateDownload)
            <div class="row justify-content-center mb-3">
                <div class="col-md-4">
                    <a href="{{ route($registered . '.quiz.certificateDownload', ['quizResult' => $quizResult->id])}}" class="btn btn-block button-go btn-lg rounded-pill">
                        <b>{!! __("team-quiz.complete.download_button") !!}<i class="fas fa-file-download"></i></b>
                    </a>
                </div>
            </div>
        @endif
        <div class="table-responsive">
            <table class="table">
                <thead class="thead-light medium-heading">
                    <tr>
                        <th style="width: 8%">{!! __("team-quiz.complete.table.no") !!}</th>
                        <th style="width: 25%">{!! __("team-quiz.complete.table.quesion") !!}</th>
                        <th style="width: 12%">{!! __("team-quiz.complete.table.answer") !!}</th>
                        <th class="text-center" style="width: 12%">{!! __("team-quiz.complete.table.correct_answer") !!}</th>
                        <th style="width: 20%">解説</th>
                    </tr>
                </thead>
                <tbody class="main-text">
                    @foreach ($questions as $idx => $question)
                        @if (!isset($resultAnswers[$question->id]))
                            @continue
                        @endif
                        <tr>
                            <td class="text-left align-middle">
                                {{$idx + 1}}
                            </td>
                            <td class="text-left align-middle">
                                {{$question->question}}
                            </td>
                            <td class="text-left align-middle">
                                @php
                                    $answer = is_array($resultAnswers[$question->id]) ? implode(',', $resultAnswers[$question->id]) : $resultAnswers[$question->id]
                                @endphp
                                {{$answer}}
                            </td>
                            <td class="text-center align-middle">
                                @if ($answer == $question->answer)
                                    〇
                                @else
                                    × {!! __("team-quiz.complete.table.correct") !!}（{{$question->answer}}）
                                @endif
                            </td>
                            <td class="text-left align-middle">
                                @if ($question->explanation)
                                    <span class="explanation-text" style="cursor: pointer; color: #007bff; text-decoration: underline;" onclick="showExplanationModal('{{ $question->explanation }}', '{{ $question->answerImage ? $question->answerImage->s3_bucket . $question->answerImage->url : '' }}')">
                                        {{$question->explanation}}
                                    </span>
                                @else
                                    -
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="row justify-content-center">            
            @if ($showCertificateDownload)
                <div class="col-md-4 mb-5">
                    <a href="{{ route($registered . '.quiz.certificateDownload', ['quizResult' => $quizResult->id])}}" class="btn btn-block button-go btn-lg rounded-pill">
                        <b>{!! __("team-quiz.complete.download_button") !!}<i class="fas fa-file-download"></i></b>
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- 解説モーダル -->
<div class="modal fade" id="explanationModal" tabindex="-1" role="dialog" aria-labelledby="explanationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="explanationModalLabel">解説</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="explanationText"></div>
                <div id="explanationImage" class="text-center mt-3" style="display: none;">
                    <img id="explanationImageSrc" src="" alt="解説画像" class="img-fluid" style="max-width: 100%; max-height: 500px;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

<script>
function showExplanationModal(explanationText, explanationImageUrl) {
    document.getElementById('explanationText').innerHTML = explanationText.replace(/\n/g, '<br>');
    
    const imageContainer = document.getElementById('explanationImage');
    const imageSrc = document.getElementById('explanationImageSrc');
    
    if (explanationImageUrl && explanationImageUrl.trim() !== '') {
        imageSrc.src = explanationImageUrl;
        imageContainer.style.display = 'block';
    } else {
        imageContainer.style.display = 'none';
    }
    
    $('#explanationModal').modal('show');
}
</script>
@endif