@extends('layouts.app')
@section('title', $course->name . ' — グループ管理')
@section('page-title', $course->name . ' — グループ管理')
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
レッスンをまとめるグループの追加・編集・削除と、<strong>表示順の変更</strong>を行います。レッスン本文の編集は「レッスン設定」から行います。
@endsection
@section('content')
@include('site.course.partials._workspace_toolbar')

@if(session('success'))
  <div class="alert alert-success py-2">{{ session('success') }}</div>
@endif

<div class="d-flex justify-content-end flex-wrap gap-2 mb-3">
  <a href="{{ route('site.course.workspace.show', [$site, $course, 'lessons']) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-journal-text me-1"></i>レッスン設定</a>
  <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addGroupModal"><i class="bi bi-plus-lg me-1"></i>グループ追加</button>
</div>

@foreach($groups as $group)
  <form id="delete-group-{{ $group->id }}" method="POST" action="{{ route('site.bundle.groups.destroy', [$site, $course, $group]) }}" class="d-none">
    @csrf @method('DELETE')
  </form>
@endforeach

@if($groups->isEmpty())
<div class="card">
  <div class="card-body text-center py-5 text-muted">グループがありません。「グループ追加」から作成してください。</div>
</div>
@else
<form method="POST" action="{{ route('site.course.workspace.groups.order', [$site, $course]) }}" id="group-order-form">
  @csrf @method('PUT')
  <div class="card mb-3">
    <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center gap-2">
      <span class="fw-semibold">グループ一覧</span>
      <span class="small text-muted">↑↓で順序を変えてから「表示順を保存」</span>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th class="ps-4" style="width:56px">順</th>
            <th>グループ名</th>
            <th>公開状態</th>
            <th>レッスン数</th>
            <th class="text-end pe-4" style="width:220px">操作</th>
          </tr>
        </thead>
        <tbody id="group-sort-tbody">
          @foreach($groups as $group)
          <tr data-group-row>
            <td class="ps-4">
              <span class="badge bg-light text-dark border group-order-badge">{{ $loop->iteration }}</span>
              <input type="hidden" name="groups[{{ $loop->index }}][id]" value="{{ $group->id }}" data-group-id>
              <input type="hidden" name="groups[{{ $loop->index }}][sort_order]" value="{{ $loop->index }}" data-group-sort-order>
            </td>
            <td class="fw-semibold">{{ $group->name }}</td>
            <td><span class="badge {{ $group->status === 'published' ? 'bg-success' : 'bg-secondary' }}">{{ $group->status === 'published' ? '公開' : '下書き' }}</span></td>
            <td class="small">{{ $group->lessons->count() }}</td>
            <td class="text-end pe-4 text-nowrap">
              <div class="btn-group btn-group-sm me-1" role="group" aria-label="表示順">
                <button type="button" class="btn btn-outline-secondary group-move-up" title="上へ" @if($loop->first) disabled @endif><i class="bi bi-chevron-up"></i></button>
                <button type="button" class="btn btn-outline-secondary group-move-down" title="下へ" @if($loop->last) disabled @endif><i class="bi bi-chevron-down"></i></button>
              </div>
              <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#editGroup{{ $group->id }}">編集</button>
              <button type="submit" class="btn btn-outline-danger btn-sm" form="delete-group-{{ $group->id }}" onclick="return confirm('グループを削除しますか？（レッスンも削除されます）')">削除</button>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
    <div class="card-footer bg-white d-flex flex-wrap justify-content-between align-items-center gap-2">
      <span class="small text-muted mb-0">上から順に会員のレッスン一覧などに表示されます（数値が小さいほど上）。</span>
      <button type="submit" class="btn btn-primary btn-sm px-4">表示順を保存</button>
    </div>
  </div>
</form>
@endif

@include('site.course.partials._group_lesson_modals', ['site' => $site, 'course' => $course, 'groups' => $groups])
@include('partials.monaka_image_picker')
@endsection

@push('scripts')
<script>
(function () {
  const tbody = document.getElementById('group-sort-tbody');
  const form = document.getElementById('group-order-form');
  if (!tbody || !form) return;

  function refreshOrder() {
    const rows = tbody.querySelectorAll('tr[data-group-row]');
    rows.forEach((row, index) => {
      const badge = row.querySelector('.group-order-badge');
      if (badge) badge.textContent = String(index + 1);
      const sortInput = row.querySelector('[data-group-sort-order]');
      if (sortInput) sortInput.value = String(index);
      const up = row.querySelector('.group-move-up');
      const down = row.querySelector('.group-move-down');
      if (up) up.disabled = index === 0;
      if (down) down.disabled = index === rows.length - 1;
    });
  }

  function reindexFormNames() {
    const rows = tbody.querySelectorAll('tr[data-group-row]');
    rows.forEach((row, index) => {
      row.querySelectorAll('[data-group-id]').forEach((el) => { el.name = 'groups[' + index + '][id]'; });
      row.querySelectorAll('[data-group-sort-order]').forEach((el) => { el.name = 'groups[' + index + '][sort_order]'; });
    });
  }

  tbody.addEventListener('click', function (e) {
    const up = e.target.closest('.group-move-up');
    const down = e.target.closest('.group-move-down');
    if (!up && !down) return;
    const row = e.target.closest('tr[data-group-row]');
    if (!row) return;
    if (up && row.previousElementSibling) {
      tbody.insertBefore(row, row.previousElementSibling);
      refreshOrder();
    }
    if (down && row.nextElementSibling) {
      tbody.insertBefore(row.nextElementSibling, row);
      refreshOrder();
    }
  });

  form.addEventListener('submit', function () {
    reindexFormNames();
  });

  refreshOrder();
})();
</script>
@endpush