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

{% block title %}Creation d'une enquête{% endblock %}

{% block localstyle %}
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .hourdel, .guestdel {
        position: absolute;
        top: 0px;
        right: 13px;
    }

    #addGuestMail {
        position: absolute;
        top: 33px;
        right: 13px;
    }


    // CSS timepicki non insérer en asset car le natif est en contradiction avec d'autres CSS de lib
    .ti_tx,
    .mi_tx,
    .mer_tx {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .time,
    .mins,
    .meridian {
        width: 60px;
        float: left;
        margin: 0 10px;
        font-size: 20px;
        color: #2d2e2e;
        font-family: arial;
        font-weight: 700;
        text-align: center;
    }

    .timepicker_wrap  .prev,
    .timepicker_wrap  .next {
        cursor: pointer;
        padding: 18px;
        width: 42px;
        border: 1px solid #ccc;
        margin: auto;
        border-radius: 5px;
        height:40px;
    }

    .timepicker_wrap  .prev:after {
        content: '\f077';
        font-family: 'Font Awesome 5 Free';
        position: relative;
        top: -12px;
        left: -6px;  
    }

    .timepicker_wrap  .next:after {
        content: '\f078';
        font-family: 'Font Awesome 5 Free';
        position: relative;
        top: -12px;
        left: -6px;  
    }


    .timepicker_wrap  .prev:hover,
    .timepicker_wrap  .next:hover {
        background-color: #ccc;
    }

    .timepicker_wrap  .next {
        background-position: 50% 150%;
    }

    .timepicker_wrap  .prev {
        background-position: 50% -50%;
    }

    .time_pick {
        position: relative;
    }

    .timepicker_wrap {
        padding: 10px;
        border-radius: 5px;
        z-index: 998;
        display: none;
        box-shadow: 2px 2px 5px 0 rgba(50,50,50,0.35);
        background: #f6f6f6;
        border: 1px solid #ccc;
        float: left;
        position: absolute;
        top: 27px;
        left: 0;
    }

    .arrow_top {
        position: absolute;
        top: -10px;
        left: 20px;
        background: url("") no-repeat;
        width: 18px;
        height: 10px;
        z-index: 999;
    }
    input.timepicki-input {
        background: none repeat scroll 0 0 #FFFFFF;
            border: 1px solid #CCCCCC;
            border-radius: 5px 5px 5px 5px;
            float: none;
            margin: 0;
            text-align: center;
            width: 70%;
    }
    a.reset_time {
        float: left;
        margin-top: 5px;
        color: #000;
        width: 100%;
        text-align: center;
    }

{% endblock %}

{% block body %}

{% set submitaction = "Créer une Enquête" %}
{% if id is defined %}
    {% set submitaction = "Modifier l'Enquête" %}
{% endif %}
    

<div class="container">
{% if id is defined %}
{{ form_start(form, {'action': path(app.request.attributes.get('_route'), {id:id} | craue_removeDynamicStepNavigationParameters(flow))}) }}
{% else %}
{{ form_start(form, {'action': path(app.request.attributes.get('_route'), app.request.query.all | craue_removeDynamicStepNavigationParameters(flow))}) }}
{% endif %}
    <h1 class="page-header">
    {% if id is defined %}
        Modification d'une Enquête
    {% else %}
        Création d'une Enquête
    {% endif %}
    </h1>

    <!-- Affichage des erreurs -->   
    {% if app.session.flashbag.has('error') %}
        <div class='alert alert-danger' style='margin: 5px 0px'>
            <strong>Erreur</strong><br>
            {% for flashMessage in app.session.flashbag.get('error') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    <!-- Affichage des alertes -->   
    {% if app.session.flashbag.has('notice') %}
        <div class='alert alert-info' style='margin: 5px 0px'>
            <strong>Information</strong><br>
            {% for flashMessage in app.session.flashbag.get('notice') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    <!-- Navigation flowform -->
    {% include 'Quest/step.html.twig' %}
    {% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
        craue_formflow_button_class_next: 'btn btnnextstep btn-primary',
        craue_formflow_button_class_back: 'btn btn-secondary mr-3',
        craue_formflow_button_class_finish: 'btn btn-primary',
        craue_formflow_button_label_next: 'Étape suivante',
        craue_formflow_button_label_back: 'Étape précédente',
        craue_formflow_button_label_finish: submitaction,
        craue_formflow_button_render_reset: false,
    } %}



<!-- ETAPE 01 = Informations ------------------------------------------------------------------------------------------------------------------------------------ -->
    {% if flow.getCurrentStepNumber() == 1 %}
    <div class="card mb-3 mt-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    {{ form_row(form.title) }}
                    {{ form_row(form.private) }}
                    {{ form_row(form.anonymous) }}
                    {{ form_row(form.notification) }}                    
                    {{ form_row(form.description) }}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

<!-- ETAPE 02 = Options ----------------------------------------------------------------------------------------------------------------------------------------- -->
    {% if flow.getCurrentStepNumber() == 2 %}
        {{ form_row(form.jsonquestoptions) }}
        <div id="options" class="row"></div>
    {% endif %}

<!-- ETAPE 03 = Invités ----------------------------------------------------------------------------------------------------------------------------------------- -->
    {% if flow.getCurrentStepNumber() == 3 %}
        {{ form_row(form.jsonquestguests) }}
        
        {% if not quest.private %}
            <div class="card mb-3 mt-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            Cette enquête étant public, vous devez gérer vous même l'envoi des invitations. Vous pouvez copier/coller le message type ci-dessous qui contient l'adresse à laquelle vos invités pourront répondre.
                            <br><br>
                        
                            <blockquote class="blockquote" style="border-left: 5px solid #eee; padding-left:15px; ">
                            Bonjour,<br>
                            Je vous invite à répondre à l'enquête suivante : {{quest.title}}.<br>
                            Pour ce faire, veuillez cliquer sur le lien ci-après: <a href="{{ absolute_url(path('app_quest_byquestkey', {'key' : quest.key})) }}">accéder à l'enquête</a>.<br>
                            </blockquote>

                            <strong>Attention n'envoyez le mail qu'après avoir finaliser l'enregistrement de votre enquête.</strong>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <div id="gueststools" class="card mb-3 mt-3" style="display:none">
            <div class="card-body">
                <div  class="row" >
                    <div class="col-md-6">
                        {{ form_row(form.user) }}
                    </div>
                    <div class="col-md-6">
                        {{ form_row(form.group) }}
                    </div>

                    <div class="col-lg-12">
                        <div class="form-group">
                            <label class="control-label" for="guestmail">Ajouter une liste de mail séparée par des virgules</label>
                            <input type="text" id="guestmail" class="form-control">
                            <button id="addGuestMail" type="button" class="btn" aria-hidden="true"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="guests" class="card mb-3 mt-3" style="display:none">
            <div class="card-header">Liste des Invités</div>
            <div class="card-body">
                <div class="row"></div>
            </div>
        </div>

    {% endif %}

<!-- ETAPE 04 = Confirmation ------------------------------------------------------------------------------------------------------------------------------------ -->
    {% if flow.getCurrentStepNumber() == 4 %}
        {{ form_row(form.jsonquestoptions) }}
        {{ form_row(form.jsonquestguests) }}

        <div class="alert alert-info mt-3">
            {% if id is defined %}
                La modification de l'enquête est presque terminée. Vérifiez les informations et cliquez sur "Modifier l'enquête".
            {% else %}
                La création de l'enquête est presque terminée. Vérifiez les informations et cliquez sur "Créer l'enquête".
            {% endif %}
        </div>

        <div class="card mb-3 mt-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        TITRE = {{ quest.title }}<br>
                        TYPE = {% if quest.private %} Privé {% else %} Public {% endif %}<br>
                        ANONYME = {% if quest.anonymous %} oui {% else %} non {% endif %}<br>
                        NOTIFICATION = {% if quest.notification %} oui {% else %} non {% endif %}
                        <div id="containerguests"></div>

                        {% if not quest.private %}
                        <br>
                        Cette enquête étant public, vous devez gérer vous même l'envoi des invitations. Vous pouvez copier/coller le message type ci-dessous qui contient l'adresse à laquelle vos invités pourront répondre.
                        <br><br>
                    
                        <blockquote class="blockquote" style="border-left: 5px solid #eee; padding-left:15px; ">
                        Bonjour,<br>
                        Je vous invite à répondre à l'enquête suivante : {{quest.title}}.<br>
                        Pour ce faire, veuillez cliquer sur le lien ci-après: <a href="{{ absolute_url(path('app_quest_byquestkey', {'key' : quest.key})) }}">accéder à l'enquête</a>.<br>
                        </blockquote>

                        <strong>Attention n'envoyez le mail qu'après avoir finaliser l'enregistrement de votre enquête.</strong>
                        {% endif %}
                    </div>    

                    <div class="col-md-8">
                        <div id="containeroptions"></div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------------- -->

    <!-- Navigation flowform -->
    {% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
        craue_formflow_button_class_next: 'btn btnnextstep btn-primary',
        craue_formflow_button_class_back: 'btn btn-secondary mr-3',
        craue_formflow_button_class_finish: 'btn btn-primary',
        craue_formflow_button_label_next: 'Étape suivante',
        craue_formflow_button_label_back: 'Étape précédente',
        craue_formflow_button_label_finish: submitaction,
        craue_formflow_button_render_reset: false,
    } %}

{{ form_end(form) }}
</div>

 
{% endblock %}


{% block localjavascript %}
$(document).ready(function() {
    var stepper = new Stepper($('.bs-stepper')[0]);

    html='<a href="{{path('app_quest')}}" class="btn btn-secondary float-left">Annuler</a>';
    $(".craue_formflow_buttons").prepend(html);
});

<!-- ETAPE 02 = Options ----------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 2 %}


$(document).ready(function() {
    if ($("#questoptions_jsonquestoptions").val() == ''||$("#questoptions_jsonquestoptions").val()=='[]'){
        $("#questoptions_jsonquestoptions").val('[]');
    }

    var obj = JSON.parse($("#questoptions_jsonquestoptions").val());
    initOptions(obj);    

         
});

function initOptions(json) {
    $.each(json, function(i, option) {
        addBlockOption(option);
    });

    addBtnOption();

    $( "#options" ).sortable({
        axis: "y",
        handle: ".fa-arrows-alt-v",
    });    
}

function addBlockOption(option) {  
    strdata='data-id="'+option.id+'" data-code="'+option.code+'"';

    html ='<div '+strdata+' id="optioncontainer'+option.code+'" class="col-md-12 optioncontainer">';
    html+='<div class="card mb-3 mt-3">';
    html+='<div class="card-header">';
    html+='<i class="fas fa-arrows-alt-v ui-sortable-handle"></i>&nbsp;';
    html+='Question';
    html+='<button '+strdata+' id="optionbtndel'+option.code+'" type="button" class="btn optiondel float-right" aria-hidden="true"><i class="fa fa-trash"></i></button>';
    html+='</div>';

    html+='<div class="card-body">';

    html+='<div class="form-group">';
    html+='<label class="control-label required">Code<span class="mandatory">*</span></label>';
    html+='<input '+strdata+' id="optioncode'+option.code+'" name="optioncode'+option.code+'" disabled="disabled" class="form-control optioncode" value="'+option.code+'">';
    html+='</div>';

    html+='<div class="form-group">';
    html+='<label class="control-label required">Intitulé de la question<span class="mandatory">*</span></label>';
    html+='<input '+strdata+' id="optionname'+option.code+'" name="optionname'+option.code+'" class="form-control optionname" value="'+option.name+'">';
    html+='</div>';

    html+='<div class="form-group">';
    html+='<label class="control-label required">Obligatoire<span class="mandatory">*</span></label>';
    html+='<select '+strdata+' id="optionrequired'+option.code+'" name="optionrequired'+option.code+'" class="form-control optionrequired">';
    html+='<option value="0">non</option>';
    html+='<option value="1">oui</option>';
    html+='</select>';
    html+='</div>';

    html+='<div class="form-group">';
    html+='<label class="control-label required">Type de la question<span class="mandatory">*</span></label>';
    html+='<select '+strdata+' id="optiontype'+option.code+'" name="optiontype'+option.code+'" class="form-control optiontype">';
    html+='<option value="10">oui / non</option>';
    html+='<option value="20">oui / non / peut-être</option>';
    html+='<option value="30">oui / non / en partie</option>';
    html+='<option value="40">niveau de satisfaction</option>';
    html+='<option value="50">niveau de satisfaction avec commentaire</option>';
    html+='<option value="60">note sur 5</option>';
    html+='<option value="70">note sur 10</option>';
    html+='<option value="80">note sur 20</option>';
    html+='<option value="90">text court</option>';
    html+='<option value="100">text long</option>';
    html+='<option value="110">choix</option>';
    html+='</select>';
    html+='</div>';

    html+='<div id="blockoptionparameters'+option.code+'"class="form-group">';
    html+='<label class="control-label required">Liste de choix séparée par des ;<span class="mandatory">*</span></label>';
    html+='<input '+strdata+' id="optionparameters'+option.code+'" name="optionparameters'+option.code+'" class="form-control optionparameters" value="'+option.parameters+'">';
    html+='</div>';

    html+='</div>';
    html+='</div>';
    html+='</div>';       

    $("#options").append(html);
    if(option.required) option.required=1;
    else option.required=0;
    $('#optionrequired'+option.code).val(option.required);
    $('#optiontype'+option.code).val(option.type);
    if(option.type==110) $('#blockoptionparameters'+option.code).show();
    else $('#blockoptionparameters'+option.code).hide();
    $('#optionname'+option.code).focus();
}



function addBtnOption(){
    html ='<div id="addoption" class="center" style="width:100%">';
    html+='<div class="text-center">';
    html+='<button type="button" class="btn btn-link" onClick="addOption()">';
    html+='<i class="fa fa-plus fa-4x"></i>';
    html+='<br>Ajouter une question';
    html+='</button>';
    html+='</div>';
    html+='</div>';
    $("#options").append(html);
}


function addOption() {
    // On supprime le bouton adddate
    $("#addoption").remove();

    // boucler sur l'ensemble des block pour déterminer le prochain code et roworder libre
    code=1;
    roworder=1;
    $(".optioncontainer").each(function() {
        if($(this).data("code")>=code) code=$(this).data("code")+1;
        if($(this).data("roworder")>=roworder) roworder=$(this).data("roworder")+1;
    });

    // Chaine vide
    var option = JSON.parse('{"id":"","code":"'+code+'","roworder":"'+roworder+'", "name":"" , "required":1, "type":"10", "parameters":"" }');

    // Construction d'un bloc de option vide
    addBlockOption(option);

    // On regen le bouton add option
    addBtnOption();
}

$('#options').on('change', '.optiontype', function(event) {
    code=$(this).attr("data-code");
    type=$('#optiontype'+code).val();

    if(type==110) $('#blockoptionparameters'+code).show();
    else $('#blockoptionparameters'+code).hide();    
});

$('#options').on('click', '.optiondel', function(event) {
    code=$(this).attr("data-code");
    $("#optioncontainer"+code).remove();
    
});

$('#mycontent').on('click', '.btnnextstep', function(event) {
    // Construction du tableau des horaires en fusionnant les potentiels doublons
    var tboptions=[];
    roworder=0;
    $(".optioncontainer").each(function() {
        roworder=roworder+1;
        
        id=$(this).data("id")
        code=$(this).data("code");
        name=$("#optionname"+code).val();
        required=$("#optionrequired"+code).val();
        type=$("#optiontype"+code).val();
        parameters=$("#optionparameters"+code).val();

        tboptions[roworder]=[];
        tboptions[roworder]["id"]=id;
        tboptions[roworder]["code"]=code;
        tboptions[roworder]["roworder"]=roworder;
        tboptions[roworder]["name"]=name;
        tboptions[roworder]["required"]=required;
        tboptions[roworder]["type"]=type;
        tboptions[roworder]["parameters"]=parameters;
    });
    
    // On recalcul la chaine json
    options="";
    for (const [key, option] of Object.entries(tboptions)) {
        if(options!="") options+=',';
        if(options=="") options='[';        
        options+='{ "id":"'+option["id"]+'", "code":"'+option["code"]+'", "roworder":"'+option["roworder"]+'", "name":"'+option["name"]+'", "required":"'+option["required"]+'", "type":"'+option["type"]+'", "parameters":"'+option["parameters"]+'"}';      
    }
    if(options!="") options+=']'; 
    if(options=="") options="[]"; 
    var ordered = JSON.parse(options);

    // Valoriser le formulaire
    $("#questoptions_jsonquestoptions").val(JSON.stringify(ordered));

    //event.preventDefault();
});

{% endif %}

<!-- ETAPE 03 = Guests ------------------------------------------------------------------------------------------------------------------------------------------ -->
{% if flow.getCurrentStepNumber() == 3 %}


$(document).ready(function() {
    if ("{{ quest.private }}"=="1"){
        $("#gueststools").show();

        var tbmails = JSON.parse($("#questguests_jsonquestguests").val());
        var toshow=false;
        tbmails.forEach(function(mail) {
            addGuest(mail);
            toshow=true;
        });              
        if(toshow) $("#guests").show();
    }
    else {
        $("#gueststools").hide();
        $("#guests").hide();
    }
         
});

$('#questguests_user').on('select2:select', function (e) {
    // récupérer l'id du user
    id=$(this).val();
    if(id) {
        // Récupérer les infomations de l'utilisateur selectionné    
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_info') }}",
            data: "id="+id,
            success: function(data, dataType)
            {
                addGuest(data.email)
            },
        }); 

        $('#questguests_user').val(null).trigger('change');
    }
});

$('#questguests_group').on('select2:select', function (e) {
    // récupérer l'id du group
    id=$(this).val();
    if(id) {
        // Récupérer les infomations du groupe selectionné    
        $.ajax({
            method: "POST",
            url: "{{ path('app_group_info') }}",
            data: "id="+id,
            success: function(data, dataType)
            {
                users=data.users;
                users.forEach(function(user) {
                    addGuest(user.email);
                });
            },
        }); 

        $('#questguests_group').val(null).trigger('change');
    }
});



function addGuest(email) {
    if(!$('*[data-email="'+email+'"]').length) {
        html ='';
        html+='<div data-id="container-'+email+'" class="col-md-4">';
        html+='<div class="form-group">';
        html+='<input type="text" data-email="'+email+'" class="guest form-control" value="'+email+'">';
        html+='<button onClick="delGuest(\''+email+'\')" type="button" class="btn guestdel" data-id="'+email+'" aria-hidden="true"><i class="fa fa-trash"></i></button>';
        html+='</div>';
        html+='</div>';

        $("#guests .card-body .row").append(html);
        $("#guests").show();
    }
}

$( "#addGuestMail" ).click(function() {
    lstmails=$("#guestmail").val();
    tbmails =lstmails.split(",");
    tbmails.forEach(function(mail) {
        addGuest(mail);
    });
});

function delGuest(id) {
    $("[data-id='container-"+id+"']").remove();
}

$('#mycontent').on('click', '.btnnextstep', function(event) {
    {% if quest.private %}
    // Construction du tableau des horaires en fusionnant les potentiels doublons
    var tbmails=[];
    $(".guest").each(function() {
        if($(this).val()!="") {
            tbmails.push($(this).val());
        }
    });
    tbmails.sort();

    // Valoriser le formulaire
    $("#questguests_jsonquestguests").val(JSON.stringify(tbmails));
    {% endif %}
});


{% endif %}

<!-- ETAPE 04 = Récap ------------------------------------------------------------------------------------------------------------------------------------------- -->

{% if flow.getCurrentStepNumber() == 4 %}
$(document).ready(function() {
    if ("{{ quest.private }}"=="1"){
        var tbmails = JSON.parse($("#createQuest_jsonquestguests").val());
        tbmails.forEach(function(mail,index) {
            addRecapGuest(mail,index);
        });              
    }

    var tboptions = JSON.parse($("#createQuest_jsonquestoptions").val());

    html ='<h2>{{ quest.title }}</h2>';
    html+='{{ quest.description|escape("js")}}';
    $("#containeroptions").append(html);
    tboptions.forEach(function(option,index) {
        addRecapOption(option);
    });
});

function addRecapGuest(mail,index) {
    html ="";
    if(index>0) html+="- ";
    else html+="<br>LISTE DES INVITES<br>";
    html+=mail+" ";
    $("#containerguests").append(html);
}

function addRecapOption(option) {
    html ="";
    html+="<hr>";
    html+="<strong>"+option.name;
    if(option.required) html+=" *";
    html+="</strong><br>";

    switch(option.type) {
        case "10":
            html+='<select class="form-control">';
            html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
            html+='<option value="0">non</option>';
            html+='<option value="1">oui</option>';
            html+='</select>';
            break;
        case "20":
            html+='<select class="form-control">';
            html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
            html+='<option value="0">non</option>';
            html+='<option value="1">oui</option>';
            html+='<option value="2">peut-être</option>';
            html+='</select>';
            break;

        case "30":
            html+='<select class="form-control">';
            html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
            html+='<option value="0">non</option>';
            html+='<option value="1">oui</option>';
            html+='<option value="2">en partie</option>';
            html+='</select>';
            break;

        case "40":
            html+='<select class="form-control">';
            html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
            html+='<option value="0">Très Satisfait</option>';
            html+='<option value="1">Satisfait</option>';
            html+='<option value="2">Peu Satisfait</option>';
            html+='<option value="3">Insatisfait</option>';
            html+='</select>';
            break;


        case "50":
            html+='<select class="form-control">';
            html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
            html+='<option value="0">Très Satisfait</option>';
            html+='<option value="1">Satisfait</option>';
            html+='<option value="2">Peu Satisfait</option>';
            html+='<option value="3">Insatisfait</option>';
            html+='</select>';
            html+='<textarea class="form-control" style="height:100px;"></textarea>';
            break;

        case "60":
            html+='<i><small>note sur 5</small></i>';
            html+='<input type="number" class="form-control" min="0" max="5">';
            break;

        case "70":
            html+='<i><small>note sur 10</small></i>';
            html+='<input type="number" class="form-control" min="0" max="10">';
            break;

        case "80":
            html+='<i><small>note sur 20</small></i>';
            html+='<input type="number" class="form-control" min="0" max="20">';
            break;

        case "90":
            html+='<textarea class="form-control" style="height:100px;"></textarea>';
            break;

        case "100":
            html+='<textarea class="form-control" style="height:300px;"></textarea>';
            break;

        case "110":
            console.log(option.parameters);
            tbparameters=option.parameters.split(';');

            html+='<select class="form-control">';
            html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
            tbparameters.forEach(function(parameter,index) {
                html+='<option value="'+parameter+'">'+parameter+'</option>';
            });
            break;
    }

    $("#containeroptions").append(html);
}
{% endif %}

{% endblock %}