@props(['client'])

<div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-default dark:border-gray-700 dark:bg-gray-800">
    <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
        <h3 class="text-sm font-semibold text-black dark:text-white">Informations</h3>
    </div>
    <div class="flex-1 p-3">
        <div class="grid grid-cols-2 gap-3">
            <div class="flex items-center gap-2 col-span-2">
                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                </svg>
                <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $client->type === 'professionnel' ? 'Professionnel' : 'Particulier' }}</span>
            </div>
            
            {{-- Statut TVA --}}
            @if($client->type === 'professionnel')
            <div class="flex items-center gap-2 col-span-2">
                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span class="text-sm text-gray-600 dark:text-gray-400">
                    {{ $client->is_vat_subject ? 'Assujetti à la TVA' : 'Non assujetti à la TVA' }}
                </span>
            </div>
            @endif
            @if($client->type === 'professionnel')
                <div class="flex items-center gap-2 col-span-2">
                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                    <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $client->company_name }}</span>
                </div>
                @if($client->matricule_fiscal && $client->is_vat_subject)
                    <div class="flex items-center gap-1 min-w-0" x-data="{ copied: false }">
                        <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <div class="relative min-w-0 group">
                            <span class="text-xs text-gray-600 dark:text-gray-400" title="{{ $client->matricule_fiscal }}">MF: {{ format_matricule_ellipsis($client->matricule_fiscal) }}</span>
                            <div class="absolute left-0 top-full mt-1 hidden group-hover:block z-10 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap">{{ $client->matricule_fiscal }}</div>
                        </div>
                        <button @click="navigator.clipboard.writeText('{{ $client->matricule_fiscal }}'); copied = true; setTimeout(() => copied = false, 2000)" class="flex-shrink-0 p-1 text-gray-400 hover:text-blue-600" :title="copied ? 'Copié !' : 'Copier le MF'">
                            <svg x-show="!copied" x-cloak class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                            </svg>
                            <svg x-show="copied" x-cloak class="w-3 h-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </button>
                    </div>
                @endif
                @if($client->vat_number)
                    <div class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                        </svg>
                        <span class="text-xs text-gray-600 dark:text-gray-400">TVA: {{ $client->vat_number }}</span>
                    </div>
                @endif
                @if($client->rib)
                    <div class="flex items-center gap-2 col-span-2">
                        <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                        </svg>
                        <span class="text-xs text-gray-600 dark:text-gray-400">RIB: {{ $client->rib }}</span>
                    </div>
                @endif
            @else
                @if($client->tax_id)
                    <div class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"/>
                        </svg>
                        <span class="text-sm text-gray-900 dark:text-white">CIN: {{ $client->tax_id }}</span>
                    </div>
                @endif
            @endif
            @if($client->phone)
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    <a href="tel:{{ $client->phone }}" class="text-sm text-gray-900 dark:text-white hover:text-primary truncate">{{ format_phone($client->phone) }}</a>
                </div>
            @endif
            @if($client->email)
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                    <a href="mailto:{{ $client->email }}" class="text-sm text-gray-900 dark:text-white hover:text-primary truncate">{{ $client->email }}</a>
                </div>
            @endif
            @if($client->type === 'particulier' && $client->birth_date)
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    <span class="text-sm text-gray-900 dark:text-white">{{ $client->birth_date->format('d/m/Y') }}</span>
                </div>
            @endif
            @if($client->type === 'particulier' && $client->gender && $client->gender !== 'unknown')
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    <span class="text-sm text-gray-900 dark:text-white">{{ $client->gender === 'male' ? 'Homme' : 'Femme' }}</span>
                </div>
            @endif
            @if($client->address)
                <div class="flex items-start gap-2 col-span-2">
                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    <span class="text-sm text-gray-900 dark:text-white">{{ $client->address }}</span>
                </div>
            @endif
        </div>
        <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-2">
                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                </svg>
                @if($client->tags && $client->tags->count() > 0)
                    <div class="flex flex-wrap gap-1.5">
                        @foreach($client->tags as $tag)
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" style="background-color: {{ $tag->color }}20; color: {{ $tag->color }}; border: 1px solid {{ $tag->color }}40;">
                                {{ $tag->name }}
                            </span>
                        @endforeach
                    </div>
                @else
                    <a href="{{ route('provider.clients.edit', $client->uuid) }}#tags-section" class="text-sm text-gray-500 dark:text-gray-400 hover:text-primary">
                        Ajouter des tags
                    </a>
                @endif
            </div>
        </div>
    </div>
    <div class="border-t border-gray-200 p-3 dark:border-gray-700">
        <a href="{{ route('provider.clients.edit', $client->uuid) }}" class="flex w-full items-center justify-center rounded-md border border-gray-300 p-2 text-xs font-medium hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700 dark:text-white">
            Modifier les coordonnées
            <svg class="ml-2 fill-current" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.4767 6.16664L6.00668 1.69664L7.18501 0.518311L13.6667 6.99998L7.18501 13.4816L6.00668 12.3033L10.4767 7.83331H0.333344V6.16664H10.4767Z" fill=""/>
            </svg>
        </a>
    </div>
</div>