@extends('layouts.app')
@section('title', $site->name . ' - コース管理')
@section('page-title', $site->name . ' - 会員サイト構築')
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
教材の<strong>コース</strong>を作り、<strong>コースの結合</strong>で複数コースをまとめてから、受講生へ付与します。ログインURLもここから確認できます。
@endsection
@section('content')
@php
  $loginUrl = rtrim(config('app.url') ?: request()->getSchemeAndHttpHost(), '/') . '/member/' . $site->slug . '/login';
@endphp
<div class="d-flex justify-content-between align-items-center mb-4">
  <a href="{{ route('site.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>会員サイト一覧</a>
  <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addCourseModal"><i class="bi bi-plus-lg me-1"></i>コースを追加</button>
</div>

<div class="alert alert-info small mb-0">
  <div class="fw-semibold mb-2">公開までの基本順序</div>
  <ol class="mb-0 ps-3">
    <li class="mb-1">会員サイトを作成する</li>
    <li class="mb-1"><strong>コース</strong>（教材）を作成する</li>
    <li class="mb-1">各コースの <strong>コース設定</strong> でグループ・レッスンを追加する</li>
    <li class="mb-1"><strong>受講生管理</strong>で、開放したい<strong>コース</strong>を付与する（コース1本だけのときはここまで）</li>
    <li class="mb-1 text-muted">複数コースをセットで渡すときだけ → <strong>コースの結合</strong>でまとめを作り、そのコースの結合を付与（または商品プランの「購入後に開放するコースの結合」）</li>
  </ol>
  <p class="mb-0 mt-2 text-muted">コースの結合は「まとめて開放したいとき」の任意機能です。コースを作っただけでは会員に見えず、受講生への付与（または購入後開放）が必要です。</p>
</div>

<div class="row g-3 mb-4">
  <div class="col-6 col-lg-3">
    <div class="card h-100"><div class="card-body">
      <div class="text-muted small">公開状態</div>
      <div class="fs-5 fw-semibold">{{ $site->status === 'active' ? '公開中' : '下書き' }}</div>
    </div></div>
  </div>
  <div class="col-6 col-lg-3">
    <div class="card h-100"><div class="card-body">
      <div class="text-muted small">ログインURL</div>
      @include('partials._public_url_inline', ['url' => $loginUrl, 'showOpenButton' => true, 'wrapperClass' => 'mt-1'])
    </div></div>
  </div>
  <div class="col-6 col-lg-3">
    <div class="card h-100"><div class="card-body">
      <div class="text-muted small">コース数</div>
      <div class="fs-5 fw-semibold">{{ $courses->count() }}</div>
    </div></div>
  </div>
  <div class="col-6 col-lg-3">
    <div class="card h-100"><div class="card-body">
      <div class="text-muted small">未回答コメント（サイト合計）</div>
      <div class="fs-5 fw-semibold {{ ($siteUnrepliedCommentCount ?? 0) > 0 ? 'text-danger' : '' }}">{{ (int) ($siteUnrepliedCommentCount ?? 0) }}件</div>
    </div></div>
  </div>
</div>

@include('partials._copy_public_url_script')

{{-- タブナビゲーション --}}
<ul class="nav nav-tabs mb-4">
  <li class="nav-item"><a class="nav-link active" href="#">コース一覧</a></li>
  <li class="nav-item"><a class="nav-link" href="{{ route('site.members.index', $site) }}">会員一覧</a></li>
</ul>

@if($courses->isEmpty())
<div class="card"><div class="card-body text-center py-5">
  <i class="bi bi-collection-play" style="font-size:3rem;color:#ddd;"></i>
  <h5 class="mt-3 text-muted">コースがありません</h5>
  <p class="text-muted small">「コースを追加」からコンテンツを作成してください</p>
</div></div>
@else
<div class="row g-3">
  @foreach($courses as $course)
  <div class="col-md-6 col-lg-4">
    <div class="card h-100 overflow-hidden">
      @include('partials._bundle_course_thumbnail', [
        'url' => $course->thumbnail_url,
        'alt' => $course->name,
        'variant' => 'card-top',
      ])
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <h6 class="fw-semibold mb-0">
            <a href="{{ route('site.course.workspace.show', [$site, $course, 'overview']) }}" class="text-decoration-none text-dark">{{ $course->name }}</a>
          </h6>
          <span class="badge {{ $course->status === 'published' ? 'bg-success' : 'bg-secondary' }}">{{ $course->status === 'published' ? '公開' : '下書き' }}</span>
        </div>
        <p class="text-muted small mb-2">{{ $course->description ?: '説明なし' }}</p>
        @php $cc = $courseCommentSummaries[$course->id] ?? null; @endphp
        @if($cc)
        <div class="d-flex flex-wrap gap-1 mb-3">
          @if($cc['enabled'])
            <span class="badge rounded-pill bg-primary-subtle text-primary border border-primary-subtle" title="{{ $cc['mode_label'] }}">
              <i class="bi bi-chat-left-text me-1"></i>コメントON
            </span>
            @if($cc['mode'] === 'per_lesson')
              <span class="badge rounded-pill bg-light text-muted border">レッスンごと</span>
            @endif
            @if($cc['total'] > 0)
              <span class="badge rounded-pill bg-secondary">投稿 {{ $cc['total'] }}</span>
            @endif
            @if($cc['unreplied'] > 0)
              <a href="{{ $cc['comments_url'] }}" class="badge rounded-pill bg-danger text-decoration-none">未回答 {{ $cc['unreplied'] }}</a>
            @endif
          @else
            <span class="badge rounded-pill bg-light text-muted border">コメントOFF</span>
          @endif
        </div>
        @endif
        <a href="{{ route('site.course.workspace.show', [$site, $course, 'overview']) }}" class="btn btn-sm btn-primary w-100">コース設定</a>
        <p class="text-muted small mt-2 mb-0">レッスン・編集・削除はコース設定のカードから行います。</p>
      </div>
    </div>
  </div>
  @endforeach
</div>
@endif

{{-- コース追加モーダル --}}
<div class="modal fade" id="addCourseModal" tabindex="-1">
  <div class="modal-dialog"><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.course.store', $site) }}" enctype="multipart/form-data">
      @csrf
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label fw-semibold">コース名 <span class="text-danger">*</span></label>
          <input type="text" name="name" class="form-control" required>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">説明</label>
          <textarea name="description" class="form-control" rows="3"></textarea>
        </div>
        <div class="mb-3">
          @include('partials._image_file_upload', [
            'inputId' => 'add-course-thumbnail-file',
            'previewId' => 'add-course-thumbnail-preview',
            'label' => 'サムネイル画像',
            'layout' => 'featured',
            'showRemove' => false,
          ])
        </div>
        <div class="mb-0">
          <label class="form-label fw-semibold">公開状態</label>
          <select name="status" class="form-select">
            <option value="published">公開</option>
            <option value="draft">下書き</option>
          </select>
        </div>
        @if($courses->isNotEmpty())
          <hr class="my-3">
          @include('site.course.partials._copy_course_settings_field', ['copySourceCourses' => $courses])
        @endif
      </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>

@include('partials.monaka_image_picker')
@endsection