@php
  $partsSection = $moto->partsSection;
  $categories = $moto->partsCategories;
  // Préparer un JSON propre côté serveur pour éviter les soucis de parsing Blade/JS
  $partsData = $categories->map(function($cat) {
      return [
          'id' => $cat->id,
          'title' => $cat->title,
          'parts' => $cat->parts->map(function($p) {
              return [
                  'id' => $p->id,
                  'title' => $p->title,
                  'image' => $p->image,
                  'price' => (float) $p->price,
                  'parts_category_id' => $p->parts_category_id ?? null,
                  'reference' => $p->reference ?? '', // Ajout de la référence
              ];
          })->toArray(),
      ];
  })->toJson();
@endphp
<div class="md:mt-30 mt-10 md:px-10 px-5"
  x-data="motoPartsCart({{ $moto->id }})"
  x-init="init()"
>
  <div class="relative flex justify-center items-end">
    <div class="md:block hidden">
      @include('backgrounds.bg-4')
    </div>
    <img src="{{$partsSection->image}}" class="max-w-[600px] w-full" alt="parts">
  </div>
  <div x-ref="searchAnchor" class="bg-gradient-to-r from-brand-dark to-brand md:px-10 px-5 py-5">
    <h1 class="flex justify-between items-center">
      <span class="md:text-xl flex-shrink-0">Pièces de Rechange</span>
      <div class="flex gap-4">
        <!-- Zone de recherche par référence -->
        <div class="md:flex hidden items-center w-xs">
          <input 
            type="text" 
            x-model="searchReference" 
            placeholder="Recherche par référence" 
            @keyup.enter="searchParts()"
            class="bg-white text-black outline-0 placeholder:text-black/60 border-0 p-2 w-full font-open-sans text-sm rounded-l"
          >
          <button 
            @click="searchParts()" 
            class="bg-black hover:bg-black/80 px-3 py-2 rounded-r border-l border-white/20 transition-colors"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </button>
        </div>
        
        <button class="relative flex-shrink-0" @click="openCartModalHandler()">
          <svg width="35" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.91665 1.9585C2.8351 1.9585 1.95831 2.83528 1.95831 3.91683C1.95831 4.99838 2.8351 5.87516 3.91665 5.87516H6.30429L13.2842 33.7949C11.2266 34.7089 9.79165 36.7702 9.79165 39.1668C9.79165 42.4116 12.422 45.0418 15.6666 45.0418C18.9113 45.0418 21.5416 42.4116 21.5416 39.1668C21.5416 38.4802 21.4238 37.8211 21.2074 37.2085H29.7093C29.4929 37.8211 29.375 38.4802 29.375 39.1668C29.375 42.4116 32.0052 45.0418 35.25 45.0418C38.4947 45.0418 41.125 42.4116 41.125 39.1668C41.125 35.9221 38.4947 33.2918 35.25 33.2918H17.1957L16.2165 29.3752H35.25C39.2924 29.3752 41.7162 26.8213 43.0612 24.0013C44.3756 21.2455 44.8331 17.952 44.9927 15.5565C45.2148 12.2204 42.4572 9.79183 39.4038 9.79183H11.3207L10.104 4.92523C9.66812 3.18165 8.10153 1.9585 6.30429 1.9585H3.91665ZM35.25 25.4585H15.2373L12.2998 13.7085H39.4038C40.487 13.7085 41.1373 14.505 41.0846 15.2963C40.9358 17.5316 40.5191 20.2333 39.5262 22.3152C38.5639 24.3327 37.2477 25.4585 35.25 25.4585ZM35.25 41.113C34.1751 41.113 33.3038 40.2418 33.3038 39.1668C33.3038 38.0919 34.1751 37.2206 35.25 37.2206C36.3249 37.2206 37.1962 38.0919 37.1962 39.1668C37.1962 40.2418 36.3249 41.113 35.25 41.113ZM13.7204 39.1668C13.7204 40.2418 14.5918 41.113 15.6666 41.113C16.7415 41.113 17.6129 40.2418 17.6129 39.1668C17.6129 38.0919 16.7415 37.2206 15.6666 37.2206C14.5918 37.2206 13.7204 38.0919 13.7204 39.1668Z" fill="white"/>
          </svg>
          <div class="bg-brand-dark absolute -top-2 -right-2 w-5 h-5 rounded-full flex justify-center items-center" x-text="cart.length"></div>
        </button>
          
      </div>
    </h1>
    
    <div class="flex md:hidden mt-3 items-center md:max-w-lg w-full">
      <input 
        type="text" 
        x-model="searchReference" 
        placeholder="Recherche par référence" 
        @keyup.enter="searchParts()"
        class="bg-white text-black outline-0 placeholder:text-black/60 border-0 p-2 w-full font-open-sans text-sm rounded-l"
      >
      <button 
        @click="searchParts()" 
        class="bg-black hover:bg-black/80 px-3 py-2 rounded-r border-l border-white/20 transition-colors"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>
    </div>
    
  </div>

  <!-- Liste des catégories -->
  <div 
    class="bg-zinc-900/50 md:p-10 p-3 md:gap-2 gap-5 grid md:grid-cols-8 grid-cols-2"
    x-show="!activeCategory && !isSearchActive && (searchResults.length === 0) || window.innerWidth >= 768"
  >
    @foreach($categories as $category)
      <button 
        type="button" 
        class="md:h-38 h-30 p-3 md:gap-5 gap-3 relative border border-brand transition-colors flex justify-center flex-col items-center"
        :class="{
          'bg-brand': activeCategory === {{ $category->id }},
          'hover:bg-white/10': activeCategory !== {{ $category->id }}
        }"
        @click="scrollToCategory({{ $category->id }})"
      >
        <span class="absolute rounded-full w-8 h-8 flex justify-center items-center bg-brand top-0 left-0 -translate-x-1/3 -translate-y-1/3 ring-6 ring-brand/50">
            {{ $category->count }}
        </span>
        <img src="{{ $category->icon }}" class="md:h-15 h-10 object-contain" alt="icon">
        <span class="tracking-wider text-sm md:text-sm text-center line-clamp-2">
          {{ $category->title }}
        </span>
      </button>
    @endforeach
  </div>

  <!-- Contenu des catégories -->
  @foreach($categories as $category)
    <div 
      x-show="activeCategory === {{ $category->id }} && !isSearchActive && (window.innerWidth < 768 || true)"
      class="bg-zinc-900/50 md:mt-10 md:p-10 p-5"
      x-cloak
      x-ref="category_{{ $category->id }}"
    >
      <div class="flex justify-between items-center mb-10">
        <h2 class="md:text-xl tracking-wider flex items-center gap-4">
          <span class="bg-brand h-7 w-7 flex justify-center items-center rounded-full">{{ $category->count }}</span>
          {{ $category->title }}
        </h2>
        <button 
          type="button" 
          @click="activeCategory = null"
          class="text-white hover:text-brand transition-colors"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      
      @if($category->parts->count() > 0)
        <div class="grid md:grid-cols-7 grid-cols-2 md:gap-10 gap-5">
          @foreach($category->parts as $part)
            <div class="flex flex-col items-center">
              <div class="w-full aspect-square h-32 md:h-32 mb-2 flex justify-center items-center overflow-hidden cursor-pointer" @click="openZoom('{{ $part->image }}')">
                <img src="{{ $part->image }}" class="w-full h-full object-contain" alt="{{ $part->title }}">
              </div>
              <h3 class="text-center tracking-wider md:text-base w-full mb-0" style="font-size:11px;" title="{{ $part->title }}">
                {{ $part->title }}
              </h3>
              @if($part->reference)
                <span class="text-xs text-gray-400">{{ $part->reference }}</span>
              @endif
              <div class="flex flex-col mt-2 items-center justify-between w-full gap-2 md:px-5">
                <div class="flex flex-col items-center md:items-start">
                  <h4 class="text-brand tracking-wider text-sm">{{ intval($part->price) }} dhs</h4>
                  
                </div>
                <button 
                  type="button"
                  @click="toggleCart({{ $part->id }}, { id: {{ $part->id }}, title: @js($part->title), image: @js($part->image), price: {{ $part->price }}, reference: @js($part->reference) })"
                  class="px-4 py-1 rounded-md text-xs tracking-wider transition-colors"
                  :class="isInCart({{ $part->id }}) ? 'bg-brand-dark text-white cursor-pointer' : 'bg-brand hover:bg-brand-dark text-white'"
                  x-text="isInCart({{ $part->id }}) ? 'Ajouté' : 'Ajouter'"
                ></button>
              </div>
            </div>
          @endforeach
        </div>
      @else
        <div class="text-center py-10 tracking-wider">
          Aucun produit disponible
        </div>
      @endif
    </div>
  @endforeach
  
  <!-- Zone unifiée pour les résultats de recherche -->
  <div 
    x-show="isSearchActive"
    x-cloak
    class="bg-zinc-900/50 md:mt-10 md:p-10 p-5"
    x-ref="searchResultsContainer"
  >
    <div class="flex justify-between items-center mb-10">
      <h2 class="md:text-xl tracking-wider flex items-center gap-4">
        Résultats de recherche
      </h2>
      <button 
        type="button" 
        @click="clearSearch()"
        class="text-white hover:text-brand transition-colors"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    
    <div x-show="searchResults.length > 0" class="grid md:grid-cols-4 grid-cols-2 md:gap-10 gap-5">
      <template x-for="part in searchResults" :key="part.id">
        <div class="flex flex-col items-center">
          <div class="w-full aspect-square h-32 md:h-32 mb-2 flex justify-center items-center overflow-hidden cursor-pointer" @click="openZoom(part.image)">
            <img :src="part.image" class="w-full h-full object-contain mb-3" :alt="part.title">
          </div>
        
          <h3 class="text-center tracking-wider text-sm md:text-base w-full md:truncate" :title="part.title" x-text="part.title"></h3>
          <span x-show="part.reference" class="text-xs text-gray-400" x-text="'Réf: ' + part.reference"></span>
          <div class="flex flex-col mt-2 md:flex-row items-center justify-between w-full gap-3 md:gap-0 md:px-5">
            <div class="flex flex-col items-center md:items-start">
              <h4 class="text-brand tracking-wider" x-text="parseInt(part.price) + ' dhs'"></h4>
            </div>
            <button 
              type="button"
              @click="toggleCart(part.id, part)"
              class="px-4 py-2 rounded-md text-sm tracking-wider transition-colors"
              :class="isInCart(part.id) ? 'bg-brand-dark text-white cursor-pointer' : 'bg-brand hover:bg-brand-dark text-white'"
              x-text="isInCart(part.id) ? 'Ajouté' : 'Ajouter'"
            ></button>
          </div>
        </div>
      </template>
    </div>
    
    <div x-show="searchResults.length === 0" class="text-center py-10 tracking-wider">
      Aucun résultat trouvé pour cette référence
    </div>
  </div>

  <!-- Modal Zoom Image -->
  <div 
    x-show="zoomedImage" 
    x-cloak
    class="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-sm p-5"
    @click="closeZoom()"
    @keydown.escape.window="closeZoom()"
    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"
  >
    <button 
      type="button" 
      @click="closeZoom()"
      class="absolute top-5 right-5 text-white hover:text-brand transition-colors z-10"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
    <img :src="zoomedImage" class="w-full h-full object-contain rounded-lg shadow-2xl" @click.stop>
  </div>

  <!-- Modal Panier -->
  <div
    x-show="openCartModal"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md"
    @keydown.escape.window="closeCartModal()"
  >
  <div
    class="bg-[#0c0c0d] shadow-xl transition-all ease-in-out transform 
          p-5 px-5 w-full h-full max-w-full max-h-full overflow-x-hidden overflow-y-auto relative 
          pt-[calc(env(safe-area-inset-top)+2em)] pb-[calc(env(safe-area-inset-bottom)+2em)]
          md:p-7 md:h-auto md:max-w-3xl"
    @click.outside="closeCartModal()"
    x-transition:enter="transition transform duration-400"
    x-transition:enter-start="opacity-0 scale-75"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transition transform duration-200"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-90"
  >

      <h2 class="text-xl tracking-wider flex justify-between items-center mb-7">
        <div class="flex items-center gap-4">
          <!-- SVG rouge carré uniquement sur le panier -->
          <svg class="w-4" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg" x-show="!showForm">
            <path d="M22 22.907L4 9V35L22 22.907Z" fill="#ED1D24" stroke="#ED1D24" stroke-width="4"/>
          </svg>
          <!-- Flèche retour visible uniquement sur le form -->
          <button type="button" x-show="showForm" @click="showForm = false" class="focus:outline-none">
            <svg class="w-6 h-6 text-brand hover:text-brand-dark transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <span>
            Mon panier
          </span>
        </div>
        <button type="button" class="hover:text-brand transition-colors" @click="closeCartModal()">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </h2>
      <template x-if="cartProducts.length > 0">
        <div>
          <div x-show="!showForm">
            <template x-for="prod in cartProducts" :key="prod.id">
              <div class="flex items-center gap-5 border-b border-zinc-800 py-4">
                <img :src="prod.image" class="w-16 h-16 object-contain" alt="" />
                <div class="flex-1">
                  <div class="tracking-wider" x-text="prod.title"></div>
                  <div class="flex items-center gap-2 mt-1">
                    <span class="font-open-sans opacity-50" x-text="parseInt(prod.price) + ' dhs'">
                    </span>
                    <button type="button" class="text-red-500 px-3 font-open-sans transition-colors rounded  hover:bg-white/5" @click="removeFromCart(prod.id)">
                      Supprimer
                    </button>
                  </div>
                </div>
              </div>
            </template>
            <p class="text-xs text-center tracking-wider text-green-400 mt-4 mt-2">
              Les frais de la livraison ne sont pas inclus dans ce total.
            </p>
            <button type="button" class="w-full mt-4 py-3 bg-brand hover:bg-brand-dark transition-colors text-lg tracking-wider" @click="showForm = true">
              Continuer
              <span  x-text="'(Total: '+parseInt(totalPrice) + ' dhs)'"></span>
            </button>
          </div>
        </div>
      </template>
      <template x-if="cartProducts.length === 0">
        <div class="text-center py-10 tracking-wider">
          Aucun produit dans le panier
        </div>
      </template>

      <!-- Formulaire demande -->
      <div x-show="showForm" x-cloak>
        <form @submit.prevent="submitRequest" class="mt-8 flex flex-col gap-5">
          <div class="grid md:grid-cols-2 grid-cols-1 gap-5">
            <input type="text" class="placeholder:text-white/80 px-5 bg-white/5 border border-white/20 py-4 font-open-sans" placeholder="Nom" x-model="form.lastname" required>
            <input type="text" class="placeholder:text-white/80 px-5 border bg-white/5 border-white/20 py-4 font-open-sans" placeholder="Prénom" x-model="form.firstname" required>
          </div>
          
          <input type="email" class="placeholder:text-white/80 px-5 border bg-white/5 border-white/20 py-4 font-open-sans" placeholder="Email" x-model="form.email" required>
          <input type="text" class="placeholder:text-white/80 px-5 border bg-white/5 border-white/20 py-4 font-open-sans" placeholder="Téléphone" x-model="form.phone" required>
          <textarea class="placeholder:text-white/80 px-5 border bg-white/5 border-white/20 py-4 font-open-sans" placeholder="Message (optionnel)" x-model="form.message"></textarea>
          <div>
            <label class="block mb-2 tracking-wider">Preuve que vous avez une moto Cimatti (optionnel):</label>
            <div class="flex flex-col md:flex-row items-center gap-4 font-open-sans">
              <!-- Zone d'upload améliorée -->
              <label class="cursor-pointer bg-white/5 px-4 py-4 md:py-2 rounded shadow hover:bg-white/10 transition-colors flex items-center justify-center w-full md:w-auto relative min-h-[60px] md:min-h-[auto]">
                <span class="flex items-center gap-2 w-full justify-center">
                  <svg class="w-6 h-6 text-brand" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/>
                  </svg>
                  <span x-text="form.proof ? form.proof.name : 'Importer une image'"></span>
                </span>
                <input type="file" accept="image/*" @change="handleProof" class="absolute inset-0 opacity-0 cursor-pointer">
              </label>
              <span class="text-zinc-400 text-sm md:ml-0 ml-2" x-show="!form.proof">Aucun fichier choisi</span>
              <template x-if="form.proof">
                <div class="flex flex-col md:flex-row items-center gap-2 w-full md:w-auto">
                  <img :src="form.proofUrl" class="w-24 h-24 md:w-10 md:h-10 object-contain rounded border bg-white/5 border-white/20 mb-2 md:mb-0" alt="">
                  <button type="button" class="text-red-500 px-3 py-2 rounded hover:bg-red-900/30 transition-colors w-full md:w-auto" @click="removeProof">Supprimer</button>
                </div>
              </template>
            </div>
          </div>
          <div class="bg-red-900/20 border border-red-700/50 p-5 rounded-xl mt-6 shadow-md">
            <div class="flex items-start gap-4">
              <label 
                for="consigne" 
                class="flex items-start gap-3 cursor-pointer group select-none"
              >
                <!-- Checkbox custom -->
                <div 
                  class="relative w-5 h-5 flex items-center justify-center border-2 border-gray-500 rounded-md 
                        group-hover:border-red-400 transition duration-200"
                >
                  <input 
                    type="checkbox" 
                    id="consigne" 
                    x-model="form.consigne" 
                    class="absolute inset-0 opacity-0 cursor-pointer peer"
                    required
                  >
                  <!-- Check icon -->
                  <svg 
                    class="w-4 h-4 text-red-500 opacity-0 peer-checked:opacity-100 transition duration-200" 
                    xmlns="http://www.w3.org/2000/svg" 
                    fill="none" 
                    viewBox="0 0 24 24" 
                    stroke="currentColor" 
                    stroke-width="3"
                  >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>

              <!-- Texte -->
              <label for="consigne" class="flex flex-col gap-3 text-sm text-gray-200 font-open-sans cursor-pointer">
                <span class="font-semibold text-red-300 text-base">
                  ⚠️ J'ai compris les consignes
                </span>

                <div class="bg-red-950/40 border border-red-800 rounded-lg p-3 leading-relaxed">
                  <p class="mb-2 flex items-start gap-2">
                    <span class="text-red-400 font-bold">1.</span>
                    <span>
                      Vous devez <span class="font-semibold text-white">fournir une image justificative</span> 
                      prouvant que vous possédez bien une 
                      <span class="font-semibold text-red-300">moto Cimatti</span>.
                    </span>
                  </p>

                  <p class="flex items-start gap-2">
                    <span class="text-red-400 font-bold">2.</span>
                    <span>
                      Les <span class="font-semibold text-white">pièces de rechange</span> peuvent être 
                      <span class="font-semibold text-red-300">temporairement indisponibles</span>.  
                      Nous vous contacterons par <span class="font-semibold text-white">e-mail/téléphone</span> 
                      pour plus de détails.
                    </span>
                  </p>
                </div>
              </label>
            </div>
          </div>

          <button type="submit" class="w-full mt-4 py-3 bg-brand hover:bg-brand-dark transition-colors rounded text-lg tracking-wider" :disabled="loading">
            <span x-show="!loading">Envoyer</span>
            <span x-show="loading">Envoi...</span>
          </button>
        </form>
      </div>
      <!-- Modal succès -->
      <div x-show="showSuccess" x-cloak class="fixed inset-0 z-60 flex items-center justify-center bg-black/60">
        <div class="bg-[#0c0c0d] p-10 text-center max-w-md mx-auto">
          <div class="text-2xl text-green-500 tracking-wider mb-4">Demande envoyée !</div>
          <div class="mb-6 font-open-sans">Nous allons vous répondre par email/téléphone une fois que nous aurons analysé votre demande.</div>
          <button type="button" class="bg-white/5 hover:bg-white/10 transition-colors  px-6 py-2 tracking-wider" @click="closeSuccessModal">Fermer</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
/*
  On injecte le JSON préparé côté serveur dans une variable JS sécurisée.
  Utiliser {!! $partsData !!} (raw) pour éviter l'échappement qui briserait le JSON.
*/
window.__MOTO_PARTS_DATA__ = (function(){
  try {
    return {!! $partsData !!};
  } catch (e) {
    console.error('Erreur injection __MOTO_PARTS_DATA__', e);
    return [];
  }
})();

function motoPartsCart(motoId) {
  return {
    activeCategory: null,
    openCartModal: false,
    zoomedImage: null,
    cart: [],
    cartProducts: [],
    showForm: false,
    showSuccess: false,
    loading: false,
    _allParts: [],
    searchReference: '',
    searchResults: [],
    isSearchActive: false,
    scrollPosition: 0,
    scrollLocked: false,
    form: {
      firstname: '',
      lastname: '',
      email: '',
      phone: '',
      message: '',
      proof: null,
      proofUrl: '',
      consigne: false,
      moto_title: @js($moto->title),
    },

    init() {
      // Build flat list of parts from injected data
      try {
        this._allParts = [];
        (window.__MOTO_PARTS_DATA__ || []).forEach(cat => {
          (cat.parts || []).forEach(part => {
            const normalized = {
              id: Number(part.id),
              title: part.title || '',
              image: part.image || '',
              price: Number(part.price || 0),
              reference: part.reference || '',
              parts_category_id: part.parts_category_id
            };
            this._allParts.push(normalized);
          });
        });
      } catch (e) {
        console.error('Erreur build _allParts', e);
        this._allParts = [];
      }

      this.loadCart();
      this.refreshCartProducts();
      
      // Amélioration: Gérer l'ouverture/fermeture du modal correctement
      this.$watch('openCartModal', v => v ? this.lockScroll() : this.unlockScroll());
    },

    openZoom(url) {
      this.zoomedImage = url;
      this.lockScroll();
    },

    closeZoom() {
      this.zoomedImage = null;
      if (!this.openCartModal) {
        this.unlockScroll();
      }
    },
    
    // Nouvelle méthode améliorée pour verrouiller le défilement
    lockScroll() {
      if (this.scrollLocked) return;
      this.scrollLocked = true;
      this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || 0;
      // Appliquer d'abord top pour éviter flash en haut
      document.body.style.top = `-${this.scrollPosition}px`;
      document.body.style.left = '0';
      document.body.style.right = '0';
      document.body.style.width = '100%';
      document.body.style.position = 'fixed';
      document.body.classList.add('overflow-hidden');
    },
    
    // Nouvelle méthode améliorée pour déverrouiller le défilement
    unlockScroll() {
      if (!this.scrollLocked) return;
      this.scrollLocked = false;
      document.body.classList.remove('overflow-hidden');
      const y = -parseInt(document.body.style.top || '0', 10);
      document.body.style.position = '';
      document.body.style.top = '';
      document.body.style.left = '';
      document.body.style.right = '';
      document.body.style.width = '';
      window.scrollTo(0, y);
    },
    
    // Fonction de recherche améliorée
    searchParts() {
      const query = (this.searchReference || '').trim().toLowerCase();
      if (!query) { this.clearSearch(); return; }
      this.activeCategory = null;
      this.searchResults = this._allParts.filter(
        p => (p.reference || '').toLowerCase().includes(query) || (p.title || '').toLowerCase().includes(query)
      );
      this.isSearchActive = true;
      this.$nextTick(() => {
        // Scroll prioritaire vers la zone résultats
        if (this.$refs.searchResultsContainer) {
          this.$refs.searchResultsContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else if (this.$refs.searchAnchor) {
          this.$refs.searchAnchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    },
    
    clearSearch() {
      this.searchReference = '';
      this.searchResults = [];
      this.isSearchActive = false;
    },

    storageKey() {
      return 'cart_' + motoId;
    },

    loadCart() {
      try {
        const raw = localStorage.getItem(this.storageKey());
        if (raw) {
          const parsed = JSON.parse(raw);
          if (Array.isArray(parsed)) {
            this.cart = parsed.map(i => Number(i)).filter(n => !Number.isNaN(n));
          } else {
            this.cart = [];
          }
        } else {
          this.cart = [];
        }
      } catch (e) {
        console.error('Erreur loadCart', e);
        this.cart = [];
      }
      this.validateCart();
    },

    saveCart() {
      try {
        const normalized = this.cart.map(i => Number(i)).filter(n => !Number.isNaN(n));
        localStorage.setItem(this.storageKey(), JSON.stringify(normalized));
        console.log('saveCart', normalized);
      } catch (e) {
        console.error('Erreur saveCart', e);
      }
      this.refreshCartProducts();
    },

    validateCart() {
      const valid = (this.cart || []).filter(id => {
        return this._allParts.some(p => Number(p.id) === Number(id));
      });
      if (valid.length !== this.cart.length) {
        console.log('validateCart : removing invalid ids', { before: this.cart, after: valid });
        this.cart = valid;
        try { localStorage.setItem(this.storageKey(), JSON.stringify(this.cart)); } catch(e){}
      }
      this.refreshCartProducts();
    },

    refreshCartProducts() {
      this.cartProducts = (this.cart || []).map(id => {
        return this._allParts.find(p => Number(p.id) === Number(id));
      }).filter(Boolean).map(p => ({
        id: Number(p.id),
        title: p.title,
        image: p.image,
        price: Number(p.price || 0),
        reference: p.reference || ''
      }));

      // sync cart storage if mismatch
      const existingIds = this.cartProducts.map(p => Number(p.id));
      if (JSON.stringify(existingIds) !== JSON.stringify(this.cart.map(Number))) {
        this.cart = existingIds;
        try { localStorage.setItem(this.storageKey(), JSON.stringify(this.cart)); } catch(e){}
      }

      console.log('refreshCartProducts', { cart: this.cart, cartProducts: this.cartProducts });
    },

    isInCart(id) {
      return (this.cart || []).some(pid => Number(pid) === Number(id));
    },

    toggleCart(id, part = null) {
      const numericId = Number(id);
      if (this.isInCart(numericId)) {
        this.cart = this.cart.filter(pid => Number(pid) !== numericId);
        console.log('toggleCart - removed', numericId, this.cart);
        this.saveCart();
      } else {
        this.cart.push(numericId);
        console.log('toggleCart - added', numericId, this.cart);
        this.saveCart();
        this.openCartModal = true;
      }
    },

    removeFromCart(id) {
      const numericId = Number(id);
      this.cart = this.cart.filter(pid => Number(pid) !== numericId);
      console.log('removeFromCart', numericId, this.cart);
      this.saveCart();
    },

    closeCartModal() {
      this.openCartModal = false;
      this.showForm = false;
    },

    openCartModalHandler() {
      this.openCartModal = true;
    },

    get totalPrice() {
      return (this.cartProducts || []).reduce((sum, p) => sum + (Number(p.price) || 0), 0);
    },

    handleProof(e) {
      const file = e.target.files[0];
      if (file) {
        this.form.proof = file;
        this.form.proofUrl = URL.createObjectURL(file);
      }
    },

    removeProof() {
      this.form.proof = null;
      this.form.proofUrl = '';
    },

    async submitRequest() {
      if (!this.form.consigne || !this.form.firstname || !this.form.lastname || !this.form.email || !this.form.phone || this.cart.length === 0) return;
      this.loading = true;
      const fd = new FormData();
      fd.append('firstname', this.form.firstname);
      fd.append('lastname', this.form.lastname);
      fd.append('email', this.form.email);
      fd.append('phone', this.form.phone);
      fd.append('message', this.form.message);
      if (this.form.proof) { fd.append('proof', this.form.proof); }
      fd.append('parts', JSON.stringify(this.cart));
      fd.append('moto_title', this.form.moto_title);
      fd.append('_token', '{{ csrf_token() }}');
      try {
        const res = await fetch('{{ route('part-request.store') }}', {
          method: 'POST',
          body: fd,
        });
        const data = await res.json();
        if (data.success) {
          this.showForm = false;
          this.showSuccess = true;
          this.cart = [];
          this.saveCart();
          document.body.classList.add('overflow-hidden');
        } else {
          alert(data.message || 'Erreur lors de l\'envoi');
        }
      } catch (err) {
        console.error(err);
        alert('Erreur lors de l\'envoi');
      }
      this.loading = false;
    },

    closeSuccessModal() {
      this.showSuccess = false;
      this.openCartModal = false;
      document.body.classList.remove('overflow-hidden');
      this.form = {
        firstname: '',
        lastname: '',
        email: '',
        phone: '',
        message: '',
        proof: null,
        proofUrl: '',
        consigne: false,
        moto_title: @js($moto->title),
      };
    },

    scrollToCategory(categoryId) {
      // Désactiver la recherche si active
      this.isSearchActive = false;
      this.toggleCategory(categoryId);
      this.$nextTick(() => {
        const el = this.$refs['category_' + categoryId];
        if (el) {
          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    },

    toggleCategory(categoryId) {
      // Fermer la recherche si active
      if (this.isSearchActive) {
        this.isSearchActive = false;
      }
      
      this.activeCategory = this.activeCategory === categoryId ? null : categoryId;
    }
  }
}
</script>