{% extends "frontend/_layout.html.twig" %}
{% block stylesheets %}
    {{ parent() }}
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;1,600;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;1,600;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,700;1,600;1,900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
{% endblock %}

{# ICONS #}
{% block icons %}
    <link rel="icon" type="image/png" href="{{ asset('frontend/images/splash/favicon.png') }}" sizes="192x192">
    <link rel="shortcut icon" href="{{ asset('frontend/images/splash/favicon.png') }}" type="image/x-icon" />
{% endblock %}

{# CONTENT #}
{% block content %}
    {{ parent() }}
    {% include 'frontend/home/styles.home.html.twig' %}

    <style>
        @media (min-width: 1200px){
            .container, .container-lg, .container-md, .container-sm, .container-xl {
                max-width: 1253px;
            }
        }
    </style>

<div class="wrapper gradient">
	<div class="main">

        {% for category in surveysListByCategoryTest %}
                {% if survey.links | length > 0 %}
						
            <div class="" id="tWelcom">
                <h1>Hi {{ app.user.firstname }}, welcome to <br class="line-break">your <span class="test-name">{{ nomDuTest }}</span> test dashboard</h1>
            </div>
				
				<div id="surveyList" class="surveylist">
                <p style="" id="pWelcom">
					Use the survey list below to give your honest feedback on your <span class="test-name-sm">{{ nomDuTest }}</span> test.
                </p>
                        {% for link in survey.links |sort %}
                            {% if history[link.id] is not defined %}
                                <div class="">


                                    {% if date(link.dateUn) <= date() %}
                                    <div  style="display: flex" class="survey" id="divL idOpacite">
                                        <div class="qrmargin" style="width: 10%">
                                            <p class="numero-questionnaire">
                                                <div class="fontLink" id="stLN">
                                                    {{ link.numeroLien }}
                                                </div>
                                            </p>
                                        </div>
                                        <div class="qrmargin" style="width: 35%">
                                            <p class="colorTextContenus fontLink changeNom pln"  id="pLN">
                                                {{ link.name }}
                                            </p>
                                        </div>
                                        <div class="qrmargin" style="width: 25%">
                                            <p class="colorTextContenus fontLink changeNom pln border-lefty"  id="pLN">
                                                <span>
                                                   on {{ link.dateUn | date("D d M")}}
                                                </span>
                                            </p>
                                        </div>
                                        <div class="qrmargin" style="width: 30%; text-align:center">
                                            <a href="{{link.link}}{{ userP }}" target="_blank" class="tasklist-item">
                                                <span class="hideG"><i class="material-icons" id="iconL">forward</i></span>

                                                    <button class="hideP fontLink btn_desc hB" id="btnL">
                                                        <div class="sF">
                                                            Open survey →
                                                        </div>
                                                    </button>

                                            </a>
                                        </div>
                                    </div>
                                {% else %}

                                    <div style="display: flex" class="survey" id="divL">
										<div class="qrmargin pasOuvert" style="width: 10%">
                                            <p class="numero-questionnaire">
                                                <div class="fontLink" id="stLN">
                                                    {{ link.numeroLien }}
                                                </div>
                                            </p>
                                        </div>
                                        <div class="qrmargin pasOuvert" style="width: 35%">
                                            <p class="colorTextContenus fontLink changeNom pln"  id="pLN">
                                                {{ link.name }}
                                            </p>
                                        </div>
                                        <div class="qrmargin pasOuvert" style="width: 25%">
                                            <p class="colorTextContenus fontLink changeNom pln border-lefty"  id="pLN">
                                                <span>
                                                   on {{ link.dateUn | date("D d M")}}
                                                </span>
                                            </p>
                                        </div>
                                        <div class="qrmargin pasOuvert" style="width: 30%; text-align:center">
                                            <a href="{{link.link}}{{ userP }}" target="_blank" class="tasklist-item">
                                                <span class="hideG"><i class="material-icons" id="iconL">forward</i></span>

                                                <button class="hideP fontLink btn_desc hB" id="btnL">
                                                    <div class="sF">
                                                        Unavailable
                                                    </div>
                                                </button>

                                                <script>
                                                    /* $("#idOpacite").css("background-color", "red");*/
                                                </script>

                                            </a>
                                        </div>
                                    </div>

                                    {% endif %}


                                </div>
                            {% endif %}
                        {% endfor %}

                        {% if survey.links is not empty %}
                            <div class="decoration"></div>
                        {% endif %}
                    </div>
</div>
				</div>

		
		    <div class="wrapper gradient-2" id="inst">
				<div class="main">

    <div>
        {% for category in surveysListByCategoryTest %}
            {% for surveys in category.surveys %}
                {% for survey in surveys %}
	                    {#<div style="border: 2px solid black">
                        <p> {% if survey.startDate %} {{ survey.startDate | date("m/d/Y") }} {% endif %}</p>
                        <p> {% if survey.endDate %} {{ survey.endDate | date("m/d/Y") }} {% endif %}</p>
                        <p> {% if survey.vouchersDate %} {{ survey.vouchersDate | date("m/d/Y") }} {% endif %}</p>
                    	</div>#}
		
		<div class="over-title-section">Instructions</div>
		<h1>Here’s what you need to do <br class="line-break">during your test</h1>
    </div>
                    <div>
                         <div id="description"> {{ survey.description|raw }} </div>
                          <div id="description-button">{% if survey.imageName %}
                                <a href="{{ asset('images/home_page/' ~ survey.imageName) }}" download onclick="window.open(this.href); return false;">
                                      <button class="button" id="btnInstruction">Download the guidelines →</button>
                                </a>
                              {% endif %}
                                    {#
                                    <a href="{{ path('pdf', {'id' : survey.id}) }}" onclick="window.open(this.href); return false;">
                                        <button class="button" id="btnInstruction">Download the Test Guidelines</button>
                                    </a>
                                    #}
                          </div>
                  {% endfor %}
              {% endfor %}
        {% else %}
        {% if survey.links | length < 1 %}
            <p class="center-text textAlignEnqueteAndTest colorTextH mP"> </p>
        {% endif %}
        {% endfor %} </div>
    </div>
				
	

                    <div class="decoration"></div>
                {% endif %}

            {% else %}
                <p class="center-text textAlignEnqueteAndTest colorTextH mP">
                    {{ 'Aucun test en cours ' |trans({}) }}
                </p>
            {% endfor %}
    

    {# contact #}				
    {# end contact #}
	    



    {# invitation #}

    <div class="portlet-body form" style="display: none">
        <div class="form-body">
            <div class="form-group">
                <small id="confirmeMessage" class="text-success"></small>
            </div>
            <div class="form-group">
                <label for="group">Name:</label>
                <input type="text" name="group" id="group" placeholder="Name group" class="form-control">
            </div>
        </div>
        <div class="form-actions">
            <div class="row">
                <div class="col-md-offset-3 col-md-4">
                    <button class="btn green" id="submitD" type="submit">Envoyer</button>
                </div>
            </div>
        </div>
    </div>

    {# invitation #}




    <div class="containerBody" id="contFInvit">
        <div class="" id="imgInvit">
                <h1 id="h1invit">Invite a friend and test upcoming cosmetics together.</h1>
        </div>
        <div class="" id="divGInvit">







            <div>
                {{ form_start(invitationForm) }}
                <div class="my-custom-class-for-errors">
                    {{ form_errors(invitationForm) }}
                </div>

                <div id="fInvit">
                    <div class="invitation-left">
                        {{ form_widget(invitationForm.mail, {'attr': {'class': 'cMail', 'placeholder': 'Your friend’s e-mail address'}}) }}
                    </div>
                    <button type="submit" class="label_maill butnInvite">
                        Send the invite →
                    </button>
                </div>
            </div>
                {{ form_end(invitationForm) }}
            
        </div>
    </div></div>


	<div class="wrapper" id="contactId">
		<div class="main">
			<div>
				<div class="over-title-section">Contact us</div>
				<h1>Get in touch for <br class="line-break">any test related enquiry</h1>
			</div>
			  <div class="row2">
    <div class="col-sm border-lefty">
		<a href="https://wa.me/6596776179" target="_blank">
		<p>wa.me/6596776179</p>
			<div class="btn">WhatsApp us →</div></a>
				  </div>
    <div class="col-sm border-lefty">
		<a href="tel:96776179" target="_blank">
		<p>(+65) 9677 6179</p>
			<div class="btn">Call us →</div></a>
    </div>
    <div class="col-sm border-lefty">
		<a href="mailto:team@syres.sg" target="_blank">
		<p>team@syres.sg</p>
			<div class="btn">E-mail us →</div></a>
    </div>
			</div>
        </div>
		</div>


</div>

<div id="footer-syres">
	<div class="sm-icons">
				<a href="https://www.facebook.com/Syres.sg/" target="_blank">
					<svg class="svg-icon" viewBox="0 0 20 20"><path fill="none" d="M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z"></path></svg></a>
	</div>
	<div class="sm-icons">
				<a href="https://www.instagram.com/syres_sg/" target="_blank">
					<svg class="svg-icon" viewBox="0 0 20 20"><path fill="none" d="M14.52,2.469H5.482c-1.664,0-3.013,1.349-3.013,3.013v9.038c0,1.662,1.349,3.012,3.013,3.012h9.038c1.662,0,3.012-1.35,3.012-3.012V5.482C17.531,3.818,16.182,2.469,14.52,2.469 M13.012,4.729h2.26v2.259h-2.26V4.729z M10,6.988c1.664,0,3.012,1.349,3.012,3.012c0,1.664-1.348,3.013-3.012,3.013c-1.664,0-3.012-1.349-3.012-3.013C6.988,8.336,8.336,6.988,10,6.988 M16.025,14.52c0,0.831-0.676,1.506-1.506,1.506H5.482c-0.831,0-1.507-0.675-1.507-1.506V9.247h1.583C5.516,9.494,5.482,9.743,5.482,10c0,2.497,2.023,4.52,4.518,4.52c2.494,0,4.52-2.022,4.52-4.52c0-0.257-0.035-0.506-0.076-0.753h1.582V14.52z"></path></svg></a>
	</div>
	<div class="copyright">© 2020 SYRES. All rights reserved.
	</div>
</div>

{% endblock %}

{% block footer %}
    {#   {% include '/_widgets/footer.home.html.twig' %} #}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script
            src="https://code.jquery.com/jquery-3.5.0.js"
            integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <script>


        {#invitation#}




            $('#submitD').click(function (e) {
                //desactivé l'action par defaut du click (rechargement de la page)
                e.preventDefault();
                //affectation de l'input à la variable
                let inputValue =  $('#group').val();
                //console.log(inputValue);

                //Declaration du tableau du formulaire
                const groupData = {
                    name : inputValue,
                }

                $.ajax({
                    method:'POST',
                    url : '/paneliste/invit/new',
                    //Type de données
                    dataType : 'json',
                    //recuperation du tableau
                    data : groupData
                }).done(function(data) { //.done il retourne les resulat
                    console.log(data);
                    $("#confirmeMessage").text(data.message);
                    $("#group").val("");
                }).fail(function(err) {
                    $("#confirmeMessage").text(err.responseJSON.error);
                });
            });

        {#invitation#}

        var navbar = document.querySelector('#content');
        //Change le du navbar box-shadow
        window.onscroll = function() {
            // pageYOffset or scrollY
            if (window.pageYOffset >= 1) {
                $(".navbar").css({"-webkit-box-shadow": "0 2px 36px rgba(0,0,100,.15), 0 0 1px rgba(0,0,100,.15)", "-moz-box-shadow": "0 2px 36px rgba(0,0,100,.15), 0 0 1px rgba(0,0,100,.15)", "box-shadow": "0 2px 36px rgba(0,0,100,.15), 0 0 1px rgba(0,0,100,.15)", "transition":".3s"});
            } else {
                $(".navbar").css({"-webkit-box-shadow": "none", "-moz-box-shadow": "none", "box-shadow": "none"});
            }
        }


        //Les l'encres du menu
        document.getElementById("navCSurv").addEventListener("click", function(event){
            event.preventDefault();
            //alert( "Handler for .click() called." );
            $(function() {
                function scrollTo( target ) {
                    if( target.length ) {
                        $("html, body").stop().animate( { scrollTop: target.offset().top }, 100);
                    }
                }
                scrollTo( $(".surveylist"), $(".surveylist").css("") );
            });
        });

        document.getElementById("navCC").addEventListener("click", function(event){

            event.preventDefault();
            $(function() {
                function scrollTo( target ) {
                    if( target.length ) {
                        $("html, body").stop().animate( { scrollTop: target.offset().top }, 100);
                    }
                }
                scrollTo( $("#contactId") );
            });

        });


        document.getElementById("navCIns").addEventListener("click", function(event){
            event.preventDefault();
            $(function() {
                function scrollTo( target ) {
                    if( target.length ) {
                        $("html, body").stop().animate( { scrollTop: target.offset().top }, 100);
                    }
                }
                scrollTo( $("#inst"), $("#inst").css("") );
            });

        });
    </script>

    {#
    {% if link.dateUn is defined %}
                                        <script>
                                            let date = '{{ link.dateUn.timestamp }}';
                                            console.log(date);
                                            jQuery(function($){
                                                const launch = new Date(date * 1000);
                                                const days = $('.days');

                                                var hours = $('.hours');
                                                var minutes = $('.minutes');
                                                var seconds = $('.seconds');

                                                //var show_message = false;
                                                setDate();
                                                function setDate(){
                                                    var now = new Date();
                                                    var s = ((launch.getTime() - now.getTime())/1000);


                                                    var diff = s;
                                                    if(s < 0 ) {
                                                        s = 0;
                                                        if(diff > -10)
                                                        {
                                                            $(".btn_desc").css( "background-color", "#03363d");
                                                            $(".sf").css("color", "#ffffff");
                                                            console.log("inferieur");
                                                            //$(".icof").text("display", "block");
                                                        }
                                                        /*
                                                    else
                                                        $("#compteurfinis").hide();
                                                         */
                                                    }
                                                    var d = Math.floor(s/86400);
                                                    days.html('<strong>'+d+'</strong>'+(d>1?'s':''));
                                                    s -= d*86400;
                                                    var h = Math.floor(s/3600);
                                                    hours.html('<strong> '+h+'</strong>'+(h>1?'s':''));
                                                    s -= h*3600;
                                                    var m = Math.floor(s/60);
                                                    minutes.html('<strong> :'+m+'</strong>'+(m>1?'s':''));
                                                    s -= m*60;
                                                    s = Math.floor(s);
                                                    seconds.html('<strong> :'+s+'</strong>'+(s>1?'s':''));
                                                    var compteur = setTimeout(setDate,1000);
                                                }
                                            });
                                        </script>

                                    {% endif %}
                                    #}
{% endblock %}