<div class="md:max-w-[415px]" x-data="maaStepChoice()">
<div class="bg-white border border-ui rounded-button p-7.5">
<p class="tracking-tightened font-medium text-base text-text-light">Indiquez votre plaque d’immatriculation ou retrouvez votre voiture par modèle 👇</p>
<div class="mt-6">
<div class="form-element form-box-radio-slider form-box-radio-slider--full-double"
x-data="boxCheckboxSlider()">
<div x-ref="controler" class="controler"></div>
<div class="label-wrapper" x-ref="wrapper">
<label for="immatriculation">
<input @click="changeInput(); $parent.changeTab('immatriculation')" type="radio" value="immatriculation" name="choice_type" id="immatriculation" checked>
<span>Par immatriculation</span>
</label>
<label for="model">
<input @click="changeInput(); $parent.changeTab('model')" type="radio" value="model" name="choice_type" id="model">
<span>Par modèle</span>
</label>
</div>
</div>
<div x-show="tab === 'immatriculation'" class="mt-5" x-ref="immatriculation">
<div class="form-element form-license-plate">
<label for="license-plate">
<span class="form-license-plate__decorative">
<?= icon('european-stars-colored', 'w-5.5'); ?>
<span>F</span>
</span>
<input x-ref="licensePlate" class="w-full" type="text" id="license-plate" name="license-plate" placeholder="ex BB 466 ZZ...">
<span class="form-license-plate__decorative">
<?= icon('flower', 'w-5.5'); ?>
<span>00</span>
</span>
</label>
</div>
</div>
<div x-cloak x-show="tab === 'model'" class="mt-5" x-ref="model">
<div class="form-element form-select w-full"
x-data="selectInput"
:class="{ 'active' : active }"
@click.away="active = false"
>
<input x-ref="input" name="brand" class="" id="brand" type="text" pattern="\S+" x-model="currentValue">
<div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>
<label @click="active = !active" :class="{ 'moved' : full }" for="brand">Marque</label>
<ul x-ref="options" class="select-options" x-show="active">
<li><button type="button" @click="setValue('peugeot', 'Peugeot')">Peugeot</button></li>
<li><button type="button" @click="setValue('renault', 'Renault')">Renault</button></li>
<li><button type="button" @click="setValue('audi', 'Audi')">Audi</button></li>
<li><button type="button" @click="setValue('citroen', 'Citroën')">Citroën</button></li>
<li><button type="button" @click="setValue('kia', 'Kia')">Kia</button></li>
<li><button type="button" @click="setValue('alfa-romeo', 'Alfa Romeo')">Alfa</button></li>
</ul>
</div>
<div class="error" x-cloak></div>
<div class="flex gap-2.5 mt-2.5">
<div class="w-1/2">
<div class="form-element form-select min-w-0 w-full"
x-data="selectInput"
:class="{ 'active' : active }"
@click.away="active = false"
>
<input x-ref="input" name="model" class="" id="model" type="text" pattern="\S+" x-model="currentValue">
<div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>
<label @click="active = !active" :class="{ 'moved' : full }" for="model">Modèle</label>
<ul x-ref="options" class="select-options" x-show="active">
<li><button type="button" @click="setValue('3008', '3008')">3008</button></li>
<li><button type="button" @click="setValue('208', '208')">208</button></li>
<li><button type="button" @click="setValue('308', '308')">308</button></li>
<li><button type="button" @click="setValue('408', '408')">408</button></li>
</div>
<div class="error" x-cloak></div>
</div>
<div class="w-1/2">
<div class="form-element form-select min-w-0 w-full"
x-data="selectInput"
:class="{ 'active' : active }"
@click.away="active = false"
>
<input x-ref="input" name="year" class="" id="year" type="text" pattern="\S+" x-model="currentValue">
<div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>
<label @click="active = !active" :class="{ 'moved' : full }" for="year">Année</label>
<ul x-ref="options" class="select-options" x-show="active">
<li><button type="button" @click="setValue('2022', '2022')">2022</button></li>
<li><button type="button" @click="setValue('2021', '2021')">2021</button></li>
<li><button type="button" @click="setValue('2020', '2020')">2020</button></li>
<li><button type="button" @click="setValue('2019', '2019')">2019</button></li>
<li><button type="button" @click="setValue('2018', '2018')">2018</button></li>
<li><button type="button" @click="setValue('2017', '2017')">2017</button></li>
<li><button type="button" @click="setValue('2018', '2016')">2016</button></li>
<li><button type="button" @click="setValue('2017', '2015')">2015</button></li>
<li><button type="button" @click="setValue('2016', '2014')">2014</button></li>
<li><button type="button" @click="setValue('2015', '2013')">2013</button></li>
</ul>
</div>
<div class="error" x-cloak></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function maaStepChoice() {
return {
tab: 'immatriculation',
init() {
new Cleave(this.$refs.licensePlate, {
delimiters: ['-'],
blocks: [2,3,2],
uppercase: true
})
},
changeTab(tab) {
this.tab = tab;
console.log(this.tab)
}
}
}
</script>