@php
  $afterSetup = old('after_setup_channel', $setupChannel ?? null);
  if (! in_array($afterSetup, ['mail', 'line'], true)) {
      $afterSetup = null;
  }
  $inSetupFlow = $afterSetup !== null;
@endphp
@extends($inSetupFlow ? 'layouts.setup' : 'layouts.app')
@php
  $listActiveQuery = array_filter(['setup_channel' => $afterSetup]);
  $listArchivedQuery = array_filter(['archived' => 1, 'setup_channel' => $afterSetup]);
@endphp
@section('title')
@if($afterSetup === 'mail')
メール設定
@elseif($afterSetup === 'line')
LINE設定
@else
メール・LINE配信 - 送信用アカウントを追加
@endif
@endsection
@if(! $inSetupFlow)
@section('delivery-primary-tabs')
@include('account.partials.mail-delivery-primary-tabs', ['mailDeliveryTab' => 'accounts'])
@endsection
@endif
@section('page-title')
@if($afterSetup === 'mail')
メール設定
@elseif($afterSetup === 'line')
LINE設定
@else
送信用アカウントを追加
@endif
@endsection
@if(! $inSetupFlow)
@section('page-subtitle')
@if($afterSetup === 'mail')
初期設定の「メール設定」向けです。ここでは<strong>メールのみ</strong>の送信用アカウントを作成します。メールと LINE の併用（メール+LINE）が必要なときは、送信用アカウント一覧の通常の「追加」から作成してください。
@elseif($afterSetup === 'line')
初期設定の「LINE設定」向けです。作成後はシナリオ一覧の「LINEアカウント」で Messaging API（Channel ID / secret 等）を入力してください。
@else
送信用アカウントを新しく作成します。作成後は一覧の「各種設定」でメール（SMTP）、シナリオ一覧の「LINEアカウント設定」で LINE を入力してください。タブにマウスを乗せると「送信用アカウント」と「送信ドメイン認証」の違いが出ます。
@endif
@endsection
@endif
@push('styles')
<style>
.delivery-page-tabs {
  display: flex;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid #d9dfeb;
  margin-bottom: 14px;
}
.delivery-page-tabs .tab-item {
  text-decoration: none;
  color: #5f6d84;
  font-size: 0.92rem;
  padding: 9px 2px;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.delivery-page-tabs .tab-item.active {
  color: #2b4f9b;
  border-bottom-color: #4f77cf;
  font-weight: 600;
}
.delivery-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
</style>
@endpush
@if($inSetupFlow)
@section('setup_body')
@else
@section('content')
@endif
@if($inSetupFlow)
<div class="setup-toolbar mb-3">
  <a href="{{ route('account.index', $listActiveQuery) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>一覧へ戻る</a>
</div>
@else
<div class="delivery-page-tabs">
  <a href="{{ route('account.index', $listActiveQuery) }}" class="tab-item"><i class="bi bi-list-ul" aria-hidden="true"></i>送信用アカウント一覧</a>
  <a href="{{ route('account.index', $listArchivedQuery) }}" class="tab-item"><i class="bi bi-archive" aria-hidden="true"></i>アーカイブ済</a>
  <span class="tab-item active"><i class="bi bi-plus-lg" aria-hidden="true"></i>送信用アカウントを追加</span>
</div>
<div class="delivery-toolbar">
  <a href="{{ route('account.index', $listActiveQuery) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>送信用アカウント一覧</a>
</div>
@endif
<div class="row justify-content-center">
  <div class="col-md-7">
    @if($afterSetup === null)
    <div class="alert alert-light border small mb-3" role="note">
      <strong>この画面でやること（送信用アカウントの「箱」を作る）</strong>
      <ol class="mb-0 ps-3 mt-2">
        <li><strong>アカウント名</strong>と<strong>配信タイプ</strong>を決めて作成（ここでは LINE公式の Channel ID はまだ入れません）</li>
        <li><strong>メールのみ</strong> … 一覧の「<strong>各種設定</strong>」で送信者・送信元を入力（外部SMTPは<strong>利用する</strong>と選んだときだけ）</li>
        <li><strong>LINEのみ / メール+LINE</strong> … 作成後は<strong>シナリオ一覧</strong>へ進み、左の「<strong>LINEアカウント</strong>」で <strong>LINE公式アカウントの追加（連携）</strong>を行います</li>
      </ol>
    </div>
    @elseif($afterSetup === 'mail')
    <div class="alert alert-light border small mb-3" role="note">
      アカウント名・送信者名・送信元メールを入力して追加します。
    </div>
    @endif
    <div class="{{ $inSetupFlow ? 'setup-form-card' : 'card' }}">
      <div class="card-header">
        @if($afterSetup === 'mail')
        メール設定を追加
        @elseif($afterSetup === 'line')
        LINE設定を追加
        @else
        基本情報
        @endif
      </div>
      <div class="card-body">
        <form method="POST" action="{{ route('account.store') }}" id="account-create-form">
          @csrf
          @if($afterSetup !== null)
          <input type="hidden" name="after_setup_channel" value="{{ $afterSetup }}">
          @endif
          <div class="mb-3">
            <label class="form-label fw-semibold">アカウント名 <span class="text-danger">*</span></label>
            @if($afterSetup === 'line')
            <div class="form-text mt-0 mb-2">アカウント名は<strong>自由入力</strong>で、<strong>あとで見て分かりやすい名前</strong>にしてください。<br>（例）〇〇セールス用 / △△ローンチ用 など</div>
            @endif
            <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
          </div>
          @if($afterSetup === 'mail')
          <input type="hidden" name="type" value="email">
          <div id="account-create-mail-fields">
            <div class="mb-3">
              <label class="form-label fw-semibold">送信者名 <span class="text-danger">*</span></label>
              <input type="text" name="from_name" id="account-create-from-name" class="form-control" value="{{ old('from_name') }}" placeholder="例: サポート事務局" required>
            </div>
            <div class="mb-4">
              <label class="form-label fw-semibold">送信元メールアドレス <span class="text-danger">*</span></label>
              <div class="mt-2 mb-2">
                <x-help-section title="送信元メールアドレスの決め方（例つき・読んでおくと安心）" variant="caution">
                  <ul class="ps-3 mb-0 lh-base">
                    <li><strong>【ルール1】「@ の右側」（ドメイン）は、①「メール送信用ドメイン」で認証したドメインに合わせてください。</strong>ここが一致して初めて、なりすまし対策の認証（SPF／DKIM／DMARC）が効いて、メールがちゃんと届きます。</li>
                    <li><strong>【ルール2】「@ の前」は自由に決められます。</strong>例：<code>info</code> / <code>support</code> / <code>mail</code> / <code>news</code> など、好きな名前でOKです。</li>
                    <li><strong>例（①で <code>mydomain.com</code> を認証した場合）：</strong>
                      <ul class="ps-3 mb-0">
                        <li>✅ <code>info@mydomain.com</code> / <code>support@mydomain.com</code>（@ の前は自由）</li>
                        <li>✅ <code>info@news.mydomain.com</code>（サブドメインもOK）</li>
                        <li>❌ <code>info@gmail.com</code> や <code>info@別のドメイン.com</code>（認証が効かず、届きにくい）</li>
                      </ul>
                    </li>
                  </ul>
                </x-help-section>
              </div>
              <input type="email" name="from_email" id="account-create-from-email" class="form-control" value="{{ old('from_email') }}" placeholder="info@example.com" required>
              <div class="form-text">送信元は <strong>①「メール送信用ドメイン」で認証したドメイン</strong> のメールにしてください（<strong>@ の前は自由に決められます</strong>）。</div>
              <div class="mt-2">
                <x-help-section title="Gmail・Yahooなどのフリーメールは使える？（読んでおくと安心）" variant="caution">
                  <ul class="ps-3 mb-0 lh-base">
                    <li><strong>入力するだけなら、フリーメールでもできます。</strong>ただし、そのまま使うのは<strong>おすすめしません</strong>。</li>
                    <li><strong>理由：</strong>Gmailなどのフリーメールを送信元にすると、受け取る相手のメールソフトが「なりすましかも？」と判断し、<strong>迷惑メールに入ったり、届かなかったり</strong>します。</li>
                    <li>メールを「ちゃんとした送信」と認めてもらう設定（<strong>送信ドメイン認証</strong>）は、<strong>自分で管理できるドメインでしか</strong>できません。Gmail等は自分で管理できないため、この設定ができません。</li>
                    <li><strong>おすすめ：</strong>会社やサービスの<strong>独自ドメイン</strong>（例：<code>info@あなたの会社.com</code>）を使い、「送信ドメイン認証」を設定してください。<strong>いちばん確実に届きます。</strong></li>
                    <li>どうしてもフリーメールで送りたい場合は、あとで「各種設定」で<strong>そのメールのSMTP（送信サーバー）</strong>を設定すれば、そのメール会社の経由で送れます（上級者向け）。</li>
                  </ul>
                </x-help-section>
              </div>
            </div>
          </div>
          @elseif($afterSetup === 'line')
          <input type="hidden" name="type" value="line">
          @else
          <div class="mb-3">
            <label class="form-label fw-semibold">配信タイプ <span class="text-danger">*</span></label>
            <select name="type" id="account-create-type" class="form-select" required>
              <option value="email" @selected(old('type', 'email') === 'email')>メールのみ</option>
              <option value="line" @selected(old('type') === 'line')>LINEのみ</option>
              <option value="both" @selected(old('type') === 'both')>メール + LINE</option>
            </select>
          </div>
          <div id="account-create-mail-fields">
            <div class="mb-3">
              <label class="form-label fw-semibold">送信者名 <span class="text-danger mail-req d-none">*</span></label>
              <input type="text" name="from_name" id="account-create-from-name" class="form-control" value="{{ old('from_name') }}" placeholder="例: サポート事務局">
              <div class="form-text">「メールのみ」「メール+LINE」のとき必須です。</div>
            </div>
            <div class="mb-4">
              <label class="form-label fw-semibold">送信元メールアドレス <span class="text-danger mail-req d-none">*</span></label>
              <div class="mt-2 mb-2">
                <x-help-section title="送信元メールアドレスの決め方（例つき・読んでおくと安心）" variant="caution">
                  <ul class="ps-3 mb-0 lh-base">
                    <li><strong>【ルール1】「@ の右側」（ドメイン）は、①「メール送信用ドメイン」で認証したドメインに合わせてください。</strong>ここが一致して初めて、なりすまし対策の認証（SPF／DKIM／DMARC）が効いて、メールがちゃんと届きます。</li>
                    <li><strong>【ルール2】「@ の前」は自由に決められます。</strong>例：<code>info</code> / <code>support</code> / <code>mail</code> / <code>news</code> など、好きな名前でOKです。</li>
                    <li><strong>例（①で <code>mydomain.com</code> を認証した場合）：</strong>
                      <ul class="ps-3 mb-0">
                        <li>✅ <code>info@mydomain.com</code> / <code>support@mydomain.com</code>（@ の前は自由）</li>
                        <li>✅ <code>info@news.mydomain.com</code>（サブドメインもOK）</li>
                        <li>❌ <code>info@gmail.com</code> や <code>info@別のドメイン.com</code>（認証が効かず、届きにくい）</li>
                      </ul>
                    </li>
                  </ul>
                </x-help-section>
              </div>
              <input type="email" name="from_email" id="account-create-from-email" class="form-control" value="{{ old('from_email') }}" placeholder="info@example.com">
              <div class="form-text">送信元は <strong>①「メール送信用ドメイン」で認証したドメイン</strong> のメールにしてください（<strong>@ の前は自由に決められます</strong>）。</div>
              <div class="mt-2">
                <x-help-section title="Gmail・Yahooなどのフリーメールは使える？（読んでおくと安心）" variant="caution">
                  <ul class="ps-3 mb-0 lh-base">
                    <li><strong>入力するだけなら、フリーメールでもできます。</strong>ただし、そのまま使うのは<strong>おすすめしません</strong>。</li>
                    <li><strong>理由：</strong>Gmailなどのフリーメールを送信元にすると、受け取る相手のメールソフトが「なりすましかも？」と判断し、<strong>迷惑メールに入ったり、届かなかったり</strong>します。</li>
                    <li>メールを「ちゃんとした送信」と認めてもらう設定（<strong>送信ドメイン認証</strong>）は、<strong>自分で管理できるドメインでしか</strong>できません。Gmail等は自分で管理できないため、この設定ができません。</li>
                    <li><strong>おすすめ：</strong>会社やサービスの<strong>独自ドメイン</strong>（例：<code>info@あなたの会社.com</code>）を使い、「送信ドメイン認証」を設定してください。<strong>いちばん確実に届きます。</strong></li>
                    <li>どうしてもフリーメールで送りたい場合は、あとで「各種設定」で<strong>そのメールのSMTP（送信サーバー）</strong>を設定すれば、そのメール会社の経由で送れます（上級者向け）。</li>
                  </ul>
                </x-help-section>
              </div>
            </div>
          </div>
          @endif
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">作成する</button>
            <a href="{{ route('account.index', $listActiveQuery) }}" class="btn btn-outline-secondary">キャンセル</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@if($afterSetup === null)
@push('scripts')
<script>
(function () {
  const typeEl = document.getElementById('account-create-type');
  const mailWrap = document.getElementById('account-create-mail-fields');
  const nameIn = document.getElementById('account-create-from-name');
  const emailIn = document.getElementById('account-create-from-email');
  const reqs = document.querySelectorAll('.mail-req');
  function sync() {
    const t = typeEl ? typeEl.value : 'email';
    const needMail = t === 'email' || t === 'both';
    if (mailWrap) mailWrap.classList.toggle('opacity-50', !needMail);
    if (nameIn) { nameIn.required = needMail; nameIn.disabled = !needMail; }
    if (emailIn) { emailIn.required = needMail; emailIn.disabled = !needMail; }
    reqs.forEach((el) => el.classList.toggle('d-none', !needMail));
  }
  typeEl?.addEventListener('change', sync);
  sync();
})();
</script>
@endpush
@endif
@endsection