@extends('dashboard.layout')
@section('title', 'إدارة المشرفين')

@section('content')
<div class="flex items-center justify-between mb-6">
    <h1 class="text-3xl font-bold text-gray-800">قائمة المشرفين</h1>
    <a href="{{ route('dashboard.admins.create') }}" class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition">
        + إضافة مشرف جديد
    </a>
</div>

@if(session('success'))
    <div class="bg-green-100 border border-green-300 text-green-800 p-3 rounded mb-4">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="bg-red-100 border border-red-300 text-red-800 p-3 rounded mb-4">{{ session('error') }}</div>
@endif

<div class="overflow-x-auto bg-white shadow rounded-xl">
    <table class="w-full text-sm text-left rtl:text-right text-gray-700">
        <thead class="text-xs uppercase bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="px-6 py-3">#</th>
                <th class="px-6 py-3">الاسم</th>
                <th class="px-6 py-3">البريد الإلكتروني</th>
                <th class="px-6 py-3">الدور</th>
                <th class="px-6 py-3">تاريخ الإنشاء</th>
                <th class="px-6 py-3">الخيارات</th>
            </tr>
        </thead>
        <tbody>
            @foreach($admins as $admin)
            <tr class="border-b hover:bg-gray-50">
                <td class="px-6 py-4">{{ $admin->id }}</td>
                <td class="px-6 py-4 font-medium">{{ $admin->name }}</td>
                <td class="px-6 py-4">{{ $admin->email }}</td>
                <td class="px-6 py-4">
                    <span class="px-2 py-1 rounded text-white text-xs {{ $admin->role == 'admin' ? 'bg-blue-600' : 'bg-gray-600' }}">
                        {{ $admin->role }}
                    </span>
                </td>
                <td class="px-6 py-4">{{ $admin->created_at->format('Y-m-d') }}</td>
                <td class="px-6 py-4 flex gap-2">
                    <a href="{{ route('dashboard.admins.edit', $admin) }}" class="text-blue-600 hover:underline text-sm">تعديل</a>
                    @if($admin->id !== auth()->id())
                        <form action="{{ route('dashboard.admins.destroy', $admin) }}" method="POST" onsubmit="return confirm('هل أنت متأكد من الحذف؟');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-600 hover:underline text-sm">حذف</button>
                        </form>
                    @else
                        <span class="text-gray-400 text-xs">(حسابك)</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="mt-6">
    {{ $admins->links('pagination::tailwind') }}
</div>
@endsection