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

{% block title %}Creation d'un sondage{% 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 le Sondage" %}
{% if id is defined %}
    {% set submitaction = "Modifier le Sondage" %}
{% 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'un Sondage
    {% else %}
        Création d'un Sondage
    {% 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 'Survey/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.notification) }}                    
                    {{ form_row(form.description) }}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

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

<!-- ETAPE 03 = Invités ----------------------------------------------------------------------------------------------------------------------------------------- -->
    {% if flow.getCurrentStepNumber() == 3 %}
        {{ form_row(form.jsonguests) }}
        
        {% if not survey.private %}
            <div class="card mb-3 mt-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            Ce sondage é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 au sondage suivant : {{survey.title}}.<br>
                            Pour ce faire, veuillez cliquer sur le lien ci-après: <a href="{{ absolute_url(path('app_survey_bysurveykey', {'key' : survey.key})) }}">accéder au sondage</a>.<br>
                            </blockquote>

                            <strong>Attention n'envoyez le mail qu'après avoir finaliser l'enregistrement de votre sondage.</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.jsonoptions) }}
        {{ form_row(form.jsonguests) }}

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

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

                        {% if not survey.private %}
                        <br>
                        Ce sondage é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 au sondage suivant : {{survey.title}}.<br>
                        Pour ce faire, veuillez cliquer sur le lien ci-après: <a href="{{ absolute_url(path('app_survey_bysurveykey', {'key' : survey.key})) }}">accéder au sondage</a>.<br>
                        </blockquote>

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

                    </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_home')}}" class="btn btn-secondary float-left">Annuler</a>';
    $(".craue_formflow_buttons").prepend(html);
});

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

var timeoptions = {
    show_meridian:false,
    step_size_minutes:5,
    //reset: true,
    min_hour_value:0,
	max_hour_value:23,
    start_time: ["", "00"],
    increase_direction:'up'
};


$(document).ready(function() {
    if ($("#surveyoptions_jsonoptions").val() == ''||$("#surveyoptions_jsonoptions").val()=='[]'){
        $("#surveyoptions_jsonoptions").val('[{"date":"" , "hours":["",""] }, { "date":"" , "hours":["",""] }  ]');
    }

    var obj = JSON.parse($("#surveyoptions_jsonoptions").val());
    console.log(obj);
    initDates(obj);    

         
});

function initDates(json) {
    $.each(json, function(i, date) {
        addBlockDate(i,date);
    });

    addBtnDate();
}

function addBlockDate(i,date) {
    html ='<div id="datecontainer'+i+'" class="col-md-6 datecontainer" data-id="'+i+'">';
    html+='<div class="card mb-3 mt-3">';
    html+='<div class="card-header">';
    html+='Date';
    html+='<button type="button" class="btn datedel float-right" data-id="'+i+'" aria-hidden="true"><i class="fa fa-trash"></i></button>';
    html+='</div>';
    html+='<div class="card-body">';

    html+='<input type="date" id="date'+i+'" name="date'+i+'" data-id="'+i+'" class="form-control dateinput" value="'+date.date+'">';
    html+='<br>';

    html+='<div id="hourcontainer'+i+'" class="row">';
    $.each(date.hours, function(j, hour) {
        html+=addBlockHour(i,j,hour);
    });
    html+='</div>';
    html+=addBtnHour(i);

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

    $("#options").append(html);
    $('.timepicker').timepicki(timeoptions);
}

function addBlockHour(i,j,hour) {
    if(hour!="") {
        tbhour=hour.replace(' ','').split(':');
        data='data-timepicki-tim="'+tbhour[0]+'" data-timepicki-mini="00"';
    }
    else {
        data='data-timepicki-tim="10" data-timepicki-mini="00"';
    }

    html ='<div id="hourcontainer'+i+'-'+j+'" class="col-lg-6 hourcontainer'+i+'" data-id="'+j+'" style="margin-bottom: 15px;">';
    html+='<span>';
    html+='<input id="date'+i+'hour'+j+'" name="date'+i+'hour'+j+'" class="form-control hourinput'+i+' timepicker"  value="'+hour+'" '+data+'>';
    html+='</span>';
    html+='<button type="button" class="btn hourdel" data-id="'+i+'-'+j+'" aria-hidden="true"><i class="fa fa-trash"></i></button>';
    html+='</div>';  
    return html;
}

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

function addBtnHour(i){
    html ='<div id="addhour" class="center" style="width:100%">';
    html+='<div class="text-center">';
    html+='<button type="button" class="btn btn-link" onClick="addHour('+i+')">';
    html+='<i class="fa fa-plus"></i>';
    html+='<br>Ajouter une heure';
    html+='</button>';
    html+='</div>';
    html+='</div>';
    return html;
}


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

    // Recherche du dernier blockdate généré
    var i = $(".datecontainer").last().data("id") + 1;

    // Chaine vide
    var date = JSON.parse('{"date":"" , "hours":["",""] }');

    // Construction d'un bloc de date vide
    addBlockDate(i,date);

    // On regen le bouton add date
    addBtnDate();
}

function addHour(i) {

    // Recherche du dernier blockdate généré
    var j = $(".hourcontainer"+i).last().data("id") + 1;

    // Récupéer le code html
    html=addBlockHour(i,j,"");

    // Ajouter le code au conteneur
     $("#hourcontainer"+i).append(html);
     $('.timepicker').timepicki(timeoptions);
}

$('#options').on('click', '.datedel', function(event) {
    id=$(this).attr("data-id");
    $("#datecontainer"+id).remove();
    
});

$('#options').on('click', '.hourdel', function(event) {
    id=$(this).attr("data-id");
    $("#hourcontainer"+id).remove();
});

$('#mycontent').on('click', '.btnnextstep', function(event) {
    // Construction du tableau des horaires en fusionnant les potentiels doublons
    var tbdates=[];
    $(".dateinput").each(function() {
        if($(this).val()!="") {
            keydate=$(this).val();
            var pos = tbdates.indexOf($(this).val());
            if(tbdates[keydate]==undefined) {
                tbdates[keydate]=[];
                tbdates[keydate]["date"]=keydate;
                tbdates[keydate]["int"]=parseInt(keydate.replace("-",""));
                tbdates[keydate]["hours"]=[];
            }

            $(".hourinput"+$(this).data("id")).each(function() {
                if($(this).val()!="") {
                    var pos = tbdates[keydate]["hours"].indexOf($(this).val());
                    if(pos==-1) {
                        tbdates[keydate]["hours"].push($(this).val());
                    }
                }
            });

            // Trier par heure
            tbdates[keydate]["hours"].sort();
        }
    });
    

    // On recalcul la chaine json
    dates="";
    for (const [keydate, date] of Object.entries(tbdates)) {
        hours="";
        intdate=date["int"];

        date["hours"].forEach(function(vlhour) {
            if(hours!="") hours+=',';
            if(hours=="") hours=',"hours":[';
            hours+='"'+vlhour+'"';
        });

        if(hours!="") {
            hours+=']';
            if(dates!="") dates+=',';
            if(dates=="") dates='[';
            dates+='{ "date":"'+keydate+'"'+hours+'}';
        }        
    }

    if(dates!="") dates+=']'; 
    if(dates=="") dates="[]";    

    // Trier par date
    var ordered = JSON.parse(dates);
    ordered.sort(function(a, b){
        if(a.date < b.date) { return -1; }
        if(a.date > b.date) { return 1; }
        return 0;
    })

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

{% endif %}

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


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

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

$('#surveyguests_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)
            },
        }); 

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

$('#surveyguests_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);
                });
            },
        }); 

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



function addGuest(email) {
    if(!$('*[data-email="'+email+'"]').length) {
        html ='';
        html+='<div 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 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);
    });
});


$('#mycontent').on('click', '.btnnextstep', function(event) {
    {% if survey.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
    $("#surveyguests_jsonguests").val(JSON.stringify(tbmails));
    {% endif %}
});


{% endif %}

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

{% if flow.getCurrentStepNumber() == 4 %}
$(document).ready(function() {
    var tbdates = JSON.parse($("#createSurvey_jsonoptions").val());
    tbdates.forEach(function(date,indexdate) {
        date.hours.forEach(function(hour,indexhour) {
            addRecapOption(date.date, hour,indexdate, indexhour);
        });
    });     

    if ("{{ survey.private }}"=="1"){
        var tbmails = JSON.parse($("#createSurvey_jsonguests").val());
        tbmails.forEach(function(mail,index) {
            addRecapGuest(mail,index);
        });              
    }
});

function addRecapOption(date, hour,indexdate, indexhour) {
    html ="";
    if(indexdate>0||indexhour>0) html+="<br>";
    else html+="<br>LISTE DES OPTIONS<br>";
    html+=date+" "+hour;
    $("#containeroptions").append(html);
}

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

{% endif %}

{% endblock %}