@extends('layouts.provider')

@php $pageWidth = 'narrow'; @endphp

@section('title', 'Calendrier')
@section('page-title', 'Calendrier')
@section('footer-class', 'footer-spacing')

@section('content')
<div class="space-y-6">
    <x-card>
        <div class="max-w-2xl mx-auto">
                <!-- Header -->
                <div class="text-center py-6">
                    <div class="flex items-center justify-center gap-4 mb-4">
                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Calendrier</h1>
                        <a href="{{ route('provider.calendar-settings.index') }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </a>
                        <a href="{{ route('provider.appointments.index') }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
                            <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="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
                        <a href="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => 'day']) }}" 
                           class="inline-flex items-center rounded-md px-4 py-2 text-sm font-medium transition-colors {{ $view === 'day' ? 'bg-white text-gray-900 shadow-sm dark:bg-white/10 dark:text-white' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' }}">
                            Jour
                        </a>
                        <a href="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => 'month']) }}" 
                           class="inline-flex items-center rounded-md px-4 py-2 text-sm font-medium transition-colors {{ $view === 'month' ? 'bg-white text-gray-900 shadow-sm dark:bg-white/10 dark:text-white' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' }}">
                            Mois
                        </a>
                        <a href="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => 'year']) }}" 
                           class="inline-flex items-center rounded-md px-4 py-2 text-sm font-medium transition-colors {{ $view === 'year' ? 'bg-white text-gray-900 shadow-sm dark:bg-white/10 dark:text-white' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' }}">
                            Année
                        </a>
                    </div>
                </div>

    @php
        $months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
        $selectedDate = now()->parse($date);
    @endphp
    
    @if($view === 'month')
        <!-- Month Navigation -->
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm p-4 mb-4">
            <div class="flex items-center justify-between">
                <a href="{{ route('provider.appointments.calendar', ['date' => now()->parse($date)->startOfMonth()->subMonth()->format('Y-m-d'), 'view' => 'month']) }}" 
                   class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                    <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                </a>
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                    {{ $months[(int)now()->parse($date)->format('n') - 1] }} {{ now()->parse($date)->format('Y') }}
                </h2>
                <a href="{{ route('provider.appointments.calendar', ['date' => now()->parse($date)->startOfMonth()->addMonth()->format('Y-m-d'), 'view' => 'month']) }}" 
                   class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                    <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    @elseif($view === 'year')
        <!-- Year Navigation -->
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm p-4 mb-4">
            <div class="flex items-center gap-4">
                <a href="{{ route('provider.appointments.calendar', ['date' => now()->parse($date)->subYear()->format('Y-m-d'), 'view' => 'year']) }}" 
                   class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg">
                    <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                </a>
                <select onchange="window.location.href=this.value" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500">
                    @php
                        $currentYear = (int)now()->parse($date)->format('Y');
                        $firstAppt = auth()->user()->provider->appointments()->orderBy('start_time')->first();
                        $startYear = $firstAppt ? (int)$firstAppt->start_time->format('Y') : $currentYear;
                        $endYear = $currentYear + 2;
                    @endphp
                    @for($y = $startYear; $y <= $endYear; $y++)
                        @php
                            $yearDate = now()->parse($date)->year($y)->startOfYear();
                        @endphp
                        <option value="{{ route('provider.appointments.calendar', ['date' => $yearDate->format('Y-m-d'), 'view' => 'year']) }}" {{ $y === $currentYear ? 'selected' : '' }}>
                            {{ $y }}
                        </option>
                    @endfor
                </select>
                <a href="{{ route('provider.appointments.calendar', ['date' => now()->parse($date)->addYear()->format('Y-m-d'), 'view' => 'year']) }}" 
                   class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg">
                    <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    @else
        <!-- Week Calendar -->
        <div id="weekNav" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm p-2 mb-4 sticky top-[62px] z-20 transition-all duration-300" data-original-rounded="true">
            <div class="flex items-center justify-between mb-2">
                    <a href="{{ route('provider.appointments.calendar', ['date' => now()->parse($date)->startOfWeek()->subWeek()->endOfWeek()->format('Y-m-d')]) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" 
                   class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                </a>
                <h2 class="text-sm font-semibold text-gray-900 dark:text-white">
                    @php
                        $monthIndex = (int)now()->parse($date)->format('n') - 1;
                        $weekNumber = $selectedDate->week;
                    @endphp
                    {{ $months[$monthIndex] }} {{ now()->parse($date)->format('Y') }} <span class="text-xs text-gray-500 dark:text-gray-400 font-normal">· Semaine {{ $weekNumber }}</span>
                </h2>
                <a href="{{ route('provider.appointments.calendar', ['date' => now()->parse($date)->startOfWeek()->addWeek()->format('Y-m-d')]) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" 
                   class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>

            @php
                $startOfWeek = $selectedDate->copy()->startOfWeek();
                $daysOfWeek = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
            @endphp

            <!-- 7 Days Week View -->
            <div class="grid grid-cols-7 gap-1.5">
                @for($i = 0; $i < 7; $i++)
                    @php
                        $day = $startOfWeek->copy()->addDays($i);
                        $isSelected = $day->format('Y-m-d') === $selectedDate->format('Y-m-d');
                        $isToday = $day->isToday();
                        $dayAppointments = $appointments->filter(fn($apt) => $apt->start_time->format('Y-m-d') === $day->format('Y-m-d'));
                        $hasAppointments = $dayAppointments->count() > 0;
                    @endphp
                    <a href="{{ route('provider.appointments.calendar', ['date' => $day->format('Y-m-d')]) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" 
                       class="flex flex-col items-center py-2 rounded-lg transition-all relative
                              {{ $isSelected ? 'bg-primary text-white shadow-sm' : 'hover:bg-gray-100 dark:hover:bg-gray-700' }}">
                        @if($isToday && !$isSelected)
                            <span class="absolute top-0.5 w-1.5 h-1.5 bg-blue-600 rounded-full"></span>
                        @endif
                        <span class="text-xs font-medium {{ $isSelected ? 'text-white' : 'text-gray-500 dark:text-gray-400' }}">
                            {{ $daysOfWeek[$i] }}
                        </span>
                        <span class="text-base font-semibold {{ $isSelected ? 'text-white' : 'text-gray-900 dark:text-white' }}">
                            {{ $day->format('d') }}
                        </span>
                        @if($hasAppointments && !$isSelected)
                            <span class="w-1 h-1 bg-blue-600 rounded-full mt-0.5"></span>
                        @endif
                    </a>
                @endfor
            </div>
            @if($view === 'day' && $selectedDate->format('Y-m-d') !== now()->format('Y-m-d'))
            <div class="mt-1.5">
                <a href="{{ route('provider.appointments.calendar', ['date' => now()->format('Y-m-d'), 'view' => $view]) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" class="text-xs text-gray-600 dark:text-gray-400 hover:text-primary underline transition-colors">
                    @php
                        $today = now();
                        $daysLong = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
                        $dayOfWeek = $daysLong[$today->dayOfWeek];
                        $monthIndex = (int)$today->format('n') - 1;
                    @endphp
                    Aujourd'hui, {{ $dayOfWeek }}, {{ $today->format('d') }} {{ $months[$monthIndex] }} {{ $today->format('Y') }}
                </a>
            </div>
            @endif
        </div>
    @endif

    <!-- Selected Date -->
    @if($view === 'day')
        <div class="text-center mb-3">
            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">
                @php
                    $daysLong = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
                    $dayOfWeek = $daysLong[$selectedDate->dayOfWeek];
                    $monthIndex = (int)$selectedDate->format('n') - 1;
                @endphp
                {{ $dayOfWeek }}, {{ $selectedDate->format('d') }} {{ $months[$monthIndex] }} {{ $selectedDate->format('Y') }}
            </h3>
        </div>
        
        <!-- Filtre par statut -->
        <div class="mb-4">
            <!-- Desktop: Boutons -->
            <div class="hidden md:flex items-center justify-center gap-2 flex-wrap">
                @php
                    // Compter directement depuis la base pour le jour sélectionné
                    $provider = auth()->user()->provider;
                    $startOfDay = $selectedDate->copy()->startOfDay();
                    $endOfDay = $selectedDate->copy()->endOfDay();
                    
                    $totalCount = $provider->appointments()
                        ->whereBetween('start_time', [$startOfDay, $endOfDay])
                        ->count();
                    
                    $scheduledCount = $provider->appointments()
                        ->whereBetween('start_time', [$startOfDay, $endOfDay])
                        ->where('status', 'scheduled')
                        ->count();
                    
                    $completeCount = $provider->appointments()
                        ->whereBetween('start_time', [$startOfDay, $endOfDay])
                        ->where('status', 'complete')
                        ->count();
                    
                    $cancelledCount = $provider->appointments()
                        ->whereBetween('start_time', [$startOfDay, $endOfDay])
                        ->where('status', 'cancelled')
                        ->count();
                @endphp
                <a href="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => $view]) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" 
                   class="px-3 py-1 text-xs font-medium rounded-full transition-colors {{ !request('status') ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                    Tous ({{ $totalCount }})
                </a>
                <a href="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => $view, 'status' => 'scheduled']) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" 
                   class="flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full transition-colors {{ request('status') === 'scheduled' ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                    <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <span>Programmé ({{ $scheduledCount }})</span>
                </a>
                <a href="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => $view, 'status' => 'complete']) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" 
                   class="flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full transition-colors {{ request('status') === 'complete' ? 'bg-green-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                    <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.5" d="M5 13l4 4L19 7"/></svg>
                    <span>Terminé ({{ $completeCount }})</span>
                </a>
                <a href="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => $view, 'status' => 'cancelled']) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" 
                   class="flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-full transition-colors {{ request('status') === 'cancelled' ? 'bg-red-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                    <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.5" d="M6 18L18 6M6 6l12 12"/></svg>
                    <span>Annulé ({{ $cancelledCount }})</span>
                </a>
            </div>
            
            <!-- Mobile: Liste déroulante -->
            <div class="md:hidden">
                <select onchange="window.location.href=this.value" class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => $view]) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" {{ !request('status') ? 'selected' : '' }}>
                        Tous ({{ $totalCount }})
                    </option>
                    <option value="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => $view, 'status' => 'scheduled']) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" {{ request('status') === 'scheduled' ? 'selected' : '' }}>
                        Programmé ({{ $scheduledCount }})
                    </option>
                    <option value="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => $view, 'status' => 'complete']) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" {{ request('status') === 'complete' ? 'selected' : '' }}>
                        Terminé ({{ $completeCount }})
                    </option>
                    <option value="{{ route('provider.appointments.calendar', ['date' => $date, 'view' => $view, 'status' => 'cancelled']) }}{{ request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '' }}" {{ request('status') === 'cancelled' ? 'selected' : '' }}>
                        Annulé ({{ $cancelledCount }})
                    </option>
                </select>
            </div>
        </div>
    @endif

    @if($view === 'year')
        <!-- Year View - 12 Months Grid -->
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
            @for($m = 1; $m <= 12; $m++)
                @php
                    $monthDate = now()->parse($date)->month($m)->startOfMonth();
                    $monthEnd = $monthDate->copy()->endOfMonth();
                    $monthAppts = $appointments->filter(function($apt) use ($monthDate, $monthEnd) {
                        return $apt->start_time->between($monthDate, $monthEnd);
                    });
                    $total = $monthAppts->count();
                @endphp
                <a href="{{ route('provider.appointments.calendar', ['date' => $monthDate->format('Y-m-d'), 'view' => 'month']) }}"
                   class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-4 hover:shadow-md hover:border-primary transition-all">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">{{ $months[$m - 1] }}</h3>
                    <div class="text-2xl font-bold text-blue-600">{{ $total }} RDV</div>
                </a>
            @endfor
        </div>
    @elseif($view === 'month')
        <!-- Monthly Calendar View -->
        @php
            $currentMonth = now()->parse($date);
            $startOfMonth = $currentMonth->copy()->startOfMonth();
            $endOfMonth = $currentMonth->copy()->endOfMonth();
            $startDate = $startOfMonth->copy()->startOfWeek();
            $endDate = $endOfMonth->copy()->endOfWeek();
        @endphp
        
        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-4">
            <!-- Days of week header -->
            <div class="grid grid-cols-7 gap-2 mb-2">
                @foreach(['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'] as $day)
                    <div class="text-center text-xs font-semibold text-gray-600 dark:text-gray-400">{{ $day }}</div>
                @endforeach
            </div>
            
            <!-- Calendar grid -->
            <div class="grid grid-cols-7 gap-2">
                @php
                    $currentDay = $startDate->copy();
                @endphp
                @while($currentDay->lte($endDate))
                    @php
                        $dayStr = $currentDay->format('Y-m-d');
                        $isCurrentMonth = $currentDay->month === $currentMonth->month && $currentDay->year === $currentMonth->year;
                        $isToday = $currentDay->isToday();
                        $dayAppts = $appointments->filter(fn($apt) => $apt->start_time->format('Y-m-d') === $dayStr);
                    @endphp
                    
                    <a href="{{ route('provider.appointments.calendar', ['date' => $dayStr, 'view' => 'day']) }}"
                       class="border rounded-lg p-2 min-h-20 {{ $isCurrentMonth ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-900' }} {{ $isToday ? 'border-primary border-2' : 'border-gray-200 dark:border-gray-700' }} hover:border-primary hover:shadow-sm transition-all">
                        <div class="text-sm font-semibold {{ $isCurrentMonth ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-600' }} mb-1">
                            {{ $currentDay->format('d') }}
                        </div>
                        @if($dayAppts->count() > 0)
                            <div class="text-xs text-blue-600 font-medium">{{ $dayAppts->count() }} RDV</div>
                        @endif
                    </a>
                    @php
                        $currentDay->addDay();
                    @endphp
                @endwhile
            </div>
        </div>
    @else
        <!-- Time Slots with Appointments - Mode Gantt -->
        <div class="space-y-1">
        @for($hour = 6; $hour <= 20; $hour++)
            <x-calendar-hour-gantt :hour="$hour" :layout="$layout" :selectedDate="$selectedDate" :overlapMode="auth()->user()->provider->overlap_mode ?? 'allowed_with_warning'" :allAppointments="$allAppointments" />
        @endfor
        </div>
        
        <!-- Légende -->
        <div class="mt-4 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 text-xs text-gray-600 dark:text-gray-400">
                <div class="flex items-center gap-3">
                    <div class="flex items-center gap-2">
                        <svg class="w-3.5 h-3.5 text-green-600 flex-shrink-0" 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>
                        <span>Terminé</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <svg class="w-3.5 h-3.5 text-red-600 flex-shrink-0" 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>
                        <span>Annulé</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <svg class="w-3.5 h-3.5 text-blue-600 flex-shrink-0" 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>
                        <span>Programmé</span>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="flex items-center gap-2">
                        <div class="w-4 h-4 bg-gray-200 dark:bg-gray-600 rounded relative flex-shrink-0">
                            <div class="absolute top-0 right-0 w-0 h-0 border-t-[8px] border-t-green-400 border-l-[8px] border-l-transparent rounded-tr"></div>
                        </div>
                        <span>Séance facturée</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-4 h-4 bg-gray-200 dark:bg-gray-600 rounded relative flex-shrink-0">
                            <div class="absolute top-0 right-0 w-0 h-0 border-t-[8px] border-t-red-300 border-l-[8px] border-l-transparent rounded-tr"></div>
                        </div>
                        <span>Séance non facturée</span>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-1 text-gray-500 dark:text-gray-400 mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-sm">
                <svg class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                </svg>
                <span>Clic droit (ou long clic) pour changer le statut</span>
            </div>
        </div>
    @endif
            </div>
        </x-card>
</div>

<style>
#weekNav.stuck {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
    top: 64px !important;
}
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Menu contextuel
        let contextMenu = null;
        let longPressTimer = null;
        let currentAptUuid = null;
        
        // Créer le menu
        function createContextMenu(status, startTime, aptUuid, clientUuid, isBilled, invoiceUuid) {
            if (contextMenu) {
                contextMenu.remove();
            }
            
            const now = new Date();
            const aptTime = new Date(startTime);
            const isPast = aptTime < now;
            
            contextMenu = document.createElement('div');
            contextMenu.className = 'fixed bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-2 min-w-[180px] z-[9999]';
            contextMenu.style.display = 'none';
            
            let menuItems = [];
            
            menuItems.push(`
                <a href="#" data-action="edit" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    <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>
                    Modifier
                </a>
            `);
            
            // Facturer - actif uniquement pour les rendez-vous terminés
            if (clientUuid) {
                const billingUrl = `{{ url('/provider/payments/create') }}?client_id=${clientUuid}&appointment_id=${aptUuid}`;
                if (isBilled && invoiceUuid) {
                    const invoiceUrl = `{{ url('/provider/invoices') }}/${invoiceUuid}`;
                    menuItems.push(`
                        <a href="${invoiceUrl}" class="flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Facturé
                        </a>
                    `);
                } else if (status === 'complete') {
                    menuItems.push(`
                        <a href="${billingUrl}" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            Facturer
                        </a>
                    `);
                } else {
                    menuItems.push(`
                        <span class="flex items-center gap-2 px-4 py-2 text-sm text-gray-400 dark:text-gray-600 cursor-not-allowed">
                            <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            Facturer
                        </span>
                    `);
                }
            }
            
            // Terminé - pour tous les RDV programmés ou annulés (passés ou futurs)
            if (status === 'scheduled' || status === 'cancelled') {
                menuItems.push(`
                    <a href="#" data-action="complete" class="flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <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="M5 13l4 4L19 7"/></svg>
                        Terminé
                    </a>
                `);
            }
            
            // Programmé - pour les RDV annulés ou terminés qui sont dans le futur
            if ((status === 'cancelled' || status === 'complete') && !isPast) {
                menuItems.push(`
                    <a href="#" data-action="scheduled" class="flex items-center gap-2 px-4 py-2 text-sm text-blue-600 dark:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Programmé
                    </a>
                `);
            }
            
            // Annulé - seulement si non facturé et pas déjà annulé
            if (status !== 'cancelled' && !isBilled) {
                menuItems.push(`
                    <a href="#" data-action="cancel" class="flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <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="M6 18L18 6M6 6l12 12"/></svg>
                        Annulé
                    </a>
                `);
            }
            
            menuItems.push(`
                <a href="#" data-action="client" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
                    <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    Fiche client
                </a>
            `);
            
            // Supprimer - pour programmé, annulé, et terminé non facturé
            if (status === 'scheduled' || status === 'cancelled' || (status === 'complete' && !isBilled)) {
                menuItems.push(`
                    <a href="#" data-action="delete" class="flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <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"/></svg>
                        Supprimer
                    </a>
                `);
            }
            
            contextMenu.innerHTML = menuItems.join('');
            document.body.appendChild(contextMenu);
            return contextMenu;
        }
        
        // Afficher le menu
        function showContextMenu(x, y, aptUuid, clientUuid, status, startTime, isBilled, invoiceUuid) {
            const menu = createContextMenu(status, startTime, aptUuid, clientUuid, isBilled, invoiceUuid);
            currentAptUuid = aptUuid;
            
            // Ajuster position si hors écran
            const menuWidth = 200;
            const menuHeight = 180;
            
            if (x + menuWidth > window.innerWidth) {
                x = window.innerWidth - menuWidth - 10;
            }
            if (y + menuHeight > window.innerHeight) {
                y = window.innerHeight - menuHeight - 10;
            }
            
            // Positionner
            menu.style.left = x + 'px';
            menu.style.top = y + 'px';
            menu.style.display = 'block';
            menu.style.zIndex = '9999';
            
            // Ajuster si dépasse
            setTimeout(() => {
                const rect = menu.getBoundingClientRect();
                if (rect.right > window.innerWidth) {
                    menu.style.left = (x - rect.width) + 'px';
                }
                if (rect.bottom > window.innerHeight) {
                    menu.style.top = (y - rect.height) + 'px';
                }
            }, 0);
            
            // Actions
            menu.querySelectorAll('[data-action]').forEach(item => {
                item.onclick = (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    const action = item.dataset.action;
                    hideContextMenu();
                    
                    if (action === 'edit') {
                        window.location.href = `{{ url('/provider/appointments') }}/${aptUuid}/edit?stepper=vertical`;
                    } else if (action === 'cancel') {
                        showStatusConfirmModal('Annuler le rendez-vous', 'Êtes-vous sûr de vouloir annuler ce rendez-vous ?', () => updateStatus(aptUuid, 'cancelled'));
                    } else if (action === 'complete' || action === 'scheduled') {
                        const statusText = action === 'complete' ? 'terminé' : 'programmé';
                        showStatusConfirmModal(`Marquer comme ${statusText}`, `Êtes-vous sûr de vouloir marquer ce rendez-vous comme ${statusText} ?`, () => updateStatus(aptUuid, action === 'complete' ? 'complete' : 'scheduled'));
                    } else if (action === 'client') {
                        if (clientUuid) {
                            window.location.href = `{{ url('/provider/clients') }}/${clientUuid}`;
                        }
                    } else if (action === 'delete') {
                        showDeleteConfirmModal(aptUuid);
                    }
                };
            });
        }
        
        // Cacher le menu
        function hideContextMenu() {
            if (contextMenu) {
                contextMenu.style.display = 'none';
            }
        }
        
        // Update status
        function updateStatus(aptUuid, status) {
            fetch(`{{ url('/provider/appointments') }}/${aptUuid}/status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ status, _method: 'PATCH' })
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    // Mettre à jour le statut visuellement pour tous les éléments du même rendez-vous
                    const aptCards = document.querySelectorAll('[id="apt-' + aptUuid + '"]');
                    
                    aptCards.forEach(aptCard => {
                        // Mettre à jour l'attribut data-status
                        aptCard.setAttribute('data-status', status);
                        
                        // Mettre à jour l'icône de statut (seulement dans le premier segment)
                        const contentDiv = aptCard.querySelector('.flex.items-center.h-full.text-gray-800.text-xs.gap-1\\.5');
                        if (contentDiv) {
                            // Vérifier si c'est le premier segment (pas de texte "(suite)")
                            const hasSuiteText = contentDiv.textContent.includes('(suite)');
                            if (!hasSuiteText) {
                                const firstIcon = contentDiv.querySelector('svg:first-child');
                                if (firstIcon) {
                                    let newIcon = '';
                                    if (status === 'complete') {
                                        newIcon = '<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>';
                                    } else if (status === 'cancelled') {
                                        newIcon = '<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 {
                                        newIcon = '<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>';
                                    }
                                    firstIcon.outerHTML = newIcon;
                                }
                            } else {
                                // C'est un segment de suite, mettre à jour l'icône avant l'heure de fin
                                const endTimeIcon = contentDiv.querySelector('svg.ml-auto');
                                if (endTimeIcon) {
                                    let newIcon = '';
                                    if (status === 'complete') {
                                        newIcon = '<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>';
                                    } else if (status === 'cancelled') {
                                        newIcon = '<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 {
                                        newIcon = '<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>';
                                    }
                                    endTimeIcon.outerHTML = newIcon;
                                }
                            }
                        }
                        
                        // Surbrillance temporaire
                        aptCard.classList.add('ring-2', 'ring-yellow-400', 'animate-pulse');
                    });
                    
                    setTimeout(() => {
                        aptCards.forEach(aptCard => {
                            aptCard.classList.remove('ring-2', 'ring-yellow-400', 'animate-pulse');
                        });
                    }, 2000);
                }
            });
        }
        
        // Modal de confirmation
        let confirmModal = null;
        let confirmCallback = null;
        
        window.showStatusConfirmModal = function(title, message, callback) {
            confirmCallback = callback;
            
            if (!confirmModal) {
                confirmModal = document.createElement('div');
                confirmModal.className = 'fixed inset-0 z-[9999] overflow-y-auto hidden';
                confirmModal.innerHTML = `
                    <div class="flex items-center justify-center min-h-screen px-4 py-4 text-center">
                        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75"></div>
                        <div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl dark:bg-gray-800 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 dark:bg-gray-800 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-blue-100 rounded-full dark:bg-blue-900/20 sm:mx-0 sm:h-10 sm:w-10">
                                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" 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 dark:text-white" id="modal-title"></h3>
                                        <div class="mt-2">
                                            <p class="text-sm text-gray-500 dark:text-gray-400" id="modal-message"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="px-4 py-3 bg-gray-50 dark:bg-gray-900 sm:px-6">
                                <div class="flex gap-3">
                                    <button onclick="hideStatusConfirmModal()" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">Annuler</button>
                                    <button onclick="confirmStatusChange()" 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">Confirmer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                document.body.appendChild(confirmModal);
            }
            
            confirmModal.querySelector('#modal-title').textContent = title;
            confirmModal.querySelector('#modal-message').textContent = message;
            confirmModal.classList.remove('hidden');
        }
        
        window.hideStatusConfirmModal = function() {
            if (confirmModal) {
                confirmModal.classList.add('hidden');
            }
            confirmCallback = null;
        }
        
        window.confirmStatusChange = function() {
            if (confirmCallback) {
                confirmCallback();
            }
            hideStatusConfirmModal();
        }
        
        // Modal de confirmation de suppression
        let deleteModal = null;
        let deleteAptUuid = null;
        
        window.showDeleteConfirmModal = function(aptUuid) {
            deleteAptUuid = aptUuid;
            
            if (!deleteModal) {
                deleteModal = document.createElement('div');
                deleteModal.className = 'fixed inset-0 z-[9999] overflow-y-auto hidden';
                deleteModal.innerHTML = `
                    <div class="flex items-center justify-center min-h-screen px-4 py-4 text-center">
                        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75"></div>
                        <div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl dark:bg-gray-800 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 dark:bg-gray-800 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-red-100 rounded-full dark:bg-red-900/20 sm:mx-0 sm:h-10 sm:w-10">
                                        <svg class="w-6 h-6 text-red-600 dark:text-red-400" 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>
                                    </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 dark:text-white">Confirmer la suppression</h3>
                                        <div class="mt-2">
                                            <p class="text-sm text-gray-500 dark:text-gray-400">Êtes-vous sûr de vouloir supprimer ce rendez-vous ?</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="px-4 py-3 bg-gray-50 dark:bg-gray-900 sm:px-6">
                                <div class="flex gap-3">
                                    <button onclick="hideDeleteConfirmModal()" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">Annuler</button>
                                    <button onclick="confirmDelete()" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700">Supprimer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                document.body.appendChild(deleteModal);
            }
            
            deleteModal.classList.remove('hidden');
        }
        
        window.hideDeleteConfirmModal = function() {
            if (deleteModal) {
                deleteModal.classList.add('hidden');
            }
            deleteAptUuid = null;
        }
        
        window.confirmDelete = function() {
            if (deleteAptUuid) {
                fetch(`/laravel/public/provider/appointments/${deleteAptUuid}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    }
                })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        // Recharger la page pour afficher les créneaux libres
                        window.location.reload();
                    } else {
                        alert(data.message || 'Erreur lors de la suppression');
                        hideDeleteConfirmModal();
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Erreur lors de la suppression');
                    hideDeleteConfirmModal();
                });
            }
        }
        
        // Événements
        document.addEventListener('click', hideContextMenu);
        document.addEventListener('scroll', hideContextMenu, true);
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') hideContextMenu();
        });
        
        // Attacher aux RDV
        setTimeout(() => {
            document.querySelectorAll('a[id^="apt-"]').forEach(apt => {
                const aptUuid = apt.id.replace('apt-', '');
                
                // Desktop: clic droit
                apt.addEventListener('contextmenu', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    // Récupérer les données à jour depuis le DOM
                    const clientUuid = apt.getAttribute('data-client-uuid') || null;
                    const status = apt.getAttribute('data-status');
                    const startTime = apt.getAttribute('data-start-time');
                    const isBilled = apt.getAttribute('data-is-billed') === 'true';
                    const invoiceUuid = apt.getAttribute('data-invoice-uuid') || null;
                    showContextMenu(e.clientX, e.clientY, aptUuid, clientUuid, status, startTime, isBilled, invoiceUuid);
                });
                
                // Mobile: long press
                apt.addEventListener('touchstart', (e) => {
                    longPressTimer = setTimeout(() => {
                        e.preventDefault();
                        const touch = e.touches[0];
                        // Récupérer les données à jour depuis le DOM
                        const clientUuid = apt.getAttribute('data-client-uuid') || null;
                        const status = apt.getAttribute('data-status');
                        const startTime = apt.getAttribute('data-start-time');
                        const isBilled = apt.getAttribute('data-is-billed') === 'true';
                        const invoiceUuid = apt.getAttribute('data-invoice-uuid') || null;
                        showContextMenu(touch.clientX, touch.clientY, aptUuid, clientUuid, status, startTime, isBilled, invoiceUuid);
                    }, 800);
                });
                
                apt.addEventListener('touchend', () => {
                    clearTimeout(longPressTimer);
                });
                
                apt.addEventListener('touchmove', () => {
                    clearTimeout(longPressTimer);
                });
            });
        }, 500);
        
        // Masquer le menu si clic droit sur espace vide
        document.addEventListener('contextmenu', (e) => {
            const isAppointment = e.target.closest('a[id^="apt-"]');
            if (isAppointment) {
                e.preventDefault();
            } else {
                hideContextMenu();
            }
        });
        
        // Toast pour client présélectionné
        @if(request('client_uuid'))
            @php
                $preselectedClient = auth()->user()->provider->clients()->where('uuid', request('client_uuid'))->first();
            @endphp
            @if($preselectedClient)
                const toast = document.createElement('div');
                toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-3';
                toast.innerHTML = `
                    <span>Sélectionnez l'heure du début du rendez-vous de <a href="{{ route('provider.clients.show', $preselectedClient->uuid) }}" class="underline font-semibold hover:text-gray-300">{{ $preselectedClient->full_name }}</a></span>
                    <button onclick="this.parentElement.remove()" class="text-white hover:text-gray-300">
                        <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>
                `;
                document.body.appendChild(toast);
            @endif
        @endif
        
        // Toast pour créneau bloqué
        function showBlockedToast() {
            const toast = document.createElement('div');
            toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-red-600 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-3';
            toast.innerHTML = `
                <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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span>Créneau occupé par un rendez-vous filtré</span>
            `;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }
        
        // Redirection directe vers stepper vertical
        document.body.addEventListener('click', function(e) {
            // Ignorer si menu contextuel ouvert ou clic droit
            if (e.button !== 0) return;
            if (contextMenu && contextMenu.style.display === 'block') return;
            
            // Vérifier si clic sur créneau bloqué
            const blockedSlot = e.target.closest('[data-blocked="true"]');
            if (blockedSlot) {
                e.preventDefault();
                e.stopPropagation();
                showBlockedToast();
                return;
            }
            
            const link = e.target.closest('a[href*="/appointments/create"]');
            
            if (link) {
                e.preventDefault();
                e.stopPropagation();
                
                const url = link.href;
                const separator = url.includes('?') ? '&' : '?';
                let finalUrl = url + separator + 'stepper=vertical';
                
                @if(request('client_uuid'))
                    finalUrl += '&client_uuid={{ request('client_uuid') }}';
                @endif
                
                window.location.href = finalUrl;
            }
        });
        
        // Intercepter clics sur rendez-vous pour ajouter stepper=vertical
        document.addEventListener('click', function(e) {
            // Ignorer si clic sur le menu contextuel
            if (contextMenu && e.target.closest('div') === contextMenu) {
                return;
            }
            
            if (contextMenu && contextMenu.style.display === 'block') {
                hideContextMenu();
                return;
            }
            
            const aptLink = e.target.closest('a[id^="apt-"]');
            if (aptLink) {
                e.preventDefault();
                e.stopPropagation();
                const url = aptLink.href;
                const separator = url.includes('?') ? '&' : '?';
                window.location.href = url + separator + 'stepper=vertical';
                return false;
            }
        }, true);
        
        /*
        const weekNav = document.getElementById('weekNav');
        if (weekNav) {
            const checkSticky = () => {
                const rect = weekNav.getBoundingClientRect();
                if (rect.top <= 0) {
                    weekNav.classList.add('stuck');
                } else {
                    weekNav.classList.remove('stuck');
                }
            };
            window.addEventListener('scroll', checkSticky);
            checkSticky();
        }
        */

        @if(request('highlight'))
            const highlightedUuid = '{{ request('highlight') }}';
            const elements = document.querySelectorAll('[id="apt-' + highlightedUuid + '"]');
            
            if (elements.length > 0) {
                setTimeout(() => {
                    elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 300);
                
                setTimeout(() => {
                    elements.forEach(el => {
                        el.classList.remove('ring-2', 'ring-yellow-400', 'animate-pulse');
                    });
                    
                    const url = new URL(window.location);
                    url.searchParams.delete('highlight');
                    window.history.replaceState({}, '', url);
                }, 2000);
            }
        @else
            const selectedDate = '{{ $date }}';
            const today = new Date().toISOString().split('T')[0];
            
            if (selectedDate === today && '{{ $view }}' === 'day') {
                const now = new Date();
                const currentHour = now.getHours();
                
                if (currentHour >= 6 && currentHour <= 20) {
                    const timeSlots = document.querySelectorAll('.space-y-1 > div');
                    const targetIndex = currentHour - 6;
                    
                    if (timeSlots[targetIndex]) {
                        setTimeout(() => {
                            timeSlots[targetIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }, 300);
                    }
                }
            }
        @endif
    });
</script>
@endsection