@extends('adminlte::page')

@section('title', $quizSurvey->name . ' クイズ回答状況')

@section('content_header')
    <h5><label class="title-underbar">{{ $quizSurvey->name }} クイズ回答状況</label></h5>
@stop

@php
    $memberNum = 0;
    $passNum = 0;
    foreach($teamMemberHighScores as $score) {
        $memberNum++;
        if($score->max_score >= $quizSurvey->passing_score) {
            $passNum++;
        }
    }
@endphp

@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>
                            <p>合格者数 / 回答者数：{{ $passNum }} 名 / {{ $memberNum }} 名</p>
                        </div>
                    </div>
                    <div class="table-responsive">

                        <table class="table">
                            <thead class="thead-light medium-heading">
                                <tr>
                                    <th>名前</th>
                                    <th>得点</th>
                                    <th>合否</th>
                                </tr>
                            </thead>
                            <tbody class="main-text">
                                @if ($teamMemberHighScores->count() > 0)
                                @foreach($teamMemberHighScores as $score)
                                <tr>
                                    <td>{{ $score->teamMember->name }}</td>
                                    <td>{{ $score->max_score }}</td>
                                    <td>{{ $score->max_score >= $quizSurvey->passing_score ? '合格' : '不合格' }}</td>
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td colspan="3" class="text-center">
                                        まだ回答がありません。
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <h3>ゲストメンバー</h3>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="thead-light medium-heading">
                                <tr>
                                    <th>名前</th>
                                    <th>得点</th>
                                    <th>合否</th>
                                </tr>
                            </thead>
                            <tbody class="main-text">
                                @if ($guestMemberHighScores->count() > 0)
                                @foreach($guestMemberHighScores as $score)
                                <tr>
                                    <td>{{ $score->guestMember->name }}</td>
                                    <td>{{ $score->max_score }}</td>
                                    <td>{{ $score->max_score >= $quizSurvey->passing_score ? '合格' : '不合格' }}</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="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="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($questionAccuracy) > 0)
                                @foreach($questionAccuracy as $index => $data)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        <a href="{{ route('admin.quizzes.questionDetail', ['quizSurvey' => $quizSurvey, 'quizQuestion' => $data['question']]) }}" 
                                           class="text-decoration-none text-primary fw-bold">
                                            {{ Str::limit($data['question']->question, 50) }}
                                        </a>
                                    </td>
                                    <td>{{ $data['total_answers'] }}名</td>
                                    <td>{{ $data['correct_answers'] }}名</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="me-2">{{ $data['accuracy'] }}%</span>
                                            <div class="progress flex-grow-1" style="height: 20px;">
                                                <div class="progress-bar" role="progressbar" 
                                                     style="width: {{ $data['accuracy'] }}%; background-color: {{ $data['accuracy'] >= 80 ? '#28a745' : ($data['accuracy'] >= 60 ? '#ffc107' : '#dc3545') }};"
                                                     aria-valuenow="{{ $data['accuracy'] }}" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td colspan="5" class="text-center">
                                        設問がありません。
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-center">

                <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