@extends(session('fb_embed') ? 'layouts.embed' : 'layouts.app')
@section('title', 'チャットでファネル作成')
@section('page-title', 'チャットでファネル作成（ベータ）')
@section('page-subtitle')質問に答えるだけで、ファネルの構成（下書き）を組み立てます。@endsection
@section('content')

@if($sessions->isNotEmpty())
<div class="card mb-4">
  <div class="card-header fw-semibold"><i class="bi bi-arrow-counterclockwise me-2 text-primary"></i>作成中の下書き（続きから再開）</div>
  <div class="list-group list-group-flush">
    @foreach($sessions as $s)
      <a href="{{ route('funnel.builder.show', $s) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
        <span>
          {{ data_get($s->blueprint_json, 'funnel.name', 'ファネル下書き') }}
          @php($statusBadge = ['ready' => ['確認待ち', 'bg-light text-secondary'], 'failed' => ['作成失敗（再試行できます）', 'bg-warning-subtle text-warning-emphasis']][$s->status] ?? ['入力中', 'bg-light text-secondary'])
          <span class="badge {{ $statusBadge[1] }} ms-2">{{ $statusBadge[0] }}</span>
        </span>
        <small class="text-muted">{{ $s->updated_at?->format('Y/m/d H:i') }}</small>
      </a>
    @endforeach
  </div>
</div>
@endif

<div class="card">
  <div class="card-header fw-semibold"><i class="bi bi-chat-dots me-2 text-primary"></i>作りたいファネルを選んでください</div>
  <div class="card-body">
    <p class="small text-muted mb-3">まず初めに、ファネルのテンプレートを選択して下さい。選択後、チャットで質問が始まります。<br>答えていくと右側に「作成予定のファネル構成」が組み上がり、最後に確認して下書きを作成します。</p>
    <div class="row g-3">
      @foreach($templates as $tpl)
        <div class="col-md-6 col-lg-4">
          <form method="POST" action="{{ route('funnel.builder.session.store') }}" class="h-100">
            @csrf
            <input type="hidden" name="template_key" value="{{ $tpl['key'] }}">
            <button type="submit" class="w-100 h-100 text-start btn btn-outline-secondary p-3" style="border-radius:12px;">
              <div class="fw-semibold mb-1">{{ $tpl['name'] }}</div>
              <div class="small text-muted">{{ $tpl['description'] }}</div>
            </button>
          </form>
        </div>
      @endforeach
    </div>
    @unless(session('fb_embed'))
    <div class="mt-3">
      <a href="{{ route('funnel.create') }}" class="btn btn-link text-muted px-0">テンプレートから作成／通常の作成画面へ</a>
    </div>
    @endunless
  </div>
</div>
@endsection