@props(['appointment'])

<x-card class="hover:shadow-md transition-shadow">
    <div class="flex justify-between items-start">
        <div class="flex-1">
            <div class="flex items-center gap-1.5 mb-2">
                @if($appointment->service && $appointment->service->color)
                    <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: {{ $appointment->service->color }}"></span>
                @endif
                <h3 class="font-semibold text-gray-900 dark:text-white">
                    @php
                        $minutes = $appointment->start_time->diffInMinutes($appointment->end_time);
                        $hours = floor($minutes / 60);
                        $mins = $minutes % 60;
                        $duration = $hours > 0 ? $hours . 'h' : '';
                        $duration .= $mins > 0 ? ($hours > 0 ? '' : '') . $mins . 'min' : '';
                    @endphp
                    {{ $appointment->service ? $appointment->service->name : 'Rendez-vous' }} ({{ $duration }})
                </h3>
            </div>
            <div class="text-sm text-gray-600 dark:text-gray-400">
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    <a href="{{ route('provider.clients.show', $appointment->client->uuid) }}" class="hover:text-blue-600">
                        {{ $appointment->client->full_name }}
                    </a>, {{ $appointment->start_time->format('d/m/Y') }} • {{ $appointment->start_time->format('H:i') }} - {{ $appointment->end_time->format('H:i') }}
                </div>
                
                <div class="flex gap-1.5 mt-2">
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 whitespace-nowrap">
                        @php
                            $ttc = $appointment->price_at_booking && $appointment->vat_rate ? $appointment->price_at_booking * (1 + $appointment->vat_rate / 100) : $appointment->price_at_booking;
                        @endphp
                        TTC {{ $ttc ? format_currency($ttc) . ' ' . $appointment->currency : '-' }}
                    </span>
                    @if($appointment->payments && $appointment->payments->count() > 0)
                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 whitespace-nowrap">
                            Facturé
                        </span>
                    @else
                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 whitespace-nowrap">
                            Non facturé
                        </span>
                    @endif
                </div>
            </div>
        </div>
        <div class="text-right">
            <div class="flex flex-col gap-2 items-end mb-2">
                @if($appointment->isInvoiced())
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
                        {{ $appointment->getStatusLabel() }}
                    </span>
                @else
                    <div x-data="{ open: false, currentStatus: '{{ $appointment->status }}', isPast: {{ $appointment->end_time->isPast() ? 'true' : 'false' }} }" class="relative" @click.stop>
                        <button @click="open = !open" type="button" class="px-2 py-1 text-xs font-medium rounded-full hover:opacity-80 mb-2"
                            :class="{
                                'bg-blue-100 text-blue-800': currentStatus === 'scheduled',
                                'bg-green-100 text-green-800': currentStatus === 'complete',
                                'bg-red-100 text-red-800': currentStatus === 'cancelled',
                                'bg-gray-100 text-gray-800': currentStatus === 'no_show'
                            }">
                            <span x-text="{
                                'scheduled': 'Programmé',
                                'in_progress': 'En cours',
                                'complete': 'Terminé',
                                'late': 'En retard',
                                'cancelled': 'Annulé'
                            }[currentStatus] || currentStatus"></span>
                            <svg class="inline w-3 h-3 ml-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                        </button>
                        <div x-show="open" @click.away="open = false" x-transition class="absolute right-0 mt-1 w-32 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50" style="display: none;">
                            <button x-show="!isPast && currentStatus !== 'scheduled'" @click="updateStatus('{{ $appointment->uuid }}', 'scheduled', $el.closest('[x-data]'))" type="button" class="block w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Programmé</button>
                            <button x-show="currentStatus !== 'complete'" @click="updateStatus('{{ $appointment->uuid }}', 'complete', $el.closest('[x-data]'))" type="button" class="block w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Terminé</button>
                            <button x-show="currentStatus !== 'cancelled'" @click="updateStatus('{{ $appointment->uuid }}', 'cancelled', $el.closest('[x-data]'))" type="button" class="block w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Annulé</button>
                        </div>
                    </div>
                @endif
            </div>
            <div class="flex gap-2 justify-end">
                <a href="{{ route('provider.appointments.edit', ['appointment_uuid' => $appointment->uuid, 'stepper' => 'vertical']) }}" class="inline-flex items-center justify-center w-10 h-10 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" title="Modifier">
                    <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"></path>
                    </svg>
                </a>
                <div x-data="{ open: false }" class="relative">
                    <button @click="open = !open" class="inline-flex items-center justify-center w-10 h-10 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                        <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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
                        </svg>
                    </button>
                    <div x-show="open" @click.away="open = false" x-cloak class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
                        <a href="{{ route('provider.clients.show', $appointment->client->uuid) }}" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg">
                            <svg class="w-4 h-4 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>
                            Voir client
                        </a>
                        @if($appointment->status === 'complete')
                            @if(!$appointment->payments || $appointment->payments->count() === 0)
                                <a href="{!! route('provider.payments.create', ['client_id' => $appointment->client->uuid, 'appointment_id' => $appointment->uuid]) !!}" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg">
                                    <svg class="w-4 h-4 mr-2" 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>
                                    Facturer
                                </a>
                            @else
                                <a href="{{ route('provider.invoices.show', ['invoice_uuid' => $appointment->payments->first()->uuid]) }}" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg">
                                    <svg class="w-4 h-4 mr-2" 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>
                                    Voir facture
                                </a>
                            @endif
                        @else
                            <button disabled class="w-full flex items-center px-4 py-2 text-sm text-gray-400 cursor-not-allowed rounded-t-lg" title="Rendez-vous non terminé">
                                <svg class="w-4 h-4 mr-2" 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>
                                Facturer
                            </button>
                        @endif
                        @if(!$appointment->payments || $appointment->payments->count() === 0)
                            <button onclick="window.dispatchEvent(new CustomEvent('show-delete-modal', { detail: { uuid: '{{ $appointment->uuid }}' } }));" class="w-full flex items-center px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-b-lg">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                Supprimer
                            </button>
                        @else
                            <button disabled class="w-full flex items-center px-4 py-2 text-sm text-gray-400 cursor-not-allowed rounded-b-lg" title="Impossible de supprimer un rendez-vous facturé">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                Supprimer
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-card>