{% extends 'base.html.twig' %}
{% block localstyle %}
    .surveyaction {
        min-width:100px;
    }

    .grid { margin-bottom:200px;}
    .gutter-sizer { width: 2%; }

    .grid-sizer,
    .grid-item { 
        width: 49%;
        
    }

    @media (max-width: 991px) {
        .grid-sizer, .grid-item { width: 100%; }
        .gutter-sizer { width: 0%; }
    }

{% endblock %}
{% block body %}
<h1 class="text-center">NINESURVEY</h1>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <a href="{{ path('app_survey_submit')}}" class="btn btn-block btn-primary mb-3" style="font-size:30px">
                Créer un nouveau sondage
            </a>
        </div>
    </div>
    <div class="grid" style="display:none">
        <div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>

        {% for guest in guests %}
            <div class="grid-item" >
                <div class="card mb-3">
                    <div class="card-header">
                        {{ guest.survey.title }}
                    </div>
                    <div class="card-body">
                        <a href="{{ path('app_survey_byuserkey',{key:guest.survey.id})}}" class="surveyaction btn btn-info btn-sm mr-1"><i class="fa fa-eye"></i> {% if guest.survey.status==0 %} Répondre{%else%} Visualiser{%endif%}</a>
                        {% if app.user==guest.survey.user %}
                        <a href="{{ path('app_survey_update',{id:guest.survey.id})}}" class="surveyaction btn btn-success btn-sm"><i class="fa fa-file"></i> Modifier</a>
                        <a href="{{ path('app_survey_delete',{id:guest.survey.id})}}" class="btn btn-danger btn-sm float-right" data-method="delete" data-confirm="Êtes-vous sûr de vouloir supprimer cet enregistrement ?"><i class="fa fa-trash"></i></a>
                        {% endif %}
                        <div class="row mt-2">
                            <div class="col-md-4">
                                {% set result=guest.survey.result %}
                                {% if not result is empty %}
                                    <i class="fas fa-trophy"></i> Résultat<br>
                                    <small>
                                        <div style="line-height:18px">
                                        {% for option in result|slice(0, 2) %}
                                            - {{ option.date|date("d/m/Y H:i")}}<br>
                                        {%endfor%}
                                        </div>
                                    </small>
                                    <br>
                                {% endif %}

                                <i class="fas fa-calendar-check"></i> Options<br>
                                <small>
                                    <div style="line-height:18px">
                                    {% for option in guest.survey.options %}
                                        - {{ option.date|date("d/m/Y H:i")}}<br>
                                    {% endfor %}
                                    </div>
                                </small>
                                <br>

                                <i class="fas fa-archive"></i> Suppression le<br>
                                <small>
                                    <div style="line-height:18px">
                                        - {{ guest.survey.datepurge|date("d/m/Y")}}<br>
                                    </div>
                                </small>                                
                            </div>

                            <div class="col-md-8">
                                <i class="fas fa-user"></i> Propriétaire<br>
                                <small>
                                    <div style="line-height:18px">
                                        - {{guest.survey.user.displayname}}<br>
                                    </div>
                                </small>
                                <br>

                                {% if app.user==guest.survey.user and not guest.survey.private %}
                                <i onclick="copyurl({{guest.survey.id}})" class="fas fa-link" style="cursor:pointer"></i> URL à transmettre par mail<br>
                                <small>
                                    <div onclick="copyurl({{guest.survey.id}})" id="url-{{guest.survey.id}}" style="line-height:18px; cursor:pointer">
                                        {{ url('app_survey_bysurveykey',{'key':guest.survey.key})}}
                                    </div>
                                </small>
                                <br>
                                {% endif %}

                                <i class="fas fa-users"></i> Invités<br>
                                <small>
                                    <div style="line-height:18px">
                                        {% if not guest.survey.private %}
                                            Sondage Public<br>
                                        {% else %}
                                            Sondage Privé<br>
                                        {% endif %}
                                        {% for otherguest in guest.survey.guests %}
                                            {% set colorguest="" %}
                                            {% if otherguest.votes is empty %}
                                                {% set colorguest="color:red" %}
                                            {% endif %}
                                            - <span style="{{colorguest}}">{{ otherguest.email}}</span><br>
                                        {% endfor %}
                                    </div>
                                </small>
                            </div>                        
                        </div>

                        {% if app.user==guest.survey.user %}
                            {% if guest.survey.status==0 %} 
                                <bouton class="btn btn-danger btn-sm float-right" onClick="ModalLoad('mymodal','Clôturer','{{ path('app_survey_close',{id:guest.survey.id}) }}');"><i class="fas fa-paper-plane"></i> Envoyer le résultat et clôturer</bouton>
                            {% else %}
                                <bouton class="btn btn-success btn-sm float-right" onClick="ModalLoad('mymodal','Réouvrir','{{ path('app_survey_open',{id:guest.survey.id}) }}');"><i class="fas fa-lock-open"></i> Réouvrir le sondage</bouton>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            percentPosition: true,
        });
    });

    $(".grid").show();

    function copyurl(id) {
        var copyText = $("#url-"+id);
        var url = copyText.text();

        copyToClipboard(copyText);
        
        $("#url-"+id).fadeOut( "slow" );
        $("#url-"+id).fadeIn( "slow" ).text(url);
    }

    function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
    }    
{% endblock %}