@extends('layouts.app')
@section('title', $variant->name . ' - バリアント編集')
@push('styles')
<style>
body { overflow: hidden; }
.sidebar { width: 220px; min-width: 220px; background: #1e1e2e; color: #fff; height: 100vh; overflow-y: auto; }
.sidebar .block-item { padding: 10px 16px; cursor: pointer; border-radius: 8px; margin: 4px 8px; display: flex; align-items: center; gap: 10px; font-size: 14px; transition: background .2s; }
.sidebar .block-item:hover { background: rgba(255,255,255,.1); }
.editor-canvas { flex: 1; background: #f0f0f5; overflow-y: auto; padding: 20px; }
.canvas-wrapper { max-width: 800px; margin: 0 auto; background: #fff; min-height: 600px; border-radius: 12px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.drop-zone { border: 2px dashed #ccc; border-radius: 8px; padding: 30px; text-align: center; color: #aaa; margin: 10px 0; transition: all .2s; }
.drop-zone.drag-over { border-color: #6c63ff; background: rgba(108,99,255,.05); color: #6c63ff; }
.page-block { position: relative; border: 2px solid transparent; border-radius: 8px; padding: 12px; margin: 8px 0; cursor: pointer; transition: border-color .2s; }
.page-block:hover { border-color: #6c63ff; }
.page-block.selected { border-color: #6c63ff; background: rgba(108,99,255,.03); }
.block-toolbar { position: absolute; top: -14px; right: 8px; display: none; gap: 4px; }
.page-block:hover .block-toolbar, .page-block.selected .block-toolbar { display: flex; }
.block-toolbar button { padding: 2px 8px; font-size: 11px; border-radius: 4px; border: none; cursor: pointer; }
.topbar { background: #1e1e2e; color: #fff; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; }
.properties-panel { width: 280px; min-width: 280px; background: #fff; border-left: 1px solid #e0e0e0; overflow-y: auto; padding: 16px; }
</style>
@endpush
@section('full-page', true)
@section('content')
<div class="topbar">
  <div class="d-flex align-items-center gap-3">
    <a href="{{ route('funnel.page.abtest', [$funnel, $page]) }}" class="text-white text-decoration-none"><i class="bi bi-arrow-left me-1"></i>ABテスト設定に戻る</a>
    <span class="text-white-50">/</span>
    <span>{{ $variant->name }}</span>
  </div>
  <div class="d-flex gap-2">
    <button class="btn btn-sm btn-outline-light" onclick="togglePreview()"><i class="bi bi-eye me-1"></i>プレビュー</button>
    <button class="btn btn-sm btn-success" onclick="saveVariant()"><i class="bi bi-check-lg me-1"></i>保存</button>
  </div>
</div>
<div class="d-flex" style="height:calc(100vh - 52px);">
  {{-- ブロックサイドバー --}}
  <div class="sidebar">
    <div class="p-3 text-white-50 small fw-semibold">レイアウト</div>
    <div class="block-item" draggable="true" data-type="section"><i class="bi bi-layout-text-window" style="color:#a78bfa;"></i>セクション</div>
    <div class="block-item" draggable="true" data-type="two-column"><i class="bi bi-layout-split" style="color:#a78bfa;"></i>2カラム</div>
    <div class="p-3 text-white-50 small fw-semibold mt-2">コンテンツ</div>
    <div class="block-item" draggable="true" data-type="heading"><i class="bi bi-type-h1" style="color:#60a5fa;"></i>見出し</div>
    <div class="block-item" draggable="true" data-type="text"><i class="bi bi-paragraph" style="color:#60a5fa;"></i>テキスト</div>
    <div class="block-item" draggable="true" data-type="image"><i class="bi bi-image" style="color:#34d399;"></i>画像</div>
    <div class="block-item" draggable="true" data-type="button"><i class="bi bi-cursor" style="color:#f59e0b;"></i>ボタン</div>
    <div class="block-item" draggable="true" data-type="list"><i class="bi bi-list-ul" style="color:#60a5fa;"></i>箇条書き</div>
    <div class="block-item" draggable="true" data-type="video"><i class="bi bi-play-circle" style="color:#f87171;"></i>動画</div>
    <div class="block-item" draggable="true" data-type="form"><i class="bi bi-ui-checks" style="color:#a78bfa;"></i>フォーム</div>
    <div class="block-item" draggable="true" data-type="countdown"><i class="bi bi-clock" style="color:#f59e0b;"></i>カウントダウン</div>
    <div class="block-item" draggable="true" data-type="divider"><i class="bi bi-dash-lg" style="color:#9ca3af;"></i>区切り線</div>
    <div class="block-item" draggable="true" data-type="spacer"><i class="bi bi-arrows-expand" style="color:#9ca3af;"></i>余白</div>
    <div class="block-item" draggable="true" data-type="html"><i class="bi bi-code-slash" style="color:#34d399;"></i>カスタムHTML</div>
  </div>
  {{-- キャンバス --}}
  <div class="editor-canvas" id="editorCanvas">
    <div class="canvas-wrapper" id="canvasWrapper">
      <div class="drop-zone" id="mainDropZone">ここにブロックをドラッグ＆ドロップ</div>
    </div>
  </div>
  {{-- プロパティパネル --}}
  <div class="properties-panel" id="propertiesPanel">
    <p class="text-muted text-center mt-5">ブロックを選択してください</p>
  </div>
</div>
<input type="hidden" id="variantContent" value="{{ htmlspecialchars($variant->page_content ?? '{}') }}">
<script>
// ページエディタJS（バリアント用）
const variantId = {{ $variant->id }};
const saveUrl = '{{ route("funnel.page.abtest.variant.update", [$funnel, $page, $variant]) }}';
const csrfToken = '{{ csrf_token() }}';
let blocks = [];

function saveVariant() {
  const content = JSON.stringify({ sections: blocks });
  fetch(saveUrl, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
    body: JSON.stringify({ page_content: content })
  }).then(r => r.json()).then(d => {
    if (d.success) { showToast('保存しました', 'success'); }
  });
}

function showToast(msg, type) {
  const t = document.createElement('div');
  t.className = `alert alert-${type} position-fixed top-0 end-0 m-3`;
  t.style.zIndex = 9999;
  t.textContent = msg;
  document.body.appendChild(t);
  setTimeout(() => t.remove(), 2000);
}

function togglePreview() {
  window.open('{{ route("funnel.page.abtest", [$funnel, $page]) }}', '_blank');
}

// 初期化
try {
  const saved = JSON.parse(document.getElementById('variantContent').value);
  if (saved.sections) blocks = saved.sections;
} catch(e) {}
</script>
@endsection