@extends('layouts.app')
@section('title', 'ファネル一覧')
@section('page-title', 'ファネル')
@section('content')

{{-- アラート --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
  {{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  {{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- ヘッダー --}}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div class="d-flex gap-2 align-items-center">
    <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>
  </div>
  <a href="{{ route('funnel.create') }}" class="btn btn-primary">
    <i class="bi bi-plus-lg me-1"></i>ファネルを追加
  </a>
</div>

{{-- グループタブ --}}
@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
<div class="row g-3">
  @foreach($filteredFunnels as $funnel)
  <div class="col-md-6 col-lg-4">
    <div class="card h-100 funnel-card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <div>
            @if($funnel->group)
            <div class="text-muted small mb-1"><i class="bi bi-folder me-1"></i>{{ $funnel->group->name }}</div>
            @endif
            <h6 class="card-title mb-0 fw-semibold">{{ $funnel->name }}</h6>
          </div>
          <span class="badge {{ $funnel->status === 'public' ? 'bg-success' : 'bg-secondary' }}">
            {{ $funnel->status === 'public' ? '公開中' : '非公開' }}
          </span>
        </div>
        <p class="text-muted small mb-3">{{ $funnel->pages()->count() }}ページ</p>
        <div class="d-flex gap-2">
          <a href="{{ route('funnel.page.index', $funnel) }}" class="btn btn-sm btn-outline-primary flex-fill">
            <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 }}」を削除しますか？')">
            @csrf @method('DELETE')
            <button type="submit" class="btn btn-sm btn-outline-danger" title="削除">
              <i class="bi bi-trash"></i>
            </button>
          </form>
        </div>
      </div>
      <div class="card-footer bg-transparent text-muted small">
        作成日: {{ $funnel->created_at->format('Y/m/d') }}
      </div>
    </div>
  </div>
  @endforeach
</div>
@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();
    });
  });
});
</script>
@endpush
@endsection