@extends('layouts.app')
@section('title', 'ページ追加')
@section('page-title', 'ページを追加')
@section('content')
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header">ページ情報</div>
      <div class="card-body">
        <form method="POST" action="{{ route('funnel.page.store', $funnel) }}" id="page-create-form">
          @csrf
          <div class="mb-4">
            <label class="form-label fw-semibold">ページ名 <span class="text-danger">*</span></label>
            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="例：LP（ランディングページ）" required>
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold">ページ種別</label>
            <select name="page_type" class="form-select @error('page_type') is-invalid @enderror">
              <option value="lp" @selected(old('page_type', 'lp') === 'lp')>LP（オプトイン）</option>
              <option value="registration" @selected(old('page_type') === 'registration')>登録ページ</option>
              <option value="line_registration" @selected(old('page_type') === 'line_registration')>LINE登録ページ</option>
              <option value="sales" @selected(old('page_type') === 'sales')>セールスページ</option>
              <option value="payment" @selected(old('page_type') === 'payment')>決済ページ</option>
              <option value="upsell" @selected(old('page_type') === 'upsell')>アップセルページ</option>
              <option value="downsell" @selected(old('page_type') === 'downsell')>ダウンサルページ</option>
              <option value="thanks" @selected(old('page_type') === 'thanks')>サンクスページ</option>
              <option value="webinar" @selected(old('page_type') === 'webinar')>ウェビナーページ</option>
              <option value="event_booking" @selected(old('page_type') === 'event_booking')>イベント予約ページ</option>
              <option value="member_invitation" @selected(old('page_type') === 'member_invitation')>会員誘導ページ</option>
            </select>
            @error('page_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <div class="form-text">読者をどの状態へ進めるページかを先に決めます。実際の登録・決済・予約処理は各ブロックや外部設定で接続します。</div>
          </div>

          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" name="import_from_url" id="import_from_url" value="1"
              {{ old('import_from_url') ? 'checked' : '' }}>
            <label class="form-check-label fw-semibold" for="import_from_url">URLから取り込む</label>
          </div>

          <div class="mb-3 border rounded p-3 bg-light" id="import_url_block">
            <label class="form-label fw-semibold" for="import_url">取り込むページのURL</label>
            <div class="input-group mb-2">
              <input type="url" name="import_url" id="import_url" class="form-control @error('import_url') is-invalid @enderror"
                value="{{ old('import_url') }}" placeholder="https://..."
                @unless(old('import_from_url')) disabled @endunless>
              <button type="button" class="btn btn-outline-primary" id="import_preview_btn" @unless(old('import_from_url')) disabled @endunless>取り込みを確認</button>
            </div>
            @error('import_url')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            <div class="form-text">未ログインで表示できる<strong>公開 URL</strong>を指定してください（プレビュー専用 URL は不可のことがあります）。</div>

            <div class="alert alert-warning small mt-2 mb-0">
              <div class="fw-semibold mb-1"><i class="bi bi-exclamation-triangle me-1"></i>他サイトのURLを取り込むときの注意</div>
              <ul class="mb-0 ps-3">
                <li><strong>自分に権利のあるページだけ</strong>取り込んでください。他人のLPの文章・画像・デザインを無断でコピーすると、著作権や利用規約の違反になることがあります。</li>
                <li><strong>フォーム・決済・予約・カレンダー</strong>などの機能は取り込めません（その位置は案内表示になるので、monaka側で設置し直してください）。</li>
                <li><strong>計測タグ（アクセス解析・広告）・SEO設定・独自の動き</strong>は引き継がれません。</li>
                <li class="text-danger fw-bold">元サイトへのリンクが残る — 「遷移先のURLを登録する」がONだと、ボタン等の遷移先が元サイトのままになります（お客様が他人のサイトへ飛びます）。OFFにするとリンクを消して安全です。</li>
                <li>画像は monaka に保存し直しますが、<strong>取得に失敗する画像</strong>（元サイトが保護している等）もあります。</li>
                <li><strong>見た目が完全に同じになるとは限りません</strong>。取り込み後は必ず内容を確認・調整してから公開してください。</li>
              </ul>
            </div>

            <div id="import_preview_result" class="d-none mt-3">
              <div class="alert mb-0" id="import_preview_alert" role="status"></div>
            </div>

            <div class="mb-3 mt-3 form-check" id="register_dest_block">
              <input type="checkbox" class="form-check-input" name="register_destination_urls" id="register_destination_urls" value="1"
                {{ old('register_destination_urls') ? 'checked' : '' }}
                @unless(old('import_from_url')) disabled @endunless>
              <label class="form-check-label" for="register_destination_urls">遷移先のURLも登録する</label>
              <div class="form-text small text-muted"><strong>OFF（推奨）</strong>：ボタンやリンクの<strong>飛び先（元サイトのURL）を消して</strong>取り込みます。お客様が元サイトへ飛んでしまうのを防げます。<br><strong>ON</strong>：元のリンク先をそのまま残します。<span class="text-muted">（どちらの場合も、画像は monaka 側に保存し直します。）</span></div>
            </div>

            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="allow_html_fallback" id="allow_html_fallback" value="1"
                {{ old('allow_html_fallback') ? 'checked' : '' }}
                @unless(old('import_from_url')) disabled @endunless>
              <label class="form-check-label" for="allow_html_fallback">ブロック変換に失敗しても HTML のみで作成する</label>
              <div class="form-text small text-muted">通常はオフのままにしてください。ON にすると単一の HTML ブロックに落ちるため、レイアウト編集は限定的です。</div>
            </div>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">作成する</button>
            <a href="{{ route('funnel.page.index', $funnel) }}" class="btn btn-outline-secondary">キャンセル</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@push('scripts')
<script>
(function () {
  const chk = document.getElementById('import_from_url');
  const urlInput = document.getElementById('import_url');
  const regChk = document.getElementById('register_destination_urls');
  const allowHtml = document.getElementById('allow_html_fallback');
  const previewBtn = document.getElementById('import_preview_btn');
  const previewBox = document.getElementById('import_preview_result');
  const previewAlert = document.getElementById('import_preview_alert');
  const previewUrl = @json(route('funnel.page.import-preview', $funnel));
  const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

  function sync() {
    const on = chk && chk.checked;
    [urlInput, regChk, allowHtml, previewBtn].forEach(el => {
      if (!el) return;
      el.disabled = !on;
      if (!on && el === urlInput) el.value = '';
    });
    if (!on && regChk) regChk.checked = false;
    if (!on && allowHtml) allowHtml.checked = false;
    if (!on && previewBox) previewBox.classList.add('d-none');
  }

  function showPreview(data) {
    if (!previewBox || !previewAlert) return;
    previewBox.classList.remove('d-none');
    const ok = !!data.ok;
    previewAlert.className = 'alert mb-0 ' + (ok ? 'alert-success' : 'alert-warning');
    let html = '<strong>' + (data.parse_mode_label || '') + '</strong> — ' + (data.message || '');
    if (ok) {
      html += '<ul class="small mb-0 mt-2 ps-3">';
      html += '<li>検出形式: ' + (data.detected_format || '—') + '</li>';
      html += '<li>セクション: ' + (data.section_count ?? 0) + ' / ブロック: ' + (data.element_count ?? 0) + '</li>';
      if (data.unsupported_types && Object.keys(data.unsupported_types).length) {
        html += '<li>未対応ブロック: ' + Object.keys(data.unsupported_types).join(', ') + '（プレースホルダに変換）</li>';
      }
      if (data.warnings && data.warnings.length) {
        html += '<li>' + data.warnings.join('</li><li>') + '</li>';
      }
      html += '</ul>';
    }
    previewAlert.innerHTML = html;
  }

  if (previewBtn) {
    previewBtn.addEventListener('click', async function () {
      const url = urlInput?.value?.trim();
      if (!url) {
        showPreview({ ok: false, parse_mode_label: '確認', message: 'URL を入力してください。' });
        return;
      }
      previewBtn.disabled = true;
      previewBtn.textContent = '確認中…';
      try {
        const body = new FormData();
        body.append('import_url', url);
        if (regChk?.checked) body.append('register_destination_urls', '1');
        if (allowHtml?.checked) body.append('allow_html_fallback', '1');
        const res = await fetch(previewUrl, {
          method: 'POST',
          headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
          credentials: 'same-origin',
          body,
        });
        const data = await res.json();
        showPreview(data);
      } catch (e) {
        showPreview({ ok: false, parse_mode_label: 'エラー', message: '確認リクエストに失敗しました。' });
      } finally {
        previewBtn.disabled = false;
        previewBtn.textContent = '取り込みを確認';
      }
    });
  }

  if (chk) chk.addEventListener('change', sync);
  sync();
})();
</script>
@endpush
@endsection