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

{% block title %}Pour la colocation{% 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 la colocation</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"   data-parsley-length="[1,100]"   type="text" value="{{DEMANDECOLOCATION.societecoloc}}" 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]"  type="text" value="{{DEMANDECOLOCATION.nomcoloc}}" 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]"   type="text" value="{{DEMANDECOLOCATION.prenomcoloc}}" required class="form-control" > 
                </div> 
                
            </div>
            <br>
            <div class="row">
                
                <div class="form-group col-md-6">
                    <label for="adresse">Email<sup>*</sup> </label>
                    <input name="adresse" id="adresse"  data-parsley-length="[2,80]"  placeholder="abcd@jdk.com"  type="text" value="{{DEMANDECOLOCATION.adressecoloc}}" required class="form-control" > 
                </div> 
                
                <div class="form-group col-md-6">
                    <label for="numero">Numéro <sup>*</sup></label>
                    <input name="numero" id="numero"   data-parsley-length="[8,50]"   data-parsley-type="digits" placeholder="Ex: 0022890000000"  type="text" value="{{DEMANDECOLOCATION.numerocoloc}}"   class="form-control"  >
                </div>
                
            </div>
            <br>
            
            <h6>Espace d’hébergement souhaité :</h6>
            
            <div class="form-check">
              <input class="form-check-input" type="radio" value="Entier" id="preference" name="preference">
              <label class="form-check-label" for="preference">Rack Entier</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" value="½ Rack" id="preference" name="preference">
              <label class="form-check-label" for="preference">½ Rack</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" value="¼ Rack" id="preference" name="preference">
              <label class="form-check-label" for="preference">¼ Rack</label>
            </div>
            
            &ensp;<h3>CARACTERISTIQUES DES EQUIPEMENTS</h3>
            
        <div class="col-12">
            <div class="card">
                <div class="card-body">
            
                <div class = "inputs">
                
                    {% if DEMANDECOLOCATION.caracteristiques|length >0 %}
                    {% set count = 1 %}
                    {% for q in DEMANDECOLOCATION.caracteristiques %}
                
                
                    <div class="row">
                    
                    <div class="form-group col-md-3">
                        <label for="equipement{{count}}"><strong>Nom de l’équipement *</strong></label>
                        <input name="equipement{{count}}" id="equipement{{count}}"  data-parsley-length="[2,80]"  placeholder=""  type="text" {% if q['equipement'~count] is defined %} value="{{q['equipement'~count]}}" {% endif %} value="" required class="form-control" > 
                    </div> 
                    
                    <div class="form-group col-md-3">
                        <label for="puissance{{count}}"><strong>Puissance (W) *</strong></label>
                        <input name="puissance{{count}}" id="puissance{{count}}"    data-parsley-length="[1,100]"   type="text" {% if q['puissance'~count] is defined %} value="{{q['puissance'~count]}}" {% endif %} required class="form-control" > 
                    </div>
                    
                    <div class="form-group col-md-2">
                        <label for="taille{{count}}"><strong>Taille en Rack(en U) *</strong></label>
                        <input name="taille{{count}}" id="taille{{count}}"   data-parsley-length="[1,100]"   type="text" {% if q['taille'~count] is defined %} value="{{q['taille'~count]}}" {% endif %} required class="form-control" > 
                    </div>
                    
                    <div class="form-group col-md-2">
                        <label for="aliementation{{count}}"><strong>Nombre d’alimentation</strong></label>
                        <input name="alimentation{{count}}" id="alimentation{{count}}"   data-parsley-length="[1,100]"   type="text" {% if q['alimentation'~count] is defined %} value="{{q['alimentation'~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 %}
                
                <div class="row">
                    
                    <div class="form-group col-md-3">
                        <label for="equipement1"><strong>Nom de l’équipement  *</strong></label>
                        <input name="equipement1" id="equipement1"  data-parsley-length="[2,80]"  placeholder=""  type="text" value="" required class="form-control" > 
                    </div> 
                    
                    <div class="form-group col-md-3">
                        <label for="puissance1"><strong>Puissance (W) *</strong></label>
                        <input name="puissance1" id="puissance1"    data-parsley-length="[1,100]"   type="text" required class="form-control" > 
                    </div>
                    
                    <div class="form-group col-md-2">
                        <label for="taille1"><strong>Taille en Rack(en U) *</strong></label>
                        <input name="taille1" id="taille1"   data-parsley-length="[1,100]"   type="text" required class="form-control" > 
                    </div>
                    
                    <div class="form-group col-md-2">
                        <label for="aliementation1"><strong>Nombre d’alimentation</strong></label>
                        <input name="alimentation1" id="alimentation1"   data-parsley-length="[1,100]"   type="text" required class="form-control" > 
                    </div>
                    {#<div class="form-group col-md-3">#}
                    {#    <a class="btn btn-danger pull-right retirer" onclick="Retirer();"><span class="fa fa-remove"></span></a>#}
                    {#</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 %}
            </div>
            </div>
        </div>
    </div>
            <input type="hidden" value="1" id="nombrecard"  name="nombrecard" >
            <br>
            <div>
                    {#<a class="btn btn-danger pull-right retirer" onclick="Retirer();"><span class="fa fa-remove"></span></a>#}
                    {#<a class="btn btn-primary pull-right" onclick="Ajouter();"><span class="fa fa-plus"></span></a>#}
                    
                    <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>
            
            
            <br>
            <div class="form-group ">
                    <h6>Décrivez brièvement l’architecture à déployer:</h6>
                    <label for="description" ></label>
                    <textarea class="form-control" id="description" name="description" rows="5">{{DEMANDECOLOCATION.Descriptioncoloc}}</textarea>
                </div>
                
            <br>
            <h6>Q.1 Avez-vous un routeur ? *</h6>
                
                <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 DEMANDECOLOCATION.Question1coloc == "Non" %} checked {% endif %}>
                          <label class="form-check-label" for="routeur">NON</label>
                </div>
                <br>
            &ensp;<h6>Q.2 Avez-vous besoin d’adresses IP Publiques ? *</h6>
                
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question2" id="question2" value="Oui" checked>
                          <label class="form-check-label" for="question2">OUI</label>
                </div>
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question2" id="question2" value="Non" {% if DEMANDECOLOCATION.Question2coloc == "Non" %} checked {% endif %}>
                          <label class="form-check-label" for="question2">NON</label>
                </div>
                <br>
                
            &ensp;<h6>Q.3 Souhaitez-vous utiliser vos propres adresses IP avec votre numéro AS (BGP)? *</h6>
                
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question3" id="question3" value="Oui" checked>
                          <label class="form-check-label" for="question3">OUI</label>
                </div>
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question3" id="question3" value="Non" {% if DEMANDECOLOCATION.Question3coloc == "Non" %} checked {% endif %}>
                          <label class="form-check-label" for="question3">NON</label>
                </div>
                <br>
                
            &ensp;<h6>Q.4 Avez-vous besoin d’une assistance technique après l’installation des serveurs ? (Installation de logiciel, configuration de vos systèmes d’information …) ? *</h6>
                
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question4" id="question4" value="Oui" checked>
                          <label class="form-check-label" for="question4">OUI</label>
                </div>
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question4" id="question4" value="Non" {% if DEMANDECOLOCATION.Question4coloc == "Non" %} checked {% endif %}>
                          <label class="form-check-label" for="question4">NON</label>
                </div>
                <br>
                
            &ensp;<h6>Q.5 Souhaitez-vous faire des sauvegardes dans le Cloud ? *</h6>
                
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question5" id="question5" value="Oui" checked>
                          <label class="form-check-label" for="question5">OUI</label>
                </div>
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question5" id="question5" value="Non" {% if DEMANDECOLOCATION.Question5coloc == "Non" %} checked {% endif %}>
                          <label class="form-check-label" for="question5">NON</label>
                </div>
                <br>
            &ensp;<h6>Q.6 Souhaitez-vous vous abonner au service Eyes and Hands ? *</h6>
                
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question6" id="question6" value="Oui" checked>
                          <label class="form-check-label" for="question6">OUI</label>
                </div>
                <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="question6" id="question6" value="Non" {% if DEMANDECOLOCATION.Question6coloc == "Non" %} checked {% endif %}>
                          <label class="form-check-label" for="question6">NON</label>
                </div>
                
                <br>
                <div class="form-group ">
                    <h6>Q.7 Avez-vous des requêtes spécifiques pour l’hébergement de vos serveurs ?</h6>
                    <label for="question7" ></label>
                    <textarea class="form-control" id="question7" name="question7" rows="5">{{DEMANDECOLOCATION.question7coloc}}</textarea>
                </div>
                
                <br>
                <button type="submit" class="btn btn-primary btn-block">{% if DEMANDECOLOCATION.id > 0 %}Modifier{% else %}Enregistrer{% endif %}</button>
                {% if DEMANDECOLOCATION.id > 0 %}
                <a type="button" class="btn btn-danger btn-block" href="{{path('liste_colocation')}}">Quitter</a>
                {% endif %}
            </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="equipement'+indice+'"><strong>Nom de l’équipement '+indice+' *</strong></label>'+
                        '<input name="equipement'+indice+'" id="equipement'+indice+'" data-parsley-length="[2,80]" placeholder="" type="text" value="" required class="form-control">'+ 
                    '</div>'+  
                    '<div class="form-group col-md-3">'+
                        '<label for="puissance'+indice+'"><strong>Puissance (W) *</strong></label>'+
                        '<input name="puissance'+indice+'" id="puissance'+indice+'" placeholder="" data-parsley-length="[1,100]" type="text" required class="form-control">'+ 
                    '</div>'+ 
                    '<div class="form-group col-md-2">'+
                        '<label for="taille'+indice+'"><strong>Taille en Rack(en U) *</strong></label>'+
                        '<input name="taille'+indice+'" id="taille'+indice+'" placeholder="" data-parsley-length="[1,100]" type="text" required class="form-control">'+ 
                    '</div>'+ 
                    '<div class="form-group col-md-2">'+
                        '<label for="alimentation'+indice+'"><strong>Nombre d’alimentation</strong></label>'+
                        '<input name="alimentation'+indice+'" id="alimentation'+indice+'" placeholder="" data-parsley-length="[1,100]" 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(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"#}