@extends('layouts.admin')

@section('title', 'Domaines')
@section('header', 'Domaines')

@section('content')
<div class="rounded-lg bg-white shadow overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">ID</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Nom</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Queue</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Webhook</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Messages</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Statut</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 bg-white">
            @forelse($domains as $domain)
                <tr class="hover:bg-gray-50">
                    <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">{{ $domain->id }}</td>
                    <td class="whitespace-nowrap px-6 py-4">
                        <div class="flex items-center">
                            <div class="h-10 w-10 flex-shrink-0">
                                <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
                                    <i class="fas fa-globe text-indigo-600"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">{{ $domain->name }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
                        <code class="rounded bg-gray-100 px-2 py-1 text-xs">{{ $domain->slug }}</code>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        {{ Str::limit($domain->webhook_url ?? 'N/A', 40) }}
                    </td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
                        <span class="inline-flex items-center rounded-full bg-indigo-100 px-3 py-1 text-xs font-medium text-indigo-700">
                            {{ number_format($domain->messages_count ?? 0) }}
                        </span>
                    </td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm">
                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
                            {{ $domain->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $domain->is_active ? 'Actif' : 'Inactif' }}
                        </span>
                    </td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm">
                        <a href="{{ route('dashboard.domains.show', $domain->id) }}" class="text-indigo-600 hover:text-indigo-900">
                            <i class="fas fa-eye"></i> Voir
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="px-6 py-4 text-center text-sm text-gray-500">Aucun domaine trouvé</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <!-- Pagination -->
    @if($domains->hasPages())
        <div class="border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
            {{ $domains->links() }}
        </div>
    @endif
</div>
@endsection