@extends('layouts.app')
@section('title', '会員サイト設定')
@section('page-title', $site->name . ' — サイト設定')
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
<strong>1. 基本設定</strong>（サイト名・URL・ロゴ・公開状態など）を編集します。決済連携・コースの整理・会員への開放は<strong>下の案内カード</strong>から別画面へ進みます。
@endsection

@push('styles')
@include('partials._setup_hub_tile_styles')
<style>
.site-settings-category-active { border: 2px solid var(--bs-primary); background: rgba(13, 110, 253, 0.04); }
.site-settings-field-done::before { content: "✓ "; color: var(--bs-success); font-weight: 600; }
</style>
@endpush

@section('content')
<div class="setup-back-bar mb-3" role="navigation">
  <a href="{{ route('site.show', $site) }}" class="setup-back-link">
    <i class="bi bi-arrow-left-circle-fill" aria-hidden="true"></i>
    コース一覧に戻る
  </a>
  <p class="setup-back-hint mb-0">サイト設定は <strong>基本設定の入力</strong> と <strong>別画面への案内</strong> に分かれています。</p>
</div>

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

{{-- 設計書の3区分 — どこで何をするか --}}
<div class="card mb-4 border-primary">
  <div class="card-header bg-white fw-semibold">サイト設定の構成（3区分）</div>
  <div class="card-body p-3">
    <div class="row g-3">
      <div class="col-md-4">
        <div class="h-100 p-3 rounded site-settings-category-active">
          <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge bg-primary">1</span>
            <span class="fw-semibold">基本設定</span>
            <span class="badge bg-primary-subtle text-primary border border-primary-subtle">この画面</span>
          </div>
          <p class="small text-muted mb-2">サイト名・説明・ロゴ・公開・ログイン用URL（スラッグ）・ヘッダー・テーマ色</p>
          <p class="small mb-0"><span class="text-muted">未対応（別途実装予定）:</span> favicon、SEO、OGP、独自ドメイン、会員の自由登録</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="h-100 p-3 rounded bg-light border">
          <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge bg-secondary">2</span>
            <span class="fw-semibold">決済連携</span>
            <span class="badge bg-light text-dark border">別画面</span>
          </div>
          <p class="small text-muted mb-2">購入後に会員を作り、コースの結合を開放する連携（商品プランと紐づけ）</p>
          <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('setting.payment') }}" class="btn btn-sm btn-outline-primary">決済連携</a>
            <a href="{{ route('setting.products') }}" class="btn btn-sm btn-outline-primary">商品登録</a>
            <a href="{{ route('site.bundle-settings', $site) }}" class="btn btn-sm btn-outline-secondary">コースの結合</a>
          </div>
          <p class="small text-warning mb-0 mt-2">
            <i class="bi bi-exclamation-triangle me-1"></i>
            購入完了からの<strong>自動会員作成・自動付与</strong>は未接続です。入金後は<strong>受講生管理</strong>での手動付与が必要な場合があります。
            @if($siteStats['linked_plans'] > 0)
              （このサイト向けプラン紐づけ: {{ $siteStats['linked_plans'] }}件）
            @endif
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="h-100 p-3 rounded bg-light border">
          <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge bg-secondary">3</span>
            <span class="fw-semibold">コースカテゴリ</span>
            <span class="badge bg-primary-subtle text-primary border border-primary-subtle">この画面</span>
          </div>
          <p class="small text-muted mb-2">教材を「初級・上級」などに<strong>見た目だけ</strong>整理する機能（閲覧権限は増えません）</p>
          <p class="small text-muted mb-0">下の<strong>コースカテゴリ</strong>カードで登録し、各コースの基本設定で紐付けます。マイページの「コースの結合で絞り込み」とは別です。</p>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- 別画面へのショートカット --}}
<div class="mb-4">
  <div class="fw-semibold mb-2">基本設定以外（このサイトの関連画面）</div>
  <div class="setup-card-grid" style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));">
    <article class="setup-tile">
      <div class="setup-tile-icon setup-tile-icon--company" aria-hidden="true"><i class="bi bi-link-45deg"></i></div>
      <span class="setup-tile-badge setup-tile-badge--done">URL</span>
      <h2 class="setup-tile-title h6">URL管理</h2>
      <p class="setup-tile-desc small">ログインURLのコピー・確認</p>
      <div class="setup-tile-actions">
        <a href="{{ route('site.url', $site) }}" class="btn btn-outline-secondary btn-sm w-100">開く</a>
      </div>
    </article>
    <article class="setup-tile">
      <div class="setup-tile-icon setup-tile-icon--funnel" aria-hidden="true"><i class="bi bi-layout-text-window"></i></div>
      <span class="setup-tile-badge setup-tile-badge--progress">表示</span>
      <h2 class="setup-tile-title h6">ページ設定</h2>
      <p class="setup-tile-desc small">コース/ログイン/レッスン/固定ページ</p>
      <div class="setup-tile-actions">
        <a href="{{ route('site.page-settings', $site) }}" class="btn btn-outline-secondary btn-sm w-100">開く</a>
      </div>
    </article>
    <article class="setup-tile">
      <div class="setup-tile-icon setup-tile-icon--operator" aria-hidden="true"><i class="bi bi-people"></i></div>
      <span class="setup-tile-badge setup-tile-badge--{{ $siteStats['members'] > 0 ? 'done' : 'unset' }}">{{ $siteStats['members'] }}名</span>
      <h2 class="setup-tile-title h6">受講生管理</h2>
      <p class="setup-tile-desc small">会員追加・コース/コースの結合の付与</p>
      <div class="setup-tile-actions">
        <a href="{{ route('site.members.index', $site) }}" class="btn btn-outline-secondary btn-sm w-100">開く</a>
      </div>
    </article>
    <article class="setup-tile">
      <div class="setup-tile-icon setup-tile-icon--payment" aria-hidden="true"><i class="bi bi-collection"></i></div>
      <span class="setup-tile-badge setup-tile-badge--{{ $siteStats['bundles'] > 0 ? 'done' : 'unset' }}">{{ $siteStats['bundles'] }}件</span>
      <h2 class="setup-tile-title h6">コースの結合</h2>
      <p class="setup-tile-desc small">複数コースの開放パック</p>
      <div class="setup-tile-actions">
        <a href="{{ route('site.bundle-settings', $site) }}" class="btn btn-outline-secondary btn-sm w-100">開く</a>
      </div>
    </article>
  </div>
</div>

<div class="card mb-3">
  <div class="card-header bg-white fw-semibold d-flex align-items-center gap-2">
    <span class="badge bg-primary">1</span>
    基本設定（この画面で保存）
  </div>
  <div class="card-body">
    <div class="alert alert-light border small mb-4">
      <div class="fw-semibold mb-1">会員サイトのログインURL（参考）</div>
      @if($site->status !== 'active')
        <div class="text-warning mb-2"><i class="bi bi-exclamation-triangle me-1"></i>下書きのため、会員はまだログインできません。公開にすると有効になります。</div>
      @endif
      @include('partials._public_url_inline', [
        'url' => $loginUrl,
        'showOpenButton' => $site->status === 'active',
        'wrapperClass' => 'mt-0',
      ])
      <div class="form-text mt-2 mb-0">スラッグを変えるとこのURLも変わります。詳細は <a href="{{ route('site.url', $site) }}">URL管理</a>。</div>
    </div>

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

      <h3 class="h6 fw-semibold border-bottom pb-2 mb-3">サイト情報</h3>
      <div class="mb-3">
        <label class="form-label fw-semibold">サイト名 <span class="text-danger">*</span></label>
        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $site->name) }}" required>
        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="form-text">ログイン画面・管理画面・会員向け表示に使われます。</div>
      </div>
      <div class="mb-4">
        <label class="form-label fw-semibold">サイト説明</label>
        <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="3">{{ old('description', $site->description) }}</textarea>
        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>

      <h3 class="h6 fw-semibold border-bottom pb-2 mb-3">見た目・ヘッダー</h3>
      <div class="row g-3 mb-4">
        <div class="col-12">
          <label class="form-label fw-semibold">ロゴ画像</label>
          @include('partials._logo_file_upload', [
            'currentUrl' => $site->logo_url,
            'showRemove' => (bool) $site->logo_url,
          ])
          <div class="form-text">会員画面のヘッダー表示は <a href="{{ route('site.page-settings', $site) }}?tab=course">ページ設定 → コースページ</a> の「ロゴを表示」でも制御できます。</div>
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">ヘッダー文言</label>
          <input type="text" name="header_text" class="form-control" value="{{ old('header_text', $site->header_text) }}">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">テーマカラー</label>
          @include('partials._hex_color_input', [
            'name' => 'theme_color',
            'value' => $site->theme_color ?: '#0d6efd',
            'label' => 'テーマカラー',
          ])
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">ヘッダー右上リンクの表示名</label>
          <input type="text" name="menu_label" class="form-control" value="{{ old('menu_label', $site->menu_label) }}" placeholder="例：サポート窓口">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">ヘッダー右上リンク先URL</label>
          <input type="text" name="menu_url" class="form-control" value="{{ old('menu_url', $site->menu_url) }}" placeholder="https://...">
          <div class="form-text">表示名とURLの両方があるときだけ会員画面右上に表示します。</div>
        </div>
      </div>

      <h3 class="h6 fw-semibold border-bottom pb-2 mb-3">公開・アクセス</h3>
      <div class="row g-3 mb-4">
        <div class="col-md-6">
          <label class="form-label fw-semibold">公開状態</label>
          <select name="status" class="form-select">
            <option value="active" @selected(old('status', $site->status) === 'active')>公開（会員がログイン可能）</option>
            <option value="draft" @selected(old('status', $site->status) === 'draft')>下書き（会員ログイン不可）</option>
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">サイトURL（スラッグ）</label>
          <div class="input-group">
            <span class="input-group-text text-muted small">/member/</span>
            <input type="text" name="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $site->slug) }}" required>
          </div>
          @error('slug')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
          <div class="form-text">英数字・ハイフン・アンダースコアのみ。</div>
        </div>
      </div>

      @include('site.partials._course_categories_settings', ['courseCategories' => $courseCategories ?? []])

      <div class="d-flex gap-2 flex-wrap">
        <button type="submit" class="btn btn-primary">サイト設定を保存</button>
        <a href="{{ route('site.show', $site) }}" class="btn btn-outline-secondary">コース一覧へ</a>
        <a href="{{ route('site.delete-confirm', $site) }}" class="btn btn-outline-danger ms-md-auto">サイトを削除</a>
      </div>
    </form>
  </div>
</div>

<p class="small text-muted mb-0">
  設計メモの全文: <code>docs/membership-site-settings-design.md</code>（開発者向け）
</p>

@include('partials._copy_public_url_script')
@include('partials.monaka_image_picker')
@endsection