@extends('layouts.tenant-admin')
@section('title', 'الفريق')

@section('content')
<h2 class="text-2xl font-bold mb-6">فريق العمل</h2>

<form method="post" action="{{ route('tenant.team.invite') }}" class="bg-white p-5 rounded-lg shadow mb-6 flex items-end gap-4">
    @csrf
    <div class="flex-1">
        <label class="block text-sm font-medium mb-1">البريد الإلكتروني</label>
        <input type="email" name="email" required class="w-full border rounded p-2">
    </div>
    <div>
        <label class="block text-sm font-medium mb-1">الدور</label>
        <select name="role" class="border rounded p-2">
            <option value="editor">محرر</option>
            <option value="author">كاتب</option>
            <option value="subscriber">مشترك</option>
        </select>
    </div>
    <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded">إرسال دعوة</button>
</form>

<h3 class="font-bold mb-3">الأعضاء الحاليون</h3>
<table class="w-full bg-white rounded-lg shadow overflow-hidden text-sm mb-8">
    <thead class="bg-gray-100 text-gray-600">
        <tr>
            <th class="p-3 text-right">الاسم</th>
            <th class="p-3 text-right">البريد</th>
            <th class="p-3 text-right">الدور</th>
            <th class="p-3 text-right">إجراءات</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($users as $user)
        <tr class="border-t">
            <td class="p-3 font-medium">{{ $user->name }}</td>
            <td class="p-3 text-gray-500" dir="ltr">{{ $user->email }}</td>
            <td class="p-3">
                <form action="{{ route('tenant.team.role', $user) }}" method="post" class="inline">
                    @csrf
                    <select name="role" onchange="this.form.submit()" class="border rounded p-1 text-xs">
                        @foreach (['editor' => 'محرر', 'author' => 'كاتب', 'subscriber' => 'مشترك'] as $value => $label)
                            <option value="{{ $value }}" @selected($user->roles->pluck('name')->contains($value))>{{ $label }}</option>
                        @endforeach
                    </select>
                </form>
            </td>
            <td class="p-3">
                <form action="{{ route('tenant.team.remove', $user) }}" method="post" onsubmit="return confirm('متأكد تبي تحذف هذا العضو من الفريق؟')">
                    @csrf @method('DELETE')
                    <button class="text-red-600 hover:underline">إزالة</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

@if ($pendingInvitations->count())
<h3 class="font-bold mb-3">دعوات قيد الانتظار</h3>
<table class="w-full bg-white rounded-lg shadow overflow-hidden text-sm">
    <thead class="bg-gray-100 text-gray-600">
        <tr>
            <th class="p-3 text-right">البريد</th>
            <th class="p-3 text-right">الدور</th>
            <th class="p-3 text-right">تنتهي</th>
            <th class="p-3 text-right">إجراءات</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($pendingInvitations as $inv)
        <tr class="border-t">
            <td class="p-3" dir="ltr">{{ $inv->email }}</td>
            <td class="p-3">{{ ['editor' => 'محرر', 'author' => 'كاتب', 'subscriber' => 'مشترك'][$inv->role] }}</td>
            <td class="p-3 text-gray-500">{{ $inv->expires_at->diffForHumans() }}</td>
            <td class="p-3">
                <form action="{{ route('tenant.team.invitations.cancel', $inv) }}" method="post">
                    @csrf
                    <button class="text-red-600 hover:underline">إلغاء</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
@endif
@endsection