{{-- Vue Gantt pour une heure avec gestion des chevauchements --}}
@props(['hour', 'layout', 'selectedDate', 'overlapMode' => 'allowed_with_warning', 'allAppointments' => collect()])

@php
    $timeLabel = sprintf('%dh', $hour);
    $tracks = isset($layout[$hour]) ? $layout[$hour] : [];
    $hasAppointments = count($tracks) > 0;
    
    $statusColors = [
        'scheduled' => 'text-blue-600',
        'in_progress' => 'text-orange-600',
        'complete' => 'text-green-600',
        'cancelled' => 'text-red-600',
        'late' => 'text-red-600',
    ];
@endphp

<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 border-l-4 {{ $hasAppointments ? 'border-l-primary' : 'border-l-gray-300 dark:border-l-gray-600' }} rounded-lg shadow-sm">
    <div class="p-3">
        <div class="flex items-start gap-2">
            <div class="text-base font-semibold text-gray-900 dark:text-white w-12 flex items-center justify-center flex-shrink-0 pt-1">
                {{ $timeLabel }}
            </div>
            
            <div class="flex-1 relative">
                {{-- Grille de fond avec créneaux de 15min cliquables (toujours présente) --}}
                <div class="h-10 flex z-10">
                    @foreach([0, 15, 30, 45] as $min)
                        @php
                            $timeSlot = sprintf('%02d:%02d', $hour, $min);
                            $slotStart = $selectedDate->copy()->setTime($hour, $min, 0);
                            $slotEnd = $slotStart->copy()->addMinutes(15);
                            
                            $isBlocked = false;
                            if ($overlapMode !== 'allowed' and $overlapMode !== 'allowed_with_warning') {
                                foreach ($allAppointments as $apt) {
                                    $aptStart = \Carbon\Carbon::parse($apt->start_time);
                                    $aptEnd = \Carbon\Carbon::parse($apt->end_time);
                                    
                                    if ($slotStart->lessThan($aptEnd) && $slotEnd->greaterThan($aptStart)) {
                                        $isBlocked = true;
                                        break;
                                    }
                                }
                            }
                        @endphp
                        @if($isBlocked)
                            <div class="flex-1 {{ $min > 0 ? 'border-l border-gray-200 dark:border-gray-700' : '' }} bg-gray-300 dark:bg-gray-700 cursor-not-allowed flex items-center justify-center opacity-50">
                                <span class="text-xs text-gray-500 font-medium">{{ $hour }}h{{ str_pad($min, 2, '0', STR_PAD_LEFT) }}</span>
                            </div>
                        @else
                            <a href="{{ route('provider.appointments.create', ['date' => $selectedDate->format('Y-m-d'), 'time' => $timeSlot]) }}"
                               class="flex-1 {{ $min > 0 ? 'border-l border-gray-200 dark:border-gray-700' : '' }} bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors flex items-center justify-center">
                                <span class="text-xs text-blue-600 dark:text-blue-400 font-medium">{{ $hour }}h{{ str_pad($min, 2, '0', STR_PAD_LEFT) }}</span>
                            </a>
                        @endif
                    @endforeach
                </div>
                
                @if($hasAppointments)
                    {{-- Barres de RDV empilées --}}
                    <div class="relative z-[5]" style="height: {{ count($tracks) * 48 }}px; margin-top: 15px;">
                        @foreach($tracks as $item)
                            <div class="absolute" style="top: {{ $item['track_index'] * 48 }}px; left: {{ $item['left'] }}%; width: {{ $item['width'] }}%; height: 44px;">
                                <a href="{{ route('provider.appointments.edit', $item['data']['uuid']) }}" 
                                   id="apt-{{ $item['data']['uuid'] }}"
                                   data-client-uuid="{{ $item['data']['client_uuid'] }}"
                                   data-is-billed="{{ $item['data']['is_billed'] ? 'true' : 'false' }}"
                                   data-invoice-uuid="{{ $item['data']['invoice_uuid'] }}"
                                   data-status="{{ $item['data']['status'] }}"
                                   data-start-time="{{ $item['data']['full_start']->format('Y-m-d H:i:s') }}"
                                   class="block h-full px-2 py-1.5 cursor-pointer hover:shadow-lg transition-all relative overflow-hidden group shadow-sm {{ request('highlight') == $item['data']['uuid'] ? 'ring-2 ring-yellow-400 animate-pulse' : '' }}"
                                   style="background-color: {{ $item['data']['bg_color'] ?? '#E3F2FD' }}; border-top: 2px solid rgba(0,0,0,0.6); border-bottom: 2px solid rgba(0,0,0,0.6); {{ $item['data']['is_first_segment'] ? 'border-left: 2px solid rgba(0,0,0,0.6);' : 'border-left: 2px dashed rgba(0,0,0,0.4);' }} {{ $item['data']['is_last_segment'] ? 'border-right: 2px solid rgba(0,0,0,0.6);' : 'border-right: 2px dashed rgba(0,0,0,0.4);' }}">
                                    
                                    {{-- Indicateur facturé/non facturé (seulement sur le dernier segment) --}}
                                    @if($item['data']['is_last_segment'])
                                        <div class="absolute top-0 right-0 w-0 h-0 border-t-[10px] border-l-[10px] border-l-transparent rounded-tr {{ $item['data']['is_billed'] ? 'border-t-green-400' : 'border-t-red-300' }}"></div>
                                    @endif
                                    
                                    {{-- Contenu --}}
                                    <div class="flex items-center h-full text-gray-800 text-xs gap-1.5">
                                        {{-- Icône statut + heure début --}}
                                        @if($item['data']['is_first_segment'])
                                            @if($item['data']['status'] === 'complete')
                                                <svg class="w-3 h-3 flex-shrink-0 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                                            @elseif($item['data']['status'] === 'cancelled')
                                                <svg class="w-3 h-3 flex-shrink-0 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                                            @else
                                                <svg class="w-3 h-3 flex-shrink-0 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                            @endif
                                            <span class="font-medium">{{ $item['data']['full_start']->format('H:i') }}</span>
                                        @else
                                            <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
                                            <span class="font-medium italic opacity-75">(suite)</span>
                                            <span class="w-2 h-2 rounded-full flex-shrink-0 ml-1" style="background-color: {{ $item['data']['service_color'] ?? '#3b82f6' }}"></span>
                                            <span class="truncate font-medium">{{ $item['data']['service'] }}</span>
                                            <span class="text-[10px] text-gray-500">{{ floor($item['data']['duration'] / 60) > 0 ? floor($item['data']['duration'] / 60) . 'h' : '' }}{{ $item['data']['duration'] % 60 > 0 ? ($item['data']['duration'] % 60) : '' }}</span>
                                            <span class="text-[10px] text-gray-500 font-bold">#{{ $item['data']['number'] }}</span>
                                        @endif
                                        
                                        {{-- Service + Client --}}
                                        @if($item['data']['is_first_segment'])
                                            <div class="flex flex-col flex-1 min-w-0">
                                                <div class="flex items-center gap-1">
                                                    <span class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: {{ $item['data']['service_color'] ?? '#3b82f6' }}"></span>
                                                    <span class="truncate font-medium">{{ $item['data']['service'] }}</span>
                                                    <span class="text-[10px] text-gray-500">{{ floor($item['data']['duration'] / 60) > 0 ? floor($item['data']['duration'] / 60) . 'h' : '' }}{{ $item['data']['duration'] % 60 > 0 ? ($item['data']['duration'] % 60) : '' }}</span>
                                                    <span class="text-[10px] text-gray-500 font-bold">#{{ $item['data']['number'] }}</span>
                                                </div>
                                                <div class="text-[10px] text-gray-600 truncate pl-3">{{ $item['data']['title'] }}</div>
                                            </div>
                                        @endif
                                        
                                        {{-- Heure de fin --}}
                                        @if($item['data']['is_last_segment'])
                                            @if(!$item['data']['is_first_segment'])
                                                @if($item['data']['status'] === 'complete')
                                                    <svg class="w-3 h-3 flex-shrink-0 text-green-600 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                                                @elseif($item['data']['status'] === 'cancelled')
                                                    <svg class="w-3 h-3 flex-shrink-0 text-red-600 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                                                @else
                                                    <svg class="w-3 h-3 flex-shrink-0 text-blue-600 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                                @endif
                                            @endif
                                            <span class="font-medium">{{ $item['data']['full_end']->format('H:i') }}</span>
                                        @endif
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>