@extends('layouts.public')
@section('title', "Demande de crédit gratuit")
@section('content')
<div class="max-w-2xl mx-auto md:mt-15 mt-10 px-5" x-data="freeCreditForm()">
  <div class="md:py-20 relative">
    @include('backgrounds.bg-5')
    <h2 class="md:text-4xl text-xl px-5 md:px-0 md:text-center flex flex-col md:items-center tracking-wider capitalize gap-5">
        <span>Formulaire d'inscription pour Crédit Gratuit</span>
        <span class="text-brand md:text-base md:text-center text-sm md:mb-0 tracking-wider mt-2 capitalize">
          Remplissez et envoyez le formulaire ci-dessous
        </span>
    </h2>   
  </div>
  <form @submit.prevent="submit" class="flex flex-col gap-6 bg-gradient-to-b from-[#0c0c0d] to-black md:p-8 p-5 mt-10 md:mt-0">
    <!-- Dropdown Moto + Couleur -->
    <div class="flex flex-col gap-2">
      <!-- Utilise open dans le composant principal Alpine -->
      <div class="relative" @click.outside="open = false">
        <template x-if="open">
          <div class="relative">
            <input
              x-ref="searchInput"
              type="text"
              class="w-full px-5 py-4 font-open-sans border bg-white/5 border-white/20  text-white text-left flex items-center justify-between gap-3 focus:outline-none pr-12"
              placeholder="Rechercher une moto..."
              x-model="searchMoto"
              @keydown.escape="open = false"
            />
            <button
              type="button"
              class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center h-6 w-6 text-white/70 hover:text-white focus:outline-none"
              @click="if(searchMoto){searchMoto = ''; $refs.searchInput && $refs.searchInput.focus();}else{open = false;}"
              x-transition
            >
              <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>
        </template>
        <template x-if="!open">
          <button type="button"
            class="w-full px-5 py-4 font-open-sans border bg-white/5 border-white/20 text-white text-left flex items-center justify-between gap-3"
            @click="open = true; $nextTick(() => { $refs.searchInput && $refs.searchInput.focus(); })"
          >
            <span class="text-gray-400 md:inline-block hidden">Moto désirée:</span>
            <template x-if="selectedMoto && selectedColor">
              <span class="flex items-center gap-7">
                <span class="text-white" x-text="selectedMoto.title + ' ' + selectedColor.label"></span>
                <img :src="selectedColor.image" alt="" class=" h-8 object-cover " />
              </span>
            </template>
            <template x-if="!(selectedMoto && selectedColor)">
              <span class="text-white">Sélectionner une moto et couleur</span>
            </template>
            <svg height="15" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M23 6.77371L21.3831 5.17505L11.485 14.6755L10.4293 13.6619L10.4351 13.6675L1.64105 5.22671L0 6.80122C2.42995 9.13457 9.2161 15.6481 11.485 17.8251C13.1709 16.2081 11.5276 17.785 23 6.77371Z" fill="white"/>
            </svg>
          </button>
        </template>
        <div x-show="open"  style="max-height:400px; overflow-y:auto;" x-transition class="absolute left-0 font-open-sans top-full w-full bg-[#0c0c0d] border border-white/10 rounded shadow-lg z-10 mt-2">
          <!-- Liste filtrée -->
          <template
            x-for="moto in motos.filter(m => m.title.toLowerCase().includes(searchMoto.toLowerCase()))"
            :key="moto.id"
          >
            <div>
              <div class="px-4 py-2 bg-white/5" x-text="moto.title"></div>
              <div class="grid md:grid-cols-2 grid-cols-1">
                <template x-for="color in moto.variants" :key="color.id">
                  <button
                    type="button"
                    class="px-4 py-2 text-left flex items-center gap-2"
                    :class="selectedMoto && selectedColor && selectedMoto.id === moto.id && selectedColor.id === color.id ? 'bg-brand' : 'hover:bg-white/3'"
                    @click="selectMoto(moto, color); open = false; searchMoto = '';"
                  >
                    <img :src="color.image" alt="" class="h-8 object-cover rounded border border-white/10" />
                    <span class="inline-block w-5 h-5 border mr-2" :style="`background:${color.hex}`"></span>
                    <span x-text="color.label"></span>
                  </button>
                </template>
              </div>
            </div>
          </template>
          <!-- Si aucun résultat -->
          <template x-if="motos.filter(m => m.title.toLowerCase().includes(searchMoto.toLowerCase())).length === 0">
            <div class="px-4 py-4 text-center text-white/70">Aucune moto trouvée</div>
          </template>
        </div>
      </div>
    </div>
    <div class="grid md:grid-cols-2 grid-cols-1 gap-6">
      <input type="text" class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" placeholder="Nom" x-model="form.lastname" required>
      <input type="text" class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" placeholder="Prénom" x-model="form.firstname" required>
    </div>
    
    <input type="text" class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" placeholder="Numéro de téléphone personnel " x-model="form.phone" required>
    <input type="text" class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" placeholder="Numéro CIN" x-model="form.cin" required>

    <input type="text" class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" placeholder="Métier" x-model="form.work" required>
    <input type="text" class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" placeholder="Ville de résidence" x-model="form.city" required>
    <textarea rows="7" class="placeholder:text-white/80 px-5 font-open-sans border bg-white/5 border-white/20 py-4" placeholder="Votre message (Optionel)" x-model="form.message"></textarea>
    <button type="submit" class="w-full py-3 bg-brand hover:bg-brand-dark transition-colors text-lg tracking-wider" :disabled="loading">
      <span x-show="!loading">Envoyer</span>
      <span x-show="loading">Envoi...</span>
    </button>
  </form>
  <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 rapidement.</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>
  <!-- Modal d'erreur -->
  <div x-show="error" 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-red-500 tracking-wider mb-4">Erreur</div>
      <div class="mb-6 font-open-sans" x-text="error"></div>
      <button type="button" class="bg-white/5 hover:bg-white/10 transition-colors px-6 py-2 tracking-wider" @click="error = ''">Fermer</button>
    </div>
  </div>
</div>
<script>
function freeCreditForm() {
  return {
    motos: @json(\App\Models\Moto::with('variants')->where('active', true)->orderBy('visibility_order')->get()),
    selectedMoto: null,
    selectedColor: null,
    searchMoto: '',
    open: false,
    form: {
      moto_title: '',
      lastname: '',
      firstname: '',
      phone: '',
      cin: '',
      work: '',
      city: '',
      message: '',
    },
    loading: false,
    error: '',
    showSuccess: false,

    selectMoto(moto, color) {
      this.selectedMoto = moto;
      this.selectedColor = color;
      this.form.moto_title = moto.title + ' ' + color.label;
    },

    async submit() {
      this.loading = true;
      this.error = '';
      try {
        if (!this.form.moto_title) {
          this.error = 'Veuillez choisir une moto et une couleur.';
          this.loading = false;
          return;
        }
        const fd = new FormData();
        fd.append('moto_title', this.form.moto_title);
        fd.append('lastname', this.form.lastname);
        fd.append('firstname', this.form.firstname);
        fd.append('phone', this.form.phone);
        fd.append('cin', this.form.cin);
        fd.append('work', this.form.work);
        fd.append('city', this.form.city);
        fd.append('message', this.form.message);
        fd.append('_token', '{{ csrf_token() }}');

        const res = await fetch('{{ route('free-credit-request.store') }}', {
          method: 'POST',
          body: fd,
        });

        const data = await res.json();

        if (data.success) {
          this.showSuccess = true;

          this.form.moto_title = '';
          this.form.lastname = '';
          this.form.firstname = '';
          this.form.phone = '';
          this.form.cin = '';
          this.form.work = '';
          this.form.city = '';
          this.form.message = '';

          this.selectedMoto = null;
          this.selectedColor = null;
        } else {
          this.error = data.message || 'Erreur lors de l\'envoi';
        }
      } catch (err) {
        this.error = 'Erreur lors de l\'envoi';
      }
      this.loading = false;
    },

    closeSuccessModal() {
      this.showSuccess = false;
    }
  }
}
</script>

@endsection