@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>回答集計 (総回答数: {{ $totalAnswers }}名)</h3>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="thead-light medium-heading">
                                <tr>
                                    <th>回答</th>
                                    <th>回答者数</th>
                                    <th>割合</th>
                                    <th>正誤</th>
                                    <th>回答者一覧</th>
                                </tr>
                            </thead>
                            <tbody class="main-text">
                                @if (count($answerCounts) > 0)
                                @foreach($answerCounts as $answer => $data)
                                <tr>
                                    <td>
                                        <span class="{{ $data['is_correct'] ? 'text-success fw-bold' : '' }}">
                                            {{ $answer }}
                                        </span>
                                    </td>
                                    <td>{{ $data['count'] }}名</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="me-2">{{ $totalAnswers > 0 ? round(($data['count'] / $totalAnswers) * 100, 1) : 0 }}%</span>
                                            <div class="progress flex-grow-1" style="height: 20px;">
                                                <div class="progress-bar" role="progressbar" 
                                                     style="width: {{ $totalAnswers > 0 ? ($data['count'] / $totalAnswers) * 100 : 0 }}%; background-color: {{ $data['is_correct'] ? '#28a745' : '#6c757d' }};"
                                                     aria-valuenow="{{ $totalAnswers > 0 ? ($data['count'] / $totalAnswers) * 100 : 0 }}" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($data['is_correct'])
                                            <span class="badge bg-success">正解</span>
                                        @else
                                            <span class="badge bg-danger">不正解</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if(count($data['respondents']) > 0)
                                            <a href="{{ route('admin.quizzes.answerDetail', ['quizSurvey' => $quizSurvey, 'quizQuestion' => $quizQuestion, 'answer' => urlencode($answer)]) }}" 
                                               class="btn btn-sm btn-outline-primary">
                                                回答者一覧 ({{ count($data['respondents']) }}名)
                                            </a>
                                        @else
                                            <span class="text-muted">回答者なし</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td colspan="5" 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.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