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

{% block title %}Vote Final - Lalliance de Konoha{% endblock %}
{% block myTitle %}Vote final, temps restant : <p id="demo"></p>{% endblock %}
{% block body %}
<style>
    ul li{
        list-style: none;
    }
</style>


<div class="container bg-white shadow border border-dark rounded p-5 text-center">
    <p class="h1 text-danger"><i class="fas fa-exclamation-triangle text-danger"></i>Les votes sont terminés.<i class="fas fa-exclamation-triangle text-danger"></i></p>
    <a href="{{path('home')}}" class="btn btn-success">Retour Accueil <i class="fas fa-reply"></i></a>
</div>


{# <div class="container bg-white shadow border border-dark rounded p-5">
    <div class="text-center">
        <h2>Il est temps de choisir parmis les deux ex aequo :</h2>
        <div class="border border-dark rounded bg-info">
            <p><small>Le vote est effectué de façon <span class="text-danger">anonyme</span>, seule l'adresse IP est récupérée afin de forcer le vote unique.</small></p>
            <p><small>A la fin du vote, la base de données sera vidée.</small></p>
        </div>
    </div>

    <div class="row justify-content-between mt-5">
        <div class="col-md-4 text-center">
            <div class="card bg-white">
                <img class="card-img-top" src="{{asset('img/prop.png')}}" alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title"><a>Casual Killers</a></h4>
                    <p class="card-text">Votez <strong>Casual Killer</strong> c'est voter pour l'avenir, quoi de mieux pour réprésenter la guilde que d'être un casual doublé d'un KILLER ?
                        Si vous votez <strong>Casual Killer</strong>, vous assurez un avenir à vos enfants aux seins d'une structure loin des marécages et de la poiscaille.
                        Avec des noms de rangs tels que :</p>
                    <ul>
                        <li>Killer débutant</li>
                        <li>Killer d'élite</li>
                        <li>ou encore : Serial Killer</li>
                    </ul>
                    <p>Aurez-vous assez de cran pour être un Killer d'élite ? Il ne tient qu'à vous de devenir le Casual Killer que vous avez toujours été !
                        Votez Casual, votez pour votre destin !
                    </p>
                    <span class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="Casual Killers">Casual Killers</span>
                </div>
            </div>
        </div>
       

        <div class="col-md-4 text-center">
            <div class="card bg-white">
                <img class="card-img-top" src="{{asset('img/murloc.jpg')}}" alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title"><a>Le Murloc décadent</a></h4>
                    <p class="card-text">Le Murloc décadent, ce n'est pas qu'un nom de guilde génial. <br>
                        Au delà de son originalité et de sa classitude, c'est une idéologie, une ode à l'humour et à l'amour, symbole de l'absurde dans ce monde en perdition, bannière éternelle des
                        gens qui ne se prennent pas au sérieux. <br>
                        <span class="font-weight-bold">Votez vert, votez sexy, votez le Murloc décadent.</span>
                    </p>
                    <span class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="Le Murloc décadent">Le Murloc décadent</span>
                </div>
            </div>
        </div>
    </div>
</div>


{% endif %}

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirmer le vote</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{form_start(form)}}
                {{form_row(form.choice, { 
                        "attr" : {
                            "class" : "d-none"
                        }, 
                        "label_attr" : {
                            "class" : "d-none"
                        }
                    })}}
                <div class="mb-3">
                    <p id="message-text" class="text-center h2"></p>
                </div>
            </div>

            <div class="border-top border-dark">
                <p class="text-center pt-2"><i class="fas fa-exclamation-triangle text-danger"></i> Êtes-vous certain de faire le bon choix ? <i class="fas fa-exclamation-triangle text-danger"></i>
                </p>
                <div class="row justify-content-between p-2">
                    <div class="col-6 text-center">
                        <span class="btn btn-danger" data-bs-dismiss="modal">T'as raison, je change !</span>
                    </div>
                    <div class="col-6 text-center">
                        <input type="submit" class="btn btn-success" value="Ouais c'est sur !" />
                    </div>
                </div>

            </div>
            {{form_end(form)}}
        </div>
    </div>
</div>

#}


<script>

    var exampleModal = document.getElementById('exampleModal');
    exampleModal.addEventListener('show.bs.modal', function (event) {
        // Button that triggered the modal
        var button = event.relatedTarget;
        // Extract info from data-bs-* attributes
        var recipient = button.getAttribute('data-bs-whatever');
        // If necessary, you could initiate an AJAX request here
        // and then do the updating in a callback.
        //
        // Update the modal's content.

        var modalMessage = exampleModal.querySelector('.modal-body #message-text');
        var modalBodyInput = exampleModal.querySelector('.modal-body input');

        modalBodyInput.value = recipient;
        modalMessage.innerHTML = recipient;
    })
</script>
<script>
    // Set the date we're counting down to
    var countDownDate = new Date("Oct 3, 2021 11:59:59").getTime();

    // Update the count down every 1 second
    var x = setInterval(function () {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="demo"
        document.getElementById("demo").innerHTML = days + " jours " + hours + " heures "
            + minutes + " minutes et " + seconds + " secondes";

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);
</script>
{% endblock %}