{% extends 'frontend/layout.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('frontend/styles/test_a_venir.css') }}"           rel="stylesheet" type="text/css">

    <style>
        .wrap {
            width: 709px;
            margin: 0 auto; }

        .logo {
            text-align: center;
            padding: 35px 0;
            background: url(img/top.png) left bottom no-repeat; }

        .content {
            background: url(img/mid.png) repeat;
            padding: 0 110px;
            font-weight: 200; }
        .content h1 {
            color: #2a3c49;
            font-size: 22px;
            text-align: center;
            font-weight: bold;
            font-family: "Myriad Pro","FrutigerLT Black", sans-serif;
            padding: 10px 0 25px 0; }
        .content strong {
            font-weight: bold; }
        .content em {
            font-style: italic; }
        .content .bloc {
            width: 97px;
            height: 67px;
            background: url(img/number.png) no-repeat;
            float: left;
            padding-top: 30px;
            text-align: center;
            color: #767676;
            margin-right: 30px; }
        .content .bloc strong {
            font-size: 60px;
            font-weight: bold;
            text-align: center;
            display: block;
            color: #2a3c49;
            margin-bottom: 15px; }
        .content .last {
            margin-right: 0px; }
        .content .numbers {
            overflow: hidden;
            *zoom: 1;
            padding: 40px 0; }

    </style>
{% endblock %}

{# CONTENT #}
{% block content %}
    {{ parent() }}

   <div class="container">
       <div class="header-clear-large"></div>
       <div class="container heading-style-5">
           <h4 class="heading-title inline-header">
               {{ 'Test A Venir'}}
               {% include 'frontend/header-title.html.twig' %}
           </h4>

           <i class="fa fa-align-left heading-icon"></i>
           <div class="line bg-black"></div>
       </div>
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

       <script>
           var date = {{ date|escape('js') }}
               // je sais pas trop ce que ca donner ca parce que c'est un objet datetime attend voyons chromes la doc chrome testf
           jQuery(function($){
// c quelle dater que tu veux du coup je veux le remplacer par le date renvoyer par symfony il est ou le controller de cette page elle est ou cette date je pas creer je fait le teste avec
               var launch = new Date(date*1000);

               var days = $('#days');
               var hours = $('#hours');
               var minutes = $('#minutes');
               var seconds = $('#seconds');

               var show_message = false;

               setDate();
               function setDate(){
                   // il va me falloir deux dates
                   var now = new Date();
                   var s = ((launch.getTime() - now.getTime())/1000);

                   //comparre la difference ? ouai entre la date de lancement et aujourdhui et si c'est 10 seconde trop vieux je cache ok pour obtenir plus je miltiplie les seconde pour obtenir des nombre plus grand ? ouai apres tu peux aussi test avant le javascript et si c'est passé tu affiche en php avec twig ok
                   var diff = s;
                   if(s < 0 ) {
                       s = 0;
                       // on va tester que le message reste que 10 seconde chro test

                       // la c'est la date bin si tu es entre 0 et -10 seconde depuis la fin du compteurs ok
                       // merci j'ai ne te retiens pas plus merci beaucoup bonne chance t'es pas sorti du paté :)
                       // moi je ferai un melange de php et de javascript mais bon ca ira bien comme ca
                       // la c'est juste que chaque seconde tu fait une requete alors que si tu as passé la date depuis le temps
                       // tu as plus besoin de testé mais bon je te laisse gerer tu vera ce que tu trouve le mieu
                       // Tchoup ok je t'envoies un pourboire comme prevu ouaich peu importe :p tfacon je le fais pas pour la thune
                       // mais ca fait toujours plaisir allé bonne week end je vais profiter qui ai encore un peu de soleil merci
                       if(diff > -10)
                            $("#compteurfinis").show();
                       else
                           $("#compteurfinis").hide();
                   }
                   // je gerde ça comme exemple; jrcache au bout de trois jour  comprends pas si le compteurs est finis y a plus de minutes restantes exemple
                   // apres que le compteur est terminé j'aimerais aficher un message que je cache au bout de trois jour

                   // oui c'est trés bien ça aussi mais j'imagine quand le compteur est termine il y'a trois j'aimerais desactiver un bouton le quel ou affiche juste un message

                   var d = Math.floor(s/86400);
                   days.html('<strong>'+d+'</strong>Jour'+(d>1?'s':''));
                   s -= d*86400;

                   var h = Math.floor(s/3600);
                   hours.html('<strong>'+h+'</strong>Heure'+(h>1?'s':''));
                   s -= h*3600;

                   var m = Math.floor(s/60);
                   minutes.html('<strong>'+m+'</strong>Minute'+(m>1?'s':''));
                   s -= m*60;

                   s = Math.floor(s);
                   seconds.html('<strong>'+s+'</strong>Seconde'+(s>1?'s':''));

                   var compteur = setTimeout(setDate,1000);
               }

           });
       </script>

       <div class="wrap">

           <div class="content">
               <h1>Compteur </h1>
               <div class="numbers">
                   <div class="bloc" id="days">
                   </div>
                   <div class="bloc" id="hours">
                   </div>
                   <div class="bloc" id="minutes">
                   </div>
                   <div class="bloc last" id="seconds">
                   </div>
               </div>
           </div>
           <div id="compteurfinis" style="display:none;">
               Le compteurs est finis
           </div>
           <div class="footer">
           </div>
       </div>

       <div style="padding: 0px;">
           <p class="p_align">Participez à l'un des tests que je vous propose : démaquillant, lotion, soin...
               Il y en a au moins un qui vous correspondra !</p>
           </br>
           <p class="p_align">Je vous rappelle que vous ne pouvez pas faire plusieurs tests en même temps.</p>
           <p class="p_align">Après chaque test, vous devez attendre 2 mois minimum avant de pouvoir à nouveau tester
               un autre produit.</p>
           <p class="p_align">Si vous êtes déjà en test ou si vous avez testé récemment (moins de 2 mois) je ne pourrais
               malheureusement pas vous proposer de test.
           </p>

           {# //////////**********///////////////#}

           <h1> {#{ id_panellist }#}</h1>
           <table id="customers">
               <tr>
                   <th class="testCenter">Nom du test</th>
                   <th class="testCenter">Sexe</th>
                   <th class="testCenter">Age</th>
                   <th class="testCenter">Date limite</th>
                   <th class="testCenter" style="text-align: center">Souhaite tester</th>
               </tr>
           </table>
       </div>
   </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}

{% endblock %}