<div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">

        {{-- Filtros --}}
        <div class="p-4 border-b border-gray-100 flex flex-col md:flex-row gap-3">
            <div class="flex-1 relative">
                <svg class="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                <input
                    type="search"
                    wire:model.live.debounce.300ms="search"
                    placeholder="Buscar por nombre, email o NIT…"
                    class="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500"
                >
            </div>
            <select wire:model.live="status" class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
                <option value="">Todos los estados</option>
                @foreach ($statuses as $s)
                    <option value="{{ $s->value }}">{{ $s->label() }}</option>
                @endforeach
            </select>
            <select wire:model.live="planId" class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500">
                <option value="">Todos los planes</option>
                @foreach ($plans as $p)
                    <option value="{{ $p->id }}">{{ $p->name }}</option>
                @endforeach
            </select>
        </div>

        {{-- Tabla --}}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
                    <tr>
                        <th class="px-4 py-3 text-left font-semibold">Empresa</th>
                        <th class="px-4 py-3 text-left font-semibold">Plan</th>
                        <th class="px-4 py-3 text-left font-semibold">Estado</th>
                        <th class="px-4 py-3 text-left font-semibold">Vence</th>
                        <th class="px-4 py-3 text-left font-semibold">Creada</th>
                        <th class="px-4 py-3 text-right font-semibold">Acciones</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($companies as $company)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-lg flex items-center justify-center text-white font-semibold text-sm" style="background: {{ $company->primary_color }};">
                                        {{ strtoupper(substr($company->name, 0, 1)) }}
                                    </div>
                                    <div class="min-w-0">
                                        <p class="font-semibold text-gray-900 truncate">{{ $company->name }}</p>
                                        <p class="text-xs text-gray-500 truncate">{{ $company->email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">{{ $company->plan?->name ?? '—' }}</td>
                            <td class="px-4 py-3">
                                <x-badge :color="$company->status->color()">{{ $company->status->label() }}</x-badge>
                            </td>
                            <td class="px-4 py-3 text-gray-600">{{ $company->subscription_ends_at?->format('d/m/Y') ?? '—' }}</td>
                            <td class="px-4 py-3 text-gray-500 text-xs">{{ $company->created_at->diffForHumans() }}</td>
                            <td class="px-4 py-3 text-right">
                                <div class="inline-flex items-center gap-1">
                                    <a href="{{ $company->publicUrl() }}" target="_blank" class="p-1.5 rounded hover:bg-gray-100 text-gray-500" title="Ver pública">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                    </a>
                                    <a href="{{ route('superadmin.companies.edit', $company->uuid) }}" class="p-1.5 rounded hover:bg-gray-100 text-gray-500" title="Editar">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                                    </a>
                                    <button wire:click="toggleSuspend({{ $company->id }})"
                                            wire:confirm="¿Cambiar estado de suspensión de {{ $company->name }}?"
                                            class="p-1.5 rounded hover:bg-amber-50 text-amber-600" title="Suspender / Activar">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6"><x-empty-state title="No hay empresas" message="Aún no hay empresas registradas en el SaaS." /></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($companies->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">
                {{ $companies->links() }}
            </div>
        @endif
    </div>
</div>
