{% extends 'baseformulaire.html.twig' %}

{% block title %}Pour le cloud{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="row">
    <div class="col-md-12">
        <div class="card-box taille-40">
            
            <h2>Questionnaire de qualification pour le cloud</h2>
            
            {% for label, messages in app.flashes %}
            <div class="alert alert-{{ label }}">
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
            </div>
            {% endfor %}
            
            <form role="form" action="" method="POST"   enctype="multipart/form-data" >
            
            <div class="form-group ">
                    <label for="societe">Société <sup>*</sup></label>
                    <input name="societe" id="societe"  value="{{QUESTION.societecloud}}"  data-parsley-length="[1,100]"   type="text"  required class="form-control" > 
            </div> 
            <br>   
            <div class="row">
                
                <div class="form-group col-md-6">
                    <label for="nom">Nom <sup>*</sup></label>
                    <input name="nom" id="nom"  data-parsley-length="[2,80]"  placeholder=""  value="{{QUESTION.nomcloud}}"  type="text" value="" required class="form-control" > 
                </div> 
                
                <div class="form-group col-md-6">
                    <label for="prenom">Prénom <sup>*</sup></label>
                    <input name="prenom" id="prenom"  data-parsley-length="[1,100]"    value="{{QUESTION.prenomcloud}}"  type="text" required class="form-control" > 
                </div> 
                
            </div>
            <br>
            <div class="row">
                
                <div class="form-group col-md-6">
                    <label for="adresse">Email </label>
                    <input name="adresse" id="adresse"  data-parsley-length="[2,80]"  value="{{QUESTION.adressecloud}}"  type="text" value="" required class="form-control" > 
                </div> 
                
                <div class="form-group col-md-6">
                    <label for="numero">numero <sup>*</sup></label>
                    <input name="numero" id="numero"   data-parsley-length="[8,50]"  value="{{QUESTION.numerocloud}}" data-parsley-type="digits" placeholder="Ex: 0022890000000"  type="text"    class="form-control"  >
                </div> 
                
            </div>
            <br>
            
            <h3>Quelles sont les caractéristiques de(s) machine(s) virtuelles à créer?</h3>
            
            <div class="col-12">
            <div class="card">
                <div class="card-body">
                <div class ="inputs">
                
                
                {% if QUESTION.caracteristique|length >0 %}
                    {% set count = 1 %}
                    {% for q in QUESTION.caracteristique %}
                
                <div class ="row">
                    
                    <div class ="form-group col-md-3">
                        <label for="vps{{count}}"><strong>Nom de VPS *</strong></label>
                        <input name = "vps{{count}}" id = "vps{{count}}" data-parsley-length ="[1,80]" type = "text" {% if q['vps'~count] is defined %} value="{{q['vps'~count]}}" {% endif %} required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="disque{{count}}"><strong>Disque (GB) *</strong></label>
                        <input name ="disque{{count}}" id = "disque{{count}}" data-parsley-length ="[1,80]" type = "text" {% if q['disque'~count] is defined %} value="{{q['disque'~count]}}" {% endif %}  required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="ram{{count}}"><strong>Ram (GB) *</strong></label>
                        <input name ="ram{{count}}" id = "ram{{count}}" data-parsley-length ="[1,80]" type = "text" {% if q['ram'~count] is defined %} value="{{q['ram'~count]}}" {% endif %}  required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="cpu{{count}}"><strong>VCPU *</strong></label>
                        <input name ="cpu{{count}}" id = "cpu{{count}}" data-parsley-length ="[1,80]" type = "text" {% if q['cpu'~count] is defined %} value="{{q['cpu'~count]}}" {% endif %}  required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="fonction1"><strong>Fonction principale *</strong></label>
                        <input name ="fonction{{count}}" id = "fonction{{count}}" data-parsley-length ="[1,80]" type = "text" {% if q['fonction'~count] is defined %} value="{{q['fonction'~count]}}" {% endif %}  required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="systeme{{count}}"><strong>Systèmes d'exploitation *</strong></label>
                        <input name ="systeme{{count}}" id = "systeme{{count}}" data-parsley-length ="[1,80]" type = "text" {% if q['systeme'~count] is defined %} value="{{q['systeme'~count]}}" {% endif %}  required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="logiciel{{count}}"><strong>Logiciels à installer *</strong></label>
                        <input name ="logiciel{{count}}" id = "logiciel{{count}}" data-parsley-length ="[1,80]" type = "text" {% if q['logiciel'~count] is defined %} value="{{q['logiciel'~count]}}" {% endif %}  required class = "form-control">
                    </div>
                    <div>
                        <a class="btn btn-danger pull-right retirer" onclick="Retirer();"><span class="fa fa-remove"></span></a>
                    </div>
                </div>
                
                {% set count = count+1 %}
                {% endfor %}
                
                {% else %}
                
                <br>
                <div class ="row">
                    
                    <div class ="form-group col-md-3">
                        <label for="vps1"><strong>Nom de VPS *</strong></label>
                        <input name = "vps1" id = "vps1" data-parsley-length ="[1,80]" type = "text" required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="disque1"><strong>Disque (GB) *</strong></label>
                        <input name = "disque1" id = "disque1" data-parsley-length ="[1,80]" type = "text" required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="ram1"><strong>Ram (GB) *</strong></label>
                        <input name = "ram1" id = "ram1" data-parsley-length ="[1,80]" type = "text" required class = "form-control">
                    </div>
                    <div class ="form-group col-md-3">
                        <label for="cpu1"><strong>VCPU *</strong></label>
                        <input name = "cpu1" id = "cpu1" data-parsley-length ="[1,80]" type = "text" required class = "form-control">
                    </div>
                    <div class ="form-group col-md-4">
                        <label for="fonction1"><strong>Fonction principale *</strong></label>
                        <input name = "fonction1" id = "fonction1" data-parsley-length ="[1,80]" type = "text" required class = "form-control">
                    </div>
                    <div class ="form-group col-md-4">
                        <label for="systeme1"><strong>Systèmes d'exploitation *</strong></label>
                        <input name = "systeme1" id = "systeme1" data-parsley-length ="[1,80]" type = "text" required class = "form-control">
                    </div>
                    <div class ="form-group col-md-4">
                        <label for="logiciel1"><strong>Logiciels à installer *</strong></label>
                        <input name = "logiciel1" id = "logiciel1" data-parsley-length ="[1,80]" type = "text" required class = "form-control">
                    </div>
                    {#<div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">#}
                    {#    <button type ="button" class="btn btn-label-danger mt-4 retirer" onclick="Retirer();" > <i class="ti ti-x ti-xs me-1"></i><span class="align-middle">Delete</span></button>#}
                    {#</div>#}
                </div>
                
                {% endif %}
                <br>
            </div>
            </div>
        </div>
    </div>
            <input type="hidden" value="1" id="nombrecar"  name="nombrecar" >
            <br>
            <div>
                <button type="button" class="btn btn-primary"class="btn btn-primary " onclick="Ajouter();"><i class="ti ti-plus me-1"></i><span class="align-middle">Ajouter</span></button>
                
                <br>
                <br>
            </div>
                
            <h6>Q.1 Avez-vous besoin d’une assistance technique pour l’installation de logiciels ? (Installation de logiciel, configuration de vos systèmes d’information, hyperviseur…) ? *</h6>
                 
            <div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="assistance" id="assistance" value="oui" {% if QUESTION.assistancecloud == 'non' %} checked {% endif %}>
                    <label class="form-check-label" for="assistance">OUI</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="assistance" id="assistance" value="non"  >
                    <label class="form-check-label" for="assistance">NON</label>
                </div>
            </div>   
            <br>
            
            <h6>Q.2 Avez-vous une préférence pour un hyperviseur ?<sup>*</sup></h6>
            
            <div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="pref" name="pref"  value="kvm" {% if QUESTION.preferencecloud == 'kvm' %}checked{% endif %} >
                    <label class="form-check-label" for="pref">KVM</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="pref" name="pref" value="hyperv" {% if QUESTION.preferencecloud == 'hyperv' %}checked{% endif %}  >
                    <label class="form-check-label" for="pref">Hyper V</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="pref" name="pref" value="vmware" {% if QUESTION.preferencecloud == 'vmware' %}checked{% endif %}>
                    <label class="form-check-label" for="pref">VMWARE</label>
                </div>
            </div>        
            <br>
        
            <div class="form-group col-md-6">
                    <label for="autres">Autres: </label>
                    <input name="autres" id="autres" placeholder="Facultative"  value="{{QUESTION.autrescloud}}" data-parsley-length="[1,100]"   type="text"  > 
            </div>
            <br>
            
            <h6>Q.3 Equipement réseau virtuel ?<sup>*</sup></h6>
            
        <div>
            <div class="row">
                <div class=" col-md-4">FireWall&ensp;<span>*</span></div>
                <div class=" col-md-4">Routeur&ensp;<span>*</span></div>
                <div class=" col-md-4">Switch&ensp;<span>*</span></div>
            </div>
            
            <div class="row">
                <div class=" col-md-4">
                <div class="form-check form-check-inline ">
                    
                    <input class="form-check-input" type="radio" name="firewall" id="firewall" value="oui" checked  >
                    <label class="form-check-label" for="firewall">OUI</label>
                </div>
                <div class="form-check form-check-inline ">
                    <input class="form-check-input" type="radio" name="firewall" id="firewall" value="non" {% if QUESTION.firewall == 'non' %} checked {% endif %} >
                    <label class="form-check-label" for="firewall">NON</label>
                </div>
                </div>
                
                <div class=" col-md-4">
                <div class="form-check form-check-inline">
                    
                    <input class="form-check-input" type="radio" name="routeur" id="routeur" value="oui" checked>
                    <label class="form-check-label" for="routeur">OUI</label>
                </div>
                <div class="form-check form-check-inline ">
                    <input class="form-check-input" type="radio" name="routeur" id="routeur" value="non" {% if QUESTION.routeur == 'non' %} checked {% endif %} >
                    <label class="form-check-label" for="routeur">NON</label>
                </div>
                </div>
                
                <div class=" col-md-4">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="switch" id="switch" value="oui" checked>
                    <label class="form-check-label" for="switch">OUI</label>
                </div>
                <div class="form-check form-check-inline ">
                    <input class="form-check-input" type="radio" name="switch" id="switch" value="non" {% if QUESTION.switch == 'non' %} checked {% endif %} >
                    <label class="form-check-label" for="switch">NON</label>
                </div>
                </div>  
                    
            </div>
        </div>
            
            <br>
            
            <div>
                <h6>Q.4 Désirez-vous des sauvegardes ? <sup>*</sup></h6>
                
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="sauvegarde" id="sauvegarde" value="oui" checked>
                          <label class="form-check-label" for="sauvegarde">OUI</label>
                </div>
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="sauvegarde" id="sauvegarde" value="non" {% if QUESTION.sauvegardecloud == 'non'%} checked {%endif%} >
                          <label class="form-check-label" for="sauvegarde">NON</label>
                </div>
            </div>
            <br>
            
            <div class="form-group ">
                <label for="requete"  ><strong>Q.5 Avez-vous des requêtes spécifiques pour vos machines virtuelles ?</strong><span>*</span></label>
                <textarea class="form-control" id="requete" name="requete" rows="5">{{QUESTION.requetecloud}}</textarea>
            </div>
            
            
            <br>
            
            <div>
                <button type="submit" class="btn btn-primary btn-block">{% if QUESTION.id > 0 %}Modifier{% else %}SOUMETTRE{% endif %}</button>
                {% if QUESTION.id > 0 %}
                <a type="button" class="btn btn-danger btn-block" href="{{path('liste_cloud')}}">Quitter</a>
                {% endif %}
            </div>
            
            </form>
            
        </div>
        
    </div>
</div>

{% endblock %}

{% block javascriptsrc %}

<script>
    $(function(){
        jeu();
    });

    var indicesDisponibles = []; // Liste des indices disponibles

    // Fonction pour ajouter un nouveau champ
    function Ajouter(){
        var indice = obtenirIndiceDisponible(); // Obtenez un indice disponible
        if (indice === null) {
            indice = $('.inputs .row').length + 1; // Sinon, utilisez le prochain indice disponible
        }
        $('.inputs').append(templateHTML(indice));
        jeu();
    }

    // Fonction pour retirer un champ spécifique
    function Retirer(button) {
        var row = $(button).closest('.row');
        var indice = row.data('indice'); // Récupère l'indice du champ supprimé
        row.remove();
        indicesDisponibles.push(indice); // Ajoute l'indice à la liste des indices disponibles
        jeu();
    }

    // Fonction pour gérer l'affichage des boutons Retirer
    function jeu(){
        var elem = $('.inputs').children().length; 
        if(elem <= 1){
            $('.retirer').css("display","none");
        }else{
            $('.retirer').css("display","initial");
        }
    }

    // Fonction pour générer le HTML d'un nouveau champ
    function templateHTML(indice){
    return '<div class="row" data-indice="'+indice+'">' +
                '<div class="form-group col-md-3">' +
                    '<label for="vps'+indice+'"><strong>Nom de VPS '+indice+' *</strong></label>' +
                    '<input name="vps'+indice+'" id="vps'+indice+'" data-parsley-length="[1,80]" type="text" required class="form-control">' +
                '</div>' +
                '<div class="form-group col-md-3">' +
                    '<label for="disque'+indice+'"><strong>Disque (GB) *</strong></label>' +
                    '<input name="disque'+indice+'" id="disque'+indice+'" data-parsley-length="[1,80]" type="text" required class="form-control">' +
                '</div>' +
                '<div class="form-group col-md-3">' +
                    '<label for="ram'+indice+'"><strong>Ram (GB) *</strong></label>' +
                    '<input name="ram'+indice+'" id="ram'+indice+'" data-parsley-length="[1,80]" type="text" required class="form-control">' +
                '</div>' +
                '<div class="form-group col-md-3">' +
                    '<label for="cpu'+indice+'"><strong>VCPU *</strong></label>' +
                    '<input name="cpu'+indice+'" id="cpu'+indice+'" data-parsley-length="[1,80]" type="text" required class="form-control">' +
                '</div>' +
                '<div class="form-group col-md-3">' +
                    '<label for="fonction'+indice+'"><strong>Fonction principale *</strong></label>' +
                    '<input name="fonction'+indice+'" id="fonction'+indice+'" data-parsley-length="[1,80]" type="text" required class="form-control">' +
                '</div>' +
                '<div class="form-group col-md-3">' +
                    '<label for="systeme'+indice+'"><strong>Systèmes d exploitation *</strong></label>' +
                    '<input name="systeme'+indice+'" id="systeme'+indice+'" data-parsley-length="[1,80]" type="text" required class="form-control">' +
                '</div>' +
                '<div class="form-group col-md-3">' +
                    '<label for="logiciel'+indice+'"><strong>Logiciels à installer *</strong></label>' +
                    '<input name="logiciel'+indice+'" id="logiciel'+indice+'" data-parsley-length="[1,80]" type="text" required class="form-control">' +
                '</div>' +
                '<div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center col-md-3">' +
                    '<button type="button" class="btn btn-label-danger mt-4 retirer" onclick="Retirer(this);">' +
                        '<i class="ti ti-x ti-xs me-1"></i>' +
                        '<span class="align-middle">Delete</span>' +
                    '</button>' +
                '</div>' +
            '</div>';
}


    // Fonction pour obtenir un indice disponible
    function obtenirIndiceDisponible(){
        return indicesDisponibles.length > 0 ? indicesDisponibles.pop() : null;
    }
</script>


{% endblock %}


 {#class="m-t-0 m-b-30 header-title"#}