@props(['appointment'])

<div x-data="appointmentModal" @appointment-modal.window="openModal($event.detail)" x-cloak>
    <!-- Modal Backdrop -->
    <div x-show="isOpen" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-[9999] overflow-y-auto bg-gray-900/50 backdrop-blur-sm"
         @click="closeModal()">
    </div>

    <!-- Modal Content -->
    <div x-show="isOpen"
         x-transition:enter="transition 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="transition 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="fixed inset-0 z-[10000] overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
            <div @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl">
                <!-- Header -->
                <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-baseline gap-2">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white" x-text="data.service_name"></h3>
                    <span class="text-xs text-gray-500 dark:text-gray-400" x-text="'• ' + (data.date_prefix || '') + data.start_time + '-' + data.end_time + ' (' + data.duration + ')'"></span>
                </div>
                    <button @click="closeModal()" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <!-- Body -->
                <div class="p-4 space-y-3">
                    <!-- Service et Prix -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <span x-show="data.service_color" :style="`background-color: ${data.service_color}`" class="w-2.5 h-2.5 rounded-full flex-shrink-0"></span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white" x-text="data.service_name"></span>
                        </div>
                        <span class="text-sm font-semibold text-gray-900 dark:text-white" x-text="data.price_ttc"></span>
                    </div>

                    <!-- Client -->
                    <div class="flex items-center justify-between">
                        <a :href="`{{ url('/provider/clients') }}/${data.client_uuid}`" class="flex items-center gap-1.5 text-sm text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                            <span x-text="data.client_name"></span>
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                            </svg>
                        </a>
                        <div x-show="data.client_phone" class="flex items-center gap-2">
                            <span class="text-xs text-gray-500 dark:text-gray-400" x-text="data.client_phone"></span>
                            <div class="flex items-center gap-2">
                                <a :href="`tel:${data.client_phone}`" class="p-1.5 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors" title="Appeler">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                    </svg>
                                </a>
                                <a :href="`https://wa.me/${data.client_phone_whatsapp}`" target="_blank" class="p-1.5 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded transition-colors" title="WhatsApp">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Statut -->
                    <div>
                        <label class="text-xs font-medium text-gray-500 dark:text-gray-400 block mb-2">
                            Statut
                            <span x-show="statusChanged" x-transition class="ml-2 text-green-600 dark:text-green-400">✓ Mis à jour</span>
                        </label>
                        <template x-if="data.is_billed">
                            <div class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                </svg>
                                <span x-text="data.status_label"></span>
                                <span class="ml-1">(Verrouillé)</span>
                            </div>
                        </template>
                        <template x-if="!data.is_billed">
                            @if(can_access_module('appointments', 'update_status'))
                            <div class="flex gap-2">
                                <button @click="changeStatus('scheduled')" :disabled="data.is_past" :class="data.status === 'scheduled' ? 'bg-blue-600 text-white' : (data.is_past ? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300')" class="flex-1 px-3 py-2 text-xs font-medium rounded-lg hover:opacity-80 transition-all" :style="statusChanged && data.status === 'scheduled' ? 'transform: scale(1.05)' : ''">
                                    Programmé
                                </button>
                                <button @click="changeStatus('complete')" :class="data.status === 'complete' ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'" class="flex-1 px-3 py-2 text-xs font-medium rounded-lg hover:opacity-80 transition-all" :style="statusChanged && data.status === 'complete' ? 'transform: scale(1.05)' : ''">
                                    Terminé
                                </button>
                                <button @click="changeStatus('cancelled')" :class="data.status === 'cancelled' ? 'bg-red-600 text-white' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'" class="flex-1 px-3 py-2 text-xs font-medium rounded-lg hover:opacity-80 transition-all" :style="statusChanged && data.status === 'cancelled' ? 'transform: scale(1.05)' : ''">
                                    Annulé
                                </button>
                            </div>
                            @else
                            <div class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                                <span x-text="data.status_label"></span>
                            </div>
                            @endif
                        </template>
                    </div>

                    <!-- Notes -->
                    <div>
                        <label class="text-xs font-medium text-gray-500 dark:text-gray-400 block mb-1">
                            Notes
                            <span x-show="notesSaved" x-transition class="ml-2 text-green-600 dark:text-green-400">✓ Enregistré</span>
                        </label>
                        <div class="flex gap-2">
                            <textarea x-model="data.notes" rows="2" class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" placeholder="Ajouter une note..."></textarea>
                            <button @click="updateNotes()" class="px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 flex items-center gap-1.5">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            </button>
                        </div>
                    </div>

                    <!-- Créé par -->
                    <div x-show="data.created_at_formatted" class="text-xs text-gray-500 dark:text-gray-400 space-y-0.5">
                        <div>Créé par <span x-text="data.created_by"></span>, le <span x-text="data.created_at_formatted"></span></div>
                        <div x-show="data.updated_by">Modifié par <span x-text="data.updated_by"></span>, le <span x-text="data.updated_at_formatted"></span></div>
                    </div>

                </div>

                <!-- Footer -->
                <div class="flex items-center gap-2 px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                    <template x-if="data.is_billed">
                        <a :href="data.invoice_url" class="flex-1 px-3 py-2 text-sm font-medium text-center text-white bg-green-600 rounded-lg hover:bg-green-700 flex items-center justify-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            <span>Facture</span>
                        </a>
                    </template>
                    <template x-if="!data.is_billed && data.status === 'complete'">
                        <a :href="data.billing_url" class="flex-1 px-3 py-2 text-sm font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 flex items-center justify-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            <span>Facturer</span>
                        </a>
                    </template>
                    <template x-if="!data.is_billed && data.status !== 'complete'">
                        <button disabled class="flex-1 px-3 py-2 text-sm font-medium text-gray-400 bg-gray-100 rounded-lg cursor-not-allowed dark:bg-gray-700 dark:text-gray-500 flex items-center justify-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            <span>Facturer</span>
                        </button>
                    </template>
                    @if(can_access_module('appointments', 'update'))
                    <button @click="openStepper()" class="flex-1 px-3 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 flex items-center justify-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        <span>Modifier</span>
                    </button>
                    @endif
                    <template x-if="!data.is_billed">
                        @if(can_access_module('appointments', 'delete'))
                        <button @click="deleteAppointment()" class="px-3 py-2 text-sm font-medium text-red-600 bg-white border border-red-300 rounded-lg hover:bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-600 dark:hover:bg-red-900/20 flex items-center justify-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            <span>Supprimer</span>
                        </button>
                        @endif
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('appointmentModal', () => ({
        isOpen: false,
        data: {},
        statusChanged: false,
        notesSaved: false,
        
        openModal(appointment) {
            this.data = appointment;
            this.isOpen = true;
            document.body.style.overflow = 'hidden';
        },
        
        closeModal() {
            this.isOpen = false;
            document.body.style.overflow = '';
        },
        
        changeStatus(newStatus) {
            if (this.data.status === newStatus) return;
            
            this.data.status = newStatus;
            
            // Afficher un indicateur de chargement sur le bouton
            const buttons = document.querySelectorAll('[x-data] button[\\@click^="changeStatus"]');
            buttons.forEach(btn => btn.disabled = true);
            
            this.updateStatus();
        },
        
        updateStatus() {
            fetch(`{{ url('/provider/appointments') }}/${this.data.uuid}/status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ status: this.data.status, _method: 'PATCH' })
            })
            .then(r => r.json())
            .then(data => {
                // Réactiver les boutons
                const buttons = document.querySelectorAll('[x-data] button[\\@click^="changeStatus"]');
                buttons.forEach(btn => btn.disabled = false);
                
                if (data.success) {
                    // Animation de confirmation sur le bouton actif
                    this.statusChanged = true;
                    setTimeout(() => {
                        this.statusChanged = false;
                    }, 2000);
                    
                    const aptCards = document.querySelectorAll('[id="apt-' + this.data.uuid + '"]');
                    aptCards.forEach(aptCard => {
                        aptCard.setAttribute('data-status', this.data.status);
                        
                        const contentDiv = aptCard.querySelector('.flex.items-center.h-full.text-gray-800.text-xs.gap-1\\.5');
                        if (contentDiv) {
                            const hasSuiteText = contentDiv.textContent.includes('(suite)');
                            if (!hasSuiteText) {
                                const firstIcon = contentDiv.querySelector('svg:first-child');
                                if (firstIcon) {
                                    let newIcon = '';
                                    if (this.data.status === 'complete') {
                                        newIcon = '<svg class="w-3 h-3 flex-shrink-0 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>';
                                    } else if (this.data.status === 'cancelled') {
                                        newIcon = '<svg class="w-3 h-3 flex-shrink-0 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>';
                                    } else {
                                        newIcon = '<svg class="w-3 h-3 flex-shrink-0 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>';
                                    }
                                    firstIcon.outerHTML = newIcon;
                                }
                            }
                        }
                        
                        aptCard.classList.add('ring-2', 'ring-yellow-400', 'animate-pulse');
                    });
                    
                    setTimeout(() => {
                        aptCards.forEach(aptCard => {
                            aptCard.classList.remove('ring-2', 'ring-yellow-400', 'animate-pulse');
                        });
                    }, 2000);
                    
                    const statusLabels = {
                        'scheduled': 'Programmé',
                        'complete': 'Terminé',
                        'cancelled': 'Annulé'
                    };
                    this.data.status_label = statusLabels[this.data.status];
                }
            });
        },
        
        openStepper() {
            this.closeModal();
            window.location.href = `{{ url('/provider/appointments') }}/${this.data.uuid}/edit?stepper=vertical`;
        },
        
        deleteAppointment() {
            this.closeModal();
            setTimeout(() => {
                window.showDeleteConfirmModal(this.data.uuid);
            }, 200);
        },
        
        updateNotes() {
            fetch(`{{ url('/provider/appointments') }}/${this.data.uuid}/notes`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ notes: this.data.notes, _method: 'PATCH' })
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    this.notesSaved = true;
                    setTimeout(() => {
                        this.notesSaved = false;
                    }, 2000);
                }
            });
        }
    }));
});
</script>