@extends('task/layout')
@section('content')
<style>
  :root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-secondary: #64748b;
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --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);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  }

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

  .rubric-container {
    max-width: 1400px;
    margin: 0 auto;
  }

  .card-modern {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
  }

  .card-modern:hover {
    box-shadow: var(--shadow-md);
  }

  .card-header-modern {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: between;
    align-items: center;
    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;
  }

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

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

  .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-secondary {
    background: var(--color-secondary);
    color: white;
  }

  .btn-modern-secondary:hover {
    background: #475569;
    color: white;
  }

  .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);
  }

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

  .btn-modern-success:hover {
    background: #059669;
    color: white;
  }

  .btn-modern-danger {
    background: white;
    border: 1.5px solid #fee2e2;
    color: var(--color-danger);
  }

  .btn-modern-danger:hover {
    background: #fee2e2;
    border-color: var(--color-danger);
  }

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

  .text-muted-modern {
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }

  .badge-modern {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .rubric-table-container {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .rubric-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .rubric-table thead th {
    background: #f8fafc;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .rubric-table thead th:first-child {
    text-align: left;
    min-width: 200px;
  }

  .rubric-table tbody th {
    background: #fafbfc;
    font-weight: 500;
    padding: 0.75rem;
    vertical-align: top;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .rubric-table tbody td {
    padding: 0.5rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: white;
  }

  .rubric-table tbody td textarea {
    width: 100%;
    min-height: 80px;
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.875rem;
    resize: vertical;
    transition: all 0.2s ease;
    background: #ffffff;
  }

  .rubric-table tbody td textarea:focus {
    border-color: var(--color-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
  }

  .criterion-input {
    border: 1.5px solid var(--color-border);
    background: white;
    width: 100%;
    padding: 0.5rem;
    font-weight: 500;
    color: var(--color-text);
    border-radius: 6px;
  }

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

  .category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
  }

  .point-input {
    width: 80px;
    text-align: center;
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    padding: 0.375rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: all 0.2s ease;
  }

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

  .section-divider {
    height: 1px;
    background: var(--color-border);
    margin: 2rem 0;
  }

  .tag-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f1f5f9;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 0.25rem;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
  }

  .icon-btn:hover {
    transform: scale(1.1);
  }

  @media (max-width: 768px) {
    .card-body-modern {
      padding: 1rem;
    }

    .rubric-table thead th,
    .rubric-table tbody th,
    .rubric-table tbody td {
      padding: 0.5rem;
      font-size: 0.8125rem;
    }
  }
</style>

<div class="rubric-container py-4 px-3">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h2 class="mb-1" style="color: var(--color-text); font-weight: 700;">ルーブリック作成</h2>
    </div>
    <div class="d-flex gap-3 align-items-center">
      <a href="{{ route('rubric.index') }}" class="btn btn-modern btn-modern-outline">
        戻る
      </a>
    </div>
  </div>

  <form id="rubricForm">
    @csrf

    {{-- 基本情報とカテゴリ設定を横並び --}}
    <div class="row mb-4">
      {{-- 基本情報 --}}
      <div class="col-md-6 mb-4 mb-md-0">
        <div class="card-modern h-100">
          <div class="card-header-modern" style="background: #eff6ff;">
            <h5 class="mb-0" style="color: var(--color-text); font-weight: 600;">基本情報</h5>
          </div>
          <div class="card-body-modern">
            <div class="row g-3">
              <div class="col-12">
                <label class="label-modern">タイトル <span style="color: var(--color-danger);">*</span></label>
                <input type="text" class="form-control input-modern" id="title" name="title"
                       required maxlength="150" placeholder="タイトルを入力　例: 情報リテラシー評価">
              </div>
              <div class="col-12">
                <label class="label-modern">説明</label>
                <textarea class="form-control input-modern" id="description" name="description"
                          rows="3" placeholder="ルーブリックの説明（任意）"></textarea>
              </div>
              <div class="col-12">
                <div class="form-check mb-2">
                  <input class="form-check-input" type="checkbox" id="useParentRubric">
                  <label class="form-check-label label-modern" for="useParentRubric">
                    親ルーブリックを選択する
                  </label>
                </div>
                <select class="form-select input-modern" id="rubric_criterion_id" name="rubric_criterion_id" style="display: none;">
                  <option value="">---- 親ルーブリックを以下から選んでください ----</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      {{-- カテゴリ設定 --}}
      <div class="col-md-6">
        <div class="card-modern h-100">
          <div class="card-header-modern" style="background: #f0fdf4;">
            <h5 class="mb-0" style="color: var(--color-text); font-weight: 600;">カテゴリ設定</h5>
            <button type="button" class="btn btn-modern btn-modern-outline btn-sm" id="addCategory">
               カテゴリ追加
            </button>
          </div>
          <div class="card-body-modern">
            <div id="categoriesContainer">
              <p class="text-muted-modern mb-0" id="noCategoriesMessage">
                カテゴリを追加すると、評価項目をグループ化できます
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ルーブリック表 --}}
    <div class="card-modern mb-4">
      <div class="card-header-modern" style="background: #fef3c7;">
        <h5 class="mb-0" style="color: var(--color-text); font-weight: 600;">
          ルーブリック <span style="color: var(--color-danger);">*</span>
        </h5>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-modern btn-modern-outline btn-sm" id="addCriterion">
             行追加
          </button>
          <button type="button" class="btn btn-modern btn-modern-outline btn-sm" id="addColumn">
             列追加
          </button>
        </div>
      </div>
      <div class="card-body-modern p-0">
        <div class="table-responsive">
          <div class="rubric-table-container">
            <table class="rubric-table" id="rubricTable">
              <thead>
                <tr id="headerRow">
                  <th>評価観点</th>
                </tr>
              </thead>
              <tbody id="rubricBody">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {{-- 保存ボタン --}}
    <div class="d-flex justify-content-center gap-3 mb-5">
      <a href="{{ route('rubric.index') }}" class="btn btn-modern btn-modern-outline">
        戻る
      </a>
      <button type="submit" class="btn btn-modern btn-modern-success">
        保存
      </button>
    </div>
  </form>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
let categoryIndex = 0;
let criterionIndex = 0;
let columnCount = 3;

$(document).ready(function() {
  initializeTable();
  loadParentCriteria();

  // 親ルーブリックチェックボックスの切り替え
  $('#useParentRubric').on('change', function() {
    if ($(this).is(':checked')) {
      $('#rubric_criterion_id').show();
    } else {
      $('#rubric_criterion_id').hide().val('');
    }
  });
});

// 親ルーブリックの観点一覧を読み込み
function loadParentCriteria() {
  $.ajax({
    url: '/rubric/parent-criteria',
    method: 'GET',
    success: function(response) {
      if (response.success && response.data) {
        const select = $('#rubric_criterion_id');
        response.data.forEach(function(item) {
          select.append(`<option value="${item.criterion_id}">${item.rubric_title} - ${item.criterion_item}</option>`);
        });
      }
    },
    error: function(xhr) {
      console.error('Failed to load parent criteria:', xhr);
    }
  });
}

function initializeTable() {
  for (let i = 0; i < 3; i++) {
    addTableColumn(i + 1);
  }
  addCriterionRow();
}

$('#addColumn').on('click', function() {
  columnCount++;
  addTableColumn(columnCount);
});

function addTableColumn(colNum) {
  const headerCell = $(`
    <th style="min-width: 200px;">
      <div class="d-flex flex-column align-items-center gap-2">
        <input type="text" class="form-control form-control-sm level-label-input mb-1"
               placeholder="レベル名を入力" data-col="${colNum}" required
               style="text-align: center; font-weight: 600; background: white;">
        <div class="input-group" style="width: 100px;">
          <input type="number" class="form-control point-input" placeholder="点数"
                 value="${colNum}" data-col="${colNum}" min="0" step="0.1">
          <span class="input-group-text" style="background: var(--color-bg); border-color: var(--color-border); font-weight: 600; padding: 0.375rem 0.5rem;">点</span>
        </div>
        <button type="button" class="btn btn-modern btn-modern-danger icon-btn remove-col-btn"
                data-col="${colNum}" title="削除">
          <i class="fas fa-trash"></i>
        </button>
      </div>
    </th>
  `);
  $('#headerRow').append(headerCell);

  $('#rubricBody tr.criterion-row').each(function() {
    const cell = $(`
      <td data-col="${colNum}">
        <textarea placeholder="パフォーマンス記述を入力" data-col="${colNum}" required></textarea>
      </td>
    `);
    $(this).append(cell);
  });
}

$(document).on('click', '.remove-col-btn', function() {
  const col = $(this).data('col');
  if ($('.point-input').length <= 1) {
    alert('少なくとも1列は必要です');
    return;
  }
  if (!confirm('この列を削除しますか？')) return;

  $(`th:has(.point-input[data-col="${col}"])`).remove();
  $(`td[data-col="${col}"]`).remove();
});

$('#addCategory').on('click', function() {
  $('#noCategoriesMessage').hide();
  const categoryHtml = `
    <div class="tag-item category-item" data-index="${categoryIndex}">
      <input type="text" class="form-control form-control-sm category-title"
             placeholder="カテゴリ名を入力" required maxlength="150"
             data-index="${categoryIndex}" style="border: none; background: transparent; flex: 1;">
      <button type="button" class="btn btn-modern btn-modern-danger icon-btn remove-category" title="削除">
        <i class="fas fa-trash"></i>
      </button>
    </div>
  `;
  $('#categoriesContainer').append(categoryHtml);
  categoryIndex++;
  updateCategorySelects();
});

$(document).on('click', '.remove-category', function() {
  const categoryItem = $(this).closest('.category-item');
  const categoryIdx = categoryItem.data('index');
  $(`.category-select option[value="${categoryIdx}"]:selected`).parent().val('');
  categoryItem.remove();
  if ($('.category-item').length === 0) {
    $('#noCategoriesMessage').show();
  }
  updateCategorySelects();
});

$(document).on('input', '.category-title', function() {
  updateCategorySelects();
});

function updateCategorySelects() {
  const categories = [];
  $('.category-item').each(function() {
    const index = $(this).data('index');
    const title = $(this).find('.category-title').val() || `カテゴリ ${index + 1}`;
    categories.push({index, title});
  });

  $('.category-select').each(function() {
    const currentValue = $(this).val();
    $(this).html('<option value="">カテゴリなし</option>');
    categories.forEach(cat => {
      $(this).append(`<option value="${cat.index}">${cat.title}</option>`);
    });
    if (currentValue) {
      $(this).val(currentValue);
    }
  });
}

$('#addCriterion').on('click', function() {
  addCriterionRow();
});

function addCriterionRow() {
  const rowHtml = $(`
    <tr class="criterion-row" data-index="${criterionIndex}">
      <th>
        <input type="text" class="form-control form-control-sm criterion-input mb-2"
               placeholder="評価項目名を入力" required maxlength="250" data-index="${criterionIndex}">
        <select class="form-select form-select-sm category-select mb-2" data-index="${criterionIndex}">
          <option value="">カテゴリなし</option>
        </select>
        <button type="button" class="btn btn-modern btn-modern-danger icon-btn remove-criterion"
                data-index="${criterionIndex}" title="削除">
          <i class="fas fa-trash"></i>
        </button>
      </th>
    </tr>
  `);

  for (let i = 1; i <= columnCount; i++) {
    rowHtml.append(`
      <td data-col="${i}">
        <textarea placeholder="パフォーマンス記述を入力" data-col="${i}" required></textarea>
      </td>
    `);
  }

  $('#rubricBody').append(rowHtml);
  criterionIndex++;
  updateCategorySelects();
}

$(document).on('click', '.remove-criterion', function() {
  if ($('.criterion-row').length <= 1) {
    alert('少なくとも1つの評価項目は必要です');
    return;
  }
  if (!confirm('この評価項目を削除しますか？')) return;
  $(this).closest('tr').remove();
});

$('#rubricForm').on('submit', function(e) {
  e.preventDefault();

  if ($('.criterion-row').length === 0) {
    alert('少なくとも1つの評価項目を追加してください');
    return;
  }

  // 入力バリデーション
  let hasValidationErrors = false;
  let validationMessages = [];

  // 評価項目名のチェック
  $('.criterion-input').each(function(index) {
    if (!$(this).val().trim()) {
      hasValidationErrors = true;
      validationMessages.push(`評価項目 ${index + 1}: 評価項目名が入力されていません`);
      $(this).css('border-color', 'var(--color-danger)');
    } else {
      $(this).css('border-color', 'var(--color-border)');
    }
  });

  if (hasValidationErrors) {
    alert('入力内容を確認してください:\n\n' + validationMessages.join('\n'));
    return;
  }

  // パフォーマンス記述のブラウザネイティブバリデーション
  const form = document.getElementById('rubricForm');
  if (!form.reportValidity()) {
    return;
  }

  // レベルラベルをカンマ区切りで結合
  const levelLabels = [];
  $('.level-label-input').each(function() {
    levelLabels.push($(this).val() || '');
  });
  const levelString = levelLabels.join(',');

  const jsonData = {
    title: $('#title').val(),
    description: $('#description').val() || null,
    level: levelString,
    rubric_criterion_id: $('#rubric_criterion_id').val() || null,
    categories: [],
    criteria: []
  };

  $('.category-item').each(function() {
    const title = $(this).find('.category-title').val();
    if (title) {
      jsonData.categories.push({title: title});
    }
  });

  const columnPoints = [];
  $('.point-input').each(function() {
    columnPoints.push(parseInt($(this).val()) || 0);
  });

  $('.criterion-row').each(function() {
    const item = $(this).find('.criterion-input').val();
    const categorySelect = $(this).find('.category-select');
    const categoryId = categorySelect.val() ? parseInt(categorySelect.val()) : null;

    const performances = [];
    $(this).find('td').each(function(index) {
      const descriptor = $(this).find('textarea').val();
      const point = columnPoints[index];
      const level = index + 1; // レベル番号（列番号、1から始まる）

      if (descriptor) {
        performances.push({
          descriptor: descriptor,
          point: point,
          level: level
        });
      }
    });

    if (item && performances.length > 0) {
      jsonData.criteria.push({
        item: item,
        category_id: categoryId,
        performances: performances
      });
    }
  });

  console.log('Sending data:', jsonData);

  $.ajax({
    url: '{{ route('rubric.store') }}',
    method: 'POST',
    data: JSON.stringify(jsonData),
    contentType: 'application/json',
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') || $('input[name="_token"]').val()
    },
    success: function(response) {
      if (response.success) {
        alert(response.message);
        window.location.href = '{{ route('rubric.index') }}';
      }
    },
    error: function(xhr) {
      const error = xhr.responseJSON;
      if (error && error.errors) {
        let errorMsg = 'バリデーションエラー:\n';
        for (const [key, messages] of Object.entries(error.errors)) {
          errorMsg += `${key}: ${messages.join(', ')}\n`;
        }
        alert(errorMsg);
      } else {
        alert('エラー: ' + (error.message || '保存に失敗しました'));
      }
      console.error('Error:', xhr);
    }
  });
});

// 未保存変更の検知
let formChanged = false;

// フォーム要素の変更を監視
$(document).on('input change', '#rubricForm input, #rubricForm textarea, #rubricForm select', function() {
  formChanged = true;
});

// ページ離脱時の警告
$(window).on('beforeunload', function(e) {
  if (formChanged) {
    e.preventDefault();
    return '変更が保存されていません。このページを離れますか？';
  }
});

// フォーム送信成功時はフラグをリセット
$(document).on('submit', '#rubricForm', function() {
  formChanged = false;
});
</script>
@endpush
@endsection