@extends('task/layout')
@section('content')
<link rel="stylesheet" href="{{ asset('css/rubric-common.css') }}">
<style>
  :root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-success: #10b981;
    --color-info: #06b6d4;
    --color-bg: #f8fafc;
    --color-card: #ffffff;
    --color-border: #e2e8f0;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  body {
    background: var(--color-bg);
  }

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
  }

  .page-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
  }

  .card-modern {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
  }

  .card-header-modern {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    border-radius: 12px 12px 0 0;
  }

  .card-body-modern {
    padding: 1.5rem;
  }

  .input-modern {
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    width: 100%;
  }

  .input-modern:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
  }

  .label-modern {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.5rem;
  }

  .required-mark {
    color: #ef4444;
    margin-left: 0.25rem;
  }

  .evaluation-table {
    width: 100%;
    border-collapse: collapse;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
  }

  .evaluation-table thead th {
    background: #f8fafc;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    text-align: center;
    vertical-align: middle;
  }

  .evaluation-table thead th:first-child {
    text-align: left;
    background: #f0fdf4;
  }

  .evaluation-table tbody td {
    padding: 1rem;
    border: 1px solid var(--color-border);
    vertical-align: top;
  }

  .evaluation-table tbody td:first-child {
    background: #fefce8;
    font-weight: 600;
    color: var(--color-text);
  }

  .evaluation-table tbody tr:hover td:not(:first-child) {
    background: #f8fafc;
  }

  .rubric-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 80px;
  }

  .rubric-cell-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .radio-modern {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .rubric-descriptor {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
  }

  .rubric-point {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
    margin-top: 0.25rem;
  }

  .evaluation-comment {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.875rem;
    resize: vertical;
    transition: all 0.2s ease;
    background: #fafbfc;
  }

  .evaluation-comment:focus {
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
  }

  .total-score-card {
    background: #eff6ff;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 1.5rem;
  }

  .total-score-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
  }

  .btn-modern {
    border-radius: 8px;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .btn-modern-primary {
    background: var(--color-primary);
    color: white;
  }

  .btn-modern-primary:hover {
    background: var(--color-primary-dark);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .btn-modern-outline {
    background: white;
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
  }

  .btn-modern-outline:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .alert-modern {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px solid;
    margin-bottom: 1.5rem;
  }

  .alert-info-modern {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0c4a6e;
  }

  @media (max-width: 768px) {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    .total-score-display {
      font-size: 2rem;
    }
  }
</style>

<div class="container mt-4">
  <div class="page-header">
    <h3 class="page-title">{{ $rubric->title }}</h3>
    <a href="{{ route('rubric.index') }}" class="btn btn-modern btn-modern-outline">
      戻る
    </a>
  </div>

  @if($rubric->description)
    <div class="alert-modern alert-info-modern">
      <strong>説明:</strong> {{ $rubric->description }}
    </div>
  @endif

  <div id="rubricPreview">
    {{-- ルーブリック評価表 --}}
    <div class="card-modern">
      <div class="card-header-modern" style="background: #f0fdf4;">
        <h5 style="margin: 0; font-weight: 600;">ルーブリック評価表</h5>
      </div>
      <div class="card-body-modern">
        <div class="table-responsive">
          <table class="evaluation-table">
            <thead>
              <tr>
                <th style="width: 20%;">評価項目</th>
                @php
                  // レベル数を取得（ルーブリックのlevelフィールドから判定）
                  $levelCount = 3; // デフォルト
                  if ($rubric->criteria->isNotEmpty()) {
                    $firstCriteria = $rubric->criteria->first();
                    if ($firstCriteria->performance->isNotEmpty()) {
                      $levelCount = $firstCriteria->performance->max('level') ?? 3;
                    }
                  }

                  // レベルラベルを取得（カンマ区切り）
                  $levelLabels = [];
                  if (!empty($rubric->level)) {
                    $levelLabels = array_map('trim', explode(',', $rubric->level));
                  }
                @endphp
                @for($i = 1; $i <= $levelCount; $i++)
                  @php
                    // このレベルの点数を取得（最初の評価項目から）
                    $levelPoint = 0;
                    if ($rubric->criteria->isNotEmpty()) {
                      $firstPerf = $rubric->criteria->first()->performance->where('level', $i)->first();
                      $levelPoint = $firstPerf ? $firstPerf->point : $i;
                    }

                    // カスタムラベルがあればそれを使用、なければデフォルト
                    // empty()は"0"をtrueと判定するため、!== ''で比較
                    $levelLabel = isset($levelLabels[$i - 1]) && $levelLabels[$i - 1] !== ''
                      ? $levelLabels[$i - 1]
                      : 'レベル ' . $i;
                  @endphp
                  <th>{{ $levelLabel }}@if($rubric->show_points)<br><small>({{ $levelPoint }}点)</small>@endif</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 class="rubric-cell">
                          <div class="rubric-descriptor">{{ $performance->descriptor }}</div>
                          @if($rubric->show_points)
                          <div class="rubric-point">{{ $performance->point }}点</div>
                          @endif
                        </div>
                      @else
                        <div class="rubric-cell" style="background: #f9fafb; min-height: 60px;">
                          <small class="text-muted">未設定</small>
                        </div>
                      @endif
                    </td>
                  @endfor
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {{-- 戻るボタン --}}
    <div class="d-flex justify-content-center gap-3 mb-5" style="margin-top: 2rem;">
      <a href="{{ route('rubric.index') }}" class="btn btn-modern btn-modern-outline">
        戻る
      </a>
    </div>
  </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// プレビューページ - 特別な処理は不要
$(document).ready(function() {
  console.log('ルーブリックプレビュー表示');
});
</script>
@endpush
@endsection