@php
  $setupChannel = $setupChannel ?? null;
  if (! in_array($setupChannel, ['mail', 'line'], true)) {
      $setupChannel = null;
  }
  $inSetupFlow = $setupChannel !== null;
@endphp
@extends($inSetupFlow ? 'layouts.setup' : 'layouts.app')
@php
  $listActiveQuery = array_filter(['setup_channel' => $setupChannel]);
  $listArchivedQuery = array_filter(['archived' => ($account->is_archived ?? false) ? 1 : 0, 'setup_channel' => $setupChannel]);
  $accountType = old('type', $account->type);
  $hideDeliveryType = $setupChannel !== null;
  $showMailFields = in_array($accountType, ['email', 'both'], true);
  $lineOnlyEdit = ! $showMailFields;
  $showLineFields = in_array($account->type, ['line', 'both'], true);
  $lineStepwiseSave = $showLineFields;
@endphp
@section('title')
@if($setupChannel === 'mail')
メール設定
@elseif($setupChannel === 'line')
LINE設定
@else
メール・LINE配信 - 各種設定 - {{ $account->name }}
@endif
@endsection
@if(! $inSetupFlow)
@section('delivery-primary-tabs')
@include('account.partials.mail-delivery-primary-tabs', ['mailDeliveryTab' => 'accounts'])
@endsection
@endif
@section('page-title')
@if($setupChannel === 'mail')
メール設定
@elseif($setupChannel === 'line')
LINE設定
@else
各種設定 — {{ $account->name }}
@endif
@endsection
@if(! $inSetupFlow)
@section('page-subtitle')
@if($setupChannel === 'mail')
「{{ $account->name }}」の<strong>送信者名・送信元メール・SMTP</strong>を編集しています。
@elseif($setupChannel === 'line')
@if($lineOnlyEdit)
アカウント名と LINE公式アカウントの連携（Messaging API・LINEログイン）をこの画面で設定します。メールの送信者名・送信元は LINE専用では使いません。
@else
「{{ $account->name }}」はメール併用です。送信者・SMTP と下の LINE連携の両方を設定してください。
@endif
@else
「{{ $account->name }}」の<strong>メール送信</strong>（送信者・SMTP）を編集しています。LINE の Messaging API などはシナリオ一覧の「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-sliders" aria-hidden="true"></i>各種設定</span>
</div>
<div class="delivery-toolbar">
  <a href="{{ route('account.index', $listArchivedQuery) }}" 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-{{ ($setupChannel === 'line' && $showLineFields) ? '10' : '7' }}">
    <div class="card mb-4">
      <div class="card-header">
        @if($inSetupFlow && $setupChannel === 'mail')
        送信者・SMTP（{{ $account->name }}）
        @elseif($setupChannel === 'line' && ! in_array($account->type, ['email', 'both'], true))
        基本情報（{{ $account->name }}）
        @elseif($inSetupFlow && $setupChannel === 'line')
        基本情報（{{ $account->name }}）
        @else
        メール送信・基本情報
        @endif
      </div>
      <div class="card-body">
        @if($lineOnlyEdit)
        <p class="text-muted small mb-3">この「基本情報」では、この送信用アカウントの<strong>表示名（アカウント名）の変更</strong>と、<strong>アーカイブ（棚上げ）の切り替え</strong>だけを行います。<br>LINEとの連携設定に関しては、少し下の「LINE連携」で実施します。</p>
        @endif
        <form method="POST" action="{{ route('account.update', $account) }}">
          @csrf @method('PUT')
          @if($setupChannel !== null)
          <input type="hidden" name="setup_channel" value="{{ $setupChannel }}">
          @endif
          <div class="mb-3">
            <label class="form-label fw-semibold">アカウント名</label>
            <input type="text" name="name" class="form-control" value="{{ old('name', $account->name) }}" required>
          </div>
          @if($hideDeliveryType)
          <input type="hidden" name="type" id="account-edit-type" value="{{ $accountType }}">
          @else
          <div class="mb-3">
            <label class="form-label fw-semibold">配信タイプ</label>
            <select name="type" id="account-edit-type" class="form-select">
              <option value="email" {{ $accountType === 'email' ? 'selected' : '' }}>メールのみ</option>
              <option value="line" {{ $accountType === 'line' ? 'selected' : '' }}>LINEのみ</option>
              <option value="both" {{ $accountType === 'both' ? 'selected' : '' }}>メール + LINE</option>
            </select>
          </div>
          @endif
          @if($showMailFields)
          <div class="mb-3">
            <label class="form-label fw-semibold">送信者名</label>
            <input type="text" name="from_name" class="form-control" value="{{ old('from_name', $account->from_name) }}" placeholder="例: サポート事務局">
            @if($hideDeliveryType && $setupChannel === 'mail')
            <div class="form-text">入力必須です。</div>
            @else
            <div class="form-text">種類が「メールのみ / メール+LINE」の場合は入力必須です。</div>
            @endif
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">送信元メールアドレス</label>
            <input type="email" name="from_email" class="form-control" value="{{ old('from_email', $account->from_email) }}" placeholder="info@example.com">
            <div class="form-text">送信元は独自ドメインのメールアドレスを推奨します。</div>
          </div>
          @php
            $useExtVal = old('use_external_smtp');
            if ($useExtVal === null) {
              $useExtSel = ($account->use_external_smtp ?? false) ? '1' : '0';
            } else {
              $useExtSel = ((string) $useExtVal === '1' || $useExtVal === true || $useExtVal === 1) ? '1' : '0';
            }
            $encSel = old('smtp_encryption', $account->smtp_encryption ?? 'tls');
          @endphp
          <div id="edit-mail-smtp-block">
            <hr>
            <h6 class="fw-semibold mb-2">外部SMTP（任意）</h6>
            <div class="alert alert-light border small mb-3" role="note">
              複雑な設定になります。<strong>このまま（「利用しない」）でも、送信者名・送信元メールが入っていれば通常どおりメールを送れます。</strong> Gmail や自社の SMTP サーバーなど、別経路で送りたい場合だけ「利用する」を選んでください。
            </div>
            <p class="small text-muted mb-3">
              「利用しない」のときは monaka の既定の送信経路を使います。「利用する」を選んだときだけ、下の SMTP 接続情報の入力が必要です。
            </p>
            <div class="mb-3">
              <label class="form-label fw-semibold">外部SMTPの利用</label>
              <select name="use_external_smtp" id="use_external_smtp" class="form-select @error('use_external_smtp') is-invalid @enderror" aria-describedby="use-ext-help">
                <option value="0" @selected($useExtSel === '0')>利用しない（サーバー既定のメール経路）</option>
                <option value="1" @selected($useExtSel === '1')>利用する（独自のSMTPサーバー）</option>
              </select>
              @error('use_external_smtp')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
              <div id="use-ext-help" class="form-text">「利用する」を選んだ場合は SMTP ホスト・ポートが必須です。</div>
            </div>
            <div id="smtp-fields-panel" class="{{ $useExtSel === '1' ? '' : 'd-none' }}">
              <div class="row mb-3">
                <div class="col-8"><label class="form-label">SMTPホスト <span class="text-danger smtp-req-label {{ $useExtSel === '1' ? '' : 'd-none' }}">*</span></label><input type="text" name="smtp_host" id="smtp_host_input" class="form-control @error('smtp_host') is-invalid @enderror" value="{{ old('smtp_host', $account->smtp_host) }}" autocomplete="off">@error('smtp_host')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror</div>
                <div class="col-4"><label class="form-label">ポート <span class="text-danger smtp-req-label {{ $useExtSel === '1' ? '' : 'd-none' }}">*</span></label><input type="number" name="smtp_port" id="smtp_port_input" class="form-control @error('smtp_port') is-invalid @enderror" value="{{ old('smtp_port', $account->smtp_port ?? 587) }}">@error('smtp_port')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror</div>
              </div>
              <div class="row mb-3">
                <div class="col-6"><label class="form-label">SMTPユーザー名</label><input type="text" name="smtp_user" class="form-control" value="{{ old('smtp_user', $account->smtp_user) }}" autocomplete="username"></div>
                <div class="col-6"><label class="form-label">SMTPパスワード</label><input type="password" name="smtp_pass" class="form-control" placeholder="変更しない場合は空のまま" autocomplete="new-password"></div>
              </div>
              <div class="mb-4">
                <label class="form-label">暗号化</label>
                <select name="smtp_encryption" class="form-select">
                  <option value="tls" @selected($encSel === 'tls')>TLS</option>
                  <option value="ssl" @selected($encSel === 'ssl')>SSL</option>
                  <option value="" @selected($encSel === '' || $encSel === null)>なし</option>
                </select>
              </div>
            </div>
          </div>
          @endif
          <hr>
          <div class="form-check mb-0">
            <input type="checkbox" class="form-check-input" name="is_archived" id="is_archived" value="1" {{ (bool) old('is_archived', $account->is_archived ?? false) ? 'checked' : '' }}>
            <label class="form-check-label" for="is_archived">アーカイブ済みにする</label>
          </div>
          @include('partials._archive_explanation')
          <div class="d-flex flex-wrap gap-2 mt-4">
            <button type="submit" class="btn btn-primary">{{ $lineStepwiseSave && ! $showMailFields ? '基本情報を保存' : '更新する' }}</button>
            <a href="{{ route('account.index', $inSetupFlow ? $listActiveQuery : $listArchivedQuery) }}" class="btn btn-outline-secondary">{{ $inSetupFlow ? '一覧へ戻る' : '戻る' }}</a>
          </div>
        </form>
      </div>
    </div>

    @if($showLineFields)
    <div class="card mb-4">
      <div class="card-header">LINE連携<span class="text-muted fw-normal small ms-2">ステップ1→2→3の順に設定し、各ステップの保存ボタンでその都度保存します</span></div>
      <div class="card-body">
        @include('account.partials.line-account-edit-fields', [
          'account' => $account,
          'lineWebhookUrl' => $lineWebhookUrl ?? null,
          'setupChannel' => $setupChannel,
          'stepwiseSave' => true,
        ])
      </div>
    </div>
    @endif

    @if(in_array($account->type, ['email', 'both'], true))
    <div class="card mb-4 border-secondary">
      <div class="card-header">送信テスト</div>
      <div class="card-body">
        <p class="small text-muted mb-3">
          保存済みの<strong>送信元</strong>で、入力した宛先へ 1 通だけ送ります（<strong>外部SMTPを利用する</strong>がオンのときはその経路、オフのときはサーバー既定）。まずは<strong>更新する</strong>で設定を保存してから試してください。
          DKIM／DMARC がメール本文で PASS するかは DNS と送信サービス側にもよります。
        </p>
        <form method="POST" action="{{ route('account.mail-test', $account) }}" class="row g-2 align-items-end">
          @csrf
          <div class="col-md-8">
            <label class="form-label fw-semibold">送信先メールアドレス</label>
            <input type="email" name="test_to" class="form-control @error('test_to') is-invalid @enderror" value="{{ old('test_to', auth()->user()->email) }}" required autocomplete="email" placeholder="届くメールで確認するアドレス">
            @error('test_to')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <button type="submit" class="btn btn-outline-primary w-100">テスト送信</button>
          </div>
        </form>
      </div>
    </div>
    @endif
  </div>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  var typeEl = document.getElementById('account-edit-type');
  var mailBlock = document.getElementById('edit-mail-smtp-block');
  var useExt = document.getElementById('use_external_smtp');
  var panel = document.getElementById('smtp-fields-panel');
  var hostIn = document.getElementById('smtp_host_input');
  var portIn = document.getElementById('smtp_port_input');
  var reqLabels = document.querySelectorAll('.smtp-req-label');

  function isMailType() {
    if (!typeEl) return true;
    return typeEl.value === 'email' || typeEl.value === 'both';
  }

  function syncExternalPanel() {
    var on = useExt && useExt.value === '1';
    if (panel) panel.classList.toggle('d-none', !on);
    reqLabels.forEach(function (el) { el.classList.toggle('d-none', !on); });
    if (hostIn) hostIn.required = !!on;
    if (portIn) portIn.required = !!on;
  }

  function syncMailBlock() {
    if (!mailBlock) return;
    mailBlock.classList.toggle('d-none', !isMailType());
    if (!isMailType() && useExt) useExt.value = '0';
    syncExternalPanel();
  }

  if (typeEl && typeEl.tagName === 'SELECT') {
    typeEl.addEventListener('change', syncMailBlock);
  }
  useExt?.addEventListener('change', syncExternalPanel);
  syncMailBlock();
});
</script>
@endpush