@extends('layouts.panel')
@section('title','Görevler')

@section('content')
  @if(session('toast'))
    <script>
      window.addEventListener('load', () => {
        const t = @json(session('toast'));
        if (window.toast) toast(t.msg, t.type || 'info');
      });
    </script>
  @endif

  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h1 class="text-xl font-semibold">Görevler</h1>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Tüm görevleri yönetin.</p>
    </div>
    <button data-modal-open="newTask"
      class="rounded-2xl px-4 py-2 text-sm font-semibold text-white"
      style="background:var(--pt-primary)">
      + Yeni Görev
    </button>
  </div>

  <section class="mt-5 rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="text-left text-xs text-gray-500">
          <tr>
            <th class="py-2 pr-4">Görev</th>
            <th class="py-2 pr-4">Proje</th>
            <th class="py-2 pr-4">Durum</th>
            <th class="py-2 pr-4">Öncelik</th>
            <th class="py-2 pr-4">Atanan</th>
            <th class="py-2 pr-4">Progress</th>
            <th class="py-2 pr-0 text-right">İşlem</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          @forelse($tasks as $t)
            <tr>
              <td class="py-3 pr-4">
                <a class="font-semibold underline" href="{{ route('tasks.show', $t) }}">{{ $t->title }}</a>
                <div class="text-xs text-gray-500 line-clamp-1">{{ $t->description ?: '—' }}</div>
              </td>
              <td class="py-3 pr-4 text-gray-600 dark:text-gray-300">{{ $t->project->name ?? '—' }}</td>
              <td class="py-3 pr-4"><span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs dark:bg-gray-900/60">{{ strtoupper($t->status) }}</span></td>
              <td class="py-3 pr-4"><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></td>
              <td class="py-3 pr-4 text-gray-600 dark:text-gray-300">{{ $t->assignee->name ?? '—' }}</td>
              <td class="py-3 pr-4">
                <div class="flex items-center gap-2">
                  <div class="h-2 w-24 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>
                  <span class="text-xs text-gray-600 dark:text-gray-300">{{ (int)$t->progress }}%</span>
                </div>
              </td>
              <td class="py-3 pr-0 text-right">
                <form method="POST" action="{{ route('tasks.destroy', $t) }}" onsubmit="return confirm('Silinsin mi?')">
                  @csrf
                  @method('DELETE')
                  <button class="text-xs underline hover:text-red-600">Sil</button>
                </form>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="7" class="py-10 text-center text-gray-500">Henüz görev yok.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </section>

  {{-- Modal: Yeni Görev --}}
  <div data-modal="newTask" class="hidden fixed inset-0 z-[60] items-center justify-center p-4">
    <div data-modal-close class="absolute inset-0 bg-black/40"></div>

    <div class="relative w-full max-w-xl rounded-4xl border border-gray-200 bg-white p-5 shadow-soft dark:border-gray-800 dark:bg-gray-950">
      <div class="flex items-center justify-between">
        <div class="text-lg font-semibold">Yeni Görev</div>
        <button data-modal-close class="rounded-2xl border border-gray-200 px-3 py-2 text-sm hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800">✕</button>
      </div>

      <form class="mt-4 space-y-3" method="POST" action="{{ route('tasks.store') }}">
        @csrf

        <div>
          <label class="text-xs text-gray-600 dark:text-gray-300">Proje</label>
          <select name="project_id" required class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm dark:border-gray-800 dark:bg-gray-900/30">
            @foreach($projects as $p)
              <option value="{{ $p->id }}">{{ $p->name }}</option>
            @endforeach
          </select>
        </div>

        <div>
          <label class="text-xs text-gray-600 dark:text-gray-300">Başlık</label>
          <input name="title" required class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm dark:border-gray-800 dark:bg-gray-900/30">
        </div>

        <div>
          <label class="text-xs text-gray-600 dark:text-gray-300">Açıklama</label>
          <textarea name="description" rows="3" class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm dark:border-gray-800 dark:bg-gray-900/30"></textarea>
        </div>

        <div class="grid gap-3 sm:grid-cols-2">
          <div>
            <label class="text-xs text-gray-600 dark:text-gray-300">Durum</label>
            <select name="status" class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm dark:border-gray-800 dark:bg-gray-900/30">
              <option value="todo">Todo</option>
              <option value="doing">Doing</option>
              <option value="blocked">Blocked</option>
              <option value="done">Done</option>
            </select>
          </div>
          <div>
            <label class="text-xs text-gray-600 dark:text-gray-300">Öncelik</label>
            <select name="priority" class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm dark:border-gray-800 dark:bg-gray-900/30">
              <option value="medium">Orta</option>
              <option value="high">Yüksek</option>
              <option value="low">Düşük</option>
            </select>
          </div>
        </div>

        <div class="grid gap-3 sm:grid-cols-2">
          <div>
            <label class="text-xs text-gray-600 dark:text-gray-300">Atanan</label>
            <select name="assignee_id" class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm dark:border-gray-800 dark:bg-gray-900/30">
              <option value="">— Seç —</option>
              @foreach($users as $u)
                <option value="{{ $u->id }}">{{ $u->name }}</option>
              @endforeach
            </select>
          </div>
          <div>
            <label class="text-xs text-gray-600 dark:text-gray-300">Bitiş Tarihi</label>
            <input type="date" name="due_date" class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm dark:border-gray-800 dark:bg-gray-900/30">
          </div>
        </div>

        <div>
          <label class="text-xs text-gray-600 dark:text-gray-300">Progress (%)</label>
          <input type="number" name="progress" min="0" max="100" value="0" class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm dark:border-gray-800 dark:bg-gray-900/30">
        </div>

        <div class="flex items-center justify-end gap-2 pt-2">
          <button type="button" data-modal-close class="rounded-2xl border border-gray-200 px-4 py-2 text-sm hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800">
            İptal
          </button>
          <button type="submit" class="rounded-2xl px-4 py-2 text-sm font-semibold text-white" style="background:var(--pt-primary)">
            Kaydet
          </button>
        </div>
      </form>
    </div>
  </div>
@endsection