@extends('layouts.panel')

@section('title','Projeler')

@php
  // UI metinleri (HTML’in hissini koruyoruz)
  $statusMap = [
    'active' => ['Aktif', 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-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'],
  ];

  $priorityMap = [
    'high'   => ['Yüksek', 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-200'],
    'medium' => ['Orta', 'bg-gray-100 text-gray-700 dark:bg-gray-900/60 dark:text-gray-200'],
    'low'    => ['Düşük', 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-200'],
  ];
@endphp

@section('content')
  {{-- Toast (opsiyonel) --}}
  @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">Projeler</h1>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Tüm projeleri tek ekranda yönetin.</p>
    </div>

    <div class="flex items-center gap-2">
      <button id="viewCards" 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">
        Kart
      </button>
      <button id="viewTable" 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">
        Tablo
      </button>

      <button data-modal-open="newProject"
        class="rounded-2xl px-4 py-2 text-sm font-semibold text-white shadow-sm"
        style="background:var(--pt-primary)">
        + Yeni Proje
      </button>
    </div>
  </div>

  {{-- Filters (UI aynı; backend filtreyi sonra bağlarız) --}}
  <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="grid gap-3 md:grid-cols-4">
      <div class="relative">
        <input
          class="w-full rounded-2xl border border-gray-200 bg-white/70 py-2 pl-10 pr-3 text-sm outline-none focus:ring-2 focus:ring-[color:var(--pt-primary)] dark:border-gray-800 dark:bg-gray-900/30"
          placeholder="Proje ara..."
        >
        <div class="pointer-events-none absolute left-3 top-2.5 text-gray-400">🔎</div>
      </div>

      <select class="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>Tümü</option>
        <option>Aktif</option>
        <option>Beklemede</option>
        <option>Tamam</option>
      </select>

      <select class="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>Öncelik (Tümü)</option>
        <option>Yüksek</option>
        <option>Orta</option>
        <option>Düşük</option>
      </select>

      <select class="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>Sırala: En yeni</option>
        <option>Sırala: En eski</option>
        <option>Sırala: Progress</option>
      </select>
    </div>
  </section>

  {{-- Cards --}}
  <section id="cards" class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
    @forelse($projects as $p)
      @php
        $st = $statusMap[$p->status] ?? ['Aktif', $statusMap['active'][1]];
        $pr = $priorityMap[$p->priority] ?? ['Orta', $priorityMap['medium'][1]];
        $due = $p->due_date ? \Carbon\Carbon::parse($p->due_date)->translatedFormat('d M') : '—';
        $progress = (int)($p->progress ?? 0);
      @endphp

      <a class="rounded-3xl border border-gray-200 bg-white p-4 shadow-soft hover:-translate-y-0.5 hover:shadow-md transition dark:border-gray-800 dark:bg-gray-950/40"
         href="{{ route('projects.show', $p) }}">
        <div class="flex items-start justify-between gap-3">
          <div class="min-w-0">
            <div class="text-sm font-semibold truncate">{{ $p->name }}</div>
            <div class="mt-1 text-xs text-gray-500 line-clamp-2">{{ $p->description ?: '—' }}</div>
          </div>
          <span class="rounded-full px-2 py-0.5 text-xs {{ $st[1] }}">{{ $st[0] }}</span>
        </div>

        <div class="mt-3">
          <div class="flex items-center justify-between text-xs text-gray-500">
            <span>İlerleme</span>
            <span class="font-semibold text-gray-700 dark:text-gray-200">{{ $progress }}%</span>
          </div>
          <div class="mt-2 h-2 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>

        <div class="mt-4 flex items-center justify-between">
          <div class="text-xs text-gray-500">Deadline: {{ $due }}</div>
          <span class="rounded-full px-2 py-0.5 text-xs {{ $pr[1] }}">{{ $pr[0] }}</span>
        </div>

        <div class="mt-3 flex items-center justify-between">
          <div class="text-xs text-gray-500">
            Owner: {{ optional($p->owner)->name ?? '—' }}
          </div>

          <form method="POST" action="{{ route('projects.destroy', $p) }}" onsubmit="return confirm('Bu projeyi silmek istiyor musun?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="text-xs underline text-gray-600 dark:text-gray-300 hover:text-red-600">
              Sil
            </button>
          </form>
        </div>
      </a>
    @empty
      <div class="col-span-full rounded-3xl border border-dashed border-gray-300 p-10 text-center text-gray-500 dark:border-gray-800">
        Henüz proje yok. “+ Yeni Proje” ile ekleyebilirsin.
      </div>
    @endforelse
  </section>

  {{-- Table --}}
  <section id="table" class="hidden 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">Proje</th>
            <th class="py-2 pr-4">Durum</th>
            <th class="py-2 pr-4">Öncelik</th>
            <th class="py-2 pr-4">Progress</th>
            <th class="py-2 pr-4">Deadline</th>
            <th class="py-2 pr-4">Owner</th>
            <th class="py-2 pr-0 text-right">İşlem</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          @foreach($projects as $p)
            @php
              $st = $statusMap[$p->status] ?? ['Aktif', $statusMap['active'][1]];
              $pr = $priorityMap[$p->priority] ?? ['Orta', $priorityMap['medium'][1]];
              $due = $p->due_date ? \Carbon\Carbon::parse($p->due_date)->translatedFormat('d M Y') : '—';
              $progress = (int)($p->progress ?? 0);
            @endphp
            <tr>
              <td class="py-3 pr-4">
                <a class="font-semibold underline" href="{{ route('projects.show', $p) }}">{{ $p->name }}</a>
                <div class="text-xs text-gray-500 line-clamp-1">{{ $p->description ?: '—' }}</div>
              </td>
              <td class="py-3 pr-4">
                <span class="rounded-full px-2 py-0.5 text-xs {{ $st[1] }}">{{ $st[0] }}</span>
              </td>
              <td class="py-3 pr-4">
                <span class="rounded-full px-2 py-0.5 text-xs {{ $pr[1] }}">{{ $pr[0] }}</span>
              </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:{{ $progress }}%;background:var(--pt-primary)"></div>
                  </div>
                  <span class="text-xs text-gray-600 dark:text-gray-300">{{ $progress }}%</span>
                </div>
              </td>
              <td class="py-3 pr-4 text-gray-600 dark:text-gray-300">{{ $due }}</td>
              <td class="py-3 pr-4 text-gray-600 dark:text-gray-300">{{ optional($p->owner)->name ?? '—' }}</td>
              <td class="py-3 pr-0 text-right">
                <form method="POST" action="{{ route('projects.destroy', $p) }}" class="inline" onsubmit="return confirm('Silinsin mi?');">
                  @csrf
                  @method('DELETE')
                  <button class="text-xs underline hover:text-red-600">Sil</button>
                </form>
              </td>
            </tr>
          @endforeach
          @if($projects->count() === 0)
            <tr>
              <td colspan="7" class="py-10 text-center text-gray-500">Henüz proje yok.</td>
            </tr>
          @endif
        </tbody>
      </table>
    </div>
  </section>

  {{-- Modal: Yeni Proje (artık DB’ye kaydediyor) --}}
  <div data-modal="newProject" 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 Proje</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.store') }}">
        @csrf

        <div>
          <label class="text-xs text-gray-600 dark:text-gray-300">Proje Adı</label>
          <input name="name" required
            class="mt-1 w-full rounded-2xl border border-gray-200 bg-white/70 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[color:var(--pt-primary)] dark:border-gray-800 dark:bg-gray-900/30"
            placeholder="Örn: Market POS – Demo">
          @error('name') <div class="mt-1 text-xs text-red-600">{{ $message }}</div> @enderror
        </div>

        <div>
          <label class="text-xs text-gray-600 dark:text-gray-300">Owner</label>
          <select name="owner_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>
          @error('owner_id') <div class="mt-1 text-xs text-red-600">{{ $message }}</div> @enderror
        </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"
            placeholder="Kısa proje özeti..."></textarea>
          @error('description') <div class="mt-1 text-xs text-red-600">{{ $message }}</div> @enderror
        </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="active">Aktif</option>
              <option value="pending">Beklemede</option>
              <option value="done">Tamam</option>
            </select>
            @error('status') <div class="mt-1 text-xs text-red-600">{{ $message }}</div> @enderror
          </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>
            @error('priority') <div class="mt-1 text-xs text-red-600">{{ $message }}</div> @enderror
          </div>
        </div>

        <div class="grid gap-3 sm:grid-cols-2">
          <div>
            <label class="text-xs text-gray-600 dark:text-gray-300">Deadline</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">
            @error('due_date') <div class="mt-1 text-xs text-red-600">{{ $message }}</div> @enderror
          </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">
            @error('progress') <div class="mt-1 text-xs text-red-600">{{ $message }}</div> @enderror
          </div>
        </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>

  <script>
    // Kart/Tablo geçişi (HTML’deki davranışı koruyoruz)
    window.addEventListener('load', () => {
      const btnCards = document.getElementById('viewCards');
      const btnTable = document.getElementById('viewTable');
      const cards = document.getElementById('cards');
      const table = document.getElementById('table');

      if (btnCards && btnTable && cards && table) {
        btnCards.addEventListener('click', () => { cards.classList.remove('hidden'); table.classList.add('hidden'); });
        btnTable.addEventListener('click', () => { table.classList.remove('hidden'); cards.classList.add('hidden'); });
      }
    });
  </script>
@endsection