Current File : /home/digitaw/Ycof/js/voyage.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_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_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_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 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(validateDestination()==true && validateNumPassPort()==true && validateDepart()==true && validateRetour()==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(){
	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(validateNom()==true && validatePrenom()==true && validateEmail()==true && validateAge()==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");
});

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

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


// FONCTIONS DE CONTROLE DE SAISIE DES FORMULAIRES
function validateDestination(){
    const destination =document.getElementById("destination").value;
    var destinationError = document.getElementById("destinationError");
    var regex = /^[a-zA-Z\s]+$/;
    if(destination.length < 3){
        destinationError.style.color = "red";
        destinationError.innerHTML = "*la destination est obligatoire";
        return false;
    }
    if(!regex.test(destination)){
        destinationError.innerHTML = "*Entrer une destination valide";
        return false;
    }
    destinationError.style.color = "green";
    destinationError.innerHTML = "valide";
    return true;
}

function validateNumPassPort(){
    const numPassPort =document.getElementById("numpass");
    var numPassPortError = document.getElementById("numpass-error");
    var regex = /^[0-9]+$/;
    if(numPassPort.value.length !=12){
        numPassPortError.style.color = "red";
        numPassPortError.innerHTML = "le numero de passport est obligatoire";
        return false;
    }
    if(!regex.test(numPassPort.value)){
        numPassPortError.style.color = "red";
        numPassPortError.innerHTML = "Entrer un numero de passport valide";
        return false;
    }
    numPassPortError.style.color="green";
    numPassPortError.innerHTML = "valide";

    return true;
}

function validateDepart(){
    // la date de depart doit etre superieur a la date actuel 
    const dateDepart = document.getElementById("depart");
    var dateDepartError = document.getElementById("DepartError");
    var today = new Date();
    var dateDepartDate = new Date(dateDepart.value);
    if(dateDepartDate.getDay()  < today.getDay()){
        dateDepartError.style.color = "red";
        dateDepartError.innerHTML = "*la date de depart doit etre superieur a la date actuel";
        return false;
    }
    dateDepartError.style.color = "green";
    dateDepartError.innerHTML = "valide";
    return true;
}
function validateRetour(){
    const dateRetour = document.getElementById("retour");
    var dateDepart = document.getElementById("depart");
    var dateRetourError = document.getElementById("RetourError");
    var dateDepart = new Date(dateDepart.value);
    var dateRetourDate = new Date(dateRetour.value);
    // on compare la date de retour par rapport a la date de depart elle doit etre superieur ou egal a la date de depart 
    if(dateRetourDate.getDate() < dateDepart.getDate()){
        dateRetourError.style.color = "red";
        dateRetourError.innerHTML = "*la date de retour doit etre superieur a la date de depart";
        return false;
    }
    dateRetourError.style.color="green";
    dateRetourError.innerHTML = "valide";
    return true;
}

function validateNom(){
    const nom = document.getElementById("nom");
    var nomError = document.getElementById("nomError");
    var regex = /^[a-zA-Z\s]+$/;
    if(nom.value.length < 2){
        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("prenomError");
    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("emailError");
    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 validateAge(){
    const age = document.getElementById("age");
    var ageError = document.getElementById("ageError");
    var regex = /^[0-9]+$/;
    if(age.value <10 || age.value > 100){
        ageError.style.color="red";
        ageError.innerHTML = "*l'age est comprise entre 10 et 100";
        return false;
    }
    if(!regex.test(age.value)){
        ageError.style.color="red";
        ageError.innerHTML = "*Entrer un age valide";
        return false;
    }
    ageError.style.color="green";
    ageError.innerHTML = "valide";
    return true;
}
function validatePhone(){
    const phone = document.getElementById("phone");
    var phoneError = document.getElementById("telephone-error");
    var regex = /^[0-9]+$/;
    if(phone.value.length < 9){
        phoneError.style.color="red";
        phoneError.innerHTML = "*le numero de telephone est obligatoire";
        return false;
    }
    if(!regex.test(phone.value)){
        phoneError.style.color="red";
        phoneError.innerHTML = "*Entrer un numero de telephone valide";
        return false;
    }
    phoneError.style.color="green";
    phoneError.innerHTML = "valide";
    return true;
}
// Recapitulative  des details de l'assurance 
function loadData(){
	var destination = document.getElementById("destination").value;
	var numeroPassport=document.getElementById("numpass").value;
	var numeroDepart = document.getElementById("depart").value;
	var numRetour = document.getElementById("retour").value;
	var destRecap = document.getElementById("dest");
	// gestion de la validation des donnnees 
	destRecap.innerHTML = destination;
	var numPassRecap = document.getElementById("numero");
	numPassRecap.innerHTML = numeroPassport;
	var departRecap = document.getElementById("dateDepart");
	departRecap.innerHTML = numeroDepart;
	var retourRecap = document.getElementById("dateRetour");
	retourRecap.innerHTML = numRetour;
}


// ENVOI DES INFORMATIONS AU SERVEUR
document.getElementById("voyage").addEventListener("submit", function(e){
    e.preventDefault();
    var data = 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", "sendvoyage.php", true);  
    xmlhttp.responseType='json';
    xmlhttp.send(data);
    alert('votre devis a ete bien envoye');
	window.location.reload();
    
});