@props(['notes', 'clientUuid'])

<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">Notes</h3>
    </div>
    <div class="flex-1 p-3">
        <form action="{{ route('provider.clients.notes.store', $clientUuid) }}" method="POST" class="mb-4">
            @csrf
            <div class="flex gap-2">
                <input type="text" name="content" required placeholder="Ajouter une note..." 
                       class="flex-1 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm" />
                <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 text-sm whitespace-nowrap">
                    Ajouter
                </button>
            </div>
        </form>

        @if($notes->count() > 0)
            <div class="space-y-3">
                @foreach($notes as $note)
                    <div class="border-l-4 border-primary pl-3 py-1.5" x-data="{ editing: false }">
                        <div x-show="!editing" class="flex justify-between items-start">
                            <div class="flex-1">
                                <p class="text-sm text-gray-900 dark:text-white">{{ $note->content }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    {{ $note->created_at->format('d/m/Y H:i') }}
                                </p>
                            </div>
                            <div class="flex gap-2">
                                <button @click="editing = true" class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
                                    <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"/>
                                    </svg>
                                </button>
                                <x-delete-confirm 
                                    :action="route('provider.clients.notes.destroy', ['client_uuid' => $clientUuid, 'note' => $note->id])" 
                                    message="Supprimer cette note ?"
                                    button-text=""
                                    button-variant="danger"
                                />
                            </div>
                        </div>
                        <form x-show="editing" action="{{ route('provider.clients.notes.update', ['client_uuid' => $clientUuid, 'note' => $note->id]) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="flex gap-2 items-center">
                                <input type="text" name="content" value="{{ $note->content }}" required class="flex-1 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm" />
                                <button type="submit" class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300" title="Enregistrer">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                </button>
                                <button type="button" @click="editing = false" class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300" title="Annuler">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </form>
                    </div>
                @endforeach
            </div>
            <div class="mt-3">{{ $notes->links() }}</div>
        @else
            <div class="text-center py-8">
                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Aucune note</p>
                <p class="text-xs text-gray-400 dark:text-gray-500">Ajoutez votre première note ci-dessus</p>
            </div>
        @endif
    </div>
</div>