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

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

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

    .grid-full { width: 100% }

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

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

<div class="container mt-4">
    <div class="row">
        <div class="col-md-6">
            <a href="{{ path('app_survey')}}" class="btn btn-block btn-success mb-3" style="font-size:30px">
                Afficher mes sondages de dates
            </a>
        </div>

        <div class="col-md-6">
            <a href="{{ path('app_quest')}}" class="btn btn-block btn-primary mb-3" style="font-size:30px">
                Afficher mes enquêtes
            </a>
        </div>

        <div class="col-md-12">
            <a href="{{ path('app_survey_submit')}}" class="btn btn-block btn-success mb-3" style="font-size:30px">
                Créer un nouveau sondage
            </a>
        </div>
    </div>

    <div class="custom-control custom-switch text-right mb-3">
    <input type="checkbox" class="custom-control-input" id="switchactive" checked>
    <label class="custom-control-label" for="switchactive">Afficher que mes sondages</label>
    </div>

    <div class="grid" style="display:none">
        <div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>

        {% for surveyguest in surveyguests %}
            {% set class="" %}
            {% if app.user!=surveyguest.survey.user %}
                {% set class="notmy" %}
            {% endif %}

            <div class="grid-item {{class}}">
                <div class="card mb-3">
                    <div class="card-header">
                        {{ surveyguest.survey.title }}
                    </div>
                    <div class="card-body">
                        <a href="{{ path('app_survey_byuserkey',{key:surveyguest.survey.id})}}" class="surveyaction btn btn-info btn-sm mr-1"><i class="fa fa-eye"></i> {% if surveyguest.survey.status==0 %} Répondre{%else%} Visualiser{%endif%}</a>
                        {% if app.user==surveyguest.survey.user %}
                        <a href="{{ path('app_survey_update',{id:surveyguest.survey.id})}}" class="surveyaction btn btn-success btn-sm"><i class="fa fa-file"></i> Modifier</a>
                        <a href="{{ path('app_survey_delete',{id:surveyguest.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=surveyguest.survey.result %}
                                {% if not result is empty %}
                                    <i class="fas fa-trophy"></i> Résultat<br>
                                    <small>
                                        <div style="line-height:18px">
                                        {% for surveyoption in result|slice(0, 2) %}
                                            - {{ surveyoption.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 surveyoption in surveyguest.survey.surveyoptions %}
                                        - {{ surveyoption.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">
                                        - {{ surveyguest.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">
                                        - {{surveyguest.survey.user.displayname}}<br>
                                    </div>
                                </small>
                                <br>

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

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

                        {% if app.user==surveyguest.survey.user %}
                            {% if surveyguest.survey.status==0 %} 
                                <bouton class="btn btn-danger btn-sm float-right" onClick="ModalLoad('mymodal','Clôturer','{{ path('app_survey_close',{id:surveyguest.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:surveyguest.survey.id}) }}');"><i class="fas fa-lock-open"></i> Réouvrir le sondage</bouton>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}

        <div class="grid-item notmytitle grid-full mt-5"><h2>Mes Participations</h2></div>

    </div>
</div>
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $(".notmy").detach().appendTo('.grid');
        $(".notmy").hide();
        $(".notmytitle").hide();

        $('.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();
    }    

    $('#switchactive').change(function() {
        if($(this).is(":checked"))  {
            $(".notmy").hide();
            $(".notmytitle").hide();
        }
        else {
            $(".notmy").show();
            $(".notmytitle").show();
        }

        $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            percentPosition: true,
        });        
    });

{% endblock %}