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

{% block title %}Vote - Lalliance{% endblock %}
{% block myTitle %}Vote{% endblock %}
{% block body %}
<div class="container">
    {% if isSet %}
    <div class="text-center bg-light">
        <p class="text-danger">Vous avez déjà voté.</p>
    </div>

    {% else %}
    <div class="row justify-content-center">
        <div class="text-center text-white">
            <h2>Choisissez un Nom afin de voter :</h2>
            <small>Le vote est effectué de façon anonyme, seule l'adresse IP est récupérée afin de forcer le vote unique.</small>
            <br>
            <small>A la fin du vote, la base de données sera vidée.</small>
        </div>
        <div class="col-4 my-5 px-5 shadow border bg-white rounded">
            {{form_start(form)}}
            {{form_widget(form)}}
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Vote</h5>
                            <button type="button" class="close btn btn-danger" data-bs-dismiss="modal" aria-label="Close">
                                <i class="far fa-times-circle"></i>
                            </button>
                        </div>
                        <form action="" method="POST">

                            <input hidden id="hiddenInput" name="hiddenInput" type="text" value="" maxlength="20" />

                            <div class="modal-body">
                                <p>Vous allez voter : <span id="choice"></span></p>
                            </div>
                            <div class="modal-footer">
                                <span type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fas fa-times"></i> Annuler</span>
                                <button type="submit" class="btn btn-success" name="send"><i class="fas fa-check"></i> Confirmer</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
            {{form_end(form)}}
            <div class="text-center py-3">
                <button type="button" class="btn btn-success" onclick="displayRadioValue()" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-vote-yea"></i> Voter</button>
            </div>
        </div>
    </div>
    {% endif %}
    <table class="table bg-white text-center">
        <thead>
            <tr>
                <th scope="col">Nom</th>
                <th scope="col">Votes</th>
            </tr>
        </thead>
        <tbody>
            {% for key, result in results %}
            <tr>
                <td>{{key}}</td>
                <td>
                    <progress class="" id="{{key}}" value="{{result}}" max="10"></progress>
                </td>

            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>




<!-- Resultats une fois répondu -->
<!-- <div class="col-4 my-5 px-5 shadow border bg-white rounded">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    {#   #}
</div> -->


</div>





<!--! Button trigger modal BOOTSTRAP 5.0 NO JQUERY -->

{# <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" value="Casual Killers" id="flexRadioDefault1" checked />
    <label class="form-check-label" for="flexRadioDefault1">
        Casual Killers
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" value="requiem" id="flexRadioDefault2" />
    <label class="form-check-label" for="flexRadioDefault2">
        requiem
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" value="Hydra" id="flexRadioDefault3" />
    <label class="form-check-label" for="flexRadioDefault3">
        Hydra
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" value="Les lichevaliers" id="flexRadioDefault4" />
    <label class="form-check-label" for="flexRadioDefault4">
        Les lichevaliers
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" value="Unitas virtute" id="flexRadioDefault5" />
    <label class="form-check-label" for="flexRadioDefault5">
        Unitas virtute
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" value="societas amicitia" id="flexRadioDefault6" />
    <label class="form-check-label" for="flexRadioDefault6">
        societas amicitia
    </label>
</div> #}

<script>

    console.log(document.getElementsByTagName('input'));

    function displayRadioValue() {

        //document.getElementById("result").innerHTML = "";
        var ele = document.getElementsByTagName('input');

        for (i = 0; i < ele.length; i++) {

            if (ele[i].type = "radio") {

                if (ele[i].checked) {

                    document.getElementById("choice").innerHTML = ele[i].value;
                    document.getElementById('hiddenInput').value = ele[i].value;
                    document.getElementById('hiddenInput').type = text;
                }


            }
        }
    }
</script>
{% endblock %}