@extends('layouts.app')
@section('title', $site->name . ' - コースの結合')
@section('page-title', $site->name . ' - コースの結合')
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
複数のコース（教材）をまとめた開放パックを作成します。受講生への付与や商品の購入後開放は、このコースの結合単位で行います。教材の編集は「コース」画面から行います。
@endsection
@section('content')
<div class="alert alert-info small">
  <div class="fw-semibold mb-1">コースとコースの結合の違い</div>
  <ul class="mb-0 ps-3">
    <li><strong>コース</strong> … 教材そのもの（レッスン・動画など）。<a href="{{ route('site.show', $site) }}">コース一覧</a>で作成・編集します。</li>
    <li><strong>コースの結合</strong> … 上記コースを<strong>複数選んでまとめた</strong>「開放セット」（例: VIP会員パック）。コース一覧に出ている教材が、そのまま結合一覧に並ぶわけではありません。</li>
  </ul>
</div>

<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
  <a href="{{ route('site.show', $site) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>コース一覧へ</a>
  <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addBundleModal" @disabled($siteCourses->isEmpty())>
    <i class="bi bi-plus-lg me-1"></i>コースの結合を追加
  </button>
</div>

@if($siteCourses->isEmpty())
<div class="alert alert-warning small">先に <a href="{{ route('site.show', $site) }}">コース一覧</a> で教材コースを1件以上作成してください。</div>
@endif

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

<div class="card">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th class="ps-4">コースの結合名</th>
          <th>含むコース数</th>
          <th>付与済み受講生</th>
          <th>商品プラン連携</th>
          <th>状態</th>
          <th class="text-end pe-4">操作</th>
        </tr>
      </thead>
      <tbody>
        @forelse($bundles as $bundle)
        <tr>
          <td class="ps-4">
            <div class="fw-semibold">{{ $bundle->name }}</div>
            <div class="text-muted small">{{ $bundle->description ?: '説明なし' }}</div>
          </td>
          <td>{{ $bundle->bundle_courses_count }}</td>
          <td>{{ $bundle->member_grants_count }}</td>
          <td class="small">
            @forelse(($linkedPlans[$bundle->id] ?? collect()) as $plan)
              <span class="badge bg-light text-dark me-1">{{ $plan->product?->name }} / {{ $plan->name }}</span>
            @empty
              <span class="text-muted">未設定</span>
            @endforelse
          </td>
          <td><span class="badge {{ $bundle->status === 'published' ? 'bg-success' : 'bg-secondary' }}">{{ $bundle->status === 'published' ? '公開' : '下書き' }}</span></td>
          <td class="text-end pe-4">
            <div class="d-inline-flex flex-wrap gap-1 justify-content-end">
              <a href="{{ route('site.bundles.edit', [$site, $bundle]) }}" class="btn btn-sm btn-outline-primary">コースを選ぶ</a>
              <form method="POST" action="{{ route('site.bundles.destroy', [$site, $bundle]) }}" class="d-inline" onsubmit="return confirm('このコースの結合を削除しますか？付与済み受講生の権限も解除されます。')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-sm btn-outline-danger">削除</button>
              </form>
            </div>
          </td>
        </tr>
        @empty
        <tr><td colspan="6" class="text-center text-muted py-4">コースの結合がありません。「コースの結合を追加」から、名前を付けて含めるコースにチェックを入れて作成してください。</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div class="modal fade" id="addBundleModal" tabindex="-1">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">コースの結合を追加</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <form method="POST" action="{{ route('site.bundles.store', $site) }}">
      @csrf
      <div class="modal-body">
        <div class="mb-3"><label class="form-label fw-semibold">結合名</label><input type="text" name="name" class="form-control" required placeholder="例: VIP会員セット"></div>
        <div class="mb-3"><label class="form-label fw-semibold">説明</label><textarea name="description" class="form-control" rows="2" placeholder="このコースの結合に含めるコースの概要"></textarea></div>
        <div class="mb-3"><label class="form-label fw-semibold">公開状態</label><select name="status" class="form-select"><option value="published">公開</option><option value="draft">下書き</option></select></div>
        <div class="border rounded p-3">
          <div class="fw-semibold mb-2">含めるコース（教材）<span class="text-danger">*</span></div>
          <p class="text-muted small mb-2">コース一覧で作った教材にチェックを入れます。1件以上選んでください。</p>
          <div class="row g-2">
            @foreach($siteCourses as $siteCourse)
            <div class="col-md-6">
              <div class="form-check border rounded px-3 py-2 h-100">
                <input class="form-check-input" type="checkbox" name="bundle_course_ids[]" value="{{ $siteCourse->id }}" id="newBc{{ $siteCourse->id }}">
                <label class="form-check-label w-100" for="newBc{{ $siteCourse->id }}">
                  <span class="fw-semibold">{{ $siteCourse->name }}</span>
                  <span class="badge {{ $siteCourse->status === 'published' ? 'bg-success' : 'bg-secondary' }} ms-1">{{ $siteCourse->status === 'published' ? '公開' : '下書き' }}</span>
                </label>
              </div>
            </div>
            @endforeach
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
        <button type="submit" class="btn btn-primary">作成する</button>
      </div>
    </form>
  </div></div>
</div>
@endsection