<div class="">
<div class="form-element text w-full not-editable">
<input class="form-input w-full" id="estimate_brand" type="text" title="Marque" placeholder=" " pattern="\S+" value="Peugeot" disabled>
<label class="label" for="estimate_brand">
<span>Marque</span>
</label>
</div>
<div class="form-element text mt-2.5 w-full not-editable">
<input class="form-input w-full" id="estimate_model" type="text" title="Modèle" placeholder=" " pattern="\S+" value="208" disabled>
<label class="label" for="estimate_model">
<span>Modèle</span>
</label>
</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="month_of_release" 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="month_of_release">Mois de sortie</label>
<ul x-ref="options" class="select-options" x-show="active">
<li><button type="button" @click="setValue('1', 'Janvier')">Janvier</button></li>
<li><button type="button" @click="setValue('2', 'Février')">Février</button></li>
<li><button type="button" @click="setValue('3', 'Mars')">Mars</button></li>
<li><button type="button" @click="setValue('4', 'Avril')">Avril</button></li>
<li><button type="button" @click="setValue('5', 'Mai')">Mai</button></li>
<li><button type="button" @click="setValue('6', 'Juin')">Juin</button></li>
<li><button type="button" @click="setValue('7', 'Juillet')">Juillet</button></li>
<li><button type="button" @click="setValue('8', 'Août')">Août</button></li>
<li><button type="button" @click="setValue('9', 'Septembre')">Septembre</button></li>
<li><button type="button" @click="setValue('10', 'Octobre')">Octobre</button></li>
<li><button type="button" @click="setValue('11', 'Novembre')">Novembre</button></li>
<li><button type="button" @click="setValue('12', 'Décembre')">Décembre</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('2016', '2016')">2016</button></li>
<li><button type="button" @click="setValue('2015', '2015')">2015</button></li>
<li><button type="button" @click="setValue('2014', '2014')">2014</button></li>
<li><button type="button" @click="setValue('2013', '2013')">2013</button></li>
<li><button type="button" @click="setValue('2012', '2012')">2012</button></li>
<li><button type="button" @click="setValue('2011', '2011')">2011</button></li>
<li><button type="button" @click="setValue('2010', '2010')">2010</button></li>
<li><button type="button" @click="setValue('2009', '2009')">2009</button></li>
<li><button type="button" @click="setValue('2008', '2008')">2008</button></li>
<li><button type="button" @click="setValue('2007', '2007')">2007</button></li>
<li><button type="button" @click="setValue('2006', '2006')">2006</button></li>
<li><button type="button" @click="setValue('2005', '2005')">2005</button></li>
<li><button type="button" @click="setValue('2004', '2004')">2004</button></li>
<li><button type="button" @click="setValue('2003', '2003')">2003</button></li>
<li><button type="button" @click="setValue('2002', '2002')">2002</button></li>
<li><button type="button" @click="setValue('2001', '2001')">2001</button></li>
<li><button type="button" @click="setValue('2000', '2000')">2000</button></li>
</ul>
</div>
<div class="error" x-cloak></div>
</div>
</div>
<div class="form-element form-select min-w-0 w-full mt-2.5"
x-data="selectInput"
:class="{ 'active' : active }"
@click.away="active = false"
>
<input x-ref="input" name="model" class="" id="version_model_vehicle" 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="version_model_vehicle">Version</label>
<ul x-ref="options" class="select-options" x-show="active">
<li><button type="button" @click="setValue('Style', 'Style')">Style</button></li>
<li><button type="button" @click="setValue('Like', 'Like')">Like</button></li>
</ul>
</div>
<div class="form-element text mt-2.5 w-full">
<input name="name" class="form-input w-full" id="estimate_km" type="text" title="Kilométrage" placeholder=" " pattern="\S+">
<label class="label" for="estimate_km">
<span>Kilométrage</span>
</label>
</div>
<div class="form-element form-select w-full mt-2.5"
x-data="selectInput('this-month', 'Ce mois')"
:class="{ 'active' : active }"
@click.away="active = false"
>
<input x-ref="input" name="when_sell" class="" id="when_sell" type="text" pattern="\S+" x-model="currentValue" @change="$parent.changeBrand($event)">
<div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>
<label @click="active = !active" :class="{ 'moved' : full }" for="when_sell">Quand souhaitez vous vendre votre voiture</label>
<ul x-ref="options" class="select-options" x-show="active">
<li><button type="button" @click="setValue('this-month', 'Ce mois')">Ce mois</button></li>
<li><button type="button" @click="setValue('next-months', 'Dans les prochains mois')">Dans les prochains mois</button></li>
<li><button type="button" @click="setValue('this-year', 'Dans l\'année')">Dans l'année</button></li>
</ul>
</div>
</div>
<script>
/*
*
new Cleave('#estimate_km', {
numeral: true,
delimiter: ' ',
numeralPositiveOnly: true,
onValueChanged: function (e) {
current.vehicle.km = e.target.rawValue;
}
})
* */
</script>