@extends('layouts.app')
@section('title', $course->name . ' — コース基本設定')
@section('page-title', $course->name)
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
コース名・種類・サムネイル・受講スタイル・公開期間・オファーなどをまとめて設定します。レッスン共通の既定（公開状態・ボタン文言・コメント）は「レッスン基本設定」にまとめています。
@endsection
@section('content')
@php
  $cs = $courseSettings ?? \App\Support\BundleCourseSettings::merge(is_array($course->course_settings) ? $course->course_settings : null);
  $basic = $cs['basic'] ?? [];
  $offers = $cs['offers'] ?? [];
  $automation = $cs['automation'] ?? [];
  $lessonsDefaults = $cs['lessons'] ?? [];
  $comments = $cs['comments'] ?? [];
  $val = fn (string $path, mixed $default = '') => old($path, data_get($cs, str_replace('course_settings.', '', $path), $default));
  $releaseStartMode = old('course_settings.automation.release_start_mode', $automation['release_start_mode'] ?? 'on_grant');
  $releaseEndMode = old('course_settings.automation.release_end_mode', $automation['release_end_mode'] ?? 'none');
  $releaseStartAt = old('course_settings.automation.release_start_at', $automation['release_start_at'] ?? '');
  $releaseEndAt = old('course_settings.automation.release_end_at', $automation['release_end_at'] ?? '');
  $buttonTextMode = old('course_settings.basic.button_text_mode', $basic['button_text_mode'] ?? 'default');
  if (! in_array($buttonTextMode, ['default', 'custom'], true)) {
      $legacyBtn = (string) ($basic['button_text'] ?? 'start');
      $buttonTextMode = ($legacyBtn === 'start' || $legacyBtn === '') ? 'default' : 'custom';
  }
  $buttonTextCustom = old('course_settings.basic.button_text_custom', $basic['button_text_custom'] ?? '');
  $courseCategoryOptions = $courseCategoryOptions ?? \App\Support\MembershipSiteCourseCategories::optionsForSelect($site->course_categories);
  $selectedCourseCategoryId = old('course_settings.basic.course_category_id', $basic['course_category_id'] ?? '');
  $learningStyleSequentialLabel = '受講完了にすると次のレッスンが受講可能';
  if ($releaseStartAt && str_contains((string) $releaseStartAt, ' ')) {
      $releaseStartAt = str_replace(' ', 'T', substr((string) $releaseStartAt, 0, 16));
  }
  if ($releaseEndAt && str_contains((string) $releaseEndAt, ' ')) {
      $releaseEndAt = str_replace(' ', 'T', substr((string) $releaseEndAt, 0, 16));
  }
@endphp
@include('site.course.partials._workspace_toolbar')

@php
  $copySourceCourses = $copySourceCourses ?? collect();
@endphp
@if($copySourceCourses->isNotEmpty())
  <div class="card mb-4 border-primary border-opacity-25">
    <div class="card-body py-3">
      <p class="small text-muted mb-2 mb-md-0">同じサイト内の別コースから、受講スタイル・オファー・レッスン既定などをまとめてコピーできます（コース名・サムネイルは変わりません）。</p>
      <form method="POST" action="{{ route('site.course.workspace.settings.copy-from', [$site, $course]) }}" class="row g-2 align-items-end"
        onsubmit="return confirm('現在保存されているコース基本設定（受講スタイル・オファー等）を、選択したコースの内容で上書きします。よろしいですか？');">
        @csrf
        <div class="col-md-8">
          @include('site.course.partials._copy_course_settings_field', [
            'copySourceCourses' => $copySourceCourses,
            'fieldName' => 'copy_settings_from_course_id',
            'allowEmptyOption' => false,
          ])
        </div>
        <div class="col-md-4">
          <button type="submit" class="btn btn-outline-primary w-100">設定をコピーする</button>
        </div>
      </form>
      @error('copy_settings_from_course_id')
        <div class="text-danger small mt-2">{{ $message }}</div>
      @enderror
    </div>
  </div>
@endif

<form method="POST" action="{{ route('site.course.workspace.settings.update', [$site, $course]) }}" enctype="multipart/form-data" id="course-settings-form">
  @csrf @method('PUT')

  <div class="card mb-4">
    <div class="card-header bg-white fw-semibold">基本設定</div>
    <div class="card-body pb-2">
      @component('site.course.partials._settings_form_row', ['label' => 'コース名', 'required' => true])
        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $course->name) }}" required maxlength="200">
        @error('name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '管理名称', 'hint' => '受講生には表示されません。管理画面での識別用です。'])
        <input type="text" name="course_settings[basic][admin_name]" class="form-control" value="{{ old('course_settings.basic.admin_name', $basic['admin_name'] ?? '') }}" maxlength="200" placeholder="例: 2026春期メイン">
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '種類'])
        <select name="course_settings[basic][course_type]" class="form-select">
          @foreach(\App\Support\BundleCourseSettings::courseTypeLabels() as $key => $label)
            <option value="{{ $key }}" @selected(old('course_settings.basic.course_type', $basic['course_type'] ?? 'standard') === $key)>{{ $label }}</option>
          @endforeach
        </select>
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => 'コース画像', 'hint' => '16:9推奨（png / jpg / gif / webp・最大5MB）。プレビューは管理のコース一覧カードと同じ比率・切り抜きです。'])
        @include('partials._image_file_upload', [
          'inputId' => 'course-settings-thumbnail-file',
          'previewId' => 'course-settings-thumbnail-preview',
          'label' => '',
          'layout' => 'featured',
          'currentUrl' => old('thumbnail_media_url') ?: $course->thumbnail_url,
          'showRemove' => (bool) $course->thumbnail_url,
          'removeCheckboxId' => 'course-settings-thumbnail-remove',
        ])
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => 'コース一覧のボタン', 'hint' => '会員のコース一覧・コースの結合内一覧で「受講する」等に使う文言です。レッスン本文下・受講完了ボタンとは別（レッスン基本設定）。'])
        <select name="course_settings[basic][button_text_mode]" id="button_text_mode" class="form-select" style="max-width: 16rem;">
          <option value="default" @selected($buttonTextMode === 'default')>受講する</option>
          <option value="custom" @selected($buttonTextMode === 'custom')>カスタム</option>
        </select>
        <div id="button_text_custom_wrap" class="mt-2" @if($buttonTextMode !== 'custom') style="display:none;" @endif>
          <label class="form-label small text-muted mb-1" for="button_text_custom">カスタム文言</label>
          <input type="text" name="course_settings[basic][button_text_custom]" id="button_text_custom" class="form-control" value="{{ $buttonTextCustom }}" maxlength="50" placeholder="例: レッスンを見る">
        </div>
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '進捗率', 'hint' => '会員のコース画面に、受講完了したレッスン数／公開レッスン数（％）を表示します。未完了のレッスンは進捗に含めません。'])
        <div class="d-flex flex-wrap gap-3">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[basic][show_progress]" id="progress_show" value="1" @checked(filter_var(old('course_settings.basic.show_progress', $basic['show_progress'] ?? true), FILTER_VALIDATE_BOOLEAN))>
            <label class="form-check-label" for="progress_show">表示する</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[basic][show_progress]" id="progress_hide" value="0" @checked(! filter_var(old('course_settings.basic.show_progress', $basic['show_progress'] ?? true), FILTER_VALIDATE_BOOLEAN))>
            <label class="form-check-label" for="progress_hide">表示しない</label>
          </div>
        </div>
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '動画自動再生／視聴完了設定', 'hint' => 'オンにすると、レッスン設定の動画オプションが会員画面に反映されます。下の「自動化設定」で受講スタイルを「'.$learningStyleSequentialLabel.'」にしたとき、HTML5動画はその下の視聴率に達すると自動で受講完了になります（YouTube／Vimeoは受講完了ボタン）。'])
        <div class="d-flex flex-wrap gap-3 align-items-center">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[basic][show_video_options_hint]" id="video_opts_show" value="1" @checked(filter_var(old('course_settings.basic.show_video_options_hint', $basic['show_video_options_hint'] ?? true), FILTER_VALIDATE_BOOLEAN))>
            <label class="form-check-label" for="video_opts_show">表示する</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[basic][show_video_options_hint]" id="video_opts_hide" value="0" @checked(! filter_var(old('course_settings.basic.show_video_options_hint', $basic['show_video_options_hint'] ?? true), FILTER_VALIDATE_BOOLEAN))>
            <label class="form-check-label" for="video_opts_hide">表示しない</label>
          </div>
          <span class="text-muted small" title="レッスンごとの動画設定は「レッスン設定」で編集します。"><i class="bi bi-question-circle"></i></span>
        </div>
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => 'カテゴリ', 'hint' => 'サイト設定で登録したカテゴリから選びます。未設定の場合は絞り込み対象になりません。'])
        @if(count($courseCategoryOptions) > 0)
          <select name="course_settings[basic][course_category_id]" class="form-select" style="max-width: 20rem;">
            <option value="" @selected($selectedCourseCategoryId === '')>未分類</option>
            @foreach($courseCategoryOptions as $catId => $catName)
              <option value="{{ $catId }}" @selected((string) $selectedCourseCategoryId === (string) $catId)>{{ $catName }}</option>
            @endforeach
          </select>
        @else
          <p class="text-muted small mb-2">このサイトにはまだカテゴリがありません。</p>
          <input type="hidden" name="course_settings[basic][course_category_id]" value="">
          <a href="{{ route('site.edit', $site) }}" class="btn btn-sm btn-outline-primary">サイト設定でカテゴリを登録</a>
        @endif
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => 'ステータス', 'required' => true])
        <select name="status" class="form-select @error('status') is-invalid @enderror" required>
          <option value="published" @selected(old('status', $course->status) === 'published')>公開</option>
          <option value="draft" @selected(old('status', $course->status) === 'draft')>下書き</option>
        </select>
        @error('status')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => 'コース一覧での表示順'])
        <input type="number" name="sort_order" class="form-control @error('sort_order') is-invalid @enderror" value="{{ old('sort_order', (int) $course->sort_order) }}" min="0" style="max-width: 8rem;">
        @error('sort_order')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '説明（任意）'])
        <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="3">{{ old('description', $course->description) }}</textarea>
        @error('description')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
      @endcomponent
    </div>
  </div>

  @php
    $defaultLessonStatus = old('course_settings.lessons.default_status', $lessonsDefaults['default_status'] ?? 'published');
    $completionButtonLabel = old('course_settings.lessons.completion_button_label', $lessonsDefaults['completion_button_label'] ?? \App\Support\BundleCourseSettings::DEFAULT_COMPLETION_BUTTON_LABEL);
    $completionAfterAction = old('course_settings.lessons.completion_after_action', $lessonsDefaults['completion_after_action'] ?? \App\Support\BundleCourseSettings::DEFAULT_COMPLETION_AFTER_ACTION);
    $commentsMode = old('course_settings.comments.mode', $comments['mode'] ?? 'disabled');
  @endphp
  <div class="card mb-4" id="lesson-defaults-settings">
    <div class="card-header bg-white fw-semibold">レッスン基本設定</div>
    <div class="card-body pb-2">
      <p class="small text-muted mb-3">このコースで<strong>新規にレッスンを追加するとき</strong>の初期値と、会員のレッスン画面で共通して使う設定です。各レッスンの編集画面で個別に上書きできます。</p>
      <p class="small text-muted mb-3">本文下の任意ボタン（課題提出リンクなど）は<strong>各レッスンの編集</strong>で設定します。ここではコース共通の項目だけを登録します。</p>

      @component('site.course.partials._settings_form_row', ['label' => '新規レッスンの既定の公開状態', 'hint' => 'レッスン追加画面を開いたとき、公開状態の初期選択です。'])
        <select name="course_settings[lessons][default_status]" class="form-select" style="max-width: 14rem;">
          <option value="published" @selected($defaultLessonStatus === 'published')>公開</option>
          <option value="draft" @selected($defaultLessonStatus === 'draft')>下書き</option>
          <option value="private" @selected($defaultLessonStatus === 'private')>非公開</option>
        </select>
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '受講完了ボタンの文言', 'hint' => '生徒が受講を完了したことを登録するボタンです。会員のレッスン画面（本文の下）に常に表示されます。次のレッスンを完了までロックするには、下の「自動化設定」→ 受講スタイルで「'.$learningStyleSequentialLabel.'」を選びます。'])
        <input type="text" name="course_settings[lessons][completion_button_label]" class="form-control" style="max-width: 20rem;" maxlength="50"
          value="{{ $completionButtonLabel }}"
          placeholder="{{ \App\Support\BundleCourseSettings::DEFAULT_COMPLETION_BUTTON_LABEL }}">
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '受講完了ボタンを押した後', 'hint' => '会員が受講完了ボタンを押したあとの画面遷移です。'])
        <div class="d-flex flex-column gap-2">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[lessons][completion_after_action]" id="completion-after-next-lesson" value="next_lesson"
              @checked($completionAfterAction === 'next_lesson')>
            <label class="form-check-label" for="completion-after-next-lesson">次のレッスンに進む（最終レッスンやすでに受講済みの場合はレッスン一覧へ）</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[lessons][completion_after_action]" id="completion-after-stay" value="stay"
              @checked($completionAfterAction === 'stay')>
            <label class="form-check-label" for="completion-after-stay">その画面にとどまる</label>
          </div>
        </div>
      @endcomponent

      <hr class="my-3">

      @component('site.course.partials._settings_form_row', ['label' => 'コメント機能'])
        <select name="course_settings[comments][mode]" class="form-select" id="comments-mode-select">
          <option value="disabled" @selected($commentsMode === 'disabled')>利用しない</option>
          <option value="enabled" @selected($commentsMode === 'enabled')>コース内のすべてのレッスンで有効</option>
          <option value="per_lesson" @selected($commentsMode === 'per_lesson')>レッスンごとに有効/無効を選ぶ</option>
        </select>
        <p class="form-text mb-2">「レッスンごと」は各レッスンの編集画面でコメントをオンにしたレッスンのみ受講生が投稿できます。</p>
        <p class="form-text mb-0">投稿の確認・返信は <a href="{{ route('site.course.workspace.show', [$site, $course, 'comments']) }}">コース設定 → コメント</a> から行います。</p>
      @endcomponent
      @component('site.course.partials._settings_form_row', ['label' => '返信時の表示名（既定）'])
        <input type="text" name="course_settings[comments][default_admin_reply_name]" class="form-control" maxlength="100"
          value="{{ old('course_settings.comments.default_admin_reply_name', $comments['default_admin_reply_name'] ?? '') }}"
          placeholder="空欄のときはサイト名を使用">
        <p class="form-text mb-0">運営返信の名前の初期値です。各コメントの返信フォームで変更できます。</p>
      @endcomponent
      @component('site.course.partials._settings_form_row', ['label' => 'コメント承認'])
        <div class="form-check">
          <input type="hidden" name="course_settings[comments][require_approval]" value="0">
          <input class="form-check-input" type="checkbox" name="course_settings[comments][require_approval]" value="1" id="comments_require_approval"
            @checked(old('course_settings.comments.require_approval', $comments['require_approval'] ?? false))>
          <label class="form-check-label" for="comments_require_approval">投稿を管理者が承認するまで会員に表示しない</label>
        </div>
        <p class="form-text mb-0">オンにすると、受講生の投稿は<strong>コース設定 → コメント</strong>で「会員に表示」をオンにするまで非公開です。</p>
      @endcomponent
    </div>
  </div>

  @php
    $offerMode = old('course_settings.offers.offer_mode', \App\Support\BundleCourseSettings::resolveOfferMode($offers));
    $offerLimitedStart = old('course_settings.offers.limited_start_at', $offers['limited_start_at'] ?? '');
    $offerLimitedEnd = old('course_settings.offers.limited_end_at', $offers['limited_end_at'] ?? '');
    if (is_string($offerLimitedStart) && str_contains($offerLimitedStart, ' ')) {
        $offerLimitedStart = str_replace(' ', 'T', substr($offerLimitedStart, 0, 16));
    }
    if (is_string($offerLimitedEnd) && str_contains($offerLimitedEnd, ' ')) {
        $offerLimitedEnd = str_replace(' ', 'T', substr($offerLimitedEnd, 0, 16));
    }
  @endphp
  <div class="card mb-4">
    <div class="card-header bg-white fw-semibold">未購入者へのオファー設定</div>
    <div class="card-body pb-2">
      <p class="small text-muted mb-3">ログイン済みで<strong>このコースをまだ付与されていない会員</strong>に、マイページのコース一覧で表示します。付与済みの会員には従来どおり「受講する」等が表示されます。</p>
      @component('site.course.partials._settings_form_row', ['label' => 'オファー表示'])
        <div class="d-flex flex-column gap-2">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[offers][offer_mode]" id="offer_mode_disabled" value="disabled" @checked($offerMode === 'disabled')>
            <label class="form-check-label" for="offer_mode_disabled">利用しない</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[offers][offer_mode]" id="offer_mode_always" value="always" @checked($offerMode === 'always')>
            <label class="form-check-label" for="offer_mode_always">常時表示オファー</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[offers][offer_mode]" id="offer_mode_limited" value="limited" @checked($offerMode === 'limited')>
            <label class="form-check-label" for="offer_mode_limited">期間限定オファー</label>
          </div>
        </div>
        <div id="offer_limited_period_wrap" class="mt-3 row g-2" @if($offerMode !== 'limited') style="display:none;" @endif>
          <div class="col-md-6">
            <label class="form-label small text-muted mb-1" for="offer_limited_start_at">表示開始</label>
            <input type="datetime-local" name="course_settings[offers][limited_start_at]" id="offer_limited_start_at" class="form-control" value="{{ $offerLimitedStart }}">
          </div>
          <div class="col-md-6">
            <label class="form-label small text-muted mb-1" for="offer_limited_end_at">表示終了</label>
            <input type="datetime-local" name="course_settings[offers][limited_end_at]" id="offer_limited_end_at" class="form-control" value="{{ $offerLimitedEnd }}">
          </div>
          <div class="col-12">
            <p class="form-text mb-0">期間限定を選んだときだけ指定します。開始・終了のどちらか一方だけでも構いません。</p>
          </div>
        </div>
      @endcomponent
      @component('site.course.partials._settings_form_row', ['label' => '未購入時のボタン'])
        <input type="text" name="course_settings[offers][detail_button_label]" class="form-control" style="max-width: 16rem;" value="{{ old('course_settings.offers.detail_button_label', $offers['detail_button_label'] ?? '詳細') }}" maxlength="50" placeholder="詳細">
        <p class="form-text mb-0">未付与の会員に表示するボタン文言（既定: 詳細）。</p>
      @endcomponent
      @component('site.course.partials._settings_form_row', ['label' => 'オファー先URL', 'hint' => '購入ページ・申込フォームなど。未設定の場合、未購入ボタンは押せません。'])
        <input type="url" name="course_settings[offers][detail_url]" class="form-control" value="{{ old('course_settings.offers.detail_url', $offers['detail_url'] ?? '') }}" maxlength="500" placeholder="https://...">
      @endcomponent
      <div class="alert alert-light border small mb-0">
        <strong>受講完了しないと次に進めない</strong>設定は、この下の <a href="#course-settings-learning-style" class="alert-link">自動化設定 → 受講スタイル</a> で行います（基本設定の上では選べません）。
      </div>
    </div>
  </div>

  <div class="card mb-4" id="course-settings-automation">
    <div class="card-header bg-white fw-semibold">自動化設定</div>
    <div class="card-body pb-2">
      @php
        $audienceMode = old('course_settings.automation.audience_mode', \App\Support\BundleCourseSettings::resolveAudienceMode($automation));
        $audienceDays = old('course_settings.automation.audience_days_after_grant', $automation['audience_days_after_grant'] ?? 0);
        $selectedLabelIds = old('course_settings.automation.audience_label_ids', $automation['audience_label_ids'] ?? []);
        if (! is_array($selectedLabelIds)) {
            $selectedLabelIds = [];
        }
        $siteLabelOptions = $siteLabelOptions ?? collect();
      @endphp
      @component('site.course.partials._settings_form_row', ['label' => '受講対象者'])
        <div class="d-flex flex-column gap-3">
          <div>
            <div class="form-check">
              <input class="form-check-input audience-mode-radio" type="radio" name="course_settings[automation][audience_mode]" id="audience_mode_none" value="none" @checked($audienceMode === 'none')>
              <label class="form-check-label fw-semibold" for="audience_mode_none">指定しない</label>
            </div>
            <p class="form-text mb-0 ps-4 ms-2">コースを付与されている受講生は、常に閲覧できます。</p>
          </div>
          <div>
            <div class="form-check">
              <input class="form-check-input audience-mode-radio" type="radio" name="course_settings[automation][audience_mode]" id="audience_mode_after_days" value="after_days" @checked($audienceMode === 'after_days')>
              <label class="form-check-label fw-semibold" for="audience_mode_after_days">コース登録後より指定期間経過後</label>
            </div>
            <p class="form-text mb-2 ps-4 ms-2">指定期間が経過したあとに、コースを開放できます。</p>
            <div id="audience_after_days_wrap" class="ps-4 ms-2" style="display: {{ $audienceMode === 'after_days' ? '' : 'none' }};">
              <label class="form-label small text-muted mb-1" for="audience_days_after_grant">経過日数</label>
              <div class="d-flex align-items-center gap-2 flex-wrap">
                <input type="number" name="course_settings[automation][audience_days_after_grant]" id="audience_days_after_grant" class="form-control form-control-sm" style="width:5rem;" min="0" max="3650" value="{{ $audienceDays }}">
                <span class="small">日後から開放</span>
              </div>
              <p class="form-text mb-0">コース（またはコースの結合）を付与した日の0時から数えます。</p>
            </div>
          </div>
          <div>
            <div class="form-check">
              <input class="form-check-input audience-mode-radio" type="radio" name="course_settings[automation][audience_mode]" id="audience_mode_labels" value="labels" @checked($audienceMode === 'labels')>
              <label class="form-check-label fw-semibold" for="audience_mode_labels">ラベル</label>
            </div>
            <p class="form-text mb-2 ps-4 ms-2">コースを付与されている受講生のうち、ラベルが割り当てられている受講生だけが閲覧できます。</p>
            <div id="audience_labels_wrap" class="ps-4 ms-2 border-start" style="display: {{ $audienceMode === 'labels' ? '' : 'none' }};">
            @if($siteLabelOptions->isEmpty())
              <p class="small text-muted mb-0">ラベルが未登録です。<a href="{{ route('site.labels.index', $site) }}">ラベル設定</a>で追加し、<a href="{{ route('site.members.index', $site) }}">受講生管理</a>で受講生に付与してください。</p>
            @else
              <p class="small text-muted mb-2">対象にするラベル（いずれか1つ以上付いている受講生が閲覧できます）</p>
              <div class="d-flex flex-column gap-1">
                @foreach($siteLabelOptions as $labelOpt)
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="course_settings[automation][audience_label_ids][]" id="audience_label_{{ $labelOpt->id }}" value="{{ $labelOpt->id }}" @checked(in_array($labelOpt->id, array_map('intval', $selectedLabelIds), true))>
                    <label class="form-check-label" for="audience_label_{{ $labelOpt->id }}">{{ $labelOpt->name }}</label>
                  </div>
                @endforeach
              </div>
            @endif
            </div>
          </div>
        </div>
      @endcomponent

      @php
        $learningStyle = old('course_settings.automation.learning_style', $automation['learning_style'] ?? 'all_unlocked');
        $videoCompletionPercent = old('course_settings.automation.video_completion_percent', $automation['video_completion_percent'] ?? 90);
      @endphp
      @component('site.course.partials._settings_form_row', ['label' => '受講スタイル', 'hint' => '「受講完了で次を解放」と案内されている場合は、下の2つ目の選択肢です。'])
        <div class="d-flex flex-column gap-3" id="course-settings-learning-style">
          <div>
            <div class="form-check">
              <input class="form-check-input learning-style-radio" type="radio" name="course_settings[automation][learning_style]" id="style_all" value="all_unlocked" @checked($learningStyle === 'all_unlocked')>
              <label class="form-check-label fw-semibold" for="style_all">最初から開放済みの全てのレッスンが受講可能</label>
            </div>
            <p class="form-text mb-0 ps-4 ms-2">ドリップ日数・公開日時の条件を満たせば、順番に関係なくレッスンを開けます。</p>
          </div>
          <div>
            <div class="form-check">
              <input class="form-check-input learning-style-radio" type="radio" name="course_settings[automation][learning_style]" id="style_seq" value="sequential_completion" @checked($learningStyle === 'sequential_completion')>
              <label class="form-check-label fw-semibold" for="style_seq">{{ $learningStyleSequentialLabel }}</label>
            </div>
            <p class="form-text mb-2 ps-4 ms-2">前のレッスンを「受講完了」にした受講生だけ、次のレッスンが解放されます。動画は視聴率が基準に達すると自動完了（HTML5動画）できます。</p>
            <div id="video_completion_percent_wrap" class="ps-4 ms-2" style="display: {{ $learningStyle === 'sequential_completion' ? '' : 'none' }};">
              <label class="form-label small text-muted mb-1" for="video_completion_percent">動画の受講完了とみなす視聴率</label>
              <div class="d-flex align-items-center gap-2">
                <input type="number" name="course_settings[automation][video_completion_percent]" id="video_completion_percent" class="form-control form-control-sm" style="width:5rem;" min="1" max="100" value="{{ $videoCompletionPercent }}">
                <span class="small">％以上</span>
              </div>
            </div>
          </div>
        </div>
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '開放日（開始日）'])
        <div class="d-flex flex-column gap-2" id="release-start-options">
          <div class="form-check">
            <input class="form-check-input release-start-mode" type="radio" name="course_settings[automation][release_start_mode]" id="rs_grant" value="on_grant" @checked($releaseStartMode === 'on_grant')>
            <label class="form-check-label" for="rs_grant">登録後すぐ（付与日の0時から）</label>
          </div>
          <div class="form-check d-flex flex-wrap align-items-center gap-2">
            <input class="form-check-input release-start-mode" type="radio" name="course_settings[automation][release_start_mode]" id="rs_days" value="after_days" @checked($releaseStartMode === 'after_days')>
            <label class="form-check-label" for="rs_days">登録から</label>
            <input type="number" name="course_settings[automation][release_start_days]" class="form-control form-control-sm" style="width:5rem;" min="0" max="3650" value="{{ old('course_settings.automation.release_start_days', $automation['release_start_days'] ?? 0) }}">
            <span class="small">日後</span>
          </div>
          <div class="form-check d-flex flex-wrap align-items-center gap-2">
            <input class="form-check-input release-start-mode" type="radio" name="course_settings[automation][release_start_mode]" id="rs_months" value="after_months" @checked($releaseStartMode === 'after_months')>
            <label class="form-check-label" for="rs_months">登録から</label>
            <input type="number" name="course_settings[automation][release_start_months]" class="form-control form-control-sm" style="width:5rem;" min="0" max="120" value="{{ old('course_settings.automation.release_start_months', $automation['release_start_months'] ?? 0) }}">
            <span class="small">か月後</span>
          </div>
          <div class="form-check d-flex flex-wrap align-items-center gap-2">
            <input class="form-check-input release-start-mode" type="radio" name="course_settings[automation][release_start_mode]" id="rs_at" value="at_datetime" @checked($releaseStartMode === 'at_datetime')>
            <label class="form-check-label" for="rs_at">指定日時</label>
            <input type="datetime-local" name="course_settings[automation][release_start_at]" class="form-control form-control-sm" style="max-width:16rem;" value="{{ $releaseStartAt }}">
          </div>
        </div>
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '締め切り（終了日）'])
        <div class="d-flex flex-column gap-2">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="course_settings[automation][release_end_mode]" id="re_none" value="none" @checked($releaseEndMode === 'none')>
            <label class="form-check-label" for="re_none">設けない</label>
          </div>
          <div class="form-check d-flex flex-wrap align-items-center gap-2">
            <input class="form-check-input" type="radio" name="course_settings[automation][release_end_mode]" id="re_days" value="after_days" @checked($releaseEndMode === 'after_days')>
            <label class="form-check-label" for="re_days">登録から</label>
            <input type="number" name="course_settings[automation][release_end_days]" class="form-control form-control-sm" style="width:5rem;" min="0" max="3650" value="{{ old('course_settings.automation.release_end_days', $automation['release_end_days'] ?? 0) }}">
            <span class="small">日後に終了</span>
          </div>
          <div class="form-check d-flex flex-wrap align-items-center gap-2">
            <input class="form-check-input" type="radio" name="course_settings[automation][release_end_mode]" id="re_at" value="at_datetime" @checked($releaseEndMode === 'at_datetime')>
            <label class="form-check-label" for="re_at">指定日時で終了</label>
            <input type="datetime-local" name="course_settings[automation][release_end_at]" class="form-control form-control-sm" style="max-width:16rem;" value="{{ $releaseEndAt }}">
          </div>
        </div>
      @endcomponent

      @component('site.course.partials._settings_form_row', ['label' => '受講停止時の動作', 'badge' => '準備中'])
        <select name="course_settings[automation][on_suspend]" class="form-select">
          <option value="hide_all" @selected(old('course_settings.automation.on_suspend', $automation['on_suspend'] ?? 'hide_all') === 'hide_all')>全て閲覧不可</option>
          <option value="read_only" @selected(old('course_settings.automation.on_suspend', $automation['on_suspend'] ?? '') === 'read_only')>閲覧のみ可能（準備中）</option>
        </select>
        <p class="form-text mb-0">受講停止の自動判定は未接続です。設定値のみ保存されます。</p>
      @endcomponent
    </div>
  </div>

  <div class="mb-4">
    <button type="submit" class="btn btn-success px-5">保存</button>
  </div>
</form>

<div class="card border-danger">
  <div class="card-header fw-semibold text-danger">コースの削除</div>
  <div class="card-body">
    <p class="small text-muted mb-3">このコースと配下のレッスン・グループを削除します。このコースだけを含む<strong>コースの結合への受講生付与</strong>も解除されます。元に戻せません。</p>
    <form method="POST" action="{{ route('site.course.destroy', [$site, $course]) }}" onsubmit="return confirm('コース「{{ $course->name }}」を削除しますか？\nレッスンと、このコースに紐づく受講生の付与も解除されます。')">
      @csrf @method('DELETE')
      <button type="submit" class="btn btn-outline-danger">このコースを削除する</button>
    </form>
  </div>
</div>

@include('partials.monaka_image_picker')

@push('scripts')
<script>
(function () {
  const mode = document.getElementById('button_text_mode');
  const wrap = document.getElementById('button_text_custom_wrap');
  mode?.addEventListener('change', () => {
    if (wrap) wrap.style.display = mode.value === 'custom' ? '' : 'none';
  });
  const offerPeriod = document.getElementById('offer_limited_period_wrap');
  document.querySelectorAll('input[name="course_settings[offers][offer_mode]"]').forEach((radio) => {
    radio.addEventListener('change', () => {
      if (offerPeriod) offerPeriod.style.display = radio.value === 'limited' && radio.checked ? '' : 'none';
    });
  });
  const audienceDaysWrap = document.getElementById('audience_after_days_wrap');
  const audienceLabelsWrap = document.getElementById('audience_labels_wrap');
  const syncAudiencePanels = () => {
    const checked = document.querySelector('input[name="course_settings[automation][audience_mode]"]:checked');
    const mode = checked ? checked.value : 'none';
    if (audienceDaysWrap) audienceDaysWrap.style.display = mode === 'after_days' ? '' : 'none';
    if (audienceLabelsWrap) audienceLabelsWrap.style.display = mode === 'labels' ? '' : 'none';
  };
  document.querySelectorAll('.audience-mode-radio').forEach((radio) => {
    radio.addEventListener('change', syncAudiencePanels);
  });
  syncAudiencePanels();
  const videoPctWrap = document.getElementById('video_completion_percent_wrap');
  const syncLearningStylePanels = () => {
    const checked = document.querySelector('input[name="course_settings[automation][learning_style]"]:checked');
    if (videoPctWrap) videoPctWrap.style.display = checked && checked.value === 'sequential_completion' ? '' : 'none';
  };
  document.querySelectorAll('.learning-style-radio').forEach((radio) => {
    radio.addEventListener('change', syncLearningStylePanels);
  });
  syncLearningStylePanels();
})();
</script>
@endpush
@endsection