@extends('layouts.app')
@section('title', 'ABテスト - ' . $page->name)
@section('page-title', 'ABテスト')
@section('page-subtitle', 'ページの見せ方を複数用意し、公開ページを開いた人に配分どおり振り分けて、どれが一番成果につながるかを比べます。')
@section('content')
@php
  $best = $variants->where('views', '>', 0)->sortByDesc(fn ($v) => $v->conversion_rate)->first();
  $totalRatio = (int) $variants->sum('traffic_ratio');
@endphp

<div class="d-flex justify-content-between align-items-center mb-3">
  <a href="{{ route('funnel.page.index', $funnel) }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>ページ一覧
  </a>
  <a href="{{ route('funnel.page.edit', [$funnel, $page]) }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-pencil-square me-1"></i>エディタに戻る
  </a>
</div>

<div class="card mb-3">
  <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-3">
    <div>
      <div class="fw-bold">{{ $page->name }}</div>
      <div class="small text-muted">
        状態:
        @if($page->ab_test_enabled)
          <span class="badge bg-success">テスト中</span>
        @else
          <span class="badge bg-secondary">停止中</span>
        @endif
        <span class="ms-2">CVポイント: <strong>{{ \App\Services\AbTestService::goalLabel($page->ab_test_goal) }}</strong></span>
      </div>
    </div>
    <div class="d-flex gap-2">
      @if($page->ab_test_enabled)
        <form method="POST" action="{{ route('funnel.page.abtest.disable', [$funnel, $page]) }}"
              onsubmit="return confirm('ABテストを停止します。公開ページは元の内容に戻ります（記録は残ります）。よろしいですか？')">
          @csrf
          <button class="btn btn-sm btn-outline-danger"><i class="bi bi-pause-circle me-1"></i>テストを停止</button>
        </form>
      @else
        <form method="POST" action="{{ route('funnel.page.abtest.enable', [$funnel, $page]) }}">
          @csrf
          <button class="btn btn-sm btn-primary"><i class="bi bi-play-circle me-1"></i>テストを開始</button>
        </form>
      @endif
      <form method="POST" action="{{ route('funnel.page.abtest.reset', [$funnel, $page]) }}"
            onsubmit="return confirm('これまでの表示数・CV数をすべて 0 に戻します。元に戻せません。よろしいですか？')">
        @csrf
        <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-counterclockwise me-1"></i>記録をリセット</button>
      </form>
    </div>
  </div>
</div>

@if(! $page->isPubliclyAccessible())
  <div class="alert alert-warning small">
    このページは<strong>公開されていません</strong>。公開しないと訪問者が来ないため、記録は増えません。
  </div>
@endif

<div class="card mb-3">
  <div class="card-header">CVポイント（何を成果として数えるか）</div>
  <div class="card-body">
    <p class="text-muted small">
      成果をどこで数えるかは運用の考え方によって変わります。フォーム登録の完了を成果とする場合もあれば、決済の完了を成果とする場合もあります。
      ここで選んだ地点に到達した訪問者を、その人が見ていたパターンの CV として数えます（1人につき1回）。
    </p>
    <form method="POST" action="{{ route('funnel.page.abtest.goal', [$funnel, $page]) }}" class="row g-2 align-items-end">
      @csrf @method('PUT')
      <div class="col-md-5">
        <label class="form-label fw-semibold">CVポイント</label>
        <select name="ab_test_goal" id="ab-goal" class="form-select">
          @foreach($goalOptions as $value => $label)
            <option value="{{ $value }}" @selected(($page->ab_test_goal ?? 'form_register') === $value)>{{ $label }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-md-5" id="ab-goal-page-wrap">
        <label class="form-label fw-semibold">到達ページ</label>
        <select name="ab_test_goal_page_id" class="form-select">
          <option value="">選択してください</option>
          @foreach($goalPages as $goalPage)
            <option value="{{ $goalPage->id }}" @selected((int) $page->ab_test_goal_page_id === (int) $goalPage->id)>{{ $goalPage->name }}</option>
          @endforeach
        </select>
        <div class="form-text">同じファネル内のページから選びます。</div>
      </div>
      <div class="col-md-2">
        <button class="btn btn-primary w-100">保存</button>
      </div>
    </form>
  </div>
</div>

@if($variants->isEmpty())
  <div class="card"><div class="card-body text-center text-muted py-5">
    <i class="bi bi-bar-chart-steps" style="font-size:2rem"></i>
    <p class="mt-3 mb-0">まだパターンがありません。上の <strong>テストを開始</strong> を押すと、<br>現在のページ内容から <strong>パターンA（オリジナル）</strong> と <strong>パターンB</strong> を作ります。</p>
  </div></div>
@else
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span>結果</span>
      <span class="small text-muted">
        合計 表示 {{ number_format($totalViews) }} / CV {{ number_format($totalConversions) }}
        （全体CVR {{ $totalViews > 0 ? round($totalConversions / $totalViews * 100, 2) : 0 }}%）
      </span>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th class="ps-4">パターン</th>
              <th class="text-end">配分</th>
              <th class="text-end">表示</th>
              <th class="text-end">CV</th>
              <th class="text-end">CVR</th>
              <th class="text-end pe-4">操作</th>
            </tr>
          </thead>
          <tbody>
            @foreach($variants as $variant)
              <tr>
                <td class="ps-4">
                  {{ $variant->name }}
                  @if($variant->is_control)<span class="badge bg-light text-dark border ms-1">オリジナル</span>@endif
                  @if($best && $best->id === $variant->id && $variant->views > 0)
                    <span class="badge bg-success ms-1">現在いちばん良い</span>
                  @endif
                </td>
                <td class="text-end">{{ (int) $variant->traffic_ratio }}%</td>
                <td class="text-end">{{ number_format((int) $variant->views) }}</td>
                <td class="text-end">{{ number_format((int) $variant->conversions) }}</td>
                <td class="text-end fw-semibold">{{ $variant->conversion_rate }}%</td>
                <td class="text-end pe-4">
                  <div class="d-inline-flex gap-1">
                    <a href="{{ route('funnel.page.abtest.variant.edit', [$funnel, $page, $variant]) }}"
                       class="btn btn-sm btn-outline-secondary" title="内容を編集"><i class="bi bi-pencil"></i></a>
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse"
                            data-bs-target="#variant-edit-{{ $variant->id }}" title="名前・配分"><i class="bi bi-sliders"></i></button>
                    @unless($variant->is_control)
                      <form method="POST" action="{{ route('funnel.page.abtest.variant.destroy', [$funnel, $page, $variant]) }}"
                            onsubmit="return confirm('このパターンを削除します。このパターンの表示・CVの記録も消えます。よろしいですか？')">
                        @csrf @method('DELETE')
                        <button class="btn btn-sm btn-outline-danger" title="削除"><i class="bi bi-trash"></i></button>
                      </form>
                    @endunless
                  </div>
                </td>
              </tr>
              <tr class="collapse" id="variant-edit-{{ $variant->id }}">
                <td colspan="6" class="bg-light">
                  <form method="POST" action="{{ route('funnel.page.abtest.variant.update', [$funnel, $page, $variant]) }}"
                        class="row g-2 align-items-end px-3 py-2">
                    @csrf @method('PUT')
                    <div class="col-md-6">
                      <label class="form-label small mb-1">パターン名</label>
                      <input type="text" name="name" class="form-control form-control-sm" value="{{ $variant->name }}" required maxlength="100">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label small mb-1">配分（%）</label>
                      <input type="number" name="traffic_ratio" class="form-control form-control-sm"
                             value="{{ (int) $variant->traffic_ratio }}" min="1" max="99" required>
                    </div>
                    <div class="col-md-2">
                      <button class="btn btn-sm btn-primary w-100">保存</button>
                    </div>
                  </form>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  @if($totalRatio !== 100)
    <div class="alert alert-info small">
      配分の合計が {{ $totalRatio }}% です。100% でなくても<strong>比率として</strong>振り分けます（例: 30 と 10 なら 3:1）。
    </div>
  @endif

  <div class="card">
    <div class="card-header">パターンを追加</div>
    <div class="card-body">
      <form method="POST" action="{{ route('funnel.page.abtest.variant.store', [$funnel, $page]) }}" class="row g-2 align-items-end">
        @csrf
        <div class="col-md-6">
          <label class="form-label fw-semibold">パターン名</label>
          <input type="text" name="name" class="form-control" placeholder="パターンC" required maxlength="100">
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">配分（%）</label>
          <input type="number" name="traffic_ratio" class="form-control" value="25" min="1" max="99" required>
        </div>
        <div class="col-md-2">
          <button class="btn btn-primary w-100"><i class="bi bi-plus-lg me-1"></i>追加</button>
        </div>
      </form>
      <div class="form-text mt-2">現在のページ内容をコピーして作ります。追加後に「内容を編集」で変えてください。</div>
    </div>
  </div>
@endif

<div class="small text-muted mt-3">
  <i class="bi bi-info-circle me-1"></i>
  同じ訪問者には毎回同じパターンを表示します（判定はブラウザのクッキー）。表示・CV はいずれも<strong>1人につき1回</strong>だけ数えます。
</div>

@push('scripts')
<script>
(function () {
  const goal = document.getElementById('ab-goal');
  const wrap = document.getElementById('ab-goal-page-wrap');
  if (!goal || !wrap) return;
  const sync = () => { wrap.style.display = goal.value === 'next_page' ? '' : 'none'; };
  goal.addEventListener('change', sync);
  sync();
})();
</script>
@endpush
@endsection