@extends('task.layout')
@section('content')
<div class="container mt-4">

  <div class="mx-auto" style="max-width: 1200px;">

    <div class="mb-4">
      <p class="text-muted small mb-1">ルーブリック名 / 項目名</p>
      <h4 class="fw-bold">
        {{ $task->context_title }} {{ $task->title }}
        <span class="fs-5 ms-3">他者評価一覧</span>
      </h4>
    </div>
    <div class="mb-2">
      評価者：
      <span class="fw-semibold">{{ $user->display_name }}</span>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-4">
        {{-- 左側: 条件情報ブロック --}}
        <div class="text-danger">
            条件情報（<u>集計情報として何を表示するか検討要</u>）<br>
            評価数：<span class="text-body">{{ is_iterable($reviewedids ?? []) ? count($reviewedids) : 0 }}</span><br>
            良い点（平均文字数、最大文字数）／改善点（平均文字数、最大文字数）
        </div>

        {{-- 右側: ルーブリック一覧ボタン --}}
        <div>
            <a href="{{ route('rubric.show') }}" class="btn btn-outline-info">
                ルーブリック一覧
            </a>
        </div>
    </div>
  </div>

  {{-- ===== メイン表 ===== --}}
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between fs-5">
      <strong>他者評価一覧</strong>
      <button id="toggleTableBtn" class="btn btn-outline-primary btn-sm">行列切替</button>
    </div>
    <div class="card-body">
      {{-- データ準備 --}}
      @php
        $labels = $rubricitems ?? collect();
        $rowCount = is_countable($labels) ? count($labels) : 0;

        // 被評価者リスト
        $reviewedList = collect([
            (object)['id' => 'avg', 'display_name' => '平均', 'type' => 'point'],
        ]);
        foreach(($reviewedids ?? []) as $id) {
            $reviewed = $otherReviews[$id];
            $reviewedList->push((object)[
                'id' => $id,
                'display_name' => $reviewed['display_name'],
                'type' => 'reviewed'
            ]);
        }
      @endphp

      {{-- === 行列切替前の表 === --}}
      <div id="normalTable" class="table-responsive">
        <table class="table table-bordered table-striped align-middle table-hover">
          <thead class="text-center z-2 bd-thick-bottom">
            <tr>
              <th class="sticky-col-start z-3 bg-dark-col" style="width: 40px;">No.</th>
              <th class="sticky-col-start-2 z-3 bg-dark-col" style="min-width: 250px;">評価指標</th>
              <th class="bg-dark-col" style="min-width: 100px;">平均</th>

              {{-- 各被評価者列（display_name をヘッダに） --}}
              @foreach(($reviewedids) as $id)
                @php $reviewed = $otherReviews[$id]; @endphp
                <th class="bg-dark-col" style="min-width: 100px;">
                  {{ $reviewed['display_name'] }}
                </th>
              @endforeach
              <!-- <th style="min-width: 100px;"> システム1</th>
              <th style="min-width: 100px;"> システム2</th>
              <th style="min-width: 100px;"> システム3</th>
              <th style="min-width: 100px;"> システム4</th>
              <th style="min-width: 100px;"> システム5</th>
              <th style="min-width: 100px;"> システム6</th>
              <th style="min-width: 100px;"> システム7</th>
              <th style="min-width: 100px;"> システム8</th>
              <th style="min-width: 100px;"> システム9</th>
              <th style="min-width: 100px;"> システム10</th>
              <th style="min-width: 100px;"> システム11</th>
              <th style="min-width: 100px;"> システム12</th>
              <th style="min-width: 100px;"> システム13</th>
              <th style="min-width: 100px;"> システム14</th>
              <th style="min-width: 100px;"> システム15</th>
              <th style="min-width: 100px;"> システム16</th>
              <th style="min-width: 100px;"> システム17</th>
              <th style="min-width: 100px;"> システム18</th> -->
            </tr>
          </thead>
          <tbody>
            @for($i = 0; $i < $rowCount; $i++)
              @php
                // 最後の行 (i = rowCount - 1) の場合にのみ bd-thick-bottom クラスを追加
                $lastRowClass = ($i === $rowCount-1) ? 'bd-thick-bottom' : '';
              @endphp
              <tr class="{{ $lastRowClass }}">
                <td class="text-center sticky-col-start">{{ $i }}</td>
                <td class="sticky-col-start-2">
                  {{-- 0行目：ルーブリック名、以降：指標 --}}
                  @if($i === 0)
                    <strong>{{ $labels[$i] ?? '' }}</strong>
                  @else
                    {{ $labels[$i] ?? '' }}
                  @endif
                </td>

                {{-- 平均 --}}
                @php $avg = $averagepoint[$i] ?? null; @endphp
                <td class="text-center">
                  {{ isset($avg) ? number_format($avg, 1) : '—' }}
                </td>

                {{-- 各被評価者 --}}
                @foreach(($reviewedids ?? []) as $rid)
                  @php $pt = $reviewedPoints[$rid][$i] ?? null; @endphp
                  <td class="text-center">
                    {{ is_numeric($pt) ? $pt : '—' }}
                  </td>
                @endforeach
              </tr>
            @endfor
            {{-- コメント --}}
            @for($i = 0; $i < count($commentTitles); $i++)
              <tr>
                <td></td>
                <td class="text-center sticky-col-start-2 fw-semibold">{{ $commentTitles[$i]->title }}</td>
                <td class="text-center small text-muted">
                  @php
                    $totalLength = 0;
                    $count = 0;
                    foreach(($otherComments ?? []) as $comment) {
                      if ($comment->comment_name_id === $commentTitles[$i]->id && isset($comment->comment)) {
                        $totalLength += mb_strlen($comment->comment);
                        $count++;
                      }
                    }
                    $avgLength = ($count > 0) ? round($totalLength / $count) : null;
                  @endphp
                  {{ isset($avgLength) ? $avgLength . '文字' : '—' }}
                </td>
                @foreach(($reviewedids ?? []) as $rid)
                  @php
                    $comment = null;
                    foreach(($otherComments ?? []) as $c) {
                      if ($c->reviewed_id === $rid && $c->comment_name_id === $commentTitles[$i]->id && isset($c->comment)) {
                        $comment = $c->comment;
                        break;
                      }
                    }
                  @endphp
                  <td class="text-center small text-muted">
                    {{ isset($comment) ? mb_strlen($comment) . '文字' : '—' }}
                  </td>
                @endforeach
              </tr>
            @endfor
          </tbody>
        </table>
      </div>



      {{-- === 行列を切り替えた表 === --}}
      <div id="transposedTable" class="table-responsive" style="display:none;">
        <table class="table table-bordered align-middle table-hover">
          <tbody>
            <tr class="text-center">
              <th class="sticky-tra-col-start z-3 bg-dark-col" style="min-width: 150px;">No.</th>
              @for($i = 0; $i < $rowCount; $i++)
                @php
                  $stripedClass = ($i % 2 === 0) ? 'table-vertical-striped' : '';
                @endphp
                <td class="{{ $stripedClass }}" style="min-width: 150px;">{{ $i }}</td>
              @endfor
              @for($i = 0; $i < count($commentTitles); $i++)
                @php
                  $stripedClass = (($rowCount + $i) % 2 === 0) ? 'table-vertical-striped' : '';
                  $leftbdClass = ($i === 0) ? ' bd-thick-left' : '';
                @endphp
                <td class="{{ $stripedClass }} {{ $leftbdClass }}" style="min-width: 150px;"></td>
              @endfor
            </tr>
            <tr class="bd-thick-bottom">
              <th class="text-center sticky-tra-col-start z-3 bg-dark-col">評価指標</th>
              @for($i = 0; $i < $rowCount; $i++)
                @php
                  $stripedClass = ($i % 2 === 0) ? 'table-vertical-striped' : '';
                  $content = ($i === 0) ? '<strong>' . ($labels[$i] ?? '') . '</strong>' : ($labels[$i] ?? '');
                @endphp
                <td class="{{ $stripedClass }}" style="min-width: 150px;">{!! $content !!}</td>
              @endfor
              @for($i = 0; $i < count($commentTitles); $i++)
                @php
                  $stripedClass = (($rowCount + $i) % 2 === 0) ? 'table-vertical-striped' : '';
                  $leftbdClass = ($i === 0) ? ' bd-thick-left' : '';
                @endphp
                <td class="{{ $stripedClass }} {{ $leftbdClass }} text-center fw-semibold" style="min-width: 150px;">{{ $commentTitles[$i]->title }}</td>
              @endfor
            </tr>
            {{-- 評価者（行）をループ --}}
            @foreach($reviewedList as $r)
              @php
                  $isAvg = ($r->id === 'avg');
              @endphp
              <tr>
                <th class="text-center sticky-tra-col-start z-3 bg-dark-col">
                  {{ $r->display_name }}
                </th>

                {{-- 点数を列でループ --}}
                @for($i = 0; $i < $rowCount; $i++)
                  @php
                    $stripedClass = ($i % 2 === 0) ? 'table-vertical-striped' : '';

                    if ($isAvg) {
                      $point = isset($averagepoint[$i]) ? number_format($averagepoint[$i], 1) : '—';
                    } else {
                      $point = is_numeric($reviewedPoints[$r->id][$i] ?? null) ? $reviewedPoints[$r->id][$i] : '—';
                    }
                  @endphp

                  <td class="{{ $stripedClass }} text-center">{{ $point }}</td>
                @endfor
                
                @for($i = 0; $i < count($commentTitles); $i++)
                  @php
                    $stripedClass = (($rowCount + $i) % 2 === 0) ? 'table-vertical-striped' : '';
                    $leftbdClass = ($i === 0) ? ' bd-thick-left' : '';
                  @endphp
                  <td class="{{ $stripedClass }} {{ $leftbdClass }} text-center small text-muted">
                    @if($isAvg)
                      @php
                        $totalLength = 0;
                        $count = 0;
                        foreach(($otherComments ?? []) as $comment) {
                          if ($comment->comment_name_id === $commentTitles[$i]->id && isset($comment->comment)) {
                            $totalLength += mb_strlen($comment->comment);
                            $count++;
                          }
                        }
                        $avgLength = ($count > 0) ? round($totalLength / $count) : null;
                      @endphp
                      {{ isset($avgLength) ? $avgLength . '文字' : '—' }}
                    @else
                      @php
                        $comment = null;
                        foreach(($otherComments ?? []) as $c) {
                          if ($c->reviewed_id === $r->id && $c->comment_name_id === $commentTitles[$i]->id && isset($c->comment)) {
                            $comment = $c->comment;
                            break;
                          }
                        }
                      @endphp
                      {{ isset($comment) ? mb_strlen($comment) . '文字' : '—' }}
                    @endif
                  </td>
                @endfor
              </tr>
            @endforeach
            <!-- <tr><th style="min-width: 100px;"> システム1</th></tr>
            <tr><th style="min-width: 100px;"> システム2</th></tr>
            <tr><th style="min-width: 100px;"> システム3</th></tr>
            <tr><th style="min-width: 100px;"> システム4</th></tr>
            <tr><th style="min-width: 100px;"> システム5</th></tr>
            <tr><th style="min-width: 100px;"> システム6</th></tr>
            <tr><th style="min-width: 100px;"> システム7</th></tr>
            <tr><th style="min-width: 100px;"> システム8</th></tr>
            <tr><th style="min-width: 100px;"> システム9</th></tr>
            <tr><th style="min-width: 100px;"> システム10</th></tr>
            <tr><th style="min-width: 100px;"> システム11</th></tr>
            <tr><th style="min-width: 100px;"> システム12</th></tr>
            <tr><th style="min-width: 100px;"> システム13</th></tr>
            <tr><th style="min-width: 100px;"> システム14</th></tr>
            <tr><th style="min-width: 100px;"> システム15</th></tr>
            <tr><th style="min-width: 100px;"> システム16</th></tr>
            <tr><th style="min-width: 100px;"> システム17</th></tr>
            <tr><th style="min-width: 100px;"> システム18</th></tr> -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-between align-items-center mt-3 mb-3">
    <div class="small text-muted">
      ※ 評価者が評価した被評価者または被評価グループ一覧が表示される<br>
      ※ 被評価者名をクリックすると、評価結果の詳細へ
    </div>
    <div>
      <a href="{{ route('reviewer.list', $task->id) }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> 戻る
      </a>
    </div>
  </div>

<style>
  /* 1列目sticky */
  .sticky-col-start { 
    position: relative;
    position: sticky; 
    left: 0; 
    border-collapse: separate;
  }
  .sticky-col-start::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* 2列目sticky */
  .sticky-col-start-2 { 
    position: relative;
    position: sticky; 
    left: 40px;
    border-collapse: separate;
  } 
  .sticky-col-start-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 0.2px solid #f0efefff !important;
    border-right: 1.5px solid #474747ff !important;
  }

  /* 行列切替sticky */
  .sticky-tra-col-start { 
    position: relative;
    position: sticky; 
    left: 0;
    border-collapse: separate;
  } 
  .sticky-tra-col-start::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-right: 1.5px solid #474747ff !important;
  }

  .z-2 { z-index: 2; }
  .z-3 { z-index: 3; }

  /* カーソル上の行の視認性 */
  tbody tr:hover td { background: #f8fafc; }

  .table-vertical-striped {
    background-color: rgba(0,0,0,.05) !important;
  }

  /* ヘッダー用濃いグレーの背景色 */
  .bg-dark-col {
    background-color: #cfcbcbff !important;
  }

  /* ヘッダー下の境界線 */
  .bd-thick-bottom {
    border-bottom-width: 1.5px !important;
    border-bottom-color: #474747ff !important;
  }
  /* ヘッダー左の境界線（非sticky）（切替行列でのみ使用中） */
  .bd-thick-left {
    border-left-width: 1.5px !important;
    border-left-color: #474747ff !important;
  }
</style>
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const normalTable = document.getElementById('normalTable');
    const transposedTable = document.getElementById('transposedTable');
    const toggleBtn = document.getElementById('toggleTableBtn');

    // 初期状態は行列切替前の表 (画像1) を表示
    normalTable.style.display = 'block';
    transposedTable.style.display = 'none';

    toggleBtn.addEventListener('click', function() {
      if (normalTable.style.display === 'none') {
        // 現在、行列切替後の表が表示されている -> 行列切替前の表へ (画像1)
        normalTable.style.display = 'block';
        transposedTable.style.display = 'none';
      } else {
        // 現在、行列切替前の表が表示されている -> 行列切替後の表へ (画像2)
        normalTable.style.display = 'none';
        transposedTable.style.display = 'block';
      }
    });

    const url = new URL(window.location);
    if (url.searchParams.has('boothid')) {
      url.searchParams.delete('boothid');
      window.history.replaceState({}, '', url.pathname);
    }
    if (url.searchParams.has('from')) {
      url.searchParams.delete('from');
      window.history.replaceState({}, '', url.pathname);
    }
  });
</script>
@endpush