
<div class="stepwizard-global">
	<form method="post" enctype="multipart/form-data">
		<div class="container_stepwizard">
			<div class="stepwizard">
				<div class="stepwizard-row setup-panel">
					<div class="stepwizard-step col-xs-3">
						<a href="#step-1" type="button" class="btn btn-success btn-circle">1</a>
						<p class="step-name">Véhicule</p>
					</div>
					<div class="stepwizard-step col-xs-3">
						<a href="#step-2" type="button"
						   class="btn btn-default btn-circle " disabled>2</a>
						<p class="step-name">Infos véhicule</p>
					</div>
					<div class="stepwizard-step col-xs-3">
						<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled>3</a>
						<p class="step-name">Photos du véhicule</p>
					</div>
					<div class="stepwizard-step col-xs-3">
						<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled>4</a>
						<p class="step-name">Infos personnelles</p>
					</div>
				</div>
			</div>

			<div class="panel panel-primary setup-content" id="step-1">
				<div class="panel-heading">
					<h3 class="panel-title"><i class="fa fa-car"></i> véhicule</h3>
				</div>

				<div class="panel-body">
					<div class="form-group">
						<label class="control-label" for="plaque">plaque d'immatriculation</label>
						<div class="item item_1">
							<input class="plaque" id="plaque" name="plaque" placeholder="AA-123-BC" type="text" value="">
						</div>

						<div class="alert_erreur">
							<span id="erreur"></span>
						</div>

						<div class="div_loading">
							<img src="https://maventedevoiture.com/wp-content/plugins/car-manager/pages/../images/loading.gif"/>
						</div>

					</div>
					<div class="form-group item_1">
						<label class="control-label" for="marque">Marque</label>
						<input class="form-control" id="marque" name="marque" required type="text" value=""/>
					</div>

					<div class="form-group item_1">
						<label class="control-label" for="modele">Modèle</label>
						<input class="form-control" id="modele" name="modele" required type="text" value=""/>
					</div>

					<div class="form-group item_1">
						<label class="control-label" for="energieNGC">Carburant</label>

						<select class="form-control" id="energieNGC" name="carburant" required>
							<option disabled>Sélectionner</option>
							<option value='BIOETHANOL'>BIOETHANOL</option><option value='DIESEL'>DIESEL</option><option value='ELECTRIQUE'>ELECTRIQUE</option><option value='ESS+ELEC HNR'>ESS+ELEC HNR</option><option value='ESS+ELEC HR'>ESS+ELEC HR</option><option value='ESS+G.NAT'>ESS+G.NAT</option><option value='ESS+G.P.L.'>ESS+G.P.L.</option><option value='ESSENCE'>ESSENCE</option><option value='ESSENCE - ELEC HYBRIDE'>ESSENCE - ELEC HYBRIDE</option><option value='ESSENCE-ELEC RECHARGEABLE'>ESSENCE-ELEC RECHARGEABLE</option><option value='GAZ NATUREL'>GAZ NATUREL</option><option value='GAZ+ELEC HNR'>GAZ+ELEC HNR</option><option value='GAZOGENE'>GAZOGENE</option><option value='GAZOLE - ELEC HYBRIDE'>GAZOLE - ELEC HYBRIDE</option><option value='GAZOLE-ELEC RECHARGEABLE'>GAZOLE-ELEC RECHARGEABLE</option><option value='GPL'>GPL</option><option value='SUPERETHANOL'>SUPERETHANOL</option>						</select>
					</div>

					<div class="form-group item_1">
						<label class="control-label" for="date1erCir_fr">Date de mise en circulation</label>
						<input autocomplete="off"
						       class="form-control"
						       id="date1erCir_fr"
						       name="date1ercir"
						       pattern="([0-2]\d|3[01])/(0\d|1[0-2])/(19\d{2}|20\d{2})"
						       required
						       type="text"
						       value=""
						/>
											</div>

					<input name="fiscale" id="fiscale" type="hidden" readonly required>
					<input name="co2" id="co2" type="hidden" readonly>
					<input name="carrosserieCG" id="carrosserieCG" type="hidden" readonly>

					<div class="form-group">
						<button class="btn btn-primary btn-little-padding nextBtn pull-right" type="button">
							Suivant <i class="fas fa-chevron-right"></i>
						</button>
					</div>
				</div>
			</div>

			<div class="panel panel-primary setup-content" id="step-2">
				<div class="panel-heading">
					<h3 class="panel-title">Les infos de mon véhicule </h3>

					<h4 class="panel-sub-title" id="info_vehicule_selected"></h4>
				</div>
				<div class="panel-body">

					<p class="text-info-v">
						Donnez des informations précises de votre voiture à vendre pour nous permettre de vous proposer un prix juste et conforme à votre
						attentes
					</p>
					<div class="form-group item_1">
						<label class="control-label" for="motorisations">Type Motorisation (<small>Ex: 2.0 BlueHDI 150</small>)</label>
						<input type="text" required class="form-control" name="motorisations" id="motorisations"/>
					</div>
					<div class="form-group item_1">
						<label class="control-label" for="nbr_kilometres">Nombre de kilomètres</label>
						<input type="number" required class="form-control" min="1" name="nbr_kilometres" id="nbr_kilometres"/>
					</div>

					<div class="form-group item_1">
						<fieldset class='form-check-group'>
							<legend class="control-label" for="nombre_cles">Nombre de clés</legend>

							<input class="advance-check" id="nombre-cles-1" name="nombre_cles" type="radio" value="1">
							<label class="form-check-label" for="nombre-cles-1">1</label>

							<input class="advance-check" id="nombre-cles-2" name="nombre_cles" type="radio" value="2">
							<label class="form-check-label" for="nombre-cles-2">2</label>
						</fieldset>
					</div>

					<div class="form-group item_1">
						<fieldset class='form-check-group'>
							<legend class="control-label" for="controle_technique">Dernier contrôle technique de moins de 6 mois ?</legend>

							<input class="advance-check" id="controle-technique-yes" name="controle_technique" type="radio" value="1">
							<label class="form-check-label" for="controle-technique-yes">OUI</label>

							<input class="advance-check" id="controle-technique-no" name="controle_technique" type="radio" value="0">
							<label class="form-check-label" for="controle-technique-no">NON</label>
						</fieldset>
					</div>

					<div class="form-group item_1">
						<fieldset class='form-check-group'>
							<legend class="control-label" for="voyants_allumes">Des voyants sont-ils allumés sur le véhicule ?</legend>

							<input class="advance-check" id="voyants-allumes-yes" name="voyants_allumes" type="radio" value="1">
							<label class="form-check-label" for="voyants-allumes-yes">OUI</label>

							<input class="advance-check" id="voyants-allumes-no" name="voyants_allumes" type="radio" value="0">
							<label class="form-check-label" for="voyants-allumes-no">NON</label>
						</fieldset>
					</div>

					<div class="form-group item_1 d-none" id="form_quels_voyants_allumes">
						<div class="form-check-group">
							<label class="control-label" for="quels_voyants_allumes">Lesquels ?</label>
							<input type="text" name="quels_voyants_allumes" id="quels_voyants_allumes" value=""/>
						</div>
					</div>

					<div class="form-group item_1">
						<fieldset class='form-check-group'>
							<legend class="control-label" for="vehicule_accidente">Le véhicule a-t-il été accidenté ?</legend>

							<input class="advance-check" id="vehicule-accidente-yes" name="vehicule_accidente" type="radio" value="1">
							<label class="form-check-label" for="vehicule-accidente-yes">OUI</label>

							<input class="advance-check" id="vehicule-accidente-no" name="vehicule_accidente" type="radio" value="0">
							<label class="form-check-label" for="vehicule-accidente-no">NON</label>
						</fieldset>
					</div>

					<div class="form-group item_1 d-none" id="form_vehicule_repare">
						<fieldset class='form-check-group'>
							<legend class="control-label" for="vehicule_repare">Le véhicule a-t-il été réparé ?</legend>

							<input class="advance-check" id="vehicule-repare-yes" name="vehicule_repare" type="radio" value="1">
							<label class="form-check-label" for="vehicule-repare-yes">OUI</label>

							<input class="advance-check" id="vehicule-repare-no" name="vehicule_repare" type="radio" value="0">
							<label class="form-check-label" for="vehicule-repare-no">NON</label>
						</fieldset>
					</div>

					<div class="form-group item_1">
						<label class="control-label" for="prix_espere">Prix espéré</label>
						<input class="form-control" id="prix_espere" min="1" name="prix_espere" required type="number" max="999999"/>
					</div>

					<div class="form-group item_1">
						<fieldset class='form-check-group'>
							<legend class="control-label" for="offre_reprise">Avez-vous déjà eu une offre de reprise pour ce véhicule ?</legend>

							<input class="advance-check" id="offre-reprise-yes" name="offre_reprise" type="radio" value="1">
							<label class="form-check-label" for="offre-reprise-yes">OUI</label>

							<input class="advance-check" id="offre-reprise-no" name="offre_reprise" type="radio" value="0">
							<label class="form-check-label" for="offre-reprise-no">NON</label>
						</fieldset>
					</div>

					<div class="form-group item_1 d-none" id="form_prix_reprise">
						<label class="control-label" for="prix_reprise">Si offre de reprise existante, quel montant ?</label>
						<input type="number" class="form-control" name="prix_reprise" min="1" id="prix_reprise" max="999999"/>
					</div>

					<div class="form-group">
						<button class="btn btn-primary btn-little-padding nextBtn pull-right" type="button">
							Suivant<i class="fas fa-chevron-right"></i>
						</button>
					</div>
				</div>
			</div>

			<div class="panel panel-primary setup-content" id="step-3">
				<div class="panel-heading">
					<h3 class="panel-title"><i class="fas fa-images"></i> Photos de véhicule</h3>
				</div>

				<div class="panel-body">
					<div class="form-group">
						<div class="step-photo">
							<div class="card-photo">
								<div class="item_1 open-modalx" data-modal="modal_photo_exterieur"><i data-toggle="modal" class="fa fa-info "></i>
									<label> photo extérieur
										<span class="nbr-uploads" id="nbr_uploads_photo_exterieur">0</span>
									</label>
								</div>
								<input class="item_1 myfiles form-control" type="file" accept="image/*" required id="photo_exterieur"/>

								<div id="modal_photo_exterieur" class="modal-dialogx">
									<div>
										<a href="#close" data-modal="modal_photo_exterieur" title="Close" class="close-modalx">X</a>
										<h2>photo extérieur</h2>
										<div class="content-modal-dialogx">
											<p>
												On précise ici des informations pour permettre à l'usager de mettre les meilleures photos possibles pour chaque
												cas.
												Il y aura une photo d'exemple + les explications sur le type de photo, les formats acceptés, etc. et le
												formulaire pour envoyer la photo.
											</p>
										</div>
									</div>
								</div>

								<ul class="ul-elm-r" id="loadedfiles_photo_exterieur"></ul>
							</div>
						</div>

						<div class="step-photo">
							<div class="card-photo">
								<div class="item_1 open-modalx" data-modal="modal_photo_tableau_de_bord"><i class="fa fa-info"></i>
									<label> Photo tableau de bord/compteur
										<span class="nbr-uploads" id="nbr_uploads_photo_tableau_de_bord">0</span>
									</label>
								</div>
								<input class="item_1 myfiles form-control" type="file" accept="image/*" required id="photo_tableau_de_bord"/>

								<div id="modal_photo_tableau_de_bord" class="modal-dialogx">
									<div>
										<a href="#close" data-modal="modal_photo_tableau_de_bord" title="Close" class="close-modalx">X</a>
										<h2>Photo tableau de bord /compteur</h2>
										<div class="content-modal-dialogx">
											<p>
												On précise ici des informations pour permettre à l'usager de mettre les meilleures photos possibles pour chaque
												cas.
												Il y aura une photo d'exemple + les explications sur le type de photo, les formats acceptés, etc. et le
												formulaire pour envoyer la photo.
											</p>
										</div>
									</div>
								</div>

								<ul class="ul-elm-r" id="loadedfiles_photo_tableau_de_bord"></ul>
								<h4 id="nbr_uploads_photo_tableau_de_bord"></h4>
							</div>
						</div>

						<div class="step-photo">
							<div class="card-photo">
								<div class="item_1 open-modalx" data-modal="modal_photo_console"><i class="fa fa-info"></i>
									<label> photo console centrale entière
										<span class="nbr-uploads" id="nbr_uploads_photo_console">0</span>
									</label>
								</div>

								<div class="item_1">
									<input class="item_1 myfiles form-control" required type="file" accept="image/*" id="photo_console"/>
								</div>

								<div id="modal_photo_console" class="modal-dialogx">
									<div>
										<a href="#close" data-modal="modal_photo_console" title="Close" class="close-modalx">X</a>
										<h2>photo console centrale entière</h2>
										<div class="content-modal-dialogx">
											<p>
												On précise ici des informations pour permettre à l'usager de mettre les meilleures photos possibles pour chaque
												cas.
												Il y aura une photo d'exemple + les explications sur le type de photo, les formats acceptés, etc. et le
												formulaire pour envoyer la photo.
											</p>
										</div>
									</div>
								</div>

								<ul class="ul-elm-r" id="loadedfiles_photo_console"></ul>
							</div>
						</div>

						<div class="step-photo">
							<div class="card-photo">
								<div class="item_1 open-modalx" data-modal="modal_autres_photos"><i class="fa fa-info"></i>
									<label> Autres photos
										<span class="nbr-uploads" id="nbr_uploads_autres_photos">0</span>
									</label>
								</div>

								<input type="file" accept="image/*" multiple="multiple" class="file myfiles item_1" id="autres_photos" data-id="1779173364"
								       data-overwrite-initial="false" data-min-file-count="2">

								<div id="modal_autres_photos" class="modal-dialogx">
									<div>
										<a href="#close" data-modal="modal_autres_photos" title="Close" class="close-modalx">X</a>
										<h2>Autres photos</h2>
										<div class="content-modal-dialogx">
											<p>
												On explique qu'il peut envoyer toutes les photos permettant de mieux identifier les véhicules et ses
												particularités (bonnes ou mauvaises)
											</p>
										</div>
									</div>
								</div>
							</div>

							<ul class="ul-elm-r" id="loadedfiles_autres_photos"></ul>

							<h4 id="nbr_uploads_autres_photos"></h4>
						</div>
					</div>

					<div class="form-group">
						<button class="btn btn-primary btn-little-padding nextBtn pull-right" type="button">
							Suivant <i class="fas fa-chevron-right"></i>
						</button>
					</div>
				</div>
			</div>

			<div class="panel panel-primary setup-content" id="step-4">
				<div class="panel-heading">
					<h3 class="panel-title"><i class="fa fa-user"></i>Infos personnelles</h3>
				</div>

				<div class="panel-body">
					<div class="form-group item_1">
						<label class="control-label" for="nom">Nom</label>
						<input class="form-control" id="nom" name="nom" required type="text"/>
					</div>
					<div class="form-group item_1">
						<label class="control-label" for="prenom">Prénom</label>
						<input class="form-control" id="prenom" name="prenom" required type="text"/>
					</div>
					<div class="form-group item_1">
						<label class="control-label" for="email">Email</label>
						<input class="form-control" id="email" name="email" required type="text"/>
					</div>

					<div class="form-group item_1">
						<label class="control-label" for="telephone">Téléphone</label>
						<input class="form-control" id="telephone" name="telephone" required type="text"/>
					</div>

					<div class="form-group item_1">
						<label class="control-label" for="code_postal">Code postal</label>
						<input class="form-control" id="code_postal" name="code_postal" required type="text"/>
					</div>

					<button class="btn btn-primary btn-little-padding pull-right" id="envoyer" name="envoyer" type="button">
						<img src="https://maventedevoiture.com/wp-content/plugins/car-manager/pages/../images/loading_btn.gif" class="loader loader-send"/>
						Enregistrer <i class="fas fa-chevron-right"></i>
					</button>
				</div>
			</div>
		</div>
	</form>
</div>

<div class="alert_success d-none">
	<span>Votre demande a bien été envoyée.</span>
</div>

<script type="text/javascript">
	jQuery('.close-modalx').on('click', function () {
		const openModalx = jQuery(this).attr('data-modal');
		jQuery('#' + openModalx).css({
			'opacity': '0',
			'pointer-events': 'none',
		});
	});

	jQuery('.open-modalx').on('click', function () {
		const openModalx = jQuery(this).attr('data-modal');
		jQuery('#' + openModalx).css({
			'opacity': '1',
			'pointer-events': 'auto',
		});
	});

	jQuery(document).ready(function () {
		jQuery('#date1erCir_fr').datepicker({
			format: 'dd/mm/yyyy',
			language: 'fr',
		});
	});

	const plugin_dir_url = "https://maventedevoiture.com/wp-content/plugins/car-manager/pages/";
</script>

{"id":167,"date":"2021-07-30T16:53:29","date_gmt":"2021-07-30T14:53:29","guid":{"rendered":"http:\/\/maventedevoiture.com\/?page_id=167"},"modified":"2022-06-22T11:09:59","modified_gmt":"2022-06-22T09:09:59","slug":"test-2","status":"publish","type":"page","link":"https:\/\/maventedevoiture.com\/index.php\/test-2\/","title":{"rendered":"test"},"content":{"rendered":"\n<p><strong>Page test<\/strong><\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Page test<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/maventedevoiture.com\/index.php\/wp-json\/wp\/v2\/pages\/167"}],"collection":[{"href":"https:\/\/maventedevoiture.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maventedevoiture.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maventedevoiture.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maventedevoiture.com\/index.php\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":7,"href":"https:\/\/maventedevoiture.com\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/maventedevoiture.com\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions\/317"}],"wp:attachment":[{"href":"https:\/\/maventedevoiture.com\/index.php\/wp-json\/wp\/v2\/media?parent=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}