@extends('layouts.panel')

@section('title','Proje Takip • Dashboard')

@section('content')
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h1 class="text-xl font-semibold">Dashboard</h1>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-300" data-lang="tr">
        Günlük özet, KPI’lar ve hızlı aksiyonlar.
      </p>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-300 hidden" data-lang="en">
        Daily overview, KPIs, and quick actions.
      </p>
    </div>

    <div class="flex items-center gap-2">
      <button 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"
        onclick="toast('Özet güncellendi (demo).','success')">
        Yenile
      </button>
      <button data-modal-open="newTask"
        class="rounded-2xl px-4 py-2 text-sm font-semibold text-white pt-primary-bg shadow-sm"
        style="background:var(--pt-primary)">
        Hızlı Görev Ekle
      </button>
    </div>
  </div>

  <!-- KPI -->
  <section class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
      <div class="flex items-center justify-between">
        <div class="text-sm text-gray-600 dark:text-gray-300">Toplam Proje</div>
        <i data-lucide="folders" class="h-5 w-5 text-gray-500"></i>
      </div>
      <div class="mt-2 text-2xl font-semibold">12</div>
      <div class="mt-1 text-xs text-gray-500">+2 bu ay</div>
    </div>

    <div class="rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
      <div class="flex items-center justify-between">
        <div class="text-sm text-gray-600 dark:text-gray-300">Açık Görev</div>
        <i data-lucide="list-checks" class="h-5 w-5 text-gray-500"></i>
      </div>
      <div class="mt-2 text-2xl font-semibold">48</div>
      <div class="mt-1 text-xs text-gray-500">12’si bugün</div>
    </div>

    <div class="rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
      <div class="flex items-center justify-between">
        <div class="text-sm text-gray-600 dark:text-gray-300">Geciken</div>
        <i data-lucide="alarm-clock" class="h-5 w-5 text-gray-500"></i>
      </div>
      <div class="mt-2 text-2xl font-semibold text-amber-600 dark:text-amber-400">7</div>
      <div class="mt-1 text-xs text-gray-500">2 kritik</div>
    </div>

    <div class="rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
      <div class="flex items-center justify-between">
        <div class="text-sm text-gray-600 dark:text-gray-300">Tamamlanan</div>
        <i data-lucide="badge-check" class="h-5 w-5 text-gray-500"></i>
      </div>
      <div class="mt-2 text-2xl font-semibold text-green-600 dark:text-green-400">93</div>
      <div class="mt-1 text-xs text-gray-500">+14 bu hafta</div>
    </div>
  </section>

  <section class="mt-6 grid gap-4 lg:grid-cols-3">
    <!-- Chart placeholder -->
    <div class="lg:col-span-2 rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-sm font-semibold">İlerleme / Aktivite</div>
          <div class="text-xs text-gray-500">Placeholder chart alanı</div>
        </div>
        <div class="flex items-center gap-2">
          <span class="rounded-full bg-blue-50 px-3 py-1 text-xs text-blue-700 dark:bg-blue-950/40 dark:text-blue-200">Haftalık</span>
          <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 dark:bg-gray-900/60 dark:text-gray-200">Aylık</span>
        </div>
      </div>
      <div class="mt-4 h-56 rounded-2xl border border-dashed border-gray-300 bg-gradient-to-br from-gray-50 to-white dark:border-gray-700 dark:from-gray-900/40 dark:to-gray-950/20 flex items-center justify-center text-sm text-gray-500">
        Chart Placeholder (Buraya chart kütüphanesi eklenebilir)
      </div>
    </div>

    <!-- Today -->
    <div class="rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
      <div class="flex items-center justify-between">
        <div class="text-sm font-semibold">Bugün</div>
        <a class="text-xs underline text-gray-600 dark:text-gray-300" href="{{ route('tasks.index') }}">Tüm görevler</a>
      </div>

      <ul class="mt-3 space-y-2">
        <li class="flex items-start gap-3 rounded-2xl border border-gray-200 p-3 dark:border-gray-800">
          <input type="checkbox" class="mt-1 h-4 w-4" aria-label="Görev tamamla">
          <div class="min-w-0">
            <div class="text-sm font-medium">Board: sürükle-bırak iyileştirme</div>
            <div class="text-xs text-gray-500">POSCraft • 14:00</div>
            <div class="mt-2 flex flex-wrap gap-2">
              <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">Öncelik: Yüksek</span>
              <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">UI</span>
            </div>
          </div>
        </li>

        <li class="flex items-start gap-3 rounded-2xl border border-gray-200 p-3 dark:border-gray-800">
          <input type="checkbox" class="mt-1 h-4 w-4" aria-label="Görev tamamla">
          <div class="min-w-0">
            <div class="text-sm font-medium">Müşteri paneli: mobil menü testleri</div>
            <div class="text-xs text-gray-500">Webcrafters • 16:30</div>
            <div class="mt-2 flex flex-wrap gap-2">
              <span class="rounded-full bg-green-50 px-2 py-0.5 text-xs text-green-700 dark:bg-green-950/40 dark:text-green-200">Etiket: Performans</span>
              <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">QA</span>
            </div>
          </div>
        </li>
      </ul>

      <button data-modal-open="newTask"
        class="mt-3 w-full 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">
        + Hızlı Ekle
      </button>
    </div>
  </section>

  <section class="mt-6 grid gap-4 lg:grid-cols-3">
    <!-- Activity -->
    <div class="lg:col-span-2 rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
      <div class="flex items-center justify-between">
        <div class="text-sm font-semibold">Son Aktiviteler</div>
        <button class="text-xs underline text-gray-600 dark:text-gray-300" onclick="toast('Aktivite filtresi (demo).','info')">Filtrele</button>
      </div>

      <div class="mt-4 space-y-3">
        <div class="flex gap-3">
          <div class="mt-1 h-2.5 w-2.5 rounded-full bg-green-500"></div>
          <div class="min-w-0">
            <div class="text-sm"><span class="font-semibold">@Zeynep</span> “UI Revamp” görevini <span class="font-semibold text-green-600 dark:text-green-400">Tamam</span> yaptı.</div>
            <div class="text-xs text-gray-500">2 dk önce • tasks#128</div>
          </div>
        </div>

        <div class="flex gap-3">
          <div class="mt-1 h-2.5 w-2.5 rounded-full bg-amber-500"></div>
          <div class="min-w-0">
            <div class="text-sm"><span class="font-semibold">@Emre</span> “Sprint-4 Risk” notu ekledi.</div>
            <div class="text-xs text-gray-500">1 saat önce • project#7</div>
          </div>
        </div>

        <div class="flex gap-3">
          <div class="mt-1 h-2.5 w-2.5 rounded-full" style="background:var(--pt-primary)"></div>
          <div class="min-w-0">
            <div class="text-sm"><span class="font-semibold">@Abdullah</span> yeni proje oluşturdu: <span class="font-semibold">“Market POS – Demo”</span>.</div>
            <div class="text-xs text-gray-500">Dün • project#12</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Quick form -->
    <div class="rounded-3xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/40">
      <div class="text-sm font-semibold">Hızlı Görev Ekle</div>
      <form class="mt-3 space-y-3" onsubmit="event.preventDefault(); toast('Görev eklendi (demo).','success');">
        <div>
          <label class="text-xs text-gray-600 dark:text-gray-300" for="t1">Görev Başlığı</label>
          <input id="t1" 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" placeholder="Örn: Landing hero düzenle" />
        </div>
        <div class="grid grid-cols-2 gap-2">
          <div>
            <label class="text-xs text-gray-600 dark:text-gray-300" for="t2">Proje</label>
            <select id="t2" 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>POSCraft</option>
              <option>Webcrafters</option>
              <option>Yumu</option>
            </select>
          </div>
          <div>
            <label class="text-xs text-gray-600 dark:text-gray-300" for="t3">Öncelik</label>
            <select id="t3" 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>Orta</option>
              <option>Yüksek</option>
              <option>Düşük</option>
            </select>
          </div>
        </div>
        <button class="w-full rounded-2xl px-4 py-2 text-sm font-semibold text-white" style="background:var(--pt-primary)">
          Kaydet
        </button>
        <p class="text-xs text-gray-500">Bu form statik demodur. Backend’e bağlanabilir.</p>
      </form>
    </div>
  </section>
@endsection