@extends('layouts.panel')
@section('title','Kanban Board')

@section('content')
  <div class="content-header">
    <div>
      <h1 class="content-title">Kanban Board</h1>
      <p class="text-tertiary">Görevleri sürükle-bırak ile yönetin</p>
    </div>

    <div class="flex items-center gap-3">
      <select class="form-select" style="width:auto;">
        <option>{{ $project->name }}</option>
      </select>

      <button class="btn btn-primary" data-modal="newTaskModal">
        <i class="fas fa-plus"></i><span>Görev Ekle</span>
      </button>
    </div>
  </div>

  <div class="kanban-container" id="kanbanBoard" data-project-id="{{ $project->id }}">
    @foreach($cols as $status)
      @php
        $label = [
          'todo'=>'Yapılacak',
          'doing'=>'Yapılıyor',
          'blocked'=>'Beklemede',
          'done'=>'Tamamlandı'
        ][$status];
      @endphp

      <div class="kanban-column" data-status="{{ $status }}">
        <div class="column-header">
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 rounded-full bg-tertiary"></div>
            <h3 class="column-title">{{ $label }}</h3>
          </div>
          <div class="column-count">{{ count($tasksByStatus[$status]) }}</div>
        </div>

        <div class="kanban-cards" data-dropzone="{{ $status }}">
          @foreach($tasksByStatus[$status] as $task)
            <div class="kanban-card"
                 draggable="true"
                 data-task-id="{{ $task->id }}"
                 data-position="{{ $task->position }}">
              <h4 class="card-title">{{ $task->title }}</h4>
              @if($task->description)
                <p class="text-sm text-tertiary mb-3">{{ $task->description }}</p>
              @endif
            </div>
          @endforeach
        </div>

        <button class="btn btn-outline w-full mt-3" data-modal="newTaskModal">
          <i class="fas fa-plus"></i><span>Görev Ekle</span>
        </button>
      </div>
    @endforeach
  </div>

  {{-- modal şimdilik sonra --}}
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const board = document.getElementById('kanbanBoard');
  if (!board) return;

  const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
  const projectId = board.dataset.projectId;

  let dragging = null;

  // Draggable
  board.querySelectorAll('.kanban-card').forEach(card => {
    card.setAttribute('draggable','true');

    card.addEventListener('dragstart', () => {
      dragging = card;
      card.classList.add('dragging');
      setTimeout(() => card.style.opacity = '0.4', 0);
    });

    card.addEventListener('dragend', async () => {
      card.classList.remove('dragging');
      card.style.opacity = '1';
      dragging = null;

      const column = card.closest('.kanban-cards');
      if (column) await syncColumn(column);
    });
  });

  // Dropzones
  board.querySelectorAll('.kanban-cards').forEach(column => {
    column.addEventListener('dragover', (e) => {
      e.preventDefault();
      if (!dragging) return;

      const after = getAfterElement(column, e.clientY);
      if (after) column.insertBefore(dragging, after);
      else column.appendChild(dragging);
    });

    column.addEventListener('drop', async (e) => {
      e.preventDefault();
      if (!dragging) return;

      await syncColumn(column);

      // ✅ Tek toast (2 kez olmasın)
      if (typeof showToast === 'function') {
        const title = dragging.querySelector('.card-title')?.textContent?.trim();
        showToast(title ? `Görev taşındı: ${title}` : 'Görev taşındı', 'success');
      }
    });
  });

  function getAfterElement(container, y) {
    const cards = [...container.querySelectorAll('.kanban-card:not(.dragging)')];
    return cards.reduce((closest, child) => {
      const box = child.getBoundingClientRect();
      const offset = y - box.top - box.height / 2;
      if (offset < 0 && offset > closest.offset) {
        return { offset, element: child };
      }
      return closest;
    }, { offset: Number.NEGATIVE_INFINITY, element: null }).element;
  }

  async function syncColumn(columnEl) {
    const status = columnEl.dataset.dropzone;
    const orderedIds = [...columnEl.querySelectorAll('.kanban-card')]
      .map(el => parseInt(el.dataset.taskId, 10))
      .filter(Boolean);

    if (!orderedIds.length) return;

    const res = await fetch("{{ route('tasks.reorder') }}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrf,
        'Accept': 'application/json',
      },
      body: JSON.stringify({
        project_id: parseInt(projectId, 10),
        status,
        ordered_ids: orderedIds,
      })
    });

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      console.error('reorder failed', err);
      if (typeof showToast === 'function') showToast('Sıralama kaydedilemedi', 'error');
    }
  }
});
</script>
@endpush