Storelocator Step 2

<div
        x-data="servicesInit()"
        class="w-full max-w-3xl mx-auto space-y-6"
>
    <!-- Pour chaque catégorie -->
    <template x-for="(code, index) in Object.keys(categories)" :key="code">
        <div class="border-b border-gray-200 last:border-b-0" x-show="services[code]">
            <div class="py-4">
                <h2 class="text-gray-600 text-sm font-medium mb-4" x-text="categories[code].title"></h2>

                <!-- Liste des services -->
                <div class="space-y-4">
                    <template x-for="service in services[code]" :key="service.serviceCode">
                        <div
                                x-data="serviceCardInit()"
                                class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer p-6"
                                @click="selectService($event, service)"
                        >
                            <div class="flex items-start gap-4">
                                <!-- Icône du service -->
                                <div class="flex-shrink-0">
                                    <div class="w-8 h-8 text-[#B8A369]">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M7 3H17V5H19V8C19 9.9 17.7 11.4 16 11.9V19C16 20.7 14.7 22 13 22H11C9.3 22 8 20.7 8 19V11.9C6.3 11.4 5 9.9 5 8V5H7V3ZM9 3V5H15V3H9ZM7 7V8C7 9.7 8.3 11 10 11H14C15.7 11 17 9.7 17 8V7H7Z"/>
                                        </svg>
                                    </div>
                                </div>

                                <!-- Contenu principal -->
                                <div class="flex-1">
                                    <div class="flex flex-col">
                                        <h3 class="text-lg text-neutral-900 font-medium mb-1" x-text="service.service"></h3>
                                        <div data-expand-trigger @click.stop="isExpanded = !isExpanded">
                                            <button
                                                    class="text-neutral-500 text-sm hover:text-neutral-700 transition-colors w-fit"
                                                    :class="{ 'underline': !isExpanded }"
                                            >
                                                <span x-text="isExpanded ? 'Masquer' : 'En savoir plus'"></span>
                                                <span class="inline-block ml-1 transition-transform duration-200"
                                                      :class="{ 'rotate-180': isExpanded }">↓</span>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Contenu dépliable -->
                                    <div
                                            x-show="isExpanded"
                                            x-transition:enter="transition ease-out duration-200"
                                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                                            x-transition:enter-end="opacity-100 transform translate-y-0"
                                            class="mt-4 space-y-4"
                                            @click.stop
                                    >
                                        <p class="text-sm text-neutral-600">
                                            Durée approximative : <span x-text="service.duration + ' minutes'"></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </template>
</div>

<script>
	function servicesInit() {
		return {
			services: [],
			categories: {
				'AR-001': {
					title: 'SANTÉ DES YEUX',
					icon: 'library--vision-test'
				},
				'AR-002': {
					title: 'LENTILLES',
					icon: 'library--contact-lenses'
				},
				'AR-004': {
					title: 'VISAGISME',
					icon: 'library--glasses'
				}
			},

			async init() {
				try {
					const response = await fetch(`${window.location.origin}/js/json/getStoreServices.json`);
					const data = await response.json();

					// Grouper les services par areaCode
					this.services = data.reduce((acc, service) => {
						if (!acc[service.areaCode]) {
							acc[service.areaCode] = [];
						}
						acc[service.areaCode].push(service);
						return acc;
					}, {});
				} catch (error) {
					console.error('Erreur lors du chargement des services:', error);
					this.services = {};
				}
			}
		}
	}

	function serviceCardInit() {
		return {
			isExpanded: false,

			selectService(event, currentService) {
				// Ignorer si le clic est sur le bouton 'En savoir plus' ou son conteneur
				if (event.target.closest('[data-expand-trigger]')) {
					return;
				}

				// Utiliser le store locator pour mettre à jour les données
				this.$store.locator.updateStepperData(
					'SUJET DU RENDEZ-VOUS',
					currentService.service,
					this.$store.locator.stepperData.currentStep + 1
				);
			}
		}
	}
</script>