$(document).ready(function () {
    //copy options
    let options = $('#villeDepart option').clone();
    //react on keyup in textbox
    $('#villeDepartText').keyup(function () {
        let val = $(this).val().toString().toLowerCase();
        $('#villeDepart').empty();
        //take only the options containing your filter text or all if empty
        options.filter(function (idx, el) {
            return val === '' || $(el).text().toLowerCase().indexOf(val) >= 0;
        }).appendTo('#villeDepart');//add it to list
    });

    //copy options
    let optionsEtape = $('#villeEtape option').clone();
    //react on keyup in textbox
    $('#villeEtapeText').keyup(function () {
        let val = $(this).val().toString().toLowerCase();
        $('#villeEtape').empty();
        //take only the options containing your filter text or all if empty
        optionsEtape.filter(function (idx, el) {
            return val === '' || $(el).text().toLowerCase().indexOf(val) >= 0;
        }).appendTo('#villeEtape');//add it to list
    });

    $("#ajoutEtape").click(function () {
        let depart = $("#villeDepart");
        let etape = $("#villeEtape");
        let nbEtape = $("#nbEtapes");
        if(etape.val() != null && etape.val() !== "" && depart.val() != null && depart.val() !== ""){
            let option = $("#villeEtape option:selected");
            let numero = (parseInt(nbEtape.val()));
            $(this).parent().before("<div class='line etape'>" +
                "<lablel class='label' for='etape" + numero + "'>Etape " + numero + " :</lablel>" +
                "<input type='text' class='form' value='" + option.text() + "' readonly>" +
                "<input type='hidden' name='etape" + numero +  "' value='" + option.val() + "' readonly></div>");
            nbEtape.attr('value', parseInt(nbEtape.val())+1);
            //$("#supprimerEtape").css("display", "initial");
            $("#supprimerEtape").show();
        }
    });

    $("#supprimerEtape").click(function () {
        let etape = $(".etape:last");
        let nbEtape = $("#nbEtapes");
        if (parseInt(nbEtape.val())>0){
            etape.remove();
            nbEtape.attr('value', parseInt(nbEtape.val())-1);
            if (parseInt(nbEtape.val())<=1){
                //$("#supprimerEtape").css("display", "none");
                $("#supprimerEtape").hide();
            }
        }
    });
});