@extends('task/layout')

@section('content')
<link rel="stylesheet" href="{{ asset('css/rubric-common.css') }}">
<div class="container mt-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h3>評価結果</h3>
      <p class="text-muted">{{ $rubric->title }} の評価結果一覧</p>
    </div>
    <a href="{{ route('rubric.index') }}" class="btn btn-outline-secondary">
      一覧に戻る
    </a>
  </div>

  {{-- 統計情報カード --}}
  @if($evaluations->isNotEmpty())
  <div class="row mb-4">
    <div class="col-md-3">
      <div class="card text-center">
        <div class="card-body">
          <h6 class="text-muted">評価件数</h6>
          <h3 class="mb-0">{{ $stats['total_evaluations'] }}</h3>
          <small class="text-muted">件</small>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center">
        <div class="card-body">
          <h6 class="text-muted">平均点</h6>
          <h3 class="mb-0">{{ number_format($stats['average_score'], 1) }}</h3>
          <small class="text-muted">点</small>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center">
        <div class="card-body">
          <h6 class="text-muted">最高点</h6>
          <h3 class="mb-0">{{ number_format($stats['max_score'], 1) }}</h3>
          <small class="text-muted">点</small>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center">
        <div class="card-body">
          <h6 class="text-muted">最低点</h6>
          <h3 class="mb-0">{{ number_format($stats['min_score'], 1) }}</h3>
          <small class="text-muted">点</small>
        </div>
      </div>
    </div>
  </div>
  @endif

  {{-- 評価結果一覧テーブル --}}
  <div class="card">
    <div class="card-header bg-light">
      <h5 class="mb-0">評価結果一覧</h5>
    </div>
    <div class="card-body">
      @if($evaluations->isEmpty())
        <div class="alert alert-info">
          <h5 class="alert-heading">評価結果がありません</h5>
          <p class="mb-0">
            まだ評価が実施されていません。<br>
            評価入力画面から評価を実施してください。
          </p>
        </div>
      @else
        <div class="table-responsive">
          <table class="table table-hover table-striped">
            <thead class="table-light">
              <tr>
                <th style="width: 5%;">No.</th>
                <th style="width: 15%;">評価者</th>
                <th style="width: 15%;">被評価者ID</th>
                <th style="width: 15%;">評価日時</th>
                <th style="width: 10%;" class="text-end">合計点</th>
                <th style="width: 35%;">総評</th>
                <th style="width: 5%;" class="text-center">詳細</th>
              </tr>
            </thead>
            <tbody>
              @foreach($evaluations as $index => $evaluation)
              <tr class="evaluation-row" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#detail-{{ $evaluation->id }}">
                <td>{{ $index + 1 }}</td>
                <td>
                  @if($evaluation->evaluator_name)
                    {{ $evaluation->evaluator_name }}
                  @else
                    <span class="text-muted">ID: {{ $evaluation->evaluator_id }}</span>
                  @endif
                </td>
                <td>{{ $evaluation->evaluated_user_id }}</td>
                <td>{{ $evaluation->evaluated_at->format('Y-m-d H:i') }}</td>
                <td class="text-end">
                  <strong>{{ number_format($evaluation->total_score, 1) }}</strong> 点
                </td>
                <td>
                  @if($evaluation->general_comment)
                    {{ Str::limit($evaluation->general_comment, 50) }}
                  @else
                    <span class="text-muted">-</span>
                  @endif
                </td>
                <td class="text-center">
                  <i class="fas fa-chevron-down toggle-icon"></i>
                  <small class="d-block text-muted" style="font-size: 0.7rem;">クリックで展開</small>
                </td>
              </tr>
              {{-- 詳細行（折りたたみ） --}}
              <tr class="collapse" id="detail-{{ $evaluation->id }}">
                <td colspan="7" class="p-0">
                  <div class="p-3 bg-light">
                    <h6 class="mb-3">評価詳細</h6>
                    <div class="table-responsive">
                      <table class="table table-sm table-bordered mb-0">
                        <thead>
                          <tr>
                            <th style="width: 25%;">評価項目</th>
                            <th style="width: 50%;">選択されたパフォーマンス</th>
                            <th style="width: 10%;" class="text-end">得点</th>
                            <th style="width: 15%;">コメント</th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach($evaluation->details as $detail)
                          <tr>
                            <td><strong>{{ $detail->criterion->item }}</strong></td>
                            <td>{{ $detail->performance->descriptor }}</td>
                            <td class="text-end">{{ number_format($detail->score, 1) }}点</td>
                            <td>
                              @if($detail->comment)
                                {{ $detail->comment }}
                              @else
                                <span class="text-muted">-</span>
                              @endif
                            </td>
                          </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                    @if($evaluation->general_comment)
                    <div class="mt-3">
                      <h6>総評コメント</h6>
                      <p class="mb-0">{{ $evaluation->general_comment }}</p>
                    </div>
                    @endif
                    @if($rubric->commentNames && $rubric->commentNames->isNotEmpty())
                    <div class="mt-3">
                      <h6>振り返りコメント</h6>
                      <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                          <thead>
                            <tr>
                              <th style="width: 30%;">項目名</th>
                              <th style="width: 70%;">コメント</th>
                            </tr>
                          </thead>
                          <tbody>
                            @foreach($rubric->commentNames as $commentName)
                              @php
                                $reflectionComment = $evaluation->reflectionComments->firstWhere('comment_name_id', $commentName->id);
                              @endphp
                              <tr>
                                <td><strong>{{ $commentName->title }}</strong></td>
                                <td>
                                  @if($reflectionComment && $reflectionComment->comment)
                                    {{ $reflectionComment->comment }}
                                  @else
                                    <span class="text-muted">入力なし</span>
                                  @endif
                                </td>
                              </tr>
                            @endforeach
                          </tbody>
                        </table>
                      </div>
                    </div>
                    @endif
                  </div>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      @endif
    </div>
  </div>

  {{-- ルーブリック構成（参考） --}}
  <div class="card mt-4">
    <div class="card-header bg-light">
      <h5 class="mb-0">ルーブリック構成（参考）</h5>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered">
          <thead class="table-light">
            <tr>
              <th>評価項目</th>
              @php
                $levelCount = 0;
                if ($rubric->criteria->isNotEmpty()) {
                  $firstCriteria = $rubric->criteria->first();
                  $levelCount = $firstCriteria->performance->max('level') ?? 3;
                }
              @endphp
              @for($i = 1; $i <= $levelCount; $i++)
                <th>レベル {{ $i }}</th>
              @endfor
            </tr>
          </thead>
          <tbody>
            @foreach($rubric->criteria as $criteria)
              <tr>
                <td>
                  @if($criteria->category)
                    <div class="category-badge">
                      📁 {{ $criteria->category->title }}
                    </div>
                    <br>
                  @endif
                  <strong>{{ $criteria->item }}</strong>
                </td>
                @for($level = 1; $level <= $levelCount; $level++)
                  @php
                    $performance = $criteria->performance->where('level', $level)->first();
                  @endphp
                  <td>
                    @if($performance)
                      <div>{{ $performance->descriptor }}</div>
                      @if($rubric->show_points)
                        <small class="text-muted">({{ $performance->point }}点)</small>
                      @endif
                    @else
                      <span class="text-muted">-</span>
                    @endif
                  </td>
                @endfor
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 行クリックで詳細を展開
$(document).on('click', '.evaluation-row', function() {
  const icon = $(this).find('.toggle-icon');
  if (icon.length) {
    icon.toggleClass('fa-chevron-down fa-chevron-up');
  }
});

// Bootstrap 5のCollapseイベントでアイコン切り替え
$('[id^="detail-"]').on('show.bs.collapse', function() {
  const row = $('[data-bs-target="#' + $(this).attr('id') + '"]');
  row.find('.toggle-icon').removeClass('fa-chevron-down').addClass('fa-chevron-up');
});

$('[id^="detail-"]').on('hide.bs.collapse', function() {
  const row = $('[data-bs-target="#' + $(this).attr('id') + '"]');
  row.find('.toggle-icon').removeClass('fa-chevron-up').addClass('fa-chevron-down');
});
</script>
@endpush
@endsection