@extends('layouts.app')
@section('title', '会員サイト追加')
@section('page-title', '会員サイトを追加')
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
購入者・受講生限定コンテンツを提供するための箱を作成します。ロゴ、ヘッダー、メニュー、ログインURLのスラッグを設定できます。
@endsection
@section('content')
<div class="card">
  <div class="card-header bg-white fw-semibold">基本情報</div>
  <div class="card-body">
    <form method="POST" action="{{ route('site.store') }}" enctype="multipart/form-data">
      @csrf
      <div class="mb-3">
        <label class="form-label fw-semibold">サイト名 <span class="text-danger">*</span></label>
        <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">説明</label>
        <textarea name="description" class="form-control" rows="3">{{ old('description') }}</textarea>
      </div>
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">ロゴ画像</label>
          @include('partials._logo_file_upload')
        </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') }}" placeholder="例：購入者限定講座">
        </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') }}" placeholder="例：サポート窓口 / Discord / LINEオープンチャット">
          <div class="form-text">会員サイト上部に表示する外部リンクのボタン名です。不要なら空欄でOKです。</div>
        </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') }}" placeholder="https://...">
          <div class="form-text">表示名とURLの両方を入れたときだけ、会員画面の右上にリンクボタンを表示します。</div>
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">テーマカラー</label>
          @include('partials._hex_color_input', [
            'name' => 'theme_color',
            'value' => '#0d6efd',
            'label' => 'テーマカラー',
          ])
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">公開状態</label>
          <select name="status" class="form-select">
            <option value="active" @selected(old('status', 'active') === 'active')>公開</option>
            <option value="draft" @selected(old('status') === 'draft')>下書き</option>
          </select>
          <div class="form-text">下書き中は会員ログイン画面も開けません。</div>
        </div>
      </div>
      <div class="mb-4">
        <label class="form-label fw-semibold">サイトURL（スラッグ）</label>
        <div class="input-group">
          <span class="input-group-text text-muted small">https://{{ request()->getHost() }}/member/</span>
          <input type="text" name="slug" class="form-control" value="{{ old('slug') }}" placeholder="my-site">
        </div>
        <div class="form-text">英数字・ハイフン・アンダースコアのみ使用可能（空白の場合は自動生成）</div>
      </div>
      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">作成する</button>
        <a href="{{ route('site.index') }}" class="btn btn-outline-secondary">キャンセル</a>
      </div>
    </form>
  </div>
</div>
@include('partials.monaka_image_picker')
@endsection