@extends('layouts.public')
@section('title', "Service Après-Vente - Inscription à l'application d'entretien")
@section('content')
<div class="max-w-2xl mx-auto md:mt-15 mt-10 px-5" x-data="savForm()">
  <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>Service Après-Vente</span>
        <span class="text-brand md:text-base md:text-center text-sm md:mb-0 tracking-wider mt-2 capitalize">
          Inscription à l'application d'entretien
        </span>
    </h2>   
  </div>
  
  <form @submit.prevent="submit"  autocomplete="off" class="flex flex-col gap-6 bg-gradient-to-b from-[#0c0c0d] to-black md:p-8 p-5">
    <!-- Dropdown Moto + Couleur -->
    <div class="flex flex-col gap-2">
      <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-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: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-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">
          <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>
          <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="tel" 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" x-model="form.phone" required>

    <!-- Identifiant avec vérification live -->
    <div class="flex flex-col gap-2">
      <div class="relative">
        <input 
          type="text" 
          class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4 w-full" 
          placeholder="Identifiant unique (ex: cimatti2024, jean.dupont, etc.)" 
          x-model="form.identifier" 
          @input.debounce.500ms="checkIdentifier"
          required
        >
        <div class="absolute right-3 top-1/2 -translate-y-1/2" x-show="checkingIdentifier">
          <svg class="animate-spin h-5 w-5 text-white" 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>
        </div>
      </div>
      <div class="text-sm font-open-sans px-2">
        <template x-if="identifierStatus === 'available'">
          <span class="text-green-500 flex items-center gap-2">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
            Identifiant disponible
          </span>
        </template>
        <template x-if="identifierStatus === 'unavailable'">
          <span class="text-red-500 flex items-center gap-2">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
            </svg>
            Identifiant déjà utilisé
          </span>
        </template>
        <template x-if="!identifierStatus && form.identifier.length === 0">
          <span class="text-white/60">
            Choisissez un identifiant unique pour vous connecter (lettres, chiffres, points, tirets)
          </span>
        </template>
      </div>
    </div>

    <div class="flex flex-col gap-2">
      <div class="text-xs text-brand/80 italic px-2">
        <i class="bi bi-info-circle"></i> Attention : Ce mot de passe sera visible par les magasiniers. Utiliser un mot de passe simple.
      </div>
      <input 
        type="password" 
        class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" 
        placeholder="Mot de passe (minimum 6 caractères)" 
        x-model="form.password" 
        minlength="6"
        required
      >
    </div>

    <!-- Numéro de châssis avec validation -->
    <div class="flex flex-col gap-2">
      <template x-if="expectedPrefix">
        <div class="text-sm font-open-sans px-2 text-blue-400 flex items-center gap-2">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
          </svg>
          Votre châssis devrait commencer par: <span class="font-bold" x-text="expectedPrefix"></span>
        </div>
      </template>
      <input 
        type="text" 
        class="placeholder:text-white/80 font-open-sans px-5 border bg-white/5 border-white/20 py-4" 
        :class="chassisError ? 'border-red-500' : ''"
        placeholder="Numéro de châssis complet (ex: LXYTCPMH8N1234567)" 
        x-model="form.chassis_number" 
        @input="validateChassis()"
        required
      >
      <template x-if="chassisError">
        <div class="text-sm font-open-sans px-2 text-red-500 flex items-start gap-2">
          <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
          </svg>
          <span>Votre numéro de châssis ne correspond pas au modèle de votre moto. Veuillez le vérifier ou nous joindre si vous avez besoin d'aide.</span>
        </div>
      </template>
    </div>

    <div class="flex flex-col gap-2">
      <label class="text-white/80 font-open-sans text-sm px-2">Date de vente <span class="text-red-500">*</span></label>
      <input 
        type="date" 
        class="font-open-sans px-5 border bg-white/5 border-white/20 py-4 text-white [color-scheme:dark]" 
        x-model="form.sale_date" 
        required
      >
    </div>

    <button 
      type="submit" 
      class="w-full py-3 bg-brand hover:bg-brand-dark transition-colors text-lg tracking-wider disabled:opacity-50 disabled:cursor-not-allowed" 
      :disabled="loading || identifierStatus === 'unavailable' || chassisError"
    >
      <span x-show="!loading">Envoyer ma demande</span>
      <span x-show="loading">Envoi en cours...</span>
    </button>
  </form>

  <!-- Boutons d'accès à l'application -->
  <div class="flex flex-col gap-4 mb-8 bg-gradient-to-b from-brand/10 to-transparent border border-brand/30 md:p-8 p-5 md:m-8 m-5 mt-0">
    <div class="text-center mb-4">
      <h3 class="text-xl tracking-wider mb-2">Accédez à l'application d'entretien</h3>
      <p class="text-white/70 text-sm font-open-sans">Suivez l'historique d'entretien de votre moto</p>
    </div>
    <div class="grid md:grid-cols-2 grid-cols-1 gap-4">
      <a href="https://sav.cimatti.ma/" target="_blank" 
         class="flex items-center justify-center font-open-sans gap-3 px-6 py-4 bg-brand hover:bg-brand-dark transition-all   border border-white/20 shadow-lg hover:shadow-xl">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
        </svg>
        <span>Version Web</span>
      </a>
      <a href="https://sav.cimatti.ma/apk" target="_blank"
         class="flex items-center justify-center font-open-sans gap-3 px-6 py-4 border-green-400 border text-green-400 hover:bg-green-700/30 transition-all   shadow-lg hover:shadow-xl">
        <svg class="w-6 h-6" fill="currentColor" viewBox="-146 129 218 256">
        <g>
          <path d="M-2.9,150.4l2.8-4.2l2.8-4.1l6.2-9.3c0.8-1.1,0.5-2.7-0.7-3.4c-1.1-0.8-2.7-0.5-3.4,0.7l-6.6,9.9l-2.8,4.2l-2.8,4.2
            c-9-3.5-18.9-5.4-29.5-5.4c-10.5,0-20.5,1.9-29.5,5.4l-2.8-4.2L-72,140l-6.6-9.9c-0.8-1.1-2.3-1.4-3.4-0.7
            c-1.1,0.8-1.4,2.3-0.7,3.4l6.2,9.3l2.8,4.1l2.8,4.2c-21,9.8-35.3,28.3-35.3,49.6H32.5C32.4,178.7,18.2,160.2-2.9,150.4z
            M-66.7,180.1c-4.1,0-7.4-3.3-7.4-7.4c0-4.1,3.3-7.4,7.4-7.4c4.1,0,7.4,3.3,7.4,7.4S-62.6,180.1-66.7,180.1z M-7.3,180.1
            c-4.1,0-7.4-3.3-7.4-7.4c0-4.1,3.3-7.4,7.4-7.4c4.1,0,7.4,3.3,7.4,7.4C0.2,176.8-3.1,180.1-7.3,180.1z"/>
          <path d="M-105.3,209.8l-1.1,0.1v12.3v10.1v86.6c0,8.7,7,15.7,15.7,15.7h11.3c-0.4,1.3-0.6,2.7-0.6,4.1v0.8v5v25.6
            c0,8.2,6.7,14.9,14.9,14.9s14.9-6.7,14.9-14.9v-25.6v-5v-0.8c0-1.4-0.2-2.8-0.6-4.1h27.6c-0.4,1.3-0.6,2.7-0.6,4.1v0.8v5v25.6
            c0,8.2,6.7,14.9,14.9,14.9c8.2,0,14.9-6.7,14.9-14.9v-25.6v-5v-0.8c0-1.4-0.2-2.8-0.6-4.1h11.3c8.7,0,15.7-7,15.7-15.7v-86.6v-10.1
            v-12.4h-1.1H-105.3z"/>
          <path d="M-131.1,209.9c-8.2,0-14.9,6.7-14.9,14.9v63.6c0,8.2,6.7,14.9,14.9,14.9c8.2,0,14.9-6.7,14.9-14.9v-63.6
            C-116.3,216.5-122.9,209.9-131.1,209.9z"/>
          <path d="M57.2,209.9c-8.2,0-14.9,6.7-14.9,14.9v63.6c0,8.2,6.7,14.9,14.9,14.9s14.9-6.7,14.9-14.9v-63.6
            C72,216.5,65.4,209.9,57.2,209.9z"/>
        </g>
        </svg>
        <span>Télécharger pour <span class="text-white">Android</span></span>
      </a>
    </div>
  </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 border border-brand/50">
      <div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
        <svg class="w-10 h-10 text-green-500" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
        </svg>
      </div>
      <div class="text-2xl text-green-500 tracking-wider mb-4">Demande envoyée !</div>
      <div class="mb-6 font-open-sans text-white/80">
        Nous avons bien reçu votre demande d'inscription. Elle sera traitée dans les prochains jours.
      </div>
      <button type="button" class="bg-brand hover:bg-brand-dark 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 border border-red-500/50">
      <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>

@php
    $motos = \App\Models\Moto::with('variants')->where('active', true)->orderBy('visibility_order')->get();
    $chassisList = \App\Models\MaintChassis::orderBy('moto_title')->select('id', 'moto_id', 'moto_title', 'chassis_prefix')->get();
@endphp
<script>
function savForm() {
  return {
    motos: @json($motos),
    chassisList: @json($chassisList),
    selectedMoto: null,
    selectedColor: null,
    searchMoto: '',
    open: false,
    expectedPrefix: null,
    chassisError: false,
    form: {
      moto_title: '',
      lastname: '',
      firstname: '',
      phone: '',
      identifier: '',
      password: '',
      chassis_number: '',
      sale_date: '',
    },
    loading: false,
    error: '',
    showSuccess: false,
    checkingIdentifier: false,
    identifierStatus: null, // 'available', 'unavailable', null

    selectMoto(moto, color) {
      this.selectedMoto = moto;
      this.selectedColor = color;
      this.form.moto_title = moto.title + ' ' + color.label;
      
      // Trouver le préfixe de châssis correspondant
      const chassis = this.chassisList.find(c => c.moto_id === moto.id);
      this.expectedPrefix = chassis ? chassis.chassis_prefix : null;
      
      // Revalider le châssis si déjà saisi
      if (this.form.chassis_number) {
        this.validateChassis();
      }
    },

    validateChassis() {
      if (!this.expectedPrefix || !this.form.chassis_number) {
        this.chassisError = false;
        return;
      }
      
      const chassisUpper = this.form.chassis_number.toUpperCase();
      const prefixUpper = this.expectedPrefix.toUpperCase();
      
      this.chassisError = !chassisUpper.startsWith(prefixUpper);
    },

    async checkIdentifier() {
      if (this.form.identifier.length < 3) {
        this.identifierStatus = null;
        return;
      }

      this.checkingIdentifier = true;
      try {
        const response = await fetch('{{ route('check-identifier') }}', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
          },
          body: JSON.stringify({ identifier: this.form.identifier })
        });

        const data = await response.json();
        this.identifierStatus = data.available ? 'available' : 'unavailable';
      } catch (err) {
        console.error('Error checking identifier:', err);
      }
      this.checkingIdentifier = false;
    },

    async submit() {
      if (!this.form.moto_title) {
        this.error = 'Veuillez choisir une moto et une couleur.';
        return;
      }

      if (this.chassisError) {
        this.error = 'Le numéro de châssis ne correspond pas au modèle de votre moto.';
        return;
      }

      if (this.identifierStatus === 'unavailable') {
        this.error = 'L\'identifiant choisi est déjà utilisé. Veuillez en choisir un autre.';
        return;
      }

      this.loading = true;
      this.error = '';

      try {
        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('identifier', this.form.identifier);
        fd.append('password', this.form.password);
        fd.append('chassis_number', this.form.chassis_number);
        fd.append('sale_date', this.form.sale_date);
        fd.append('_token', '{{ csrf_token() }}');

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

        const data = await res.json();

        if (data.success) {
          this.showSuccess = true;
          // Reset form
          this.form = {
            moto_title: '',
            lastname: '',
            firstname: '',
            phone: '',
            identifier: '',
            password: '',
            chassis_number: '',
            sale_date: '',
          };
          this.selectedMoto = null;
          this.selectedColor = null;
          this.identifierStatus = null;
        } else {
          this.error = data.message || 'Erreur lors de l\'envoi de la demande';
        }
      } catch (err) {
        this.error = 'Erreur lors de l\'envoi de la demande';
        console.error(err);
      }
      this.loading = false;
    },

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

@endsection