@extends('layouts.panel')

@section('title', ($project->name ?? 'Proje Detayı') . ' • Proje Takip')

@php
  $statusPill = match($project->status){
    'active'  => ['Aktif', 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200'],
    'pending' => ['Beklemede', 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-200'],
    'done'    => ['Tamam', 'bg-gray-100 text-gray-700 dark:bg-gray-900/60 dark:text-gray-200'],
    default   => ['Aktif', 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200'],
  };

  $prioPill = match($project->priority){
    'high'   => ['Yüksek Öncelik', 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-200'],
    'medium' => ['Orta Öncelik', 'bg-gray-100 text-gray-700 dark:bg-gray-900/60 dark:text-gray-200'],
    'low'    => ['Düşük Öncelik', 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200'],
    default  => ['Orta Öncelik', 'bg-gray-100 text-gray-700 dark:bg-gray-900/60 dark:text-gray-200'],
  };

  $progress = (int)($project->progress ?? 0);

  $start = $project->start_date ? \Carbon\Carbon::parse($project->start_date)->translatedFormat('d M Y') : null;
  $end   = $project->end_date   ? \Carbon\Carbon::parse($project->end_date)->translatedFormat('d M Y')   : null;

  $dateText = ($start && $end) ? ($start.' → '.$end) : (($end) ? ('Bitiş: '.$end) : '—');
@endphp

@section('content')
  {{-- Üst: geri dönüş + başlık (project-detail.html hissi) --}}
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div class="min-w-0">
      <a href="{{ route('projects.index') }}"
         class="inline-flex items-center gap-2 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">
        <i data-lucide="arrow-left" class="h-4 w-4"></i>
        Projelere Dön
      </a>

      <div class="mt-3">
        <div class="text-sm font-semibold truncate">Proje Detayı</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 truncate">
          {{ $project->name }} @if($project->code) • {{ $project->code }} @endif
        </div>
      </div>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <button 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"
              onclick="toast('Düzenleme ekranı bir sonraki adımda.','info')">
        Düzenle
      </button>

      <form method="POST" action="{{ route('projects.destroy', $project) }}" onsubmit="return confirm('Bu projeyi silmek istiyor musun?');">
        @csrf
        @method('DELETE')
        <button class="rounded-2xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 hover:bg-red-100 dark:border-red-900/40 dark:bg-red-950/30 dark:text-red-200 dark:hover:bg-red-950/50">
          Sil
        </button>
      </form>
    </div>
  </div>

  {{-- Hero / Project Header (project-detail.html’deki ana blok) --}}
  <section class="relative mt-5 overflow-hidden rounded-3xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-950/40">
    <div class="pointer-events-none absolute -right-24 -top-24 h-64 w-64 rounded-full opacity-30"
         style="background: radial-gradient(circle at center, var(--pt-primary), transparent 60%);"></div>

    <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
      <div class="min-w-0">
        <div class="flex flex-wrap items-center gap-2">
          <h1 class="text-xl font-semibold tracking-tight">{{ $project->name }}</h1>

          <span class="rounded-full px-2 py-0.5 text-xs font-semibold {{ $statusPill[1] }}">
            {{ $statusPill[0] }}
          </span>

          <span class="rounded-full px-2 py-0.5 text-xs font-semibold {{ $prioPill[1] }}">
            {{ $prioPill[0] }}
          </span>

          @if($project->code)
            <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">
              {{ $project->code }}
            </span>
          @endif
        </div>

        <p class="mt-2 max-w-3xl text-sm text-gray-600 dark:text-gray-300">
          {{ $project->description ?: '—' }}
        </p>

        <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <div class="rounded-2xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-900/20">
            <div class="text-xs text-gray-500 dark:text-gray-400">Proje Yöneticisi</div>
            <div class="mt-1 flex items-center gap-2">
              <img class="h-7 w-7 rounded-2xl" src="https://placehold.co/56x56" alt="Owner">
              <div class="text-sm font-semibold">{{ optional($project->owner)->name ?? '—' }}</div>
            </div>
          </div>

          <div class="rounded-2xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-900/20">
            <div class="text-xs text-gray-500 dark:text-gray-400">Tarih</div>
            <div class="mt-1 text-sm font-semibold">{{ $dateText }}</div>
          </div>

          <div class="rounded-2xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-900/20">
            <div class="text-xs text-gray-500 dark:text-gray-400">İlerleme</div>
            <div class="mt-1 flex items-center justify-between gap-2">
              <div class="h-2 flex-1 rounded-full bg-gray-100 dark:bg-gray-800">
                <div class="h-2 rounded-full" style="width:{{ $progress }}%;background:var(--pt-primary)"></div>
              </div>
              <div class="text-sm font-semibold">{{ $progress }}%</div>
            </div>
          </div>

          <div class="rounded-2xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-900/20">
            <div class="text-xs text-gray-500 dark:text-gray-400">Deadline</div>
            <div class="mt-1 text-sm font-semibold">
              {{ $project->due_date ? \Carbon\Carbon::parse($project->due_date)->translatedFormat('d M Y') : '—' }}
            </div>
          </div>
        </div>
      </div>

      <div class="w-full lg:w-80">
        <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ı Aksiyonlar</div>
          <div class="mt-3 grid gap-2">
            <a href="{{ route('tasks.index') }}"
               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">
              Görevlere Git
            </a>
            <button class="rounded-2xl px-3 py-2 text-sm font-semibold text-white"
                    style="background:var(--pt-primary)"
                    onclick="toast('Görev ekleme Adım 4’te.','info')">
              + Görev Ekle
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="mt-5 grid gap-4 lg:grid-cols-3">
  <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">Görevler</div>
      <button data-modal-open="newTaskForProject"
        class="rounded-2xl px-3 py-2 text-sm font-semibold text-white"
        style="background:var(--pt-primary)">
        + Görev Ekle
      </button>
    </div>

    <div class="mt-4 space-y-2">
      @forelse($project->tasks as $t)
        <a href="{{ route('tasks.show', $t) }}"
           class="block rounded-2xl border border-gray-200 p-3 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-900/30">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="text-sm font-semibold truncate">{{ $t->title }}</div>
              <div class="mt-1 text-xs text-gray-500 line-clamp-2">{{ $t->description ?: '—' }}</div>

              <div class="mt-2 flex flex-wrap gap-2">
                <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">
                  {{ strtoupper($t->status) }}
                </span>
                <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>
                @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
              </div>
            </div>

            <form method="POST" action="{{ route('tasks.destroy', $t) }}"
                  onsubmit="return confirm('Görev silinsin mi?')">
              @csrf
              @method('DELETE')
              <button class="text-xs underline text-gray-600 dark:text-gray-300 hover:text-red-600">Sil</button>
            </form>
          </div>

          <div class="mt-3 flex items-center justify-between text-xs text-gray-500">
            <span>Progress</span>
            <span class="font-semibold text-gray-700 dark:text-gray-200">{{ (int)$t->progress }}%</span>
          </div>
          <div class="mt-1 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>
        </a>
      @empty
        <div class="rounded-2xl border border-dashed border-gray-300 p-6 text-sm text-gray-500 dark:border-gray-800">
          Bu projede henüz görev yok.
        </div>
      @endforelse
    </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="text-sm font-semibold">Notlar</div>
    <div class="mt-3 text-sm text-gray-600 dark:text-gray-300">
      (Bir sonraki adım) Notlar / dosyalar / check-list alanı.
    </div>
  </div>
</section>

{{-- Modal: Projeye Görev Ekle --}}
<div data-modal="newTaskForProject" 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">Görev Ekle</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('projects.tasks.store', $project) }}">
      @csrf

      <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"
          placeholder="Örn: Landing hero düzelt">
      </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>












  {{-- Alt alan: Şimdilik görev/aktivite placeholder — bir sonraki adım DB görevleri burada --}}
  <section class="mt-5 grid gap-4 lg:grid-cols-3">
    <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">Genel Bakış</div>
        <button class="text-xs underline text-gray-600 dark:text-gray-300" onclick="toast('Demo alan.','info')">Filtre</button>
      </div>
      <div class="mt-3 text-sm text-gray-600 dark:text-gray-300">
        Buraya <b>project-detail.html</b> içindeki tab/sections yapısını bir sonraki adımda birebir taşıyıp,
        <b>tasks tablosu</b> ile dinamik hale getireceğiz.
      </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="text-sm font-semibold">Notlar</div>
      <div class="mt-3 text-sm text-gray-600 dark:text-gray-300">
        (Demo) Proje notları / check-list / dosyalar bölümü burada olacak.
      </div>
    </div>
  </section>
@endsection