@extends('layouts.app')
@section('title', ($page ? '固定ページ編集' : '固定ページ追加') . ' — ' . $site->name)
@section('page-title', $site->name . ' — ' . ($page ? '固定ページ編集' : '固定ページ追加'))
@section('content')
@php
  $isEdit = $page !== null;
  $accessType = old('access_type', $page?->access_type ?? 'member');
  $slugCustomize = (bool) old('slug_customize', false);
  $currentSlug = old('slug', $page?->slug ?? '');
@endphp
<div class="mb-3">
  <a href="{{ route('site.page-settings', ['site' => $site, 'tab' => 'fixed']) }}" class="btn btn-outline-secondary btn-sm">← ページ設定（固定ページ）へ戻る</a>
</div>

<form method="POST" action="{{ $isEdit ? route('site.fixed-pages.update', [$site, $page]) : route('site.fixed-pages.store', $site) }}" id="fixed-page-form">
  @csrf
  @if($isEdit) @method('PUT') @endif

  <div class="card mb-4">
    <div class="card-header bg-white fw-semibold">基本</div>
    <div class="card-body">
      <div class="mb-3">
        <label class="form-label fw-semibold">ページタイトル <span class="text-danger">*</span></label>
        <input type="text" name="title" id="fixed_page_title" class="form-control" value="{{ old('title', $page?->title) }}" required maxlength="191">
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">ページURL</label>
        <div class="input-group mb-2">
          <span class="input-group-text text-muted small">/member/{{ $site->slug }}/page/</span>
          <input type="text"
            name="slug"
            id="fixed_page_slug"
            class="form-control font-monospace"
            value="{{ $currentSlug }}"
            maxlength="64"
            pattern="[a-zA-Z0-9_-]+"
            placeholder="faq"
            @disabled(! $slugCustomize)>
        </div>
        <div class="form-text mb-2" id="fixed_slug_hint">
          タイトルから自動でURLを付けます。英数字のタイトルはそのまま、日本語のみのときは <code>page</code> などを付与します。
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="slug_customize" value="1" id="slug_customize" @checked($slugCustomize)>
          <label class="form-check-label" for="slug_customize">URLを自分で指定する</label>
        </div>
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">本文</label>
        @include('site.partials._tinymce_field', [
          'editorId' => 'fixed_page_body_editor',
          'inputName' => 'body',
          'value' => old('body', $page?->body),
          'minHeight' => 320,
        ])
      </div>
      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label fw-semibold">公開状態</label>
          <select name="status" class="form-select">
            <option value="published" @selected(old('status', $page?->status) === 'published')>公開</option>
            <option value="draft" @selected(old('status', $page?->status) === 'draft')>下書き</option>
            <option value="private" @selected(old('status', $page?->status) === 'private')>非公開</option>
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">表示順</label>
          <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $page?->sort_order ?? 0) }}" min="0">
          <div class="form-text">左メニューでの並び順（小さいほど上）</div>
        </div>
        <div class="col-md-4 d-flex align-items-end">
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" name="show_in_nav" value="1" id="show_in_nav" @checked(old('show_in_nav', $page?->show_in_nav))>
            <label class="form-check-label" for="show_in_nav">会員サイトの左メニューに表示</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header bg-white fw-semibold">閲覧制限</div>
    <div class="card-body">
      <select name="access_type" class="form-select mb-3" id="fixed_access_type" style="max-width:360px;">
        <option value="public" @selected($accessType === 'public')>全体公開（ログイン不要）</option>
        <option value="member" @selected($accessType === 'member')>会員限定（ログイン必須）</option>
        <option value="course_bundle" @selected($accessType === 'course_bundle')>特定コースの結合限定</option>
      </select>
      <div id="fixed_bundle_wrap" style="{{ $accessType === 'course_bundle' ? '' : 'display:none;' }}">
        <label class="form-label">コースの結合</label>
        <select name="course_bundle_id" class="form-select" style="max-width:360px;">
          <option value="">— 選択 —</option>
          @foreach($courseBundles as $bundle)
            <option value="{{ $bundle->id }}" @selected((int) old('course_bundle_id', $page?->course_bundle_id) === (int) $bundle->id)>{{ $bundle->name }}</option>
          @endforeach
        </select>
      </div>
      <p class="form-text text-muted mb-0 mt-2">左メニューに出す場合も、閲覧権限のない会員にはリンクしません。</p>
    </div>
  </div>

  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">保存する</button>
    <a href="{{ route('site.page-settings', ['site' => $site, 'tab' => 'fixed']) }}" class="btn btn-outline-secondary">キャンセル</a>
  </div>
</form>

@push('scripts')
<script>
  (function () {
    const titleEl = document.getElementById('fixed_page_title');
    const slugEl = document.getElementById('fixed_page_slug');
    const customizeEl = document.getElementById('slug_customize');
    const isEdit = @json($isEdit);
    const initialSlug = @json($currentSlug);

    const slugifyTitle = (title) => {
      let s = (title || '').trim().toLowerCase()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_]+/g, '-')
        .replace(/^-+|-+$/g, '');
      return s || 'page';
    };

    const syncAutoSlug = () => {
      if (!slugEl || customizeEl?.checked) return;
      slugEl.value = slugifyTitle(titleEl?.value || '');
    };

    const syncCustomize = () => {
      if (!slugEl || !customizeEl) return;
      const on = customizeEl.checked;
      slugEl.disabled = !on;
      if (on) {
        slugEl.focus();
      } else {
        syncAutoSlug();
      }
    };

    titleEl?.addEventListener('input', syncAutoSlug);
    customizeEl?.addEventListener('change', syncCustomize);

    if (!isEdit && !customizeEl?.checked) {
      syncAutoSlug();
    }
    syncCustomize();

    document.getElementById('fixed_access_type')?.addEventListener('change', function () {
      const wrap = document.getElementById('fixed_bundle_wrap');
      if (wrap) wrap.style.display = this.value === 'course_bundle' ? '' : 'none';
    });

    document.getElementById('fixed-page-form')?.addEventListener('submit', function () {
      if (typeof tinymce !== 'undefined') tinymce.triggerSave();
      if (slugEl && customizeEl && !customizeEl.checked) {
        slugEl.disabled = false;
        syncAutoSlug();
      }
    });
  })();
</script>
@endpush
@endsection