@extends('layouts.setup')
@section('title', '独自ドメイン管理')
@section('page-title', '独自ドメイン管理')

@push('styles')
<style>
.cdm-page { max-width: 920px; }
.cdm-lead { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; }
.cdm-precautions {
  background: #f8f9fa;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.65;
}
.cdm-precautions h2 { font-size: 0.8rem; font-weight: 700; margin: 0 0 10px; letter-spacing: 0.06em; }
.cdm-precautions ul { margin: 0; padding-left: 1.2rem; }
.cdm-precautions li { margin-bottom: 6px; }
.cdm-add-card { border-radius: 14px; margin-bottom: 1.5rem; }
.cdm-add-card .card-body { padding: 20px 22px; }
.cdm-label-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cdm-badge-req { font-size: 0.65rem; font-weight: 700; background: #dc3545; color: #fff; padding: 2px 8px; border-radius: 4px; }
.cdm-empty { padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); }
.cdm-btn-add { font-weight: 600; border-radius: 8px; }
.cdm-status-ok { color: #198754; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.cdm-status-wait { color: var(--text-main); font-weight: 500; }
.cdm-status-muted { color: var(--text-muted); }
.cdm-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #198754; display: inline-block; }
</style>
@endpush

@section('setup_body')
<div class="cdm-page">
  <p class="cdm-lead mb-0">
    ファネル・会員サイトなど公開 URL 用の独自ドメインを登録します。メールの送信元ドメインは <a href="{{ route('setting.mail-domain') }}">メール送信用ドメイン</a> で別に設定します。
  </p>

  <div class="cdm-precautions">
    <h2>■ 追加の際の注意事項</h2>
    <ul>
      <li><strong>ルートドメイン（例: <code>example.com</code>）は追加できません。</strong>サブドメイン（例: <code>lp.example.com</code>）のみ入力してください。</li>
      <li>追加するドメインの DNS を、ドメイン取得先（お名前.com・Cloudflare 等）で<strong>変更できること</strong>が必要です。</li>
      <li>追加後、画面に表示される <strong>CNAME</strong> を DNS に登録してください。反映は数分〜最大 24 時間程度かかることがあります。</li>
      <li>メールの到達率（SPF / DKIM / DMARC）は、配信アカウントの「送信ドメイン認証」と合わせて設定してください。</li>
    </ul>
  </div>

  <div class="setup-form-card cdm-add-card">
    <div class="card-body">
      <form method="POST" action="{{ route('setting.domain.store') }}">
        @csrf
        <div class="cdm-label-row mb-2">
          <label class="form-label fw-semibold mb-0" for="cdm-domain-input">追加するドメイン</label>
          <span class="cdm-badge-req">必須</span>
        </div>
        <div class="row g-3 align-items-end">
          <div class="col-md-8">
            <input id="cdm-domain-input" type="text" name="domain" class="form-control @error('domain') is-invalid @enderror" value="{{ old('domain') }}" placeholder="lp.example.com" autocomplete="off" required maxlength="255">
            @error('domain')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <button type="submit" class="btn btn-success cdm-btn-add w-100"><i class="bi bi-plus-lg me-1"></i>追加</button>
          </div>
        </div>
        <div class="form-text mt-2 mb-0">https:// は不要です。英小文字のホスト名を推奨します。</div>
      </form>
    </div>
  </div>

  @php
    $domainsActiveNeedRoot = $domains->filter(function ($d) {
      return $d->status === 'active'
        && empty($d->root_funnel_page_id)
        && in_array($d->target_type, ['funnel', 'site'], true);
    });
  @endphp
  @if($domainsActiveNeedRoot->isNotEmpty())
    <div class="alert alert-warning d-flex align-items-start gap-2 mb-3" role="alert">
      <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1" aria-hidden="true"></i>
      <div class="small">
        <strong class="d-block mb-1">トップページが未設定のドメインがあります</strong>
        接続状態が「利用可能」でも、<strong>トップに出すページ</strong>を選ぶまでゲスト向けファネルは表示されません。該当行の <strong>設定</strong>（歯車）から公開中のページを選び、保存してください。
        <span class="d-block mt-2 text-body-secondary">ブラウザで <code>https://（サブドメイン）/</code> を開いたとき<strong>ファイル一覧のような画面</strong>になる場合は、そのホストのウェブ設定がこの monaka の <code>public</code> を向いていないことが多いです（DNS の向き先・バーチャルホストのドキュメントルートをホスティングで確認）。正しく届いていれば、トップ未設定時は「トップに表示するページが未設定です」という案内ページが表示されます。</span>
      </div>
    </div>
  @endif

  @if($domains->isEmpty())
    <div class="card"><div class="card-body cdm-empty mb-0">独自ドメインがまだ登録されていません。上のフォームからサブドメインを追加してください。</div></div>
  @else
    <div class="card">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>ドメイン</th>
              <th class="text-nowrap">トップに出すページ</th>
              <th class="text-nowrap" style="width:7rem;">接続状態</th>
              <th class="text-end text-nowrap" style="width:11rem;">操作</th>
            </tr>
          </thead>
          <tbody>
            @foreach($domains as $d)
              @php
                $st = \App\Support\SiteCustomDomainDnsHelp::displayStatus($d);
              @endphp
              <tr>
                <td>
                  <span class="fw-semibold"><i class="bi bi-globe2 me-1 text-muted" aria-hidden="true"></i>{{ $d->domain }}</span>
                  <div class="small text-muted mt-1">DNS・トップページ・ファビコンは <strong>設定</strong> から</div>
                </td>
                <td>
                  @if($d->rootFunnelPage)
                    <span class="text-dark">{{ $d->rootFunnelPage->name }}</span>
                  @else
                    <span class="badge bg-warning text-dark">未設定</span>
                    <div class="small text-muted mt-1">公開前に指定</div>
                  @endif
                </td>
                <td>
                  @if($st['variant'] === 'ok')
                    <span class="cdm-status-ok"><span class="cdm-status-dot" aria-hidden="true"></span>{{ $st['label'] }}</span>
                  @elseif($st['variant'] === 'wait')
                    <span class="cdm-status-wait">{{ $st['label'] }}</span>
                  @else
                    <span class="cdm-status-muted">{{ $st['label'] }}</span>
                  @endif
                </td>
                <td class="text-end">
                  <div class="btn-group btn-group-sm" role="group" aria-label="ドメイン操作">
                    <a href="{{ route('setting.domain.show', $d) }}" class="btn btn-outline-primary" title="設定を開く"><i class="bi bi-gear"></i></a>
                    <a href="https://{{ $d->domain }}/" class="btn btn-outline-secondary" target="_blank" rel="noopener noreferrer" title="サイトを新しいタブで開く"><i class="bi bi-box-arrow-up-right"></i></a>
                  </div>
                  <form method="POST" action="{{ route('setting.domain.destroy', $d) }}" class="d-inline-block ms-1" onsubmit="return confirm('このドメイン「{{ $d->domain }}」を削除しますか？');">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-outline-danger" title="削除"><i class="bi bi-trash"></i></button>
                  </form>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  @endif
</div>
@endsection