@extends('layouts.panel')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">

  <div class="flex items-start justify-between gap-4">
    <div>
      <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Ekip</h1>
      <p class="text-gray-600 dark:text-gray-300 mt-1">
        Üyeler ve davetler veritabanından listelenir.
      </p>
    </div>

    <div class="flex gap-2">
      <a href="{{ route('dashboard') }}"
         class="px-4 py-2 rounded-xl border border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-200">
        Dashboard
      </a>

      {{-- Panel menü bazen route('calendar') bazen route('calendar.index') çağırıyor.
           Web.php’de alias var ama burada net: --}}
      <a href="{{ route('calendar') }}"
         class="px-4 py-2 rounded-xl bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900">
        Takvim
      </a>
    </div>
  </div>

  @if(session('success'))
    <div class="mt-4 rounded-xl border border-green-200 bg-green-50 text-green-800 px-4 py-3">
      {{ session('success') }}
    </div>
  @endif

  @if($errors->any())
    <div class="mt-4 rounded-xl border border-red-200 bg-red-50 text-red-800 px-4 py-3">
      <ul class="list-disc ml-5">
        @foreach($errors->all() as $e)
          <li>{{ $e }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Members --}}
    <div class="lg:col-span-2 rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 p-5">
      <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Üyeler</h2>
        <div class="text-sm text-gray-500 dark:text-gray-400">
          Toplam: {{ is_countable($members ?? []) ? count($members) : 0 }}
        </div>
      </div>

      <div class="mt-4 overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead>
            <tr class="text-left text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-900">
              <th class="py-2 pr-4">Ad</th>
              <th class="py-2 pr-4">E-posta</th>
              <th class="py-2 pr-4">Rol</th>
              <th class="py-2 pr-4">Durum</th>
              <th class="py-2">Kayıt</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-gray-900">
            @forelse(($members ?? []) as $m)
              <tr>
                <td class="py-3 pr-4 font-medium text-gray-900 dark:text-gray-100">
                  {{ $m->name }}
                </td>
                <td class="py-3 pr-4 text-gray-700 dark:text-gray-200">
                  {{ $m->email }}
                </td>
                <td class="py-3 pr-4 text-gray-700 dark:text-gray-200">
                  {{ $m->role ?? 'member' }}
                </td>
                <td class="py-3 pr-4 text-gray-700 dark:text-gray-200">
                  {{ $m->status ?? 'active' }}
                </td>
                <td class="py-3 text-gray-500 dark:text-gray-400">
                  {{ optional($m->created_at)->format('d.m.Y') }}
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="5" class="py-6 text-center text-gray-500 dark:text-gray-400">
                  Henüz üye yok.
                </td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    {{-- Invite --}}
    <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 p-5">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Davet Gönder</h2>

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

        <div>
          <label class="text-sm text-gray-600 dark:text-gray-300">E-posta</label>
          <input name="email" type="email" required
                 class="mt-1 w-full rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-3 py-2 text-gray-900 dark:text-gray-100"
                 placeholder="ornek@mail.com" value="{{ old('email') }}">
        </div>

        <div>
          <label class="text-sm text-gray-600 dark:text-gray-300">Rol (opsiyonel)</label>
          <input name="role" type="text"
                 class="mt-1 w-full rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-3 py-2 text-gray-900 dark:text-gray-100"
                 placeholder="member / admin" value="{{ old('role','member') }}">
        </div>

        <button class="w-full rounded-xl bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 px-4 py-2">
          Davet Oluştur
        </button>
      </form>

      <div class="mt-6">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Bekleyen Davetler</h3>

        <div class="mt-3 space-y-2">
          @forelse(($invitations ?? []) as $inv)
            <div class="rounded-xl border border-gray-200 dark:border-gray-800 px-3 py-2 flex items-center justify-between gap-3">
              <div class="min-w-0">
                <div class="text-sm text-gray-900 dark:text-gray-100 truncate">{{ $inv->email }}</div>
                <div class="text-xs text-gray-500 dark:text-gray-400">
                  Rol: {{ $inv->role ?? 'member' }}
                  • {{ optional($inv->created_at)->format('d.m.Y') }}
                </div>
              </div>

              <form method="POST" action="{{ route('team.invite.revoke', $inv) }}">
                @csrf
                <button class="text-xs px-3 py-1 rounded-lg border border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-200">
                  İptal
                </button>
              </form>
            </div>
          @empty
            <div class="text-sm text-gray-500 dark:text-gray-400">
              Bekleyen davet yok.
            </div>
          @endforelse
        </div>
      </div>

    </div>

  </div>
</div>
@endsection