{% extends '@layout/default.html.twig' %}
{% import '@app/vote/card.html.twig' as card %}

{% block title %}Hit Lokal Awards
{% endblock %}

{% block content %}
    <div class="mr-auto container-alert">
        <div id="alertMsg" class="d-none alert alert-success alert-dismissible fade show ml-5" role="alert">
            <span>Votre vote à bien été pris en compte.</span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>

    <!-- Just an image -->
    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-nav" id="nav-vote">
        <img src="/img/icon.png" width="150px" height="150px" alt="">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

    <div class="justify-content-center text-white mt-5">
        <div class="text-center text-uppercase section-title">
            Vote des artistes
        </div>
        <div class="section-description">
            <div class="container">
                <div class="row">
                    <div class="col-4 img-section-description">
                        <img src="/img/home.jpg" class="figure-img img-fluid rounded" alt="flyer event">
                    </div>
                    <div class="col-8 text-justify">
                        <p>Pour voter vous pouvez simplement cliquer sur l'icone
                            <i class="fas fa-heart fa-2x" style="color:#002619;vertical-align:middle;"></i>
                            <br>Pour information, vous ne pouvez voter qu'une seule fois.</p>
                        <p>
                            <a class="btn btn-primary text-white" href="{{ path('settlement') }}" role="button">Lire le règlement</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="section-card">
                <div class="container">
                    <div class="row row-cols-3">
                        {% for title in titles %}
                        <div class="col-md-4 mb-4">
                            <div class="card mt-3">
                                {{ card.displayTitleVoteArtiste(title.id,'/img/titles/'~title.img,title.title,title.artists,title.youtube, title.note) }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="video" tabindex="-1" role="dialog" aria-labelledby="videoLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-uppercase" id="videoLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>

    <!-- Vote Modal -->
    <div class="modal fade" id="votemodal" tabindex="-1" role="dialog" aria-labelledby="voteModalLabel" aria-hidden="true" data-idsound="0" data-note="0">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="voteModalLabel">Attribuer une note à ce titre : </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <div class="form-group" id="rating-ability-wrapper">
                        <label class="control-label" for="rating">
                        <input type="hidden" id="selected_rating" name="selected_rating" value="" required="required">
                        </label>
                        <h2 class="bold rating-header" style="">
                        <span class="selected-rating">0</span><small> / 4</small>
                        </h2>
                        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="1" id="rating-star-1">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>
                        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="2" id="rating-star-2">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>
                        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="3" id="rating-star-3">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>
                        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="4" id="rating-star-4">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </button>
                    </div>                                    
                </div>
                <div class="modal-body text-center">
                    <div id="my-signin2" class="d-inline-block">
                        <button class="btn btn-primary text-white" id="submitNote" type="button">Valider</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="fb-root"></div>
{% endblock %}

{% block javascript %}
    <script>
        $('#video').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var modal = $(this)
            modal.find('.modal-title').text(button.data('title'));
            modal.find('iframe').attr('src', 'https://www.youtube.com/embed/' + button.data('ytsrc'))
        })

        $('#video').on('hide.bs.modal', function (event) {
            var modal = $(this)
            modal.find('iframe').attr('src', '')
        })

        $('#votemodal').on('show.bs.modal', function (event){
            var button = $(event.relatedTarget) // Button that triggered the modal
            var modal = $(this)

            modal.attr('data-idsound',button.data('idsound'));
            modal.attr('data-note',button.data('note'));

            updateRartingSrar(button.data('note'));
        });

        $('#submitNote').on('click', function() {
            var value = $("#selected_rating").val();
            var idSound = $('#votemodal').attr('data-idsound');

            if(value > 0 && value < 6){
                $.ajax({
                    type : "POST",
                    url : "{{ path('vote-artiste-add') }}",
                    data : {idvat : idSound, note: value},
                    success : function (data, status) {
                        //displayAlert('Vous vote à bien été pris en compte', 'alert-success');
                        $('a[data-idsound='+idSound+']').attr('data-note', value);
                        $('a[data-idsound='+idSound+']').addClass('d-none')
                        $('#note-'+idSound).html(value+'/4');
                        displayAlert(data['alert']['message'], data['alert']['class']);
                        
                    },
                    error : function (result, status, error) {
                        //console.log(error);
                        displayAlert('Problème lors du vote', 'alert-danger', false);
                    }
                });
            }else{
                displayAlert('Vous devez attribuer une note entre 1 et 4.', 'alert-danger', false);
            }
        });

        function updateRartingSrar(selected_value){
            var previous_value = $("#selected_rating").val();

            $("#selected_rating").val(selected_value);
                
            $(".selected-rating").empty();
            $(".selected-rating").html(selected_value);
            
            for (i = 1; i <= selected_value; ++i) {
                $("#rating-star-"+i).toggleClass('btn-warning');
                $("#rating-star-"+i).toggleClass('btn-default');
            }
            
            for (ix = 1; ix <= previous_value; ++ix) {
                $("#rating-star-"+ix).toggleClass('btn-warning');
                $("#rating-star-"+ix).toggleClass('btn-default');
            }
        }

        $(function () {
            $(document).scroll(function () {
                var $nav = $("#nav-vote");
                $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
            });

            $(".btnrating").on('click',(function(e) {	
                                
                var selected_value = $(this).attr("data-attr");
                updateRartingSrar(selected_value);
            }));
        });

        function displayAlert(pmessage, pclass, isOk = true){
            if(isOk){
                $('#votemodal').modal('hide');
            }
            $($('#alertMsg span')[0]).text(pmessage);
            $('#alertMsg')
            .removeClass('alert-success alert-danger')
            .addClass(pclass)
            .toggleClass('d-none')
            .fadeTo(2000, 500).slideUp(500, function(){
                $("#alertMsg").slideUp(500, function (){
                    $('#alertMsg').toggleClass('d-none').toggle();
                });
            });
        }

    </script>
{% endblock %}