@props(['appointment', 'showClient' => true])

<tr>
    <td class="px-6 py-4 whitespace-nowrap">
        <div class="text-sm text-gray-900 dark:text-white">{{ $appointment->start_time->format('d/m/Y') }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $appointment->start_time->format('H:i') }} - {{ $appointment->end_time->format('H:i') }} ({{ format_duration($appointment->start_time->diffInMinutes($appointment->end_time)) }})</div>
    </td>
    @if($showClient)
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
        <a href="{{ route('provider.clients.show', $appointment->client->uuid) }}" class="text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300">
            {{ $appointment->client ? $appointment->client->full_name : 'Sans client' }}
        </a>
    </td>
    @endif
    <td class="px-6 py-4 whitespace-nowrap">
        @if($appointment->service)
            <div class="flex items-center">
                <div class="w-4 h-4 rounded-full mr-3" style="background-color: {{ $appointment->service->color }}"></div>
                <span class="text-sm text-gray-900 dark:text-white">{{ $appointment->service->name }}</span>
            </div>
        @else
            <span class="text-sm text-gray-500 dark:text-gray-400">-</span>
        @endif
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
        @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"
                    :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 left-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
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
        @if($appointment->payments && $appointment->payments->count() > 0)
            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Oui</span>
        @else
            <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">Non</span>
        @endif
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
        @if($appointment->vat_rate !== null)
            <div class="text-xs text-gray-500">HT: {{ format_currency($appointment->price_at_booking) }} {{ $appointment->currency }}</div>
            <div class="font-bold">TTC: {{ format_currency($appointment->price_ttc) }} {{ $appointment->currency }}</div>
        @else
            {{ $appointment->price_at_booking ? format_currency($appointment->price_at_booking) . ' ' . $appointment->currency : '-' }}
        @endif
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
        <div class="flex gap-2">
            @if($appointment->status === 'complete')
                @if(!$appointment->payments || $appointment->payments->count() === 0)
                    <x-button href="{!! route('provider.payments.create', ['client_id' => $appointment->client->uuid, 'appointment_id' => $appointment->uuid]) !!}" variant="secondary" size="sm" class="min-w-[80px] text-center">
                        Facturer
                    </x-button>
                @else
                    @php
                        $invoiceParams = [];
                        if (!$showClient) {
                            $invoiceParams['from'] = 'client';
                            $invoiceParams['client_uuid'] = $appointment->client->uuid;
                        }
                    @endphp
                    <x-button href="{{ route('provider.invoices.show', array_merge(['invoice_uuid' => $appointment->payments->first()->uuid], $invoiceParams)) }}" variant="secondary" size="sm" class="min-w-[80px] text-center">
                        Facturé
                    </x-button>
                @endif
            @else
                <span class="min-w-[80px] px-3 py-1.5 text-sm bg-gray-100 text-gray-400 border border-gray-200 rounded-lg cursor-not-allowed dark:bg-gray-700 dark:text-gray-500 dark:border-gray-600 inline-flex items-center justify-center">
                    Facturer
                </span>
            @endif
            @php
                $editParams = ['appointment_uuid' => $appointment->uuid, 'stepper' => 'vertical'];
                if (!$showClient) {
                    $editParams['return_to'] = 'client';
                    $editParams['client_uuid'] = $appointment->client->uuid;
                }
            @endphp
            <x-button :href="route('provider.appointments.edit', $editParams)" variant="secondary" size="sm" 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>
            </x-button>
            @if(!$appointment->payments || $appointment->payments->count() === 0)
                <x-delete-confirm 
                    :action="route('provider.appointments.destroy', $appointment->uuid)" 
                    message="Êtes-vous sûr de vouloir supprimer ce rendez-vous ?"
                    button-text=""
                />
            @else
                <button disabled class="px-4 py-2 text-sm bg-gray-100 text-gray-400 border border-gray-200 rounded-lg cursor-not-allowed dark:bg-gray-700 dark:text-gray-500 dark:border-gray-600 inline-flex items-center justify-center" title="Impossible de supprimer un rendez-vous facturé">
                    <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="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"></path>
                    </svg>
                </button>
            @endif
        </div>
    </td>
</tr>