Current File : /home/digitaw/Ycof/js/auto.js

var form_1 = document.querySelector(".form_1");
var form_2 = document.querySelector(".form_2");
var form_3 = document.querySelector(".form_3");
var form_4 = document.querySelector(".form_4");
var form_5 = document.querySelector(".form_5");


var form_1_btns = document.querySelector(".form_1_btns");
var form_2_btns = document.querySelector(".form_2_btns");
var form_3_btns = document.querySelector(".form_3_btns");
var form_4_btns = document.querySelector(".form_4_btns");
var form_5_btns = document.querySelector(".form_5_btns");


var form_1_next_btn = document.querySelector(".form_1_btns .btn_next");
var form_2_back_btn = document.querySelector(".form_2_btns .btn_back");
var form_2_next_btn = document.querySelector(".form_2_btns .btn_next");
var form_3_back_btn = document.querySelector(".form_3_btns .btn_back");
var form_3_next_btn = document.querySelector(".form_3_btns .btn_next");
var form_4_back_btn = document.querySelector(".form_4_btns .btn_back");
var form_4_next_btn = document.querySelector(".form_4_btns .btn_next");
var form_5_back_btn = document.querySelector(".form_5_btns .btn_back");

var form_2_progessbar = document.querySelector(".form_2_progessbar");
var form_3_progessbar = document.querySelector(".form_3_progessbar");
var form_4_progessbar = document.querySelector(".form_4_progessbar");
var form_5_progessbar = document.querySelector(".form_5_progessbar");

var btn_done = document.querySelector(".btn_done");
var modal_wrapper = document.querySelector(".modal_wrapper");
var shadow = document.querySelector(".shadow");

form_1_next_btn.addEventListener("click", function(){
	if(validateCarburant()==true){
		form_1.style.display = "none";
		form_2.style.display = "block";

		form_1_btns.style.display = "none";
		form_2_btns.style.display = "flex";

		form_2_progessbar.classList.add("active");
	}	
});

form_2_back_btn.addEventListener("click", function(){

		form_1.style.display = "block";
		form_2.style.display = "none";

		form_1_btns.style.display = "flex";
		form_2_btns.style.display = "none";

		form_2_progessbar.classList.remove("active");
	
});

form_2_next_btn.addEventListener("click", function(){
	if(validateMarque()==true && validateModele()==true){
		form_2.style.display = "none";
		form_3.style.display = "block";

		form_3_btns.style.display = "flex";
		form_2_btns.style.display = "none";

		form_3_progessbar.classList.add("active");
	}
});

form_3_back_btn.addEventListener("click", function(){
	form_2.style.display = "block";
	form_3.style.display = "none";

	form_3_btns.style.display = "none";
	form_2_btns.style.display = "flex";

	form_3_progessbar.classList.remove("active");
});
form_3_next_btn.addEventListener("click", function(){
	if(validatePuissance()==true && validateDateCirculation()==true && validateNombrePlace()==true && validateValeur()==true && validateImmatriculation()==true){
		form_3.style.display = "none";
		form_4.style.display = "block";

		form_4_btns.style.display = "flex";
		form_3_btns.style.display = "none";

	form_4_progessbar.classList.add("active");
	}
});
form_4_back_btn.addEventListener("click", function(){
	form_3.style.display = "block";
	form_4.style.display = "none";

	form_4_btns.style.display = "none";
	form_3_btns.style.display = "flex";

	form_4_progessbar.classList.remove("active");
});
form_4_next_btn.addEventListener("click", function(){
	form_4.style.display = "none";
	form_5.style.display = "block";

	form_5_btns.style.display = "flex";
	form_4_btns.style.display = "none";

	//form_5_progessbar.classList.add("active");
});
form_5_back_btn.addEventListener("click", function(){
	form_4.style.display = "block";
	form_5.style.display = "none";

	form_5_btns.style.display = "none";
	form_4_btns.style.display = "flex";

	form_5_progessbar.classList.remove("active");
});
btn_done.addEventListener("click", function(){
	modal_wrapper.classList.add("active");
})

shadow.addEventListener("click", function(){
	modal_wrapper.classList.remove("active");
})

function validateCarburant(){
	var carburant = document.querySelector("#carburant").value;
	var error=document.querySelector("#carError");
	if(carburant == ""){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner le carburant";
		return false;
	}
	error.style.color="green";
	error.innerHTML="valide";
	return true;
}

function validateMarque(){
	var marque = document.querySelector("#marque").value;
	var error=document.querySelector("#marque-error");
	var regex = /^[a-zA-Z]+$/;
	if(marque == "" || !regex.test(marque) || marque.length<3){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner la marque";
		return false;
	}	
	error.style.color="green";
	error.innerHTML="valide";
	return true;
}

function validateModele(){
	var modele = document.querySelector("#modele").value;
	var error=document.querySelector("#modele-error");
	var regex = /^[a-zA-Z0-9]+$/;
	if(modele == "" || !regex.test(modele) || modele.length<3){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner le modele";
		return false;
	}	
	error.style.color="green";
	error.innerHTML="valide";
	return true;
}

function validatePuissance(){
	var puissance = document.querySelector("#puissance").value;
	var error=document.querySelector("#puissance-error");
	if(puissance == ""){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner la puissance";
		return false;
	}	
	error.style.color="green";
	error.innerHTML="valide";
	return true;
}
function validateDateCirculation(){
	var dateCirculation = document.querySelector("#experience").value;
	var error=document.querySelector("#circulation-error");
	if(dateCirculation == ""){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner la date de circulation";
		return false;
	}	
	error.style.color="green";
	error.innerHTML="valide";
	return true;
}
function validateNombrePlace(){
	var nombrePlace = document.querySelector("#nombrePlace").value;
	var error=document.querySelector("#nombrePlace-error");
	if(nombrePlace == ""){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner le nombre de place";
		return false;
	}	
	error.style.color="green";
	error.innerHTML="valide";
	return true;
}
function validateValeur(){
	var valeur = document.querySelector("#valeur").value;
	var error=document.querySelector("#valeur-error");
	var regex = /^[0-9]+$/;
	if(valeur == ""){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner la valeur";
		return false;
	}
	if(!regex.test(valeur) ){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner une valeur valide";
		return false;
	}
	if(valeur < 0){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner une valeur valide";
		return false;
	}
	error.style.color="green";
	error.innerHTML="valide";
	return true;
}

function validateImmatriculation(){
	var immatriculation = document.querySelector("#immatriculation").value;
	// enlever les espaces
	immatriculation = immatriculation.replace(/\s/g, "");
	var error=document.querySelector("#immatriculation-error");
	var regex = /^[a-zA-Z0-9-]+$/;
	if(immatriculation == ""){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner l'immatriculation";
		return false;
	}
	if(!regex.test(immatriculation)){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner une immatriculation valide";
		return false;
	}
	// la taille 
	if(immatriculation.length < 7){
		error.style.color="red";
		error.innerHTML="Veuillez renseigner une immatriculation valide";
		return false;
	}
	error.style.color="green";
	error.innerHTML="valide";
	return true;	
}
function validateFile(){
	var fileInput = document.querySelector("#fileInput");
	var error=document.querySelector("#error");
	const maxSize = 2 * 1024 * 1024;// 2Mb
	const blash = document.querySelector("#blash");

    const file=fileInput.files[0];
	if (file.size==null || file.size==0){
		error.style.color="red";
		error.innerHTML="le fichier est vide";
		return false;
	}
	if(file.size>maxSize){
		error.style.color="red";
		error.innerHTML="la taille du fichier est trop lourd";
		return false;
	}
	if(!/^image\/(jpeg|png|jpg)$/i.test(file.type)){
		error.style.color="red";
		error.innerHTML="le type du fichier n'est pas valide";
		return false;
	}	
	const form = new FormData();
	form.append("image",file);
	error.style.color="green";
	error.innerHTML="valide";
	blash.src=URL.createObjectURL(file);	
	return true;
	
}
function loadData()
{		
		const carburant = document.querySelector("#carburant").value;
		const marque = document.querySelector("#marque").value;
		const modele = document.querySelector("#modele").value;
		const puissance = document.querySelector("#puissance").value;
		const dateCirculation = document.querySelector("#experience").value;
		const nombrePlace = document.querySelector("#nombrePlace").value;
		const valeur = document.querySelector("#valeur").value;
		const immatriculation = document.querySelector("#immatriculation").value;
		
	if(document.getElementById('flexRadioDefault1').checked == true){
		var vehicule = document.querySelector("#flexRadioDefault1").value;
		
	}else if(document.querySelector("#flexRadioDefault2").checked == true){
		var vehicule = document.querySelector("#flexRadioDefault2").value;
	}
	else{
		var vehicule = document.querySelector("#flexRadioDefault3").value;
		
	}
	var vehiculeRecap = document.querySelector('#vehicule-recap');
	var carburantRecap = document.querySelector('#carburant-recap');
	var marqueRecap = document.querySelector('#marque-recap');
	var modeleRecap =	document.querySelector('#modele-recap');
	var puissanceRecap =document.querySelector('#puissance-recap');
	var dateCirculationRecap =document.querySelector('#dateCirculation-recap');
	var nombrePlaceRecap =document.querySelector('#nombrePlace-recap');
	var valeurRecap =document.querySelector('#valeur-recap');
	var immatriculationRecap =document.querySelector('#immatriculation-recap');

	//
	vehiculeRecap.innerHTML = vehicule;
	carburantRecap.innerHTML = carburant;
	marqueRecap.innerHTML = marque;
	modeleRecap.innerHTML = modele;
	puissanceRecap.innerHTML = puissance;
	dateCirculationRecap.innerHTML = dateCirculation;
	nombrePlaceRecap.innerHTML = nombrePlace;
	valeurRecap.innerHTML = valeur;
	immatriculationRecap.innerHTML = immatriculation;
}
function validateNom(){
    const nom = document.getElementById("nom");
    var nomError = document.getElementById("nom-error");
    var regex = /^[a-zA-Z\s]+$/;
    if(nom.value.length < 3){
		nomError.style.color="red";
        nomError.innerHTML = "le nom est obligatoire";
        return false;
    }
    if(!regex.test(nom.value)){
		nomError.style.color="red";
        nomError.innerHTML = "Entrer un nom valide";
        return false;
    }
	nomError.style.color="green";
    nomError.innerHTML = "valide";
    return true;
}
function validatePrenom(){
    const prenom = document.getElementById("prenom");
    var prenomError = document.getElementById("prenom-error");
    var regex = /^[a-zA-Z\s]+$/;
    if(prenom.value.length < 3){
		prenomError.style.color="red";
        prenomError.innerHTML = "le prenom est obligatoire";
        return false;
    }
    if(!regex.test(prenom.value)){
		prenomError.style.color="red";
        prenomError.innerHTML = "Entrer un prenom valide";
        return false;
    }
	prenomError.style.color="green";
    prenomError.innerHTML = "valide";
    return true;
}
function validateEmail(){
    const email = document.getElementById("email");
    var emailError = document.getElementById("email-error");
    var regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    if(email.value.length < 3){
		emailError.style.color = "red";
        emailError.innerHTML = "l'email est obligatoire";
        return false;
    }
    if(!regex.test(email.value)){
		emailError.style.color = "red";
        emailError.innerHTML = "Entrer un email valide";
        return false;
    }
	emailError.style.color="green";
    emailError.innerHTML = "valide";
    return true;
}

function validatePhone(){
    const phone = document.getElementById("telephone");
    var phoneError = document.getElementById("telephone-error");
    var regex = /^[0-9]+$/;
	if(!regex.test(phone.value)){
		phoneError.style.color = "red";
        phoneError.innerHTML = "Entrer un numero de telephone valide";
        return false;
    }
    if(phone.value.length < 9){
		phoneError.style.color = "red";
        phoneError.innerHTML = "le numero de telephone est obligatoire";
        return false;
    }
    
	phoneError.style.color="green";
    phoneError.innerHTML = "valide";
    return true;
}

// carte grise
const button = document.querySelector("#envoyer");
button.addEventListener("click",function(e){
  if( validateEmail()==true && validatePhone()==true && validateFile()==true){
			e.preventDefault();
			const data =document.getElementById("grise");
			const formData = new FormData(data);
			console.log(formData.get('email'),formData.get('telephone'),formData.get('image'));
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange= function(){
				if(this.readyState==4 && this.status==200){
					var msg="je crois que sa marche ";
					
					//console.log(this.response);
					} else if(this.readyState==4 && this.status!=200){
					alert("une erreur s'est produit");
				}

			};
			xmlhttp.open("POST", "sendauto.php", true);  
			xmlhttp.responseType='json';			
   			xmlhttp.send(formData);
			// reload la page
			alert('votre devis a ete bien envoye');
			window.location.reload();
	}
	else{
		validateEmail();
		validatePhone();
		validateFile();
	}});



	// formulaire complet 
const envoyer = document.querySelector("#send");
envoyer.addEventListener("click",function(e){
			e.preventDefault();
			const data =document.getElementById("formulaire");
			const form = new FormData(data);
			console.log(form.get('email'),form.get('telephone'));
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange= function(){
				if(this.readyState==4 && this.status==200){
					var msg="je crois que sa marche ";
					
					//console.log(this.response);
					} else if(this.readyState==4 && this.status!=200){
					alert("une erreur s'est produit");
				}

			};
			xmlhttp.open("POST", "sendauto.php", true);  
			xmlhttp.responseType='json';			
   			xmlhttp.send(form);
			// reload la page
			 alert('votre devis a ete bien envoye');
			window.location.reload();
	
	
	});


// document.getElementById("grise").addEventListener("submit",function(e){
// 		e.preventDefault();
// 		var form = new FormData(this);
// 		var xmlhttp = new XMLHttpRequest();
// 		xmlhttp.onreadystatechange= function(){
// 		if(this.readyState==4 && this.status==200){
// 	//var msg="je crois que sa marche ";
// 			alert('votre devis a ete bien envoye');
// 			console.log(this.response);
// 	} else if(this.readyState==4 && this.status!=200){
// 	alert("une erreur s'est produit");
// 	}
// 	};
// 	xmlhttp.open("POST", "sendauto.php", true);  
// 	xmlhttp.responseType='json';
// 	console.log(form);
//    	xmlhttp.send(form);
// });