@extends('layouts.setup')

@section('title', '初期設定')

@php
  // 目的（できること）ごとに、必要な設定をまとめる。
  $groups = [
    [
      'title' => 'monakaを使い始めるには',
      'goal' => 'ページ作成・配信',
      'accent' => 'blue',
      'icon' => 'bi-rocket-takeoff',
      'optional' => false,
      'items' => [
        ['name' => '会社情報', 'desc' => '会社名・住所・連絡先を登録します', 'route' => route('setting.business'), 'card' => $companyCard],
      ],
    ],
    [
      'title' => 'メール配信を使うには',
      'goal' => 'メール配信',
      'accent' => 'blue',
      'icon' => 'bi-envelope',
      'optional' => false,
      'items' => [
        ['name' => 'メール送信用ドメイン', 'desc' => 'メールの送信元ドメインを設定します（迷惑メール対策）', 'route' => route('setting.mail-domain'), 'card' => $mailSendingDomainCard],
        ['name' => 'メール設定', 'desc' => '配信用の送信元（自分）を登録します', 'route' => route('account.index', ['setup_channel' => 'mail']), 'card' => $mailSetupCard],
      ],
    ],
    [
      'title' => 'LINE配信を使うには',
      'goal' => 'LINE配信',
      'accent' => 'green',
      'icon' => 'bi-chat-dots',
      'optional' => false,
      'items' => [
        ['name' => 'LINE設定', 'desc' => '公式アカウントと連携するための設定です', 'route' => route('account.index', ['setup_channel' => 'line']), 'card' => $lineSetupCard],
      ],
    ],
    [
      'title' => '商品を販売するには',
      'goal' => '商品販売',
      'accent' => 'amber',
      'icon' => 'bi-box-seam',
      'optional' => false,
      'items' => [
        ['name' => '決済連携', 'desc' => 'クレジットカード決済の接続をします', 'route' => route('setting.payment'), 'card' => $paymentSetupCard],
        ['name' => '商品登録', 'desc' => '売る商品と価格を登録します', 'route' => route('setting.products'), 'card' => $productSetupCard],
      ],
    ],
    [
      'title' => 'その他の設定（任意）',
      'goal' => null,
      'accent' => 'gray',
      'icon' => 'bi-gear',
      'optional' => true,
      'items' => [
        ['name' => '独自ドメイン', 'desc' => '公開ページのURLを自分のドメインにできます', 'route' => route('setting.domain'), 'card' => $domainCard],
        ['name' => '通知設定', 'desc' => '申込やエラーをChatworkで受け取れます', 'route' => route('setting.notification'), 'card' => $notificationCard],
        ['name' => 'オペレーター管理', 'desc' => 'スタッフ用のログインと権限を設定します', 'route' => route('setting.operator'), 'card' => $operatorCard],
      ],
    ],
  ];
@endphp

@section('setup_body')

<style>
.og-order-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: #274b8f; background: #eef4ff;
  border-radius: 8px; padding: 6px 10px; margin: 0 0 8px;
}
.og-order-note i { font-size: 0.9rem; }
</style>

<div class="og-grid">
  @foreach($groups as $g)
    @php
      $total = count($g['items']);
      $done = collect($g['items'])->filter(fn ($it) => ($it['card']['variant'] ?? '') === 'done')->count();
      $remaining = $total - $done;
      $firstTodo = collect($g['items'])->first(fn ($it) => ($it['card']['variant'] ?? '') !== 'done');
    @endphp
    <div class="og-card">
      <div class="og-head">
        <span class="og-head-ic og-ic--{{ $g['accent'] }}" aria-hidden="true"><i class="bi {{ $g['icon'] }}"></i></span>
        <h2 class="og-title">{{ $g['title'] }}</h2>
        @if($g['optional'])
          <span class="og-badge og-badge--opt">任意</span>
        @elseif($remaining === 0)
          <span class="og-badge og-badge--done">設定済み</span>
        @else
          <span class="og-badge og-badge--need">{{ $total }}つの設定が必要です</span>
        @endif
      </div>

      @if(! $g['optional'] && $total >= 2)
        <p class="og-order-note"><i class="bi bi-info-circle" aria-hidden="true"></i> 番号の順（①→②）に設定してください。</p>
      @endif

      @foreach($g['items'] as $i => $it)
        @php $isDone = ($it['card']['variant'] ?? '') === 'done'; @endphp
        <div class="og-item">
          <span class="og-num {{ $isDone ? 'is-done' : '' }}">{{ $i + 1 }}</span>
          <i class="bi {{ $isDone ? 'bi-check-circle-fill og-sic is-done' : 'bi-exclamation-circle og-sic is-todo' }}" aria-hidden="true"></i>
          <div class="og-item-main">
            <div class="og-item-name">{{ $it['name'] }}</div>
            <div class="og-item-desc">{{ $it['desc'] }}</div>
          </div>
          <span class="og-item-status {{ $isDone ? 'is-done' : 'is-todo' }}">{{ $it['card']['label'] }}</span>
          <a href="{{ $it['route'] }}" class="btn btn-outline-secondary">{{ $isDone ? '設定を確認' : '設定する' }}</a>
        </div>
      @endforeach

      @if(! $g['optional'])
        @php
          $footColor = $g['accent'] === 'green' ? 'green' : ($g['accent'] === 'amber' ? 'amber' : 'blue');
        @endphp
        <div class="og-foot og-foot--{{ $footColor }}">
          <i class="bi bi-info-circle" aria-hidden="true"></i>
          @if($remaining === 0)
            <span>設定完了。{{ $g['goal'] }}を利用できます。</span>
          @else
            <span>あと{{ $remaining }}つの設定で{{ $g['goal'] }}を利用できます</span>
            <a href="{{ $firstTodo['route'] }}" class="og-foot-btn og-foot-btn--{{ $footColor }}">{{ $done > 0 ? '設定を続ける' : '設定する' }}</a>
          @endif
        </div>
      @endif
    </div>
  @endforeach
</div>
@endsection