@extends('layouts.app')
@section('title', 'ファネル一覧')
@section('page-title', 'ファネル')
@push('styles')
<style>
.funnel-page-tabs {
  display: flex;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid #d9dfeb;
  margin-bottom: 14px;
}
.funnel-page-tabs .tab-item {
  display: inline-block;
  text-decoration: none;
  color: #5f6d84;
  font-size: 0.92rem;
  padding: 9px 2px;
  border-bottom: 2px solid transparent;
}
.funnel-page-tabs .tab-item.active {
  color: #2b4f9b;
  border-bottom-color: #4f77cf;
  font-weight: 600;
}
#groupTabs.nav-tabs {
  border-bottom: 1px solid #d9dfeb;
  margin-bottom: 16px;
}
#groupTabs .nav-link {
  color: #4b5b73;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
}
#groupTabs .nav-link.active {
  color: #274c9a;
  border-bottom-color: #4f77cf;
  background: transparent;
}
.funnel-card {
  border-radius: 8px;
  border-color: #d6ddeb;
  box-shadow: none;
}
.funnel-card .card-title {
  font-size: 1rem;
  color: #263248;
}
.funnel-card .card-footer {
  background: #fafbfd !important;
  border-top: 1px solid #edf1f7;
}
.funnel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.funnel-list-card { border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.funnel-list-head { padding: 12px 16px; font-weight: 600; border-bottom: 1px solid #e8edf6; background: #fff; }
.funnel-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #edf1f7; }
.funnel-list-row:last-child { border-bottom: 0; }
.funnel-list-name { color: #30435f; font-size: 0.98rem; }
.funnel-list-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
</style>
@endpush
@section('content')

<div class="funnel-page-tabs">
  <span class="tab-item active">ファネル一覧</span>
  <span class="tab-item">アーカイブ済</span>
</div>

{{-- 操作バー --}}
<div class="funnel-toolbar">
  <div class="d-flex gap-2 align-items-center flex-wrap">
    <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#groupModal">
      <i class="bi bi-folder-plus me-1"></i>グループ管理
    </button>
    @php $canReorderFunnels = ! request('group'); @endphp
    @if($canReorderFunnels && $funnels->isNotEmpty())
    <button type="button" class="btn btn-outline-secondary btn-sm" id="funnel-reorder-toggle"><i class="bi bi-arrows-move me-1"></i>並び替え</button>
    <div class="align-items-center gap-2 d-none" id="funnel-reorder-bar">
      <span class="small text-success d-none" id="funnel-order-saved"><i class="bi bi-check-circle-fill me-1"></i>保存しました</span>
      <button type="button" class="btn btn-sm btn-primary" id="funnel-order-save"><i class="bi bi-save me-1"></i>並び順を保存</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" id="funnel-reorder-done">終了</button>
    </div>
    <style>.funnel-reorder-ctrl{display:none;} body.funnel-reordering .funnel-reorder-ctrl{display:flex;} body.funnel-reordering .funnel-list-row{cursor:grab;} .funnel-list-row.dragging{opacity:.5;background:#eef4ff;}</style>
    @endif
  </div>
  <a href="{{ route('funnel.create') }}" class="btn btn-primary">
    <i class="bi bi-plus-lg me-1"></i>ファネルを作成
  </a>
</div>
@if(! request('group') && $funnels->isNotEmpty())
<div class="small text-muted mb-2 d-none" id="funnel-reorder-hint"><i class="bi bi-info-circle me-1"></i>各ファネルの <i class="bi bi-arrow-up"></i> <i class="bi bi-arrow-down"></i> で移動できます。<strong>ドラッグ＆ドロップでの並び替えも可能です。</strong></div>
@endif

{{-- グループタブ --}}
@if($groups->isNotEmpty())
<ul class="nav nav-tabs mb-4" id="groupTabs">
  <li class="nav-item">
    <a class="nav-link {{ !request('group') ? 'active' : '' }}" href="{{ route('funnel.index') }}">
      すべて <span class="badge bg-secondary ms-1">{{ $funnels->count() }}</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link {{ request('group') === 'none' ? 'active' : '' }}" href="{{ route('funnel.index', ['group' => 'none']) }}">
      グループなし <span class="badge bg-secondary ms-1">{{ $funnels->whereNull('group_id')->count() }}</span>
    </a>
  </li>
  @foreach($groups as $group)
  <li class="nav-item">
    <a class="nav-link {{ request('group') == $group->id ? 'active' : '' }}" href="{{ route('funnel.index', ['group' => $group->id]) }}">
      <i class="bi bi-folder me-1"></i>{{ $group->name }}
      <span class="badge bg-secondary ms-1">{{ $funnels->where('group_id', $group->id)->count() }}</span>
    </a>
  </li>
  @endforeach
</ul>
@endif

{{-- フィルタリング後のファネル一覧 --}}
@php
  $filteredFunnels = $funnels;
  if (request('group') === 'none') {
    $filteredFunnels = $funnels->whereNull('group_id');
  } elseif (request('group')) {
    $filteredFunnels = $funnels->where('group_id', request('group'));
  }
@endphp

@if($filteredFunnels->isEmpty())
<div class="card">
  <div class="card-body text-center py-5">
    <i class="bi bi-funnel" style="font-size:3rem;color:#ddd;"></i>
    <h5 class="mt-3 text-muted">ファネルがありません</h5>
    <p class="text-muted">「ファネルを作成」ボタンから最初のファネルを作成しましょう。</p>
    <a href="{{ route('funnel.create') }}" class="btn btn-primary">ファネルを作成する</a>
  </div>
</div>
@else
@php
  $groupedFunnels = $filteredFunnels->groupBy(function($funnel) {
    return $funnel->group_id ? ('g_'.$funnel->group_id) : 'none';
  });
@endphp
@foreach($groupedFunnels as $groupKey => $items)
  @php
    $first = $items->first();
    $groupLabel = $groupKey === 'none' ? '未分類' : ($first && $first->group ? $first->group->name : 'グループ');
  @endphp
  <div class="card funnel-list-card">
    <div class="funnel-list-head">{{ $groupLabel }}</div>
    @foreach($items as $funnel)
      <div class="funnel-list-row" data-funnel-id="{{ $funnel->id }}">
        <div class="d-flex align-items-center gap-2 min-w-0">
          @if($canReorderFunnels)
          <div class="funnel-reorder-ctrl flex-column flex-shrink-0">
            <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 btn-funnel-up" title="上へ"><i class="bi bi-arrow-up"></i></button>
            <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 btn-funnel-down" title="下へ"><i class="bi bi-arrow-down"></i></button>
          </div>
          @endif
          <div class="funnel-list-name">
            <div>{{ $funnel->name }}</div>
            <div class="small text-muted">会社: {{ $funnel->businessSetting?->displayName() ?: '未選択' }}</div>
          </div>
        </div>
        <div class="funnel-list-actions">
          <a href="{{ route('funnel.page.index', $funnel) }}" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-files me-1"></i>ページ一覧
          </a>
          <a href="{{ route('funnel.edit', $funnel) }}" class="btn btn-sm btn-outline-secondary" title="設定">
            <i class="bi bi-gear"></i>
          </a>
          <form method="POST" action="{{ route('funnel.destroy', $funnel) }}" onsubmit="return confirm('「{{ $funnel->name }}」を削除しますか？')" class="m-0">
            @csrf @method('DELETE')
            <button type="submit" class="btn btn-sm btn-outline-danger" title="削除">
              <i class="bi bi-trash"></i>
            </button>
          </form>
        </div>
      </div>
    @endforeach
  </div>
@endforeach
@endif

{{-- グループ管理モーダル --}}
<div class="modal fade" id="groupModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-folder me-2"></i>グループ管理</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        {{-- グループ追加フォーム --}}
        <form id="addGroupForm" class="d-flex gap-2 mb-4">
          @csrf
          <input type="text" name="name" class="form-control" placeholder="新しいグループ名" required maxlength="100">
          <button type="submit" class="btn btn-primary text-nowrap">
            <i class="bi bi-plus-lg me-1"></i>追加
          </button>
        </form>

        {{-- グループ一覧 --}}
        <div id="groupList">
          @if($groups->isEmpty())
          <p class="text-muted text-center py-3">グループがありません</p>
          @else
          <table class="table table-hover">
            <thead><tr><th>グループ名</th><th>ファネル数</th><th class="text-end">操作</th></tr></thead>
            <tbody id="groupTableBody">
              @foreach($groups as $group)
              <tr id="group-row-{{ $group->id }}">
                <td>
                  <span class="group-name-display">
                    <i class="bi bi-folder me-1 text-warning"></i>{{ $group->name }}
                  </span>
                  <input type="text" class="form-control form-control-sm group-name-input d-none"
                    value="{{ $group->name }}" data-group-id="{{ $group->id }}">
                </td>
                <td class="text-muted small align-middle">{{ $funnels->where('group_id', $group->id)->count() }}件</td>
                <td class="text-end">
                  <button class="btn btn-sm btn-outline-secondary me-1 btn-edit-group" data-group-id="{{ $group->id }}">
                    <i class="bi bi-pencil"></i>
                  </button>
                  <button class="btn btn-sm btn-outline-success me-1 btn-save-group d-none" data-group-id="{{ $group->id }}">
                    <i class="bi bi-check-lg"></i>
                  </button>
                  <button class="btn btn-sm btn-outline-danger btn-delete-group" data-group-id="{{ $group->id }}" data-group-name="{{ $group->name }}">
                    <i class="bi bi-trash"></i>
                  </button>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
          @endif
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
// グループ追加
document.getElementById('addGroupForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  fetch('{{ route("funnel.group.store") }}', {
    method: 'POST',
    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json'},
    body: formData
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      location.reload();
    }
  });
});

// グループ編集
document.querySelectorAll('.btn-edit-group').forEach(btn => {
  btn.addEventListener('click', function() {
    const id = this.dataset.groupId;
    document.querySelector(`#group-row-${id} .group-name-display`).classList.add('d-none');
    document.querySelector(`#group-row-${id} .group-name-input`).classList.remove('d-none');
    this.classList.add('d-none');
    document.querySelector(`.btn-save-group[data-group-id="${id}"]`).classList.remove('d-none');
  });
});

// グループ保存
document.querySelectorAll('.btn-save-group').forEach(btn => {
  btn.addEventListener('click', function() {
    const id = this.dataset.groupId;
    const name = document.querySelector(`#group-row-${id} .group-name-input`).value;
    fetch(`/funnel/group/${id}`, {
      method: 'PUT',
      headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      body: JSON.stringify({name: name})
    })
    .then(r => r.json())
    .then(data => {
      if (data.success) location.reload();
    });
  });
});

// グループ削除
document.querySelectorAll('.btn-delete-group').forEach(btn => {
  btn.addEventListener('click', function() {
    const id = this.dataset.groupId;
    const name = this.dataset.groupName;
    if (!confirm(`「${name}」を削除しますか？\nグループに属するファネルはグループなしになります。`)) return;
    fetch(`/funnel/group/${id}`, {
      method: 'DELETE',
      headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json'}
    })
    .then(r => r.json())
    .then(data => {
      if (data.success) location.reload();
    });
  });
});
// ファネル並び替え（グループ内で上下移動→保存）
(function () {
  var saveBtn = document.getElementById('funnel-order-save');
  if (!saveBtn) return;
  var savedMsg = document.getElementById('funnel-order-saved');
  var toggleBtn = document.getElementById('funnel-reorder-toggle');
  var reorderBar = document.getElementById('funnel-reorder-bar');
  var doneBtn = document.getElementById('funnel-reorder-done');
  var hint = document.getElementById('funnel-reorder-hint');
  function setOn(on) {
    document.body.classList.toggle('funnel-reordering', on);
    if (reorderBar) { reorderBar.classList.toggle('d-none', !on); reorderBar.classList.toggle('d-flex', on); }
    if (toggleBtn) toggleBtn.classList.toggle('d-none', on);
    if (hint) hint.classList.toggle('d-none', !on);
    document.querySelectorAll('.funnel-list-row[data-funnel-id]').forEach(function (r) { r.draggable = on; });
    if (!on && savedMsg) savedMsg.classList.add('d-none');
  }
  if (toggleBtn) toggleBtn.addEventListener('click', function () { setOn(true); });
  if (doneBtn) doneBtn.addEventListener('click', function () { setOn(false); });

  // ドラッグ&ドロップ（同じグループ内で並べ替え）
  var dragEl = null;
  document.addEventListener('dragstart', function (e) {
    if (!document.body.classList.contains('funnel-reordering')) return;
    var row = e.target.closest('.funnel-list-row');
    if (!row) return;
    dragEl = row; row.classList.add('dragging');
  });
  document.addEventListener('dragend', function () {
    if (dragEl) dragEl.classList.remove('dragging');
    dragEl = null;
    if (savedMsg) savedMsg.classList.add('d-none');
  });
  document.addEventListener('dragover', function (e) {
    if (!dragEl) return;
    var card = e.target.closest('.funnel-list-card');
    if (!card || card !== dragEl.closest('.funnel-list-card')) return;
    e.preventDefault();
    var closest = { offset: -Infinity, el: null };
    card.querySelectorAll('.funnel-list-row:not(.dragging)').forEach(function (row) {
      var box = row.getBoundingClientRect();
      var offset = e.clientY - box.top - box.height / 2;
      if (offset < 0 && offset > closest.offset) closest = { offset: offset, el: row };
    });
    if (closest.el == null) card.appendChild(dragEl); else card.insertBefore(dragEl, closest.el);
  });
  document.addEventListener('click', function (e) {
    var up = e.target.closest('.btn-funnel-up');
    var down = e.target.closest('.btn-funnel-down');
    if (!up && !down) return;
    var row = e.target.closest('.funnel-list-row');
    if (!row) return;
    var prev = row.previousElementSibling;
    var next = row.nextElementSibling;
    if (up && prev && prev.classList.contains('funnel-list-row')) {
      row.parentNode.insertBefore(row, prev);
    } else if (down && next && next.classList.contains('funnel-list-row')) {
      row.parentNode.insertBefore(next, row);
    }
    if (savedMsg) savedMsg.classList.add('d-none');
  });
  saveBtn.addEventListener('click', async function () {
    var order = Array.from(document.querySelectorAll('.funnel-list-row[data-funnel-id]')).map(function (el) { return el.dataset.funnelId; }).filter(Boolean);
    saveBtn.disabled = true;
    try {
      var res = await fetch(@json(route('funnel.reorder')), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ order: order }),
      });
      var data = await res.json().catch(function () { return {}; });
      if (res.ok && data.success && savedMsg) { savedMsg.classList.remove('d-none'); }
      else { alert('並び順の保存に失敗しました。'); }
    } catch (err) { alert('並び順の保存に失敗しました。'); }
    finally { saveBtn.disabled = false; }
  });
})();
</script>
@endpush
@endsection