@extends('layouts.provider')

@section('title', 'Nouveau rendez-vous')
@section('page-title', '')
@section('header-class', 'hidden')
@section('footer-class', 'hidden')

@section('content')
<!-- Cache buster: {{ now()->timestamp }} -->
<script src="{{ asset('js/recurrence-form.js') }}?v={{ time() }}"></script>
<script>
// Force cache refresh - v2.0
console.log('Stepper loaded - v2.0 - {{ now()->timestamp }}');
</script>
<style>
[x-cloak] { display: none !important; }
.step-line {
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: -32px;
    width: 2px;
}
.max-w-md {
    overflow-x: hidden !important;
}
</style>

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg" style="padding-bottom: 100px;" x-data="stepperData()" x-init="init()">
    <div class="sticky top-0 z-20 bg-white dark:bg-gray-800 rounded-t-lg border-b border-gray-200 dark:border-gray-700">
    <div class="flex items-start justify-between p-4 pb-3">
        <div>
            <h1 class="text-lg font-bold text-gray-900 dark:text-white">{{ $appointment ? 'Modifier le rendez-vous' : 'Nouveau rendez-vous' }}</h1>
            <p class="text-md text-gray-500 dark:text-gray-400 mt-0.5">
                <span x-text="(() => {
                    const date = new Date(form.date + 'T00:00:00');
                    const days = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
                    return days[date.getDay()];
                })()"></span>
                <span x-text="(() => { const [y, m, d] = form.date.split('-'); return ' ' + d + '/' + m + '/' + y.slice(-2); })()"></span> à partir de <span x-text="form.start_time"></span>
            </p>
        </div>
        <a href="{{ $appointment ? (request('return_to') === 'client' && request('client_uuid') ? route('provider.clients.show', ['client_uuid' => request('client_uuid'), 'tab' => 'appointments']) : route('provider.appointments.calendar', ['date' => $appointment->start_time->format('Y-m-d'), 'highlight' => $appointment->uuid])) : route('provider.appointments.calendar', ['date' => $defaultDate]) . (request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '') }}" @click.prevent="showDeleteModal = true" class="text-gray-400 hover:text-gray-600 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="M6 18L18 6M6 6l12 12"/>
            </svg>
        </a>
    </div>
    </div>
    
    <div class="p-6 pt-2">
    
    <!-- Stepper Vertical -->
    <div class="space-y-0 mt-4" style="min-height: 600px;">
        <!-- Étape 1: Service -->
        <div class="flex items-start relative" style="padding-bottom: 20px;" :class="isLocked && 'pointer-events-none opacity-50'">
            <div class="flex flex-col items-center">
                <div @click="!isLocked && (step > 1 || form.service_id) && (step = 1)" class="w-8 h-8 rounded-full flex items-center justify-center relative"
                     :class="[form.service_id && step !== 1 ? 'bg-blue-600 cursor-pointer hover:ring-2 hover:ring-blue-300' : (step === 1 ? 'bg-blue-600 ring-4 ring-blue-200' : 'bg-gray-700 border-2 border-gray-600'), isLocked && 'cursor-not-allowed']">
                    <template x-if="form.service_id && step !== 1">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                        </svg>
                    </template>
                    <span x-show="!form.service_id || step === 1" class="text-sm font-semibold" :class="step === 1 ? 'text-white' : 'text-gray-400'">1</span>
                </div>
                <div class="step-line" :class="form.service_id && step !== 1 ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'"></div>
            </div>
            <div class="ml-4 flex-1" :class="(form.service_id && step !== 1) && 'cursor-pointer'" @click="(form.service_id && step !== 1) && (step = 1)">
                <div class="text-base font-semibold" :class="form.service_id && step !== 1 ? 'text-gray-500' : (step === 1 ? 'text-blue-600' : 'text-gray-500')">Service</div>
                <div x-show="step === 1" x-cloak class="text-sm text-gray-500 dark:text-gray-400 mb-2">Sélectionner un service</div>
                <div x-show="step === 1" x-cloak class="mt-3 space-y-3">
                    <input type="text" x-model="serviceSearch" @input="filterServices()" placeholder="Rechercher un service..." class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                    @if($services->isEmpty())
                        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 text-center">
                            <p class="text-sm text-blue-700 dark:text-blue-300 mb-3">Aucun service disponible.</p>
                            <a href="{{ route('provider.services.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700">
                                + Créer un service
                            </a>
                        </div>
                    @else
                        <div class="relative">
                            <div class="grid grid-cols-1 gap-2 max-h-[250px] overflow-y-auto">
                            <template x-for="(service, index) in filteredServices" :key="service.id">
                                <div @click="selectService(service)" class="p-3 border-2 rounded-lg hover:border-blue-600 cursor-pointer"
                                     :class="form.service_id === service.id ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white truncate" x-text="service.name"></p>
                                    <div class="flex justify-between items-center mt-1">
                                        <template x-if="service.price_ht">
                                            <div class="text-gray-500 text-left" style="font-size: 11px;">
                                                <div>HT: <span x-text="parseFloat(service.price_ht || service.base_price).toFixed(3)"></span> TND | <span class="font-bold">TTC: <span x-text="parseFloat(service.price_ttc || service.base_price).toFixed(3)"></span> TND</span></div>
                                            </div>
                                        </template>
                                        <template x-if="!service.price_ht">
                                            <p class="text-[10px] text-gray-500" x-text="parseFloat(service.base_price).toFixed(3) + ' TND'"></p>
                                        </template>
                                        <div class="flex items-center gap-1">
                                            <svg class="w-3 h-3 text-gray-500" 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"></path>
                                            </svg>
                                            <p class="text-gray-600 dark:text-gray-400 font-semibold text-xs" x-bind:style="window.innerWidth < 640 ? 'font-size: 13px;' : ''" x-text="service.duration_minutes + 'min'"></p>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            </div>
                            <div class="absolute bottom-0 left-0 right-0 h-6 pointer-events-none" style="background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);"></div>
                        </div>
                    @endif
                </div>
                <div x-show="form.service_id && step !== 1" x-cloak class="text-gray-500 mt-1" style="font-size: 13px;">
                    <div class="font-bold" x-text="getServiceName()"></div>
                    <div class="text-[11px]">
                        <span x-text="getServiceDuration() + 'min'"></span>
                        <template x-if="getSelectedService()?.price_ht">
                            <span> • HT: <span x-text="parseFloat(getSelectedService().price_ht || getSelectedService().base_price).toFixed(3)"></span> TND | <span class="font-bold">TTC: <span x-text="parseFloat(getSelectedService().price_ttc || getSelectedService().base_price).toFixed(3)"></span> TND</span></span>
                        </template>
                        <template x-if="!getSelectedService()?.price_ht">
                            <span x-text="' • ' + parseFloat(getServicePrice()).toFixed(3) + ' TND'"></span>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <!-- Étape 2: Horaire & Prix -->
        <div class="flex items-start relative" style="padding-bottom: 20px;" :class="isLocked && 'pointer-events-none opacity-50'">
            <div class="flex flex-col items-center">
                <div @click="!isLocked && (step > 2 || (form.start_time && form.end_time && form.price)) && (step = 2)" class="w-8 h-8 rounded-full flex items-center justify-center relative"
                     :class="[(form.start_time && form.end_time && form.price && step !== 2) ? 'bg-blue-600 cursor-pointer hover:ring-2 hover:ring-blue-300' : (step === 2 ? 'bg-blue-600 ring-4 ring-blue-200' : 'bg-gray-700 border-2 border-gray-600'), isLocked && 'cursor-not-allowed']">
                    <template x-if="form.start_time && form.end_time && form.price && step !== 2">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                        </svg>
                    </template>
                    <span x-show="!(form.start_time && form.end_time && form.price) || step === 2" class="text-sm font-semibold" :class="step === 2 ? 'text-white' : 'text-gray-400'">2</span>
                </div>
                <div class="step-line" :class="(form.start_time && form.end_time && form.price && step !== 2) ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'"></div>
            </div>
            <div class="ml-4 flex-1" :class="(form.start_time && form.end_time && form.price && step !== 2) && 'cursor-pointer'" @click="(form.start_time && form.end_time && form.price && step !== 2) && (step = 2)">
                <div class="text-base font-semibold" :class="(form.start_time && form.end_time && form.price && step !== 2) ? 'text-gray-500' : (step === 2 ? 'text-blue-600' : 'text-gray-500')">Horaire & Prix</div>
                <div x-show="step === 2" x-cloak class="text-sm text-gray-500 dark:text-gray-400 mb-2">Choisir l'horaire</div>
                <div x-show="step === 2" x-cloak class="mt-3 space-y-3 overflow-x-hidden">
                    <div>
                        <div class="relative pb-12 mb-5" style="padding-left: 8px; padding-right: 8px;">
                            <!-- Marqueurs d'heures -->
                            <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-2" style="margin-left: 20px; margin-right: 20px;">
                                <span>6h</span>
                                <span>9h</span>
                                <span>12h</span>
                                <span>15h</span>
                                <span>18h</span>
                                <span>21h</span>
                            </div>
                            
                            <!-- Barre de fond -->
                            <div class="relative h-2 bg-gray-300 dark:bg-gray-600 rounded-full" x-ref="timeBar" style="margin-left: 20px; margin-right: 20px;">
                                <!-- Zone sélectionnée -->
                                <div class="absolute h-full bg-blue-600 rounded-full" 
                                     :style="`left: ${((timeToMinutes(form.start_time) - 360) / 900) * 100}%; width: ${((timeToMinutes(form.end_time) - timeToMinutes(form.start_time)) / 900) * 100}%`"></div>
                                
                                <!-- Curseur Début -->
                                <div class="absolute top-1/2 -translate-y-1/2 cursor-pointer z-10" 
                                     :class="dragging === 'start' ? 'z-20' : ''"
                                     :style="`left: ${((timeToMinutes(form.start_time) - 360) / 900) * 100}%`">
                                    <div class="relative" @mousedown="startDrag('start', $event)" @touchstart="startDrag('start', $event)">
                                        <div class="w-10 h-10 -ml-5 -mt-4 flex items-center justify-center cursor-pointer touch-manipulation">
                                            <div class="w-5 h-5 bg-blue-600 rounded-full shadow-lg border-2 border-white" style="margin-top: 14px;"></div>
                                        </div>
                                        <div class="absolute top-6 bg-blue-600 text-white text-[10px] font-bold rounded flex flex-col items-center leading-tight cursor-pointer whitespace-nowrap" 
                                             style="margin-top: 13px; right: 20px; line-height: 9px; padding: 3px 10px;">
                                            <span x-text="form.start_time.split(':')[0]"></span>
                                            <span class="text-[6px]">· ·</span>
                                            <span x-text="form.start_time.split(':')[1]"></span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Curseur Fin -->
                                <div class="absolute top-1/2 -translate-y-1/2 cursor-pointer z-10" 
                                     :class="dragging === 'end' ? 'z-20' : ''"
                                     :style="`left: ${((timeToMinutes(form.end_time) - 360) / 900) * 100}%`">
                                    <div class="relative" @mousedown="startDrag('end', $event)" @touchstart="startDrag('end', $event)">
                                        <div class="w-10 h-10 -ml-5 -mt-4 flex items-center justify-center cursor-pointer touch-manipulation">
                                            <div class="w-5 h-5 bg-blue-600 rounded-full shadow-lg border-2 border-white" style="margin-top: 14px;"></div>
                                        </div>
                                        <div class="absolute top-6 bg-blue-600 text-white text-[10px] font-bold rounded flex flex-col items-center leading-tight cursor-pointer whitespace-nowrap" 
                                             :style="`margin-top: 13px; line-height: 9px; padding: 3px 10px; ${((timeToMinutes(form.end_time) - 360) / 900) * 100 > 85 ? 'right: 0;' : 'left: 50%; transform: translateX(-50%);'}`">
                                            <span x-text="form.end_time.split(':')[0]"></span>
                                            <span class="text-[6px]">· ·</span>
                                            <span x-text="form.end_time.split(':')[1]"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg px-4 pb-4" style="padding-top: 8px; margin-top: -20px;">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Durée</div>
                                <div class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-2" x-text="formatDuration(getActualDuration())"></div>
                                <div class="flex items-center gap-2 justify-center">
                                    <button type="button" @click="adjustDuration(-15)" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 font-bold text-lg leading-none" style="padding: 6px 12px 7px 12px;">−</button>
                                    <button type="button" @click="adjustDuration(15)" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 font-bold text-lg leading-none" style="padding: 6px 12px 7px 12px;">+</button>
                                </div>
                            </div>
                            <template x-if="getSelectedService()?.price_ht">
                                <div class="flex-1">
                                    <div class="flex items-center justify-between mb-1" style="margin-top: 8px;">
                                        <span class="text-xs text-gray-500 dark:text-gray-400">Prix HT</span>
                                        <div class="flex items-baseline gap-1">
                                            <input type="text" inputmode="decimal" x-model="form.price" 
                                                   @input="form.price_ttc = (() => { const priceHT = parseFloat(form.price || 0); const vatRate = parseFloat(getSelectedService()?.vat_rate || 0); const vat = priceHT * (vatRate / 100); return (Math.round((priceHT + vat) * 100) / 100).toFixed(3); })()"
                                                   class="text-base font-semibold border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-right text-gray-900 dark:text-white w-20 sm:w-28" 
                                                   placeholder="0">
                                            <span class="text-xs text-gray-600 dark:text-gray-400">TND</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center justify-between" style="margin-top: 10px;">
                                        <div>
                                            <div class="text-xs font-bold text-green-600 dark:text-green-400">Prix TTC</div>
                                            <div class="text-[10px] text-gray-400" x-text="'TVA ' + (getSelectedService()?.vat_rate || 0) + '%'"></div>
                                        </div>
                                        <div class="flex items-baseline gap-1">
                                            <input type="text" inputmode="decimal" x-model="form.price_ttc" 
                                                   @input="form.price = (() => { const priceTTC = parseFloat(form.price_ttc || 0); const vatRate = parseFloat(getSelectedService()?.vat_rate || 0); const priceHT = priceTTC / (1 + vatRate / 100); return (Math.round(priceHT * 1000) / 1000).toFixed(3); })()"
                                                   class="text-base font-bold border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-right text-green-600 dark:text-green-400 w-20 sm:w-28" 
                                                   placeholder="0">
                                            <span class="text-xs text-gray-600 dark:text-gray-400">TND</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template x-if="!getSelectedService()?.price_ht">
                                <div class="flex-1 text-right">
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Prix</div>
                                    <div class="flex items-baseline justify-end gap-2">
                                        <input type="text" inputmode="decimal" x-model="form.price" 
                                               class="text-2xl font-semibold border-0 outline-none bg-transparent text-right text-gray-900 dark:text-white p-0 w-24 cursor-text" 
                                               placeholder="0">
                                        <span class="text-lg text-gray-600 dark:text-gray-400">TND</span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    
                    <!-- Alerte ajustement prix -->
                    <div x-show="showPriceAlert" x-cloak class="bg-yellow-50 border-l-4 border-yellow-500 p-3 rounded-r-lg">
                        <p class="text-xs text-yellow-800 mb-2">
                            ⚠️ Durée changée (<span x-text="getActualDuration()"></span>min au lieu de <span x-text="getServiceDuration()"></span>min).<br>
                            <template x-if="getSelectedService()?.price_ht">
                                <span>💰 Prix suggéré HT: <strong x-text="suggestedPrice.toFixed(3) + ' TND'"></strong> (TTC: <strong x-text="(() => { const baseTTC = parseFloat(getSelectedService()?.price_ttc || 0); const baseDuration = getServiceDuration(); const newDuration = getActualDuration(); const suggestedTTC = (baseTTC / baseDuration) * newDuration; return (Math.round(suggestedTTC * 1000) / 1000).toFixed(3); })() + ' TND'"></strong>)</span>
                            </template>
                            <template x-if="!getSelectedService()?.price_ht">
                                <span>💰 Prix suggéré: <strong x-text="suggestedPrice.toFixed(3) + ' TND'"></strong></span>
                            </template>
                        </p>
                        <div class="flex gap-2">
                            <button @click="rejectPriceAdjustment()" class="w-10 h-10 flex items-center justify-center bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-md hover:bg-red-200 dark:hover:bg-red-900/40" title="Garder le prix actuel">
                                <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>
                            <button @click="acceptPriceAdjustment()" class="flex-1 px-3 py-1.5 bg-blue-600 text-white rounded-md text-xs font-medium hover:bg-blue-700">
                                <template x-if="getSelectedService()?.price_ht">
                                    <span x-text="'Accepter ' + (() => { const baseTTC = parseFloat(getSelectedService()?.price_ttc || 0); const baseDuration = getServiceDuration(); const newDuration = getActualDuration(); const suggestedTTC = (baseTTC / baseDuration) * newDuration; return (Math.round(suggestedTTC * 1000) / 1000).toFixed(3); })() + ' TND TTC'"></span>
                                </template>
                                <template x-if="!getSelectedService()?.price_ht">
                                    <span x-text="'Accepter ' + suggestedPrice.toFixed(3) + ' TND'"></span>
                                </template>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Alerte chevauchement -->
                    <div x-show="overlapAlert" x-cloak class="bg-red-50 border-l-4 border-red-500 p-3 rounded-r-lg">
                        <p class="text-xs text-red-800 mb-2">
                            ⚠️ Ce créneau horaire chevauche un rendez-vous existant.<br>
                            <strong x-text="overlapDetails.client"></strong> • <span x-text="overlapDetails.service"></span><br>
                            <span x-text="overlapDetails.time"></span>
                        </p>
                        <button x-show="overlapMode === 'allowed_with_warning'" @click="overlapConfirmed = true; overlapAlert = false; step = 3; stepReached = Math.max(stepReached, 3)" class="w-full px-3 py-2 bg-orange-600 text-white text-xs font-medium rounded-lg hover:bg-orange-700">
                            Confirmer quand même
                        </button>
                    </div>
                    
                    <!-- Bloc Récurrence -->
                    <div class="mt-6" x-data="recurrenceForm()" x-ref="recurrenceComponent" x-show="!{{ $appointment ? 'true' : 'false' }}">
                        <label class="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg cursor-pointer" x-ref="recurrenceLabel">
                            <input type="checkbox" x-model="isRecurring" class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="font-medium text-gray-900 dark:text-white">Rendre ce RDV régulier</span>
                        </label>
                        
                        <div x-show="isRecurring" x-transition class="mt-4 bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-4">
                            <!-- Fréquence -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Fréquence</label>
                                <div class="space-y-2">
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" x-model="frequency" value="daily" class="w-4 h-4 text-blue-600">
                                        <span class="text-sm text-gray-900 dark:text-white">Quotidien</span>
                                    </label>
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" x-model="frequency" value="weekly" class="w-4 h-4 text-blue-600">
                                        <span class="text-sm text-gray-900 dark:text-white">Hebdomadaire</span>
                                    </label>
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" x-model="frequency" value="biweekly" class="w-4 h-4 text-blue-600">
                                        <span class="text-sm text-gray-900 dark:text-white">Bi-hebdomadaire (tous les 14j)</span>
                                    </label>
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" x-model="frequency" value="monthly" class="w-4 h-4 text-blue-600">
                                        <span class="text-sm text-gray-900 dark:text-white">Mensuel</span>
                                    </label>
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" x-model="frequency" value="custom" class="w-4 h-4 text-blue-600">
                                        <span class="text-sm text-gray-900 dark:text-white">Personnalisé</span>
                                    </label>
                                </div>
                            </div>
                            
                            <!-- Personnalisé -->
                            <div x-show="frequency === 'custom'" x-cloak class="flex items-center gap-2">
                                <span class="text-sm text-gray-700 dark:text-gray-300">Tous les</span>
                                <input type="number" x-model="customInterval" min="1" max="30" class="w-16 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded">
                                <select x-model="customUnit" class="px-2 py-1 pr-8 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded">
                                    <option value="days">jours</option>
                                    <option value="weeks">semaines</option>
                                    <option value="months">mois</option>
                                </select>
                            </div>
                            
                            <!-- Jours de la semaine -->
                            <div x-show="frequency === 'weekly' || frequency === 'biweekly'" x-cloak>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jours</label>
                                <div class="grid grid-cols-7 gap-2">
                                    <template x-for="(day, index) in ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di']" :key="index">
                                        <button type="button" @click="toggleDay(index + 1)" 
                                                :class="selectedDays.includes(index + 1) ? 'bg-blue-600 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300'"
                                                class="h-11 rounded-lg border border-gray-300 dark:border-gray-600 font-medium text-sm hover:border-blue-500 transition-colors"
                                                x-text="day"></button>
                                    </template>
                                </div>
                            </div>
                            
                            <!-- Fin de série -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Fin de série</label>
                                <div class="space-y-2">
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" x-model="endType" value="count" class="w-4 h-4 text-blue-600">
                                        <button type="button" @click="endType === 'count' && occurrencesCount > 2 && occurrencesCount--" :disabled="endType !== 'count'" class="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 font-bold text-sm leading-none disabled:opacity-50">−</button>
                                        <input type="number" x-model="occurrencesCount" min="2" max="24" :disabled="endType !== 'count'" class="w-12 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded text-center">
                                        <button type="button" @click="endType === 'count' && occurrencesCount < 24 && occurrencesCount++" :disabled="endType !== 'count'" class="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 font-bold text-sm leading-none disabled:opacity-50">+</button>
                                        <span class="text-sm text-gray-900 dark:text-white">séances</span>
                                    </label>
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" x-model="endType" value="date" class="w-4 h-4 text-blue-600">
                                        <span class="text-sm text-gray-900 dark:text-white">Le</span>
                                        <input type="date" x-model="endDate" :disabled="endType !== 'date'" min="{{ date('Y-m-d', strtotime($defaultDate . ' +1 day')) }}" class="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded">
                                    </label>
                                </div>
                            </div>
                            
                            <!-- Preview -->
                            <div x-show="isValidRecurrence()" x-cloak class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                                <div class="text-xs font-medium text-blue-900 dark:text-blue-300 whitespace-pre-line">📅 <span x-text="getPreviewText()"></span></div>
                            </div>
                        </div>
                        
                        <!-- Modal Alternatives -->
                        <div x-show="showAlternativesModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" role="dialog">
                            <div class="flex items-center justify-center min-h-screen px-4">
                                <div @click="cancelRecurrence()" class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75"></div>
                                <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full p-6" style="min-height: 400px;">
                                    <!-- Loader -->
                                    <div x-show="!validationResult?.slots" class="flex flex-col items-center justify-center" style="min-height: 350px;">
                                        <svg class="animate-spin h-10 w-10 text-blue-600 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Préparation des créneaux...</p>
                                    </div>
                                    
                                    <!-- Contenu -->
                                    <div x-show="validationResult?.slots">
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                                        <template x-if="validationResult?.conflicts > 0">
                                            <span>⚠️ Créneaux indisponibles</span>
                                        </template>
                                        <template x-if="validationResult?.conflicts === 0 || !validationResult?.conflicts">
                                            <span>✓ Tous les créneaux sont disponibles</span>
                                        </template>
                                    </h3>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                                        <template x-if="validationResult?.conflicts > 0">
                                            <span>
                                                <span x-text="validationResult?.conflicts"></span> créneaux sur <span x-text="validationResult?.total_slots"></span> sont indisponibles.
                                            </span>
                                        </template>
                                        <template x-if="validationResult?.conflicts === 0 || !validationResult?.conflicts">
                                            <span>Vous pouvez modifier les horaires ou ignorer des créneaux avant de continuer.</span>
                                        </template>
                                    </p>
                                    <div class="max-h-96 overflow-y-auto space-y-2 mb-4">
                                        <template x-for="(slot, index) in validationResult?.slots" :key="slot.datetime">
                                            <div class="p-3 rounded" :class="slot.available ? 'bg-green-50 dark:bg-green-900/20' : 'bg-red-50 dark:bg-red-900/20'">
                                                <div class="flex items-center gap-2">
                                                    <span x-text="slot.available ? '✓' : '✗'" :class="slot.available ? 'text-green-600' : 'text-red-600'" class="font-bold text-lg w-5 flex-shrink-0"></span>
                                                    <span class="text-sm font-medium w-48 flex-shrink-0" x-text="formatSlotDate(slot.date)"></span>
                                                    <template x-if="slot.available">
                                                        <select x-model="slot.time" class="flex-1 px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded">
                                                            <option :value="slot.time" x-text="slot.time + ' → ' + slot.endTime"></option>
                                                            <template x-for="alt in slot.alternatives" :key="alt.time">
                                                                <option :value="alt.time" x-text="alt.time + ' → ' + alt.endTime"></option>
                                                            </template>
                                                        </select>
                                                    </template>
                                                    <template x-if="!slot.available">
                                                        <select x-model="slot.selectedAlternative" class="flex-1 px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded">
                                                            <option value="">-- Ignorer --</option>
                                                            <template x-for="alt in slot.alternatives" :key="alt.time">
                                                                <option :value="alt.time" x-text="alt.time + ' → ' + alt.endTime"></option>
                                                            </template>
                                                        </select>
                                                    </template>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="flex gap-3">
                                        <button @click="cancelRecurrence()" class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300">Annuler</button>
                                        <button @click="acceptPartialRecurrence($el)" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Continuer</button>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div x-show="form.start_time && form.end_time && form.price && step !== 2" class="text-gray-500 mt-1" style="font-size: 13px;">
                    <div class="font-bold" x-text="form.start_time + ' - ' + form.end_time"></div>
                    <template x-if="getSelectedService()?.price_ht">
                        <div class="text-[11px] mt-0.5">
                            <span x-text="getActualDuration() + 'min • '"></span>
                            <span>HT: <span x-text="parseFloat(form.price).toFixed(3)"></span> TND | </span>
                            <span class="font-bold">TTC: <span x-text="parseFloat(form.price_ttc || 0).toFixed(3)"></span> TND</span>
                        </div>
                    </template>
                    <template x-if="!getSelectedService()?.price_ht">
                        <div class="text-[10px] mt-0.5">
                            <span x-text="getActualDuration() + 'min • '"></span>
                            <span x-text="parseFloat(form.price).toFixed(3) + ' TND'"></span>
                        </div>
                    </template>
                    <span x-show="$root.querySelector('[x-data*=recurrenceForm]')?._x_dataStack?.[0]?.isRecurring" class="text-blue-600 text-[10px]"> (régulier)</span>
                </div>
            </div>
        </div>

        <!-- Étape 3: Client -->
        <div class="flex items-start relative" style="padding-bottom: 20px;" :class="isLocked && 'pointer-events-none opacity-50'">
            <div class="flex flex-col items-center">
                <div @click="!isLocked && (step > 3 || form.client_id) && (step = 3)" class="w-8 h-8 rounded-full flex items-center justify-center relative"
                     :class="[form.client_id && step !== 3 ? 'bg-blue-600 cursor-pointer hover:ring-2 hover:ring-blue-300' : (step === 3 ? 'bg-blue-600 ring-4 ring-blue-200' : 'bg-gray-700 border-2 border-gray-600'), isLocked && 'cursor-not-allowed']">
                    <template x-if="form.client_id && step !== 3">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                        </svg>
                    </template>
                    <span x-show="!form.client_id || step === 3" class="text-sm font-semibold" :class="step === 3 ? 'text-white' : 'text-gray-400'">3</span>
                </div>
                <div class="step-line" :class="form.client_id && step !== 3 ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'"></div>
            </div>
            <div class="ml-4 flex-1" :class="(form.client_id && step !== 3) && 'cursor-pointer'" @click="(form.client_id && step !== 3) && (step = 3)">
                <div class="text-base font-semibold" :class="form.client_id && step !== 3 ? 'text-gray-500' : (step === 3 ? 'text-blue-600' : 'text-gray-500')">Client</div>
                <div x-show="step === 3" x-cloak class="text-sm text-gray-500 dark:text-gray-400 mb-2">Sélectionner un client</div>
                <div x-show="step === 3" x-cloak class="mt-3 space-y-3">
                    @if($clients->isEmpty())
                        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 text-center">
                            <p class="text-sm text-blue-700 dark:text-blue-300 mb-3">Aucun client disponible.</p>
                            <a href="{{ route('provider.clients.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700">
                                + Créer un client
                            </a>
                        </div>
                    @else
                    <input type="text" x-model="clientSearch" @input="filterClients()" placeholder="Rechercher un client..." class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                    <div class="relative">
                        <div class="grid grid-cols-2 gap-2 max-h-[240px] overflow-y-auto">
                        <template x-for="(client, index) in filteredClients" :key="client.id">
                            <div @click="selectClient(client)" class="p-2 border-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
                                 :class="[
                                     form.client_id === client.id ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700',
                                     filteredClients.length % 2 !== 0 && index === filteredClients.length - 1 ? 'col-span-2' : ''
                                 ]">
                                <p class="text-sm font-medium text-gray-900 dark:text-white" x-text="client.full_name || (client.first_name + ' ' + client.last_name)"></p>
                                <p class="text-xs text-gray-500" x-text="(() => { const phone = client.phone; if (!phone) return ''; const digits = phone.replace(/\D/g, ''); if (digits.length <= 2) return digits; if (digits.length <= 5) return digits.slice(0, 2) + ' ' + digits.slice(2); return digits.slice(0, 2) + ' ' + digits.slice(2, 5) + ' ' + digits.slice(5, 8); })()"></p>
                            </div>
                        </template>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 h-6 pointer-events-none" style="background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);"></div>
                    </div>
                    @endif
                    
                    <div x-show="showNewClientForm" x-cloak class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 rounded-lg space-y-3">
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white">Nouveau client</h4>
                        <div x-show="clientError" x-cloak class="text-xs text-red-600" x-text="clientError"></div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Type de client</label>
                            <div class="flex gap-2 mb-3">
                                <label class="flex-1 flex items-center justify-center px-3 py-2 border-2 rounded-lg cursor-pointer" :class="newClient.client_type === 'individual' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'">
                                    <input type="radio" x-model="newClient.client_type" value="individual" @change="newClient.is_vat_subject = false" class="sr-only">
                                    <span class="text-sm text-gray-900 dark:text-white">Particulier</span>
                                </label>
                                <label class="flex-1 flex items-center justify-center px-3 py-2 border-2 rounded-lg cursor-pointer" :class="newClient.client_type === 'business' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'">
                                    <input type="radio" x-model="newClient.client_type" value="business" @change="newClient.is_vat_subject = true" class="sr-only">
                                    <span class="text-sm text-gray-900 dark:text-white">Professionnel</span>
                                </label>
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-3">
                            <div class="col-span-2">
                                <input type="text" x-model="newClient.full_name" :placeholder="newClient.client_type === 'business' ? 'Raison sociale' : 'Nom complet'" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                            </div>
                            <div>
                                <input type="tel" x-model="newClient.phone" @input="formatPhoneInput($event)" placeholder="__ ___ ___" maxlength="10" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                            </div>
                        </div>
                        <div x-show="newClient.client_type === 'business'" x-cloak>
                            <input type="text" x-model="newClient.matricule_fiscal" placeholder="Matricule fiscal" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                        </div>
                        <button @click="createClient()" class="w-full px-3 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">Créer et sélectionner</button>
                    </div>
                </div>
                <div x-show="form.client_id && step !== 3" class="text-gray-500 mt-1 font-bold" style="font-size: 13px;" x-text="getClientName() + ' • ' + (() => { const phone = getClientPhone(); if (!phone) return ''; const digits = phone.replace(/\D/g, ''); if (digits.length <= 2) return digits; if (digits.length <= 5) return digits.slice(0, 2) + ' ' + digits.slice(2); return digits.slice(0, 2) + ' ' + digits.slice(2, 5) + ' ' + digits.slice(5, 8); })()"></div>
            </div>
        </div>

        <!-- Étape 4: Confirmation -->
        <div class="flex items-start">
            <div class="flex flex-col items-center">
                <div @click="stepReached >= 4 && step !== 4 && (step = 4)" class="w-8 h-8 rounded-full flex items-center justify-center relative"
                     :class="[stepReached >= 4 && step !== 4 ? 'bg-blue-600 cursor-pointer hover:ring-2 hover:ring-blue-300' : (step === 4 ? 'bg-blue-600 ring-4 ring-blue-200' : 'bg-gray-700 border-2 border-gray-600')]">
                    <template x-if="stepReached >= 4 && step !== 4">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                        </svg>
                    </template>
                    <span x-show="stepReached < 4 || step === 4" class="text-sm font-semibold" :class="step === 4 ? 'text-white' : 'text-gray-400'">4</span>
                </div>
            </div>
            <div class="ml-4 flex-1">
                <div class="text-base font-semibold" :class="stepReached >= 4 && step !== 4 ? 'text-gray-500 cursor-pointer' : (step === 4 ? 'text-blue-600' : 'text-gray-500')" @click="stepReached >= 4 && step !== 4 && (step = 4)">Confirmation</div>
                <div x-show="step === 4" x-cloak class="text-sm text-gray-500 dark:text-gray-400 mb-2">Vérifier les infos</div>
                <div x-show="step === 4" x-cloak class="mt-3 space-y-3">
                    <!-- Alerte RDV verrouillé -->
                    <div x-show="isLocked" class="bg-yellow-50 border-l-4 border-yellow-500 p-3 rounded-r-lg">
                        <p class="text-xs text-yellow-800">
                            🔒 <strong>RDV verrouillé (Facturé)</strong> : seule la note est modifiable.
                        </p>
                    </div>
                    
                    @if(can_access_module('appointments', 'update_status'))
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Statut</label>
                        <div class="grid grid-cols-3 gap-3">
                            <div @click="!isLocked && !isAppointmentPast() && (form.status = 'scheduled')" 
                                 :class="[
                                     form.status === 'scheduled' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600',
                                     (isAppointmentPast() || isLocked) ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400 cursor-pointer'
                                 ]"
                                 class="border-2 rounded-lg text-center transition-all" style="padding: 15px 5px;">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">Programmé</div>
                            </div>
                            <div @click="!isLocked && (form.status = 'complete')" 
                                 :class="[
                                     form.status === 'complete' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400',
                                     isLocked && 'opacity-50 cursor-not-allowed'
                                 ]"
                                 class="border-2 rounded-lg cursor-pointer text-center transition-all" style="padding: 15px 5px;">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">Terminé</div>
                            </div>
                            <div @click="!isLocked && (form.status = 'cancelled')" 
                                 :class="[
                                     form.status === 'cancelled' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400',
                                     isLocked && 'opacity-50 cursor-not-allowed'
                                 ]"
                                 class="border-2 rounded-lg cursor-pointer text-center transition-all" style="padding: 15px 5px;">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">Annulé</div>
                            </div>
                        </div>
                    </div>
                    @else
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Statut</label>
                        <div class="text-sm text-gray-600 dark:text-gray-400" x-text="getStatusLabel()"></div>
                    </div>
                    @endif
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
                        <textarea x-model="form.notes" rows="3" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg" placeholder="Notes optionnelles sur ce rendez-vous..."></textarea>
                    </div>
                    
                    @if($appointment)
                    <div class="text-xs text-gray-500 dark:text-gray-400 space-y-0.5 pt-2 border-t border-gray-200 dark:border-gray-700">
                        <div>Créé par {{ $appointment->creator ? $appointment->creator->name : 'Système' }}, le {{ $appointment->created_at->format('d/m/Y à H:i') }}</div>
                        @if($appointment->updater)
                        <div>Modifié par {{ $appointment->updater->name }}, le {{ $appointment->updated_at->format('d/m/Y à H:i') }}</div>
                        @endif
                    </div>
                    @endif
                </div>
                <div x-show="stepReached >= 4 && step !== 4" class="text-gray-500 mt-1 font-bold" style="font-size: 13px;" x-text="getStatusLabel()"></div>
                
                @if($appointment)
                <div x-show="stepReached >= 4 && step !== 4" class="text-xs text-gray-500 dark:text-gray-400 space-y-0.5 mt-4">
                    <div>Créé par {{ $appointment->creator ? $appointment->creator->name : 'Système' }}, le {{ $appointment->created_at->format('d/m/Y à H:i') }}</div>
                    @if($appointment->updater)
                    <div>Modifié par {{ $appointment->updater->name }}, le {{ $appointment->updated_at->format('d/m/Y à H:i') }}</div>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>
    </div>

    <!-- Barre de navigation fixe en bas -->
    <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg" style="max-width: 448px; margin: 0 auto; border-left: none; border-right: none;">
        <!-- Progress bar -->
        <div class="px-6 pt-3">
            <div class="flex gap-1">
                <div class="flex-1 h-1 rounded-full transition-colors" :class="step >= 1 ? 'bg-blue-600' : 'bg-gray-300'"></div>
                <div class="flex-1 h-1 rounded-full transition-colors" :class="step >= 2 ? 'bg-blue-600' : 'bg-gray-300'"></div>
                <div class="flex-1 h-1 rounded-full transition-colors" :class="step >= 3 ? 'bg-blue-600' : 'bg-gray-300'"></div>
                <div class="flex-1 h-1 rounded-full transition-colors" :class="step >= 4 ? 'bg-blue-600' : 'bg-gray-300'"></div>
            </div>
        </div>
        
        <!-- Boutons -->
        <div class="p-4 flex gap-3">
            @if($appointment && $appointment->payments->count() === 0 && can_access_module('appointments', 'delete'))
            <button @click="confirmDelete()" class="px-3 py-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors" title="Supprimer">
                <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="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>
            </button>
            @endif
            <button x-show="!isLocked" @click="step > 1 && step--" :disabled="step === 1" :class="step === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-300'" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg">
                Retour
            </button>
            <button @click="await nextStep()" 
                    x-show="step < 4" x-cloak 
                    :disabled="(step === 1 && !form.service_id) || (step === 3 && !form.client_id) || (step === 2 && overlapAlert)" 
                    :class="((step === 1 && !form.service_id) || (step === 3 && !form.client_id) || (step === 2 && overlapAlert)) ? 'bg-gray-300 text-gray-600 cursor-not-allowed' : 'bg-black text-white hover:bg-gray-800'" 
                    class="flex-1 px-4 py-3 text-sm font-medium rounded-lg">
                Suivant
            </button>
            <button x-show="step === 4" x-cloak @click="saveAppointment()" class="flex-1 px-4 py-3 text-sm font-medium text-white bg-black hover:bg-gray-800 rounded-lg">
                <span x-text="isLocked ? 'Enregistrer la note' : (sessionStorage.getItem('recurrence_data') ? 'Confirmer la série' : 'Confirmer le rendez-vous')"></span>
            </button>
        </div>
    </div>
    
    <!-- Modal de confirmation de suppression -->
    <div x-show="showDeleteConfirmModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen px-4 py-4 text-center">
            <div x-show="showDeleteConfirmModal" @click="showDeleteConfirmModal = false" class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75"></div>

            <div x-show="showDeleteConfirmModal" 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="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">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 @click="showDeleteConfirmModal = false" 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 @click="deleteAppointment()" 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 dark:bg-red-600 dark:hover:bg-red-700">
                            Supprimer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal de confirmation de fermeture -->
    <div x-show="showDeleteModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen px-4 py-4 text-center">
            <div x-show="showDeleteModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75" @click="showDeleteModal = false"></div>

            <div x-show="showDeleteModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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="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">
                                Quitter sans enregistrer ?
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    Les modifications non enregistrées seront perdues. Êtes-vous sûr de vouloir quitter ?
                                </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 type="button" @click="showDeleteModal = false" 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>
                        <a href="{{ $appointment ? (request('return_to') === 'client' && request('client_uuid') ? route('provider.clients.show', ['client_uuid' => request('client_uuid'), 'tab' => 'appointments']) : route('provider.appointments.calendar', ['date' => $appointment->start_time->format('Y-m-d'), 'highlight' => $appointment->uuid])) : route('provider.appointments.calendar', ['date' => $defaultDate]) . (request('client_uuid') ? '&client_uuid=' . request('client_uuid') : '') }}" class="flex-1 px-4 py-2 text-sm font-medium text-center text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700">
                            Quitter
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


<script>
function stepperData() {
    return {
        step: 1,
        stepReached: 1,
        serviceSearch: '',
        clientSearch: '',
        showNewServiceForm: false,
        showNewClientForm: false,
        serviceError: '',
        clientError: '',
        form: {
            date: '{{ $defaultDate }}',
            service_id: @json($appointment->service_id ?? null),
            start_time: '{{ $defaultTime }}',
            end_time: @json($appointment ? $appointment->end_time->format('H:i') : ''),
            price: @json($appointment->price_at_booking ?? ''),
            price_ttc: '{{ $appointment && $appointment->price_ttc ? number_format($appointment->price_ttc, 3, ".", "") : "" }}',
            client_id: @json($appointment->client_id ?? null),
            notes: @json($appointment->notes ?? ''),
            status: @json($appointment->status ?? 'scheduled')
        },
        isLocked: @json($appointment && $appointment->isInvoiced() ? true : false),
        isInvoiced: @json($appointment && $appointment->isInvoiced() ? true : false),
        originalStatus: @json($appointment->status ?? 'scheduled'),
        newService: {
            name: '',
            base_price: '',
            duration_minutes: 60,
            currency: 'TND',
            is_active: true
        },
        services: @json($services),
        filteredServices: @json($services),
        clients: @json($clients),
        filteredClients: @json($clients),
        newClient: {
            full_name: '',
            phone: '',
            client_type: 'individual',
            is_vat_subject: false,
            matricule_fiscal: ''
        },
        
        ttcCache: {},
        ttcValue: '0.000',
        
        calculateTTC(priceHT, vatRate) {
            if (!priceHT || !vatRate) return '0.000';
            
            const cacheKey = `${priceHT}_${vatRate}`;
            
            // Retourner depuis le cache si disponible
            if (this.ttcCache[cacheKey]) {
                return this.ttcCache[cacheKey];
            }
            
            // Appel AJAX vers PHP
            fetch('{{ route("provider.api.calculate-ttc") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ price_ht: priceHT, vat_rate: vatRate })
            })
            .then(res => res.json())
            .then(data => {
                this.ttcCache[cacheKey] = data.ttc;
                this.ttcValue = data.ttc;
            });
            
            // Retourner calcul temporaire
            return (priceHT * (1 + vatRate / 100)).toFixed(3);
        },
        
        init() {
            // Ajouter le client du rendez-vous à la liste s'il est archivé
            @if($appointment && $appointment->client)
                const appointmentClient = {
                    id: {{ $appointment->client->id }},
                    uuid: '{{ $appointment->client->uuid }}',
                    first_name: '{{ $appointment->client->first_name }}',
                    last_name: '{{ $appointment->client->last_name }}',
                    full_name: '{{ $appointment->client->full_name }}',
                    phone: '{{ $appointment->client->phone }}'
                };
                
                // Vérifier si le client n'est pas déjà dans la liste
                if (!this.clients.find(c => c.id === appointmentClient.id)) {
                    this.clients.unshift(appointmentClient);
                    this.filteredClients = [...this.clients];
                }
            @endif
            
            // Présélectionner le client depuis l'URL UNIQUEMENT pour les nouveaux rendez-vous
            @if(!$appointment)
                const urlParams = new URLSearchParams(window.location.search);
                const clientUuid = urlParams.get('client_uuid');
                if (clientUuid) {
                    const client = this.clients.find(c => c.uuid === clientUuid);
                    if (client) {
                        this.form.client_id = client.id;
                    }
                }
            @endif
            
            // Charger les données du rendez-vous existant
            @if($appointment)
                const service = this.services.find(s => s.id === this.form.service_id);
                if (service) {
                    this.serviceDuration = service.duration_minutes;
                    this.serviceBasePrice = service.base_price;
                }
                // Si RDV verrouillé, forcer l'étape 4
                if (this.isLocked) {
                    this.step = 4;
                    this.stepReached = 4;
                } else {
                    this.step = 1;
                    this.stepReached = 4;
                }
            @else
                this.calculateEndTime();
            @endif
            
            document.addEventListener('mousemove', (e) => this.onDrag(e));
            document.addEventListener('mouseup', () => this.stopDrag());
            document.addEventListener('touchmove', (e) => this.onDrag(e));
            document.addEventListener('touchend', () => this.stopDrag());
        },
        
        dragging: null,
        showPriceAlert: false,
        suggestedPrice: 0,
        serviceDuration: 0,
        serviceBasePrice: 0,
        overlapAlert: false,
        overlapDetails: {
            client: '',
            service: '',
            time: ''
        },
        overlapConfirmed: false,
        overlapMode: '{{ auth()->user()->provider->overlap_mode ?? "allowed_with_warning" }}',
        showDeleteModal: false,
        showDeleteConfirmModal: false,
        
        startDrag(type, event) {
            this.dragging = type;
            event.preventDefault();
        },
        
        stopDrag() {
            this.dragging = null;
        },
        
        onDrag(event) {
            if (!this.dragging) return;
            
            const bar = this.$refs.timeBar;
            const rect = bar.getBoundingClientRect();
            const clientX = event.touches ? event.touches[0].clientX : event.clientX;
            const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
            const percent = x / rect.width;
            const minutes = Math.round((360 + percent * 900) / 15) * 15;
            
            if (this.dragging === 'start') {
                const currentDuration = this.timeToMinutes(this.form.end_time) - this.timeToMinutes(this.form.start_time);
                const maxStart = 1260 - currentDuration;
                const newStartMinutes = Math.min(minutes, maxStart);
                this.form.start_time = this.minutesToTime(newStartMinutes);
                this.form.end_time = this.minutesToTime(newStartMinutes + currentDuration);
            } else {
                this.form.end_time = this.minutesToTime(Math.max(minutes, this.timeToMinutes(this.form.start_time) + 15));
            }
            
            this.overlapAlert = false;
            this.overlapConfirmed = false;
            this.adjustPrice();
        },
        
        timeToMinutes(time) {
            if (!time) return 360;
            const [h, m] = time.split(':');
            return parseInt(h) * 60 + parseInt(m);
        },
        
        minutesToTime(minutes) {
            const h = Math.floor(minutes / 60);
            const m = minutes % 60;
            return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
        },
        
        calculateEndTime() {
            if (!this.form.start_time) return;
            const service = this.services.find(s => s.id === this.form.service_id);
            const duration = service ? service.duration_minutes : 60;
            const startMinutes = this.timeToMinutes(this.form.start_time);
            this.form.end_time = this.minutesToTime(startMinutes + duration);
        },
        
        getActualDuration() {
            if (!this.form.start_time || !this.form.end_time) return 0;
            return this.timeToMinutes(this.form.end_time) - this.timeToMinutes(this.form.start_time);
        },
        
        getServiceDuration() {
            return this.serviceDuration || 0;
        },
        
        adjustPrice() {
            if (!this.serviceDuration || !this.serviceBasePrice) return;
            
            const actualDuration = this.getActualDuration();
            
            if (actualDuration > 0 && this.serviceDuration > 0) {
                if (actualDuration !== this.serviceDuration) {
                    const calculated = (this.serviceBasePrice / this.serviceDuration) * actualDuration;
                    this.suggestedPrice = Math.round(calculated * 1000) / 1000;
                    this.showPriceAlert = true;
                } else {
                    this.showPriceAlert = false;
                }
            }
        },
        
        acceptPriceAdjustment() {
            this.form.price = this.suggestedPrice.toFixed(3);
            if (this.getSelectedService()?.price_ht) {
                const baseTTC = parseFloat(this.getSelectedService().price_ttc || 0);
                const baseDuration = this.getServiceDuration();
                const newDuration = this.getActualDuration();
                const suggestedTTC = (baseTTC / baseDuration) * newDuration;
                this.form.price_ttc = (Math.round(suggestedTTC * 1000) / 1000).toFixed(3);
            }
            this.showPriceAlert = false;
        },
        
        rejectPriceAdjustment() {
            this.showPriceAlert = false;
        },
        
        filterServices() {
            const search = this.serviceSearch.toLowerCase();
            this.filteredServices = this.services.filter(s => 
                (s.name || '').toLowerCase().includes(search)
            );
        },
        
        filterClients() {
            const search = this.clientSearch.toLowerCase();
            this.filteredClients = this.clients.filter(c => 
                (c.full_name || '').toLowerCase().includes(search) ||
                (c.first_name || '').toLowerCase().includes(search) ||
                (c.last_name || '').toLowerCase().includes(search) ||
                (c.phone || '').includes(search)
            );
        },
        
        selectService(service) {
            this.form.service_id = service.id;
            this.form.price = parseFloat(service.price_ht || service.base_price).toFixed(3);
            if (service.price_ht) {
                this.form.price_ttc = parseFloat(service.price_ttc).toFixed(3);
            }
            this.serviceDuration = service.duration_minutes;
            this.serviceBasePrice = service.price_ht || service.base_price;
            this.calculateEndTime();
            this.showPriceAlert = false;

            this.$nextTick(() => {
                this.step = 2;
                this.stepReached = Math.max(this.stepReached, 2);
            });
        },
        
        getServiceName() {
            const service = this.services.find(s => s.id === this.form.service_id);
            return service ? service.name : '';
        },
        
        getSelectedService() {
            return this.services.find(s => s.id === this.form.service_id);
        },
        
        getServicePrice() {
            const service = this.services.find(s => s.id === this.form.service_id);
            return service ? service.base_price : '';
        },
        
        async createService() {
            if (!this.newService.name || !this.newService.base_price || !this.newService.duration_minutes) {
                this.serviceError = 'Veuillez remplir tous les champs';
                return;
            }
            
            try {
                const response = await fetch('{{ route("provider.services.store") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(this.newService)
                });
                
                const data = await response.json();
                if (response.ok && data.success) {
                    this.services.push(data.service);
                    this.selectService(data.service);
                    this.showNewServiceForm = false;
                    this.newService = { name: '', base_price: '', duration_minutes: 60, currency: 'TND', is_active: true };
                    this.serviceError = '';
                } else {
                    this.serviceError = data.message || 'Erreur lors de la création';
                }
            } catch (error) {
                this.serviceError = 'Erreur réseau';
            }
        },
        
        formatDuration(minutes) {
            if (!minutes || minutes <= 0) return '15min';
            const hours = Math.floor(minutes / 60);
            const mins = minutes % 60;
            if (hours > 0 && mins > 0) {
                return hours + 'h' + (mins < 10 ? '0' : '') + mins;
            } else if (hours > 0) {
                return hours + 'h';
            } else {
                return mins + 'min';
            }
        },
        
        selectClient(client) {
            this.form.client_id = client.id;
            this.checkPastAppointment();
            this.$nextTick(() => {
                this.step = 4;
                this.stepReached = Math.max(this.stepReached, 4);
            });
        },
        
        checkPastAppointment() {
            const now = new Date();
            const appointmentEnd = new Date(`${this.form.date}T${this.form.end_time}`);
            
            if (appointmentEnd < now) {
                this.form.status = 'complete';
            } else {
                this.form.status = 'scheduled';
            }
        },
        
        isAppointmentPast() {
            const now = new Date();
            const appointmentEnd = new Date(`${this.form.date}T${this.form.end_time}`);
            return appointmentEnd < now;
        },
        
        getClientName() {
            const client = this.clients.find(c => c.id === this.form.client_id);
            return client ? (client.full_name || (client.first_name + ' ' + client.last_name)) : '';
        },
        
        getClientPhone() {
            const client = this.clients.find(c => c.id === this.form.client_id);
            return client ? client.phone : '';
        },
        
        getStatusLabel() {
            const labels = {
                'scheduled': 'Programmé',
                'complete': 'Terminé',
                'cancelled': 'Annulé'
            };
            return labels[this.form.status] || 'Programmé';
        },
        
        async createClient() {
            if (!this.newClient.full_name || !this.newClient.phone) {
                this.clientError = 'Veuillez remplir tous les champs';
                return;
            }
            
            if (this.newClient.client_type === 'business' && !this.newClient.matricule_fiscal) {
                this.clientError = 'Veuillez remplir tous les champs';
                return;
            }
            
            const clientData = {
                type: this.newClient.client_type === 'business' ? 'professionnel' : 'particulier',
                phone: this.newClient.phone,
                is_vat_subject: this.newClient.is_vat_subject ? 1 : 0
            };
            
            if (this.newClient.client_type === 'business') {
                clientData.company_name = this.newClient.full_name;
                clientData.matricule_fiscal = this.newClient.matricule_fiscal;
            } else {
                clientData.full_name = this.newClient.full_name;
            }
            
            try {
                const response = await fetch('{{ route("provider.clients.store") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(clientData)
                });
                
                const data = await response.json();
                if (response.ok && data.success) {
                    this.clients.push(data.client);
                    this.filteredClients = [...this.clients];
                    this.selectClient(data.client);
                    this.showNewClientForm = false;
                    this.newClient = { full_name: '', phone: '', client_type: 'individual', is_vat_subject: false, matricule_fiscal: '' };
                    this.clientError = '';
                } else {
                    this.clientError = data.message || 'Erreur lors de la création';
                }
            } catch (error) {
                this.clientError = 'Erreur réseau';
            }
        },
        
        formatPhoneInput(event) {
            let value = event.target.value.replace(/\D/g, '');
            if (value.length > 2 && value.length <= 5) {
                value = value.slice(0, 2) + ' ' + value.slice(2);
            } else if (value.length > 5) {
                value = value.slice(0, 2) + ' ' + value.slice(2, 5) + ' ' + value.slice(5, 8);
            }
            event.target.value = value;
            this.newClient.phone = value;
        },
        
        adjustDuration(minutes) {
            const currentDuration = this.getActualDuration();
            const newDuration = Math.max(15, currentDuration + minutes);
            const startMinutes = this.timeToMinutes(this.form.start_time);
            const newEndMinutes = Math.min(startMinutes + newDuration, 1260);
            this.form.end_time = this.minutesToTime(newEndMinutes);
            this.overlapAlert = false;
            this.overlapConfirmed = false;
            this.adjustPrice();
        },
        
        async nextStep() {
            console.log('nextStep called, current step:', this.step);
            if (this.step === 2) {
                console.log('Step 2 - checking recurrence and overlap');
                const recurrenceDiv = document.querySelector('[x-data*=recurrenceForm]');
                if (recurrenceDiv && recurrenceDiv._x_dataStack) {
                    const recurrenceData = recurrenceDiv._x_dataStack[0];
                    recurrenceData.validateAndProceed(this);
                    return;
                }
                
                // Vérifier le chevauchement avant de passer à l'étape 3
                const overlapMode = '{{ auth()->user()->provider->overlap_mode ?? "allowed_with_warning" }}';
                console.log('Overlap mode:', overlapMode);
                console.log('Overlap confirmed:', this.overlapConfirmed);
                if (!this.overlapConfirmed && overlapMode !== 'allowed') {
                    console.log('Checking overlap...');
                    const overlapData = await this.checkOverlap();
                    console.log('Overlap data:', overlapData);
                    if (overlapData) {
                        console.log('Overlap detected, showing alert');
                        this.overlapAlert = true;
                        this.overlapDetails = overlapData;
                        if (overlapMode === 'blocked') {
                            return;
                        }
                        // Pour allowed_with_warning, on affiche l'alerte mais on ne passe pas à l'étape suivante
                        return;
                    }
                }
            }
            console.log('Moving to next step');
            this.overlapAlert = false;
            this.step++;
            this.stepReached = Math.max(this.stepReached, this.step);
        },
        
        async checkOverlap() {
            const appointmentUuid = @json($appointment->uuid ?? null);
            try {
                const response = await fetch('{{ route("provider.appointments.checkOverlap") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        date: this.form.date,
                        start_time: this.form.start_time,
                        end_time: this.form.end_time,
                        appointment_uuid: appointmentUuid
                    })
                });
                
                const data = await response.json();
                console.log('Overlap check result:', data);
                return data.overlap ? data.details : null;
            } catch (error) {
                console.error('Erreur lors de la vérification du chevauchement', error);
                return null;
            }
        },
        
        async saveAppointment() {
            // Vérifier si c'est une récurrence
            const recurrenceData = sessionStorage.getItem('recurrence_data');
            
            if (recurrenceData) {
                // Sauvegarder la série récurrente
                await this.saveRecurrenceSeries(JSON.parse(recurrenceData));
            } else {
                // Sauvegarder un rendez-vous simple
                await this.saveSingleAppointment();
            }
        },
        
        async saveRecurrenceSeries(recurrenceData) {
            try {
                const baseUrl = window.location.origin + window.location.pathname.split('/provider')[0];
                const response = await fetch(baseUrl + '/provider/api/appointments/store-recurrence', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        recurrence_group_id: recurrenceData.recurrence_group_id,
                        client_id: this.form.client_id,
                        service_id: this.form.service_id,
                        provider_id: null,
                        slots: recurrenceData.slots.map(slot => ({
                            date: slot.date,
                            time: slot.time,
                            duration: parseInt(recurrenceData.recurrence_meta.duration)
                        })),
                        notes: this.form.notes,
                        status: this.form.status
                    })
                });
                
                const data = await response.json();
                if (response.ok && data.success) {
                    sessionStorage.removeItem('recurrence_data');
                    sessionStorage.setItem('toast', JSON.stringify({
                        message: `${data.total_created} rendez-vous créés avec succès`,
                        type: 'success'
                    }));
                    window.location.href = data.redirect;
                } else {
                    alert(data.message || 'Erreur lors de l\'enregistrement');
                }
            } catch (error) {
                alert('Erreur réseau');
            }
        },
        
        async saveSingleAppointment() {
            // Si RDV verrouillé (facturé), autoriser uniquement la modification des notes
            if (this.isLocked) {
                const appointmentId = @json($appointment->uuid ?? null);
                const url = '{{ $appointment ? route("provider.appointments.update", $appointment->uuid) : "" }}';
                
                const dataToSend = { notes: this.form.notes };
                
                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({ ...dataToSend, _method: 'PUT' })
                    });
                    
                    const data = await response.json();
                    if (response.ok && data.success) {
                        sessionStorage.setItem('toast', JSON.stringify({
                            message: 'Note modifiée avec succès',
                            type: 'success'
                        }));
                        @if(request('return_to') === 'client' && request('client_uuid'))
                            window.location.href = '{{ route("provider.clients.show", ["client_uuid" => request("client_uuid"), "tab" => "appointments"]) }}';
                        @else
                            window.location.href = '{{ route("provider.appointments.calendar") }}?date=' + this.form.date + '&highlight=' + data.appointment.uuid;
                        @endif
                    } else {
                        alert(data.message || 'Erreur lors de l\'enregistrement');
                    }
                } catch (error) {
                    alert('Erreur réseau');
                }
                return;
            }
            
            // Vérifier le mode de chevauchement du provider
            const overlapMode = '{{ auth()->user()->provider->overlap_mode ?? "allowed_with_warning" }}';
            
            // Vérifier le chevauchement si pas encore confirmé ET si mode n'est pas 'allowed'
            if (!this.overlapConfirmed && overlapMode !== 'allowed') {
                const overlapData = await this.checkOverlap();
                if (overlapData) {
                    this.overlapAlert = true;
                    this.overlapDetails = overlapData;
                    this.step = 2;
                    return;
                }
            }
            
            const appointmentId = @json($appointment->uuid ?? null);
            const url = appointmentId 
                ? '{{ $appointment ? route("provider.appointments.update", $appointment->uuid) : "" }}'
                : '{{ route("provider.appointments.store") }}';
            const method = 'POST';
            
            const bodyData = { ...this.form };
            if (this.overlapConfirmed) {
                bodyData.force_overlap = true;
            }
            if (appointmentId) {
                bodyData._method = 'PUT';
            }
            
            try {
                const response = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(bodyData)
                });
                
                const data = await response.json();
                if (response.ok && data.success) {
                    sessionStorage.setItem('toast', JSON.stringify({
                        message: appointmentId ? 'Rendez-vous modifié avec succès' : 'Rendez-vous créé avec succès',
                        type: 'success'
                    }));
                    @if(request('return_to') === 'client' && request('client_uuid'))
                        window.location.href = '{{ route("provider.clients.show", ["client_uuid" => request("client_uuid"), "tab" => "appointments"]) }}';
                    @else
                        window.location.href = '{{ route("provider.appointments.calendar") }}?date=' + this.form.date + '&highlight=' + data.appointment.uuid;
                    @endif
                } else if (response.status === 422 && data.errors?.time) {
                    // Erreur de chevauchement - afficher l'alerte visuelle
                    const overlapData = await this.checkOverlap();
                    if (overlapData) {
                        this.overlapAlert = true;
                        this.overlapDetails = overlapData;
                        this.step = 2;
                    }
                } else {
                    alert(data.message || 'Erreur lors de l\'enregistrement');
                }
            } catch (error) {
                alert('Erreur réseau');
            }
        },
        
        confirmDelete() {
            this.showDeleteConfirmModal = true;
        },
        
        async deleteAppointment() {
            this.showDeleteConfirmModal = false;
            
            try {
                const response = await fetch('{{ $appointment ? route("provider.appointments.destroy", $appointment->uuid) : "" }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ _method: 'DELETE' })
                });
                
                const data = await response.json();
                if (response.ok && data.success) {
                    sessionStorage.setItem('toast', JSON.stringify({
                        message: 'Rendez-vous supprimé avec succès',
                        type: 'success'
                    }));
                    window.location.href = '{{ route("provider.appointments.calendar") }}';
                } else {
                    alert(data.message || 'Erreur lors de la suppression');
                }
            } catch (error) {
                alert('Erreur réseau');
            }
        }
    }
}
</script>