@props(['client' => null, 'action', 'method' => 'POST', 'submitText' => 'Créer le client', 'cancelUrl', 'redirectTo' => 'index', 'tags' => []])

@php
$isEdit = $client !== null;
$phoneValue = old('phone', $client?->phone ?? '');
if ($phoneValue && strlen($phoneValue) === 8) {
    $phoneValue = substr($phoneValue, 0, 2) . ' ' . substr($phoneValue, 2, 3) . ' ' . substr($phoneValue, 5, 3);
}
$checkDuplicateUrl = route('provider.api.clients.check-duplicate');
$clientUuid = $client?->uuid ?? '';
@endphp

<script>
function clientFormData() {
    return {
        duplicateCheckUrl: '{{ $checkDuplicateUrl }}',
        clientUuid: '{{ $clientUuid }}',
        clientType: '{{ old('type', $client?->type ?? 'particulier') }}',
        isVatSubject: {{ old('is_vat_subject', $client?->is_vat_subject ?? 'null') === 'null' ? 'null' : (old('is_vat_subject', $client?->is_vat_subject) ? 'true' : 'false') }},
        duplicates: [],
        checkingDuplicates: false,
        showDuplicateModal: false,
        duplicateCheckTimeout: null,
        init() {
            if (this.isVatSubject === null) {
                this.isVatSubject = this.clientType === 'professionnel';
            }
        },
        updateVatDefault() {
            if (this.clientType === 'particulier') {
                this.isVatSubject = false;
            } else {
                this.isVatSubject = true;
            }
        },
        checkDuplicates(name) {
            clearTimeout(this.duplicateCheckTimeout);
            if (name.length < 3) {
                this.duplicates = [];
                return;
            }
            this.duplicateCheckTimeout = setTimeout(() => {
                this.checkingDuplicates = true;
                const url = this.duplicateCheckUrl + '?name=' + encodeURIComponent(name) + '&type=' + this.clientType + (this.clientUuid ? '&exclude=' + this.clientUuid : '');
                fetch(url)
                    .then(r => r.json())
                    .then(data => {
                        this.duplicates = data.results || [];
                        this.checkingDuplicates = false;
                    });
            }, 600);
        },
        async submitForm(e) {
            e.preventDefault();
            const nameField = this.clientType === 'particulier' 
                ? document.querySelector('input[name="full_name"]')
                : document.querySelector('input[name="company_name"]');
            const name = nameField?.value || '';
            if (name.length >= 3) {
                const url = this.duplicateCheckUrl + '?name=' + encodeURIComponent(name) + '&type=' + this.clientType + (this.clientUuid ? '&exclude=' + this.clientUuid : '');
                const response = await fetch(url);
                const data = await response.json();
                this.duplicates = data.results || [];
            }
            if (this.duplicates.length > 0) {
                this.showDuplicateModal = true;
            } else {
                document.getElementById('client-form').submit();
            }
        },
        confirmCreate() {
            this.showDuplicateModal = false;
            this.duplicates = [];
            document.getElementById('client-form').submit();
        },
        formatPhone(event) {
            let value = event.target.value.replace(/\D/g, '');
            if (value.length > 2 && value.length <= 5) {
                value = value.slice(0, 2) + ' ' + value.slice(2);
            } else if (value.length > 5) {
                value = value.slice(0, 2) + ' ' + value.slice(2, 5) + ' ' + value.slice(5, 8);
            }
            event.target.value = value;
        }
    }
}
</script>

<div x-data="clientFormData()">
<form id="client-form" action="{{ $action }}" method="POST" class="space-y-4" @submit="submitForm($event)">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif
    <input type="hidden" name="redirect_to" value="{{ $redirectTo }}">
    
    <div class="space-y-4">
        {{-- Type de client --}}
        @if($isEdit)
            {{-- Affichage du type en mode édition (non modifiable) --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Type de client</label>
                <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
                    <div class="flex items-center">
                        @if($client->type === 'particulier')
                            <svg class="w-5 h-5 text-blue-600 mr-2" 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"></path>
                            </svg>
                            <span class="font-medium text-gray-900 dark:text-white">Particulier</span>
                        @else
                            <svg class="w-5 h-5 text-green-600 mr-2" 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-4m-5 0H3m2 0h4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                            <span class="font-medium text-gray-900 dark:text-white">Professionnel</span>
                        @endif
                    </div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">
                        Non modifiable après création
                    </div>
                </div>
                <input type="hidden" name="type" value="{{ $client->type }}">
            </div>
        @else
            {{-- Sélection du type en mode création --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Type de client</label>
                <div class="flex gap-4">
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="type" value="particulier" x-model="clientType" @change="updateVatDefault()" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Particulier</span>
                    </label>
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="type" value="professionnel" x-model="clientType" @change="updateVatDefault()" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Professionnel</span>
                    </label>
                </div>
            </div>
        @endif

        {{-- Champs Particulier --}}
        <div x-show="clientType === 'particulier'" class="space-y-4">
            <div>
                <x-input 
                    name="full_name" 
                    label="Nom complet" 
                    value="{{ old('full_name', $client?->first_name ? trim(($client?->first_name ?? '') . ' ' . ($client?->last_name ?? '')) : '') }}" 
                    ::required="clientType === 'particulier'"
                    required
                    placeholder="Nom et prénom du client"
                    error="{{ $errors->first('full_name') }}"
                    @input="checkDuplicates($event.target.value)"
                />
                <div x-show="duplicates.length > 0" x-cloak class="mt-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <p class="text-sm text-yellow-800 font-medium mb-2">⚠️ Un client avec un nom similaire existe déjà</p>
                    <div class="space-y-2">
                        <template x-for="dup in duplicates" :key="dup.uuid">
                            <div class="flex items-center justify-between text-sm bg-white p-2 rounded">
                                <div>
                                    <span class="inline-flex items-center gap-1">
                                        <svg x-show="dup.type === 'particulier'" class="w-3.5 h-3.5 text-blue-600" 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"></path></svg>
                                        <svg x-show="dup.type === 'professionnel'" class="w-3.5 h-3.5 text-green-600" 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-4m-5 0H3m2 0h4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                                        <span class="font-medium" x-text="dup.name"></span>
                                    </span>
                                    <span class="text-gray-500" x-text="' - ' + dup.phone"></span>
                                </div>
                                <a :href="'/laravel/public/provider/clients/' + dup.uuid" target="_blank" class="text-blue-600 hover:text-blue-800 text-xs underline">Voir</a>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-4">
                <div>
                    <div class="space-y-1">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Carte d'identité
                        </label>
                        <input 
                            type="number" 
                            name="tax_id" 
                            value="{{ old('tax_id', $client?->tax_id) }}" 
                            placeholder="01234567"
                            class="block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white {{ $errors->has('tax_id') ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : '' }}"
                        />
                    </div>
                </div>

                <div class="col-span-2">
                    <x-input 
                        type="date" 
                        name="birth_date" 
                        label="Date de naissance" 
                        value="{{ old('birth_date', $client?->birth_date?->format('Y-m-d')) }}"
                        error="{{ $errors->first('birth_date') }}"
                    />
                </div>

            </div>
            @if($errors->has('tax_id'))
                <p class="text-sm text-red-600 dark:text-red-400" style="margin-top: 0.25rem;">{!! $errors->first('tax_id') !!}</p>
            @endif
        </div>

        {{-- Champs Professionnel --}}
        <div x-show="clientType === 'professionnel'" style="display: none;" class="space-y-4">
            <div>
                <x-input 
                    name="company_name" 
                    label="Raison sociale" 
                    value="{{ old('company_name', $client?->company_name) }}" 
                    ::required="clientType === 'professionnel'"
                    required
                    placeholder="SARL Wellness Pro"
                    error="{{ $errors->first('company_name') }}"
                    @input="checkDuplicates($event.target.value)"
                />
                <div x-show="duplicates.length > 0" x-cloak class="mt-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <p class="text-sm text-yellow-800 font-medium mb-2">⚠️ Un client avec une raison sociale similaire existe déjà</p>
                    <div class="space-y-2">
                        <template x-for="dup in duplicates" :key="dup.uuid">
                            <div class="flex items-center justify-between text-sm bg-white p-2 rounded">
                                <div>
                                    <span class="inline-flex items-center gap-1">
                                        <svg x-show="dup.type === 'particulier'" class="w-3.5 h-3.5 text-blue-600" 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"></path></svg>
                                        <svg x-show="dup.type === 'professionnel'" class="w-3.5 h-3.5 text-green-600" 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-4m-5 0H3m2 0h4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                                        <span class="font-medium" x-text="dup.name"></span>
                                    </span>
                                    <span class="text-gray-500" x-text="' - ' + dup.phone"></span>
                                </div>
                                <a :href="'/laravel/public/provider/clients/' + dup.uuid" target="_blank" class="text-blue-600 hover:text-blue-800 text-xs underline">Voir</a>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-4">
                <div class="space-y-1">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Matricule fiscal
                        <span class="text-red-500">*</span>
                    </label>
                    <input 
                        name="matricule_fiscal" 
                        type="text"
                        value="{{ old('matricule_fiscal', $client?->matricule_fiscal) }}" 
                        placeholder="1234567/A/M/000"
                        ::required="clientType === 'professionnel'"
                        class="block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white {{ $errors->has('matricule_fiscal') ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : '' }}"
                    />
                </div>

                <div class="col-span-2">
                    <x-input 
                        name="rib" 
                        label="Interlocuteur" 
                        value="{{ old('rib', $client?->rib) }}" 
                        placeholder="Nom de votre contact"
                        error="{{ $errors->first('rib') }}"
                    />
                </div>
            </div>
            @if($errors->has('matricule_fiscal'))
                <p class="text-sm text-red-600 dark:text-red-400" style="margin-top: 0.25rem;">{!! $errors->first('matricule_fiscal') !!}</p>
            @endif
        </div>

        {{-- Statut TVA --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Statut TVA</label>
            <div class="flex gap-4">
                <label class="flex items-center cursor-pointer">
                    <input type="radio" name="is_vat_subject" value="0" 
                        x-bind:checked="isVatSubject === false"
                        @change="isVatSubject = false"
                        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Non assujetti à la TVA</span>
                </label>
                <label class="flex items-center cursor-pointer">
                    <input type="radio" name="is_vat_subject" value="1" 
                        x-bind:checked="isVatSubject === true"
                        x-bind:disabled="clientType === 'particulier'"
                        @change="isVatSubject = true"
                        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
                    <span class="ml-2 text-sm" x-bind:class="clientType === 'particulier' ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'">Assujetti à la TVA</span>
                </label>
            </div>
        </div>

        {{-- Champ Téléphone et Email partagés --}}
        <div class="grid grid-cols-3 gap-4">
            <div class="space-y-1">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    Téléphone
                    <span class="text-red-500">*</span>
                </label>
                <input 
                    type="tel" 
                    name="phone" 
                    value="{{ $phoneValue }}" 
                    placeholder="__ ___ ___"
                    maxlength="10"
                    x-init="formatPhone({target: $el})"
                    @input="formatPhone($event)"
                    required
                    class="block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white {{ $errors->has('phone') ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : '' }}"
                />
            </div>

            <div class="col-span-2">
                <x-input 
                    type="email" 
                    name="email" 
                    label="Email" 
                    value="{{ old('email', $client?->email) }}" 
                    placeholder="Optionnel mais recommandé"
                    error="{{ $errors->first('email') }}"
                />
            </div>
        </div>
        @if($errors->has('phone'))
            <p class="text-sm text-red-600 dark:text-red-400" style="margin-top: 0.25rem;">{!! $errors->first('phone') !!}</p>
        @endif

        {{-- Adresse partagée --}}
        <x-textarea 
            name="address" 
            label="Adresse" 
            rows="2" 
            placeholder="Adresse complète (rue, ville, code postal)"
            error="{{ $errors->first('address') }}"
        >{{ old('address', $client?->address) }}</x-textarea>

        {{-- Tags --}}
        <div id="tags-section" x-data="{
            showNewTagForm: false,
            tagError: '',
            newTag: { name: '', color: '#3B82F6' },
            tags: {{ json_encode($tags->map(fn($t) => ['id' => $t->id, 'name' => $t->name, 'color' => $t->color])) }},
            selectedTags: {{ json_encode(old('tags', $client?->tags->pluck('id')->toArray() ?? [])) }},
            createTag() {
                this.tagError = '';
                if (!this.newTag.name) {
                    this.tagError = 'Le nom est requis';
                    setTimeout(() => { this.tagError = ''; }, 3000);
                    return;
                }
                fetch('{{ route('provider.client-tags.store') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(this.newTag)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        this.tags.push(data.tag);
                        this.selectedTags.push(data.tag.id);
                        this.showNewTagForm = false;
                        this.newTag = { name: '', color: '#3B82F6' };
                    } else {
                        this.tagError = data.message || 'Erreur lors de la création';
                        setTimeout(() => { this.tagError = ''; }, 3000);
                    }
                })
                .catch(() => {
                    this.tagError = 'Erreur lors de la création';
                    setTimeout(() => { this.tagError = ''; }, 3000);
                });
            },
            toggleTag(tagId) {
                const index = this.selectedTags.indexOf(tagId);
                if (index > -1) {
                    this.selectedTags.splice(index, 1);
                } else {
                    this.selectedTags.push(tagId);
                }
            }
        }">
            <div class="mb-2">
                <div class="flex items-center gap-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Tags <span x-show="selectedTags.length > 0" x-text="'(' + selectedTags.length + (selectedTags.length > 1 ? ' sélectionnés' : ' sélectionné') + ')'"></span>
                    </label>
                    <button type="button" @click="showNewTagForm = !showNewTagForm" class="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400 flex items-center gap-1">
                        <svg 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        <span x-show="!showNewTagForm">Nouveau tag</span>
                        <span x-show="showNewTagForm" x-cloak>Annuler</span>
                    </button>
                </div>
            </div>
            <div x-show="showNewTagForm" x-cloak class="border border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-gray-50 dark:bg-gray-700 mb-3">
                <div x-show="tagError" x-cloak class="bg-red-50 border-l-4 border-red-500 p-2 rounded-r-lg mb-2">
                    <p class="text-xs text-red-800" x-text="tagError"></p>
                </div>
                <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-2">
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Nom *</label>
                        <input type="text" x-model="newTag.name" placeholder="Nom du tag" class="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Couleur *</label>
                        <input type="color" x-model="newTag.color" class="w-full h-9 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer">
                    </div>
                </div>
                <button type="button" @click="createTag()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-1.5 text-sm font-medium rounded-lg transition-colors">Créer et sélectionner</button>
            </div>
            <div class="flex flex-wrap gap-2">
                <template x-for="tag in tags" :key="tag.id">
                    <label class="inline-flex items-center px-2 py-1 rounded-lg border-2 cursor-pointer transition-all bg-white dark:bg-gray-800"
                        :class="selectedTags.includes(tag.id) ? 'border-blue-600' : 'border-gray-300 dark:border-gray-600'">
                        <input type="checkbox" name="tags[]" :value="tag.id" 
                            :checked="selectedTags.includes(tag.id)"
                            @change="toggleTag(tag.id)"
                            class="sr-only">
                        <span class="w-2.5 h-2.5 rounded-full mr-1.5" :style="`background-color: ${tag.color}`"></span>
                        <span class="text-xs font-medium text-gray-900 dark:text-white" x-text="tag.name"></span>
                    </label>
                </template>
                <p x-show="tags.length === 0" class="text-sm text-gray-500 dark:text-gray-400">Aucun tag disponible</p>
            </div>
        </div>
    </div>
    
</form>

{{-- Modale de confirmation doublon --}}
<div x-show="showDuplicateModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 py-4">
        <div @click="showDuplicateModal = false" class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
        <div class="inline-block overflow-hidden text-left align-bottom bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
            <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-yellow-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">Client similaire détecté</h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500 mb-3">Un ou plusieurs clients avec un nom similaire existent déjà :</p>
                            <div class="space-y-2">
                                <template x-for="dup in duplicates" :key="dup.uuid">
                                    <div class="flex items-center justify-between text-sm bg-gray-50 p-3 rounded">
                                        <div>
                                            <div class="inline-flex items-center gap-1.5 font-medium">
                                                <svg x-show="dup.type === 'particulier'" class="w-4 h-4 text-blue-600" 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"></path></svg>
                                                <svg x-show="dup.type === 'professionnel'" class="w-4 h-4 text-green-600" 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-4m-5 0H3m2 0h4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                                                <span x-text="dup.name"></span>
                                            </div>
                                            <div class="text-gray-500 text-xs" x-text="dup.phone"></div>
                                            <div x-show="dup.matricule_fiscal" class="text-gray-500 text-xs" x-text="'MF: ' + dup.matricule_fiscal"></div>
                                        </div>
                                        <a :href="'/laravel/public/provider/clients/' + dup.uuid" target="_blank" class="text-blue-600 hover:text-blue-800 text-xs underline">Voir le client</a>
                                    </div>
                                </template>
                            </div>
                            <p class="text-sm text-gray-500 mt-3">Voulez-vous créer ce client quand même ?</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-4 py-3 bg-gray-50 sm:px-6">
                <div class="flex gap-3">
                    <button @click="showDuplicateModal = false" class="flex-shrink-0 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                        Annuler
                    </button>
                    <button @click="confirmCreate()" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700">
                        Créer quand même
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>