<div>
    {{-- Cabecera --}}
    <div class="w-full flex items-center">
        <a href="{{ route('clients.index') }}"
            class="flex rounded-lg bg-white border border-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-100 font-bold">
            <img src="{{ asset('vendor/blade-untitledui-icons/arrow-narrow-left.svg') }}" alt="Volver" class="w-6 h-6">
            <span class="ml-2">Volver</span>
        </a>
        <a class="flex rounded-lg bg-3ip border border-gray-200 px-4 py-2 text-white hover:bg-3ip-light font-bold ml-auto"
        href="{{ route('clients.edit', $client) }}">
            <img src="{{ asset('vendor/blade-untitledui-icons/pencil.svg') }}" alt="Editar cliente"
                class="w-6 h-6 svg-fill-white">
            <span class="ml-2">Editar cliente</span>
        </a>
        <a class="flex rounded-lg bg-3ip border border-gray-200 px-4 py-2 text-white hover:bg-3ip-light font-bold"
            href="{{ route('environments.create-from-client', $client) }}">
            <img src="{{ asset('vendor/blade-untitledui-icons/plus.svg') }}" alt="Nuevo entorno"
                class="w-6 h-6 svg-fill-white">
            <span class="ml-2">Nuevo entorno</span>
        </a>
    </div>

    {{-- Información del cliente --}}
    <div
        class="w-full flex flex-wrap items-center justify-between mt-8 rounded-lg bg-white border border-gray-200 px-8 py-4">
        <div class="w-full flex items-center justify-between">

            <h1 class="text-4xl font-bold">{{ $client->name }}</h1>
            <div class="mt-4 flex flex-col">
                @if ($this->uniqueProducts->count() > 0)
                    <div class="mb-2 font-bold">
                        Productos activos
                    </div>
                @endif
                <div class="flex flex-wrap items-center">
                    @forelse($this->uniqueProducts as $index => $product)
                        <div class="relative group"
                            style="z-index: {{ count($this->uniqueProducts) - $index }}; margin-left: {{ $index > 0 ? '-12px' : '0' }};">
                            <img src="{{ $product->image_url ?? asset('images/placeholder.png') }}"
                                alt="{{ $product->name }}"
                                class="w-12 h-12 bg-white rounded-full object-contain border-2 border-gray-200 hover:border-3ip transition-all cursor-pointer"
                                title="{{ $product->name }}">
                        </div>
                    @empty
                        <p class="text-gray-500 text-sm">No hay productos asociados</p>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="w-full flex items-center mt-4">
            <div class="flex">
                <div class="w-12 h-12 border rounded flex items-center justify-center">
                    <img src="{{ asset('vendor/blade-untitledui-icons/check-done-02.svg') }}" alt="Licencias"
                        class="w-8 h-8">
                </div>
                <div class="flex-grow ml-4">
                    <h3 class="text-lg font-bold">Licencias</h3>
                    <p class="text-gray-500 text-sm">
                        {{ $client->tokens->count() }}
                    </p>
                </div>
            </div>
            <div class="flex ml-12">
                <div class="w-12 h-12 border rounded flex items-center justify-center">
                    <img src="{{ asset('vendor/blade-untitledui-icons/server-04.svg') }}" alt="Licencias"
                        class="w-8 h-8">
                </div>
                <div class="flex-grow ml-4">
                    <h3 class="text-lg font-bold">Entornos</h3>
                    <p class="text-gray-500 text-sm">
                        {{ $client->environments->count() }}
                    </p>
                </div>
            </div>
            <div class="flex ml-12">
                <div class="w-12 h-12 border rounded flex items-center justify-center">
                    <img src="{{ asset('vendor/blade-untitledui-icons/mail-02.svg') }}" alt="Licencias"
                        class="w-8 h-8">
                </div>
                <div class="flex-grow ml-4">
                    @php
                        $contactsCount = count($client->contacts ?? []);
                    @endphp
                    @if($contactsCount > 0)
                        <button wire:click="openContactsModal" class="text-lg font-bold hover:text-blue-600 transition-colors cursor-pointer">Contacto</button>
                    @else
                        <button class="text-lg font-bold cursor-not-allowed">Contacto</button>
                    @endif
                    <p class="text-gray-500 text-sm">
                        {{ $contactsCount }} contacto(s)
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Buscador de entornos --}}
    <div class="w-full flex flex-wrap items-center justify-between mt-8">
        <div class="w-80">
            <input type="text" wire:model.live.debounce.300ms="search" class="w-full rounded-lg border border-gray-200 px-4 py-2"
                placeholder="Buscar entorno por nombre o dominio">
        </div>
        <div>
            <select wire:model.live="typeFilter" name="type" id="type" class="w-full rounded-lg border border-gray-200 px-4 py-2">
                <option value="all">Todos</option>
                <option value="local">Local</option>
                <option value="develop">Desarrollo</option>
                <option value="pre">PreProducción</option>
                <option value="pro">Producción</option>
            </select>
        </div>
    </div>

    {{-- Listado de entornos --}}
    <div class="environment-card-list">
        @foreach ($this->filteredEnvironments as $environment)
            <livewire:environments.components.environment-card :environment="$environment" :client="$client" key="{{ $environment->id }}" />
        @endforeach
    </div>
</div>
</div>
