<div class="w-full overflow-y-auto">
    <div class="w-full flex justify-between items-start">

        <livewire:components.section-header title="Clientes" description="Consulta todos los clientes de 3ipunt." />
        @can('admin.clients.create')
        <a href="{{ route('clients.create') }}"
            class="rounded bg-3ip px-4 py-2 text-white hover:bg-3ip-light flex items-center">
            <img src="{{ asset('vendor/blade-untitledui-icons/plus.svg') }}" alt="Logo"
                class="w-6 h-6 mr-2 svg-fill-white">
            Nuevo cliente
        </a>
        @endcan
    </div>
    <div class="flex flex-wrap">

        @if (session()->has('success'))
            <div class="mb-4 rounded bg-green-100 px-4 py-2 text-green-700 w-full">
                {{ session('success') }}
            </div>
        @endif

        {{-- Search --}}
        <div class="flex items-center justify-between w-full">
            <div class="w-1/3">
                <input type="text" wire:model.live.debounce.300ms="search" placeholder="Buscar"
                    class="w-full rounded-lg border-2 border-gray-200 px-4 py-2">
            </div>
        </div>

        {{-- Tabla --}}
        <div class="overflow-hidden bg-white w-full mt-4">
            <table class="w-full rounded-xl border-separate border">

                <thead class="text-xs text-gray-600">
                    <tr class="">
                        <th class="text-left border-b px-4 py-3">Nombre</th>
                        <th class="border-b px-4 py-3">Entornos</th>
                        <th class="border-b px-4 py-3">Nº Licencias / Activas</th>
                        <th class="text-left border-b px-4 py-3">Estado de las licencias</th>
                        <th class="border-b px-4 py-3"></th>
                    </tr>
                </thead>

                <tbody class="divide-y">
                    @forelse($clients as $client)
                        <tr class="">
                            <td class="px-4 py-3 {{ !$loop->last ? 'border-b' : '' }}">
                                {{ $client->name }}</td>

                            <td
                                class="px-4 py-3 text-center {{ !$loop->last ? 'border-b' : '' }}">
                                {{ $client->environments->count() }}
                            </td>

                            <td
                                class="px-4 py-3 text-center {{ !$loop->last ? 'border-b' : '' }}">
                                {{ $client->tokens->count() }} / {{ $client->tokens->where('active', true)->count() }}
                            </td>

                            <td class="px-4 py-3 {{ !$loop->last ? 'border-b' : '' }}">
                                @php
                                    $status = $client->getLicenseStatus();
                                @endphp

                                @if ($status === 'activo')
                                    <span
                                        class="inline-flex items-center gap-1 text-green-600 font-semibold bg-green-100 border border-green-200 rounded px-2 py-1">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/check-circle.svg') }}"
                                            alt="Activo" class="w-4 h-4 svg-fill-green">
                                        <span>Activo</span>
                                    </span>
                                @elseif ($status === 'vencen_pronto')
                                    <span
                                        class="inline-flex items-center gap-1 text-orange-600 font-semibold bg-orange-100 border border-orange-200 rounded px-2 py-1">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/alert-triangle.svg') }}"
                                            alt="Vencen pronto" class="w-4 h-4 svg-fill-orange">
                                        <span>Vencen pronto</span>
                                    </span>
                                @elseif ($status === 'vencida')
                                    <span
                                        class="inline-flex items-center gap-1 text-red-600 font-semibold bg-red-100 border border-red-200 rounded px-2 py-1">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/alert-circle.svg') }}"
                                            alt="Vencida" class="w-4 h-4 svg-fill-red">
                                        <span>Vencida</span>
                                    </span>
                                @else
                                    <span
                                        class="inline-flex items-center gap-1 text-gray-400 font-semibold bg-gray-100 border border-gray-200 rounded px-2 py-1">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/hourglass.svg') }}"
                                            alt="Desactivada" class="w-4 h-4 svg-fill-gray">
                                        <span>Desactivada</span>
                                    </span>
                                @endif
                            </td>

                            <td
                                class="px-4 py-3 text-right {{ !$loop->last ? 'border-b' : '' }}">
                                <a href="{{ route('clients.show', $client) }}"
                                    class="text-blue-600 hover:text-blue-800 group flex items-center justify-end">
                                    <img src="{{ asset('vendor/blade-untitledui-icons/arrow-narrow-right.svg') }}"
                                        alt="Editar" class="w-6 h-6 group-hover:svg-fill-orange">
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-3 text-center text-gray-500">
                                No hay clientes registrados.
                            </td>
                        </tr>
                    @endforelse
                    <tr>
                        <td colspan="7" class="px-4 py-3 text-center text-gray-500">
                            {{ $clients->links('livewire.components.table-pagination') }}
                        </td>
                    </tr>
                </tbody>

            </table>
        </div>

    </div>
</div>
