@extends('adminlte::page')

@section('title', 'クイズ 設問一覧')

@section('content_header')
    <h5><label class="title-underbar">クイズ 設問一覧</label></h5>
@stop

@section('content')
    <x-admin.error-flush-message />
    <x-admin.success-flush-message />
    <div class="row">
        <div class="col-md-12">
            <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
                <div class="card-body">
                    <div class="col-md-3 float-right mb-3">
                        <a href="{{ route('admin.quizzes.questions.create', ['quizSurvey' => $quizSurvey->id]) }}" class="btn btn-block btn-outline-go rounded-pill">設問の新規追加</a> 
                    </div>
                    @if ($quizSurvey->version && $quizSurvey->version->number !== $latestVersionNumber)
                    <p class="text-danger">
                        <b>
                            旧バージョン{{ $quizSurvey->version->number }}に対する表示、作成、編集で間違いありませんか？
                            クイズの最新バージョンは{{ $latestVersionNumber }}です。
                        </b>
                    </p>
                    @endif
                    <p class="main-text">クイズ：{{ $quizSurvey->name }}</p>
                    @if ($quizSurvey->version)
                    <p class="main-text">クイズバージョン：{{ $quizSurvey->version->number }}</p>
                    @endif
                    @if ($quizSurvey->page)
                    <p class="main-text">ページ：{{ $page->page }}ページ目</p>
                    <p class="main-text">タイトル：{{ $page->title }}</p>
                    @endif
                    @if (false)
                    <p class="main-text">全{{ $questions->count() }}件中 {{ $questions->firstItem() }} - {{ $questions->lastItem() }}件表示</p>
                    @endif
                    <table class="table">
                        <thead class="thead-light medium-heading">
                            <tr class="text-center">
                                <th style="width: 5%">設問順</th>
                                <th style="width: 15%">設問</th>
                                <th style="width: 15%">説明</th>
                                <th style="width: 15%">回答タイプ/選択肢</th>
                                <th style="width: 15%">正答/得点</th>
                                <th style="width: 20%">解説</th>
                                <th style="width: 14%">編集</th>
                            </tr>
                        </thead>
                        <tbody class="main-text">
                            @if ($questions->isNotEmpty())
                                @foreach ($questions as $question)
                                    <tr>
                                        <td class="text-center align-middle">
                                            {{ $question->orders }}
                                        </td>
                                        <td class="text-center align-middle">
                                            {{ $question->question }}
                                        </td>
                                        <td class="text-center align-middle">
                                            {{ $question->detail }}
                                        </td>
                                        <td class="text-center align-middle">
                                            {{ $question->type }}@if ($question->type === 'radio' || $question->type === 'checkbox')({{ $question->choices }})@endif
                                        </td>
                                        <td class="text-center align-middle">
                                            {{ $question->answer }}<br>
                                            {{ $question->point }}点
                                        </td>
                                        <td class="text-center align-middle">
                                            @if ($question->correct_explanation || $question->incorrect_explanation)
                                                <div>
                                                    @if ($question->correct_explanation)
                                                        <span class="explanation-text" style="cursor: pointer; color: #28a745; text-decoration: underline;" onclick="showExplanationModal('正解時: {{ $question->correct_explanation }}', '{{ $question->answerImage ? $question->answerImage->s3_bucket . $question->answerImage->url : '' }}')">
                                                            正解時解説
                                                        </span>
                                                    @endif
                                                    @if ($question->incorrect_explanation)
                                                        <br>
                                                        <span class="explanation-text" style="cursor: pointer; color: #dc3545; text-decoration: underline;" onclick="showExplanationModal('不正解時: {{ $question->incorrect_explanation }}', '{{ $question->incorrectExplanationImage ? $question->incorrectExplanationImage->s3_bucket . $question->incorrectExplanationImage->url : '' }}')">
                                                            不正解時解説
                                                        </span>
                                                    @endif
                                                </div>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td class="align-middle">
                                            <a href="{{ route('admin.quizzes.questions.edit', ['quizSurvey' => $quizSurvey->id, 'quizQuestion' => $question->id]) }}" class="btn btn-block btn-outline-go rounded-pill">編集</a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="7" class="text-center">
                                        登録されていません。
                                    </td>
                                </tr>   
                            @endif

                        </tbody>
                    </table>
                </div>

                @if (false)
                <div class="my-0 mx-auto">
                    {{ $questions->links() }}
                </div>
                @endif
            </div>
            <div class="d-flex justify-content-center">
                <a href="{{ route('admin.quizzes.index') }}" class="btn button-go btn-lg rounded-pill">クイズ一覧に戻る</a>
            </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>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    @include('components.custom-css', ['team' => $quizSurvey->team])
@stop

@section('js')
<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>
@stop