@extends('adminlte::page')

@section('title', $quizSurvey->name . ' - 回答詳細')

@section('content_header')
    <h5><label class="title-underbar">{{ $quizSurvey->name }} - 回答詳細</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="row">
                        <div class="col-md-12">
                            <h3>設問情報</h3>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h5><strong>設問内容:</strong></h5>
                                    <p class="mb-2">{{ $quizQuestion->question }}</p>
                                    @if($quizQuestion->detail)
                                        <h6><strong>詳細説明:</strong></h6>
                                        <p class="mb-2">{{ $quizQuestion->detail }}</p>
                                    @endif
                                    <h6><strong>正解:</strong></h6>
                                    <p class="mb-2 text-success"><strong>{{ $quizQuestion->answer }}</strong></p>
                                    <h6><strong>配点:</strong></h6>
                                    <p class="mb-0">{{ $quizQuestion->point }}点</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 解説セクション -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <h4>解説</h4>
                        </div>
                    </div>
                    
                    <!-- 正解時の解説 -->
                    @if($quizQuestion->correct_explanation)
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h6 class="mb-0"><strong>正解時の解説</strong></h6>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">{{ $quizQuestion->correct_explanation }}</p>
                                    @if($quizQuestion->answerImage)
                                    <div class="text-center mt-3">
                                        <img src="{{ $quizQuestion->answerImage->s3_bucket . $quizQuestion->answerImage->url }}" 
                                             alt="正解時解説画像" class="img-fluid" style="max-width: 100%; max-height: 300px;">
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    <!-- 不正解時の解説 -->
                    @if($quizQuestion->incorrect_explanation)
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="card border-danger">
                                <div class="card-header bg-danger text-white">
                                    <h6 class="mb-0"><strong>不正解時の解説</strong></h6>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">{{ $quizQuestion->incorrect_explanation }}</p>
                                    @if($quizQuestion->incorrectExplanationImage)
                                    <div class="text-center mt-3">
                                        <img src="{{ $quizQuestion->incorrectExplanationImage->s3_bucket . $quizQuestion->incorrectExplanationImage->url }}" 
                                             alt="不正解時解説画像" class="img-fluid" style="max-width: 100%; max-height: 300px;">
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if(!$quizQuestion->correct_explanation && !$quizQuestion->incorrect_explanation)
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="alert alert-info">
                                <p class="mb-0">解説が設定されていません。</p>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <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="row">
                        <div class="col-md-12">
                            <h3>回答詳細</h3>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="alert {{ $isCorrect ? 'alert-success' : 'alert-danger' }}">
                                <h5><strong>回答内容:</strong> {{ $answer }}</h5>
                                <span class="badge {{ $isCorrect ? 'bg-success' : 'bg-danger' }} fs-6">
                                    {{ $isCorrect ? '正解' : '不正解' }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <h4>回答者一覧 ({{ count($respondents) }}名)</h4>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>名前</th>
                                    <th>タイプ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($respondents) > 0)
                                @foreach($respondents as $index => $respondent)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $respondent['name'] }}</td>
                                    <td>
                                        <span class="badge {{ $respondent['type'] === 'チームメンバー' ? 'bg-primary' : 'bg-secondary' }}">
                                            {{ $respondent['type'] }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td colspan="3" class="text-center">
                                        回答者がいません。
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-12">
            <div class="d-flex justify-content-center">
                <a href="{{ route('admin.quizzes.questionDetail', ['quizSurvey' => $quizSurvey, 'quizQuestion' => $quizQuestion]) }}" class="btn btn-secondary btn-lg rounded-pill me-3">設問詳細に戻る</a>
                <a href="{{ route('admin.quizzes.answers', $quizSurvey) }}" class="btn btn-secondary btn-lg rounded-pill me-3">回答状況に戻る</a>
                <a href="{{ route('admin.index') }}" class="btn btn-secondary btn-lg rounded-pill">トップに戻る</a>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    @include('components.custom-css')
@stop