@extends('task/layout')
@section('content')
<div class="container mt-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h3>ルーブリック一覧</h3>
      <p class="text-muted">
        @if(request('show_all'))
          登録されている全てのルーブリック（親・子）を表示中
        @else
          登録されているルーブリックの一覧です（親ルーブリックのみ表示）
        @endif
      </p>
    </div>
    <div class="d-flex gap-2">
      @if(request('show_all'))
        <a href="{{ route('rubric.index') }}" class="btn btn-outline-secondary">
           親のみ表示
        </a>
      @else
        <a href="{{ route('rubric.index', ['show_all' => 1]) }}" class="btn btn-outline-secondary">
           全て表示
        </a>
      @endif
      <a href="{{ route('rubric.create') }}" class="btn btn-primary">
         新規作成
      </a>
    </div>
  </div>

  <div class="row">
    @forelse($rubrics as $rubric)
      <div class="col-md-6 mb-3">
        <div class="card shadow-sm {{ $rubric->rubric_criterion_id ? 'border-primary' : '' }}">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-start mb-2">
              <h5 class="card-title mb-0">{{ $rubric->title }}</h5>
              @if($rubric->rubric_criterion_id)
                <span class="badge bg-primary">子ルーブリック</span>
              @else
                @if(($rubric->child_rubrics_count ?? 0) > 0)
                  <span class="badge bg-success">親ルーブリック (子: {{ $rubric->child_rubrics_count }})</span>
                @endif
              @endif
            </div>

            @if($rubric->rubric_criterion_id && $rubric->parent_criteria)
              <div class="alert alert-info py-1 px-2 small mb-2">
                 親観点: {{ $rubric->parent_criteria->parentrubric->title }} - {{ $rubric->parent_criteria->item }}
              </div>
            @endif

            @if($rubric->description)
              <p class="card-text text-muted small">{{ Str::limit($rubric->description, 100) }}</p>
            @endif

            <div class="text-muted small mb-3">
              <span class="badge bg-secondary">{{ $rubric->level }}</span>
              <br>
              評価項目: {{ $rubric->criteria->count() }}個
              <br>
              作成日: {{ $rubric->created_at->format('Y-m-d H:i') }}
              <br>
              更新日: {{ $rubric->updated_at->format('Y-m-d H:i') }}
            </div>

            <div class="d-flex gap-2 flex-wrap mb-3">
              @php
                $currentUserId = Auth::id() ?? 1; // デフォルトでユーザーID=1を使用
              @endphp
              <a href="{{ route('rubric.user', ['rubricId' => $rubric->id, 'userId' => $currentUserId]) }}"
                 class="btn btn-sm btn-success" title="プレビュー">
                <i class="fas fa-eye"></i> プレビュー
              </a>
              <a href="{{ route('rubric.edit', $rubric->id) }}" class="btn btn-sm btn-outline-primary" title="編集">
                <i class="fas fa-edit"></i>
              </a>
              <button type="button" class="btn btn-sm btn-outline-secondary copy-rubric"
                      data-id="{{ $rubric->id }}" data-title="{{ $rubric->title }}" title="コピー">
                <i class="fas fa-copy"></i>
              </button>
              <button type="button" class="btn btn-sm btn-outline-danger delete-rubric"
                      data-id="{{ $rubric->id }}" data-title="{{ $rubric->title }}" title="削除">
                <i class="fas fa-trash"></i>
              </button>
            </div>

            {{-- 子ルーブリック一覧 --}}
            @if(!$rubric->rubric_criterion_id)
              @php
                $childRubrics = [];
                foreach($rubric->criteria as $criterion) {
                  if($criterion->rubric) {
                    $childRubrics[] = [
                      'criterion' => $criterion,
                      'rubric' => $criterion->rubric
                    ];
                  }
                }
              @endphp
              @if(count($childRubrics) > 0)
                <div class="border-top pt-3 mt-2">
                  <h6 class="text-muted mb-2">
                     子ルーブリック ({{ count($childRubrics) }})
                  </h6>
                  @foreach($childRubrics as $child)
                    <div class="card mb-2" style="background-color: #f8f9fa;">
                      <div class="card-body p-2">
                        <div class="d-flex justify-content-between align-items-start">
                          <div>
                            <strong>{{ $child['rubric']->title }}</strong>
                            <small class="text-muted d-block">
                               親観点: {{ $child['criterion']->item }}
                            </small>
                            <small class="text-muted">
                               評価項目: {{ $child['rubric']->criteria->count() }}個
                            </small>
                          </div>
                          <div class="d-flex gap-1">
                            <a href="{{ route('rubric.user', ['rubricId' => $child['rubric']->id, 'userId' => $currentUserId]) }}"
                               class="btn btn-sm btn-success" title="プレビュー">
                              <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('rubric.edit', $child['rubric']->id) }}"
                               class="btn btn-sm btn-outline-primary" title="編集">
                              <i class="fas fa-edit"></i>
                            </a>
                            <button type="button" class="btn btn-sm btn-outline-secondary copy-rubric"
                                    data-id="{{ $child['rubric']->id }}" data-title="{{ $child['rubric']->title }}" title="コピー">
                              <i class="fas fa-copy"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger delete-rubric"
                                    data-id="{{ $child['rubric']->id }}" data-title="{{ $child['rubric']->title }}" title="削除">
                              <i class="fas fa-trash"></i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
              @endif
            @endif
          </div>
        </div>
      </div>
    @empty
      <div class="col-12">
        <div class="alert alert-info">
          ルーブリックが登録されていません。新規作成ボタンから作成してください。
        </div>
      </div>
    @endforelse
  </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).on('click', '.delete-rubric', function() {
  const id = $(this).data('id');
  const title = $(this).data('title');

  if (!confirm(`「${title}」を削除しますか？\nこの操作は取り消せません。`)) {
    return;
  }

  $.ajax({
    url: `/rubric/${id}`,
    method: 'DELETE',
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') || '{{ csrf_token() }}'
    },
    success: function(response) {
      if (response.success) {
        alert(response.message);
        location.reload();
      }
    },
    error: function(xhr) {
      const error = xhr.responseJSON;
      alert('エラー: ' + (error.message || '削除に失敗しました'));
    }
  });
});

$(document).on('click', '.copy-rubric', function() {
  const id = $(this).data('id');
  const title = $(this).data('title');

  if (!confirm(`「${title}」をコピーしますか？`)) {
    return;
  }

  $.ajax({
    url: `/rubric/${id}/copy`,
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') || '{{ csrf_token() }}'
    },
    success: function(response) {
      if (response.success) {
        alert(response.message);
        location.reload();
      }
    },
    error: function(xhr) {
      const error = xhr.responseJSON;
      alert('エラー: ' + (error.message || 'コピーに失敗しました'));
    }
  });
});
</script>
@endpush
@endsection