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

@php
  $cols = [
    'todo'    => 'Todo',
    'doing'   => 'Doing',
    'blocked' => 'Blocked',
    'done'    => 'Done',
  ];
@endphp

@section('content')
  <div class="flex items-center justify-between gap-3">
    <div>
      <h1 class="text-xl font-semibold">Board</h1>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Sürükle-bırak ile görevleri taşı.</p>
    </div>
  </div>

  <section class="mt-5 grid gap-4 lg:grid-cols-4">
    @foreach($cols as $key => $label)
      <div class="rounded-3xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-950/40">
        <div class="flex items-center justify-between">
          <div class="text-sm font-semibold">{{ $label }}</div>
          <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-900/60 dark:text-gray-200">
            {{ ($grouped[$key] ?? collect())->count() }}
          </span>
        </div>

        <div class="mt-3 space-y-2 min-h-[120px]"
             data-column="{{ $key }}">
          @foreach(($grouped[$key] ?? collect()) as $t)
            <div class="task-card cursor-move rounded-2xl border border-gray-200 bg-white p-3 shadow-sm hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-900/40"
                 draggable="true"
                 data-task-id="{{ $t->id }}">
              <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                  <a href="{{ route('tasks.show',$t) }}" class="text-sm font-semibold underline truncate block">
                    {{ $t->title }}
                  </a>
                  <div class="mt-1 text-xs text-gray-500 line-clamp-2">{{ $t->project->name ?? '—' }}</div>
                </div>
                <div class="text-xs text-gray-500">{{ (int)$t->progress }}%</div>
              </div>

              <div class="mt-2 h-2 rounded-full bg-gray-100 dark:bg-gray-800">
                <div class="h-2 rounded-full" style="width:{{ (int)$t->progress }}%;background:var(--pt-primary)"></div>
              </div>

              <div class="mt-2 flex flex-wrap gap-2">
                @if($t->assignee)
                  <span class="rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-950/40 dark:text-blue-200">
                    {{ $t->assignee->name }}
                  </span>
                @endif
                <span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs text-amber-700 dark:bg-amber-950/40 dark:text-amber-200">
                  {{ strtoupper($t->priority) }}
                </span>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    @endforeach
  </section>

<script>
  (function () {
    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    // Kart içindeki linklerin "drag link" olmasını engelle
    document.querySelectorAll('.task-card a').forEach(a => a.setAttribute('draggable', 'false'));

    let dragged = null;

    function columnTaskIds(colEl) {
      return Array.from(colEl.querySelectorAll('[data-task-id]'))
        .map(x => parseInt(x.dataset.taskId, 10));
    }

    // Kart drag
    document.querySelectorAll('.task-card').forEach(card => {
      card.addEventListener('dragstart', (e) => {
        dragged = card;
        card.classList.add('opacity-60');

        // ✅ KRİTİK: dataTransfer yoksa Windows/Chrome bazen "yasak" gibi davranır
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', card.dataset.taskId || '1');
      });

      card.addEventListener('dragend', () => {
        card.classList.remove('opacity-60');
      });
    });

    // Kolon drop alanı
    document.querySelectorAll('[data-column]').forEach(col => {

      col.addEventListener('dragenter', (e) => {
        e.preventDefault();
      });

      col.addEventListener('dragover', (e) => {
        e.preventDefault(); // ✅ drop için şart
        e.dataTransfer.dropEffect = 'move';
        col.classList.add('ring-2', 'ring-[color:var(--pt-primary)]');
      });

      col.addEventListener('dragleave', () => {
        col.classList.remove('ring-2', 'ring-[color:var(--pt-primary)]');
      });

      col.addEventListener('drop', async (e) => {
        e.preventDefault();
        col.classList.remove('ring-2', 'ring-[color:var(--pt-primary)]');

        if (!dragged) return;

        // Görsel olarak taşı
        col.appendChild(dragged);

        // Kaydet
        const status = col.dataset.column;
        const taskId = parseInt(dragged.dataset.taskId, 10);
        const positions = columnTaskIds(col);

        try {
        const res = await fetch("{{ route('board.move') }}", {
          method: 'POST',
          credentials: 'same-origin', // ✅ önemli
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrf,
            'X-Requested-With': 'XMLHttpRequest',
          },
          body: JSON.stringify({
            task_id: taskId,
            status: status,
            positions: positions,
          })
        });


          if (!res.ok) throw new Error('save failed');
          if (window.toast) toast('Kaydedildi', 'success');
        } catch (err) {
          if (window.toast) toast('Kaydedilemedi', 'error');
        } finally {
          dragged = null;
        }
      });
    });
  })();
</script>

@endsection