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

{% block title %}{{event.name}}
{% endblock %}

{% block content %}
    <div class="mr-auto container-alert">
        <div id="alertMsg" class="alert d-none alert-success alert-dismissible fade show ml-5 fs-3" role="alert">
            <h5>Votre vote à bien été pris en compte.</h5>
            <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/logo.png" height="70px" 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>

        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ml-auto">
                {% if event.link_to_book != '' %}
                <li class="nav-item">
                    <a class="nav-link myButton text-dark" href="{{event.link_to_book}}" target="_blank">Réservez votre place</a>
                </li>
                {% endif %}
                <li class="nav-item nav-item-top">
                    <a class="nav-link" href="https://hit-lokal.com/" target="_blank">Hit Lokal</a>
                </li>
                <li class="nav-item nav-item-top dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Catégorie des votes 
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        {% for category in categories %}
                            <a class="dropdown-item text-capitalize" href="#cat-{{category.id_category}}">{{category.name}}</a>
                        {% endfor %}
                    </div>
                </li>
                <li class="nav-item nav-item-top">
                    <a class="nav-link d-none" id="lkDisco" href="#">Se déconnecter</a>
                </li>
            </ul>
        </div>
    </nav>



    <div class="justify-content-center text-white mt-5">
        <div class="text-center text-uppercase section-title">
            {{event.name}}
            <br>
            {% if event.link_to_book != '' %}
            <a class="nav-link myButton text-dark" href="{{event.link_to_book}}" target="_blank">Réservez votre place</a>
            {% endif %}
        </div>
        
        <div class="section-description">
            <div class="container">
                <div class="row">
                    <div class="col-4 img-section-description embed-responsive embed-responsive-16by9">
                        {# <img src="img/home.jpg" class="figure-img img-fluid rounded" alt="flyer event"> #}
                        <iframe class="embed-responsive-item"src="https://www.youtube.com/embed/VKcaGLAT5CE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    <div class="col-8 text-justify">
                        <p class="lead">L'association Hit Lokal a l'honneur de vous présenter les artistes nominés pour la neuvième édition des Awards. Les votes sont ouverts au public du 23 Mai au 11 Juin 2021, jusqu'à 23h59 <small>(Heure de Paris)</small>.
                        </p>
                        <p>Pour voter vous pouvez simplement cliquer sur l'icone
                            <i class="fas fa-heart fa-2x main-color" style="vertical-align:middle;"></i>
                            ou par SMS <b>HLA + N° nomination</b>
                            <br>Pour information : vous ne pouvez voter qu'une fois par jour et par artistes.</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-info">
            <div class="text-center">
                <h5>Pour voter par SMS : composer HLA +
                    <span class="label">N° nomination</span>
                    97000* Antilles - 7900** Réunion - 72018*** France Héxagonale
                    <br>
                    <small>*Service édité par Axxes Interactive, 0.75€+coût d'un sms, règlement sur simple demande, 29 zi les Mangles 97232 Le lamentin</small>
                </h5>
            </div>

        </div>

        <div class="section-card">
            {% for category in categories %}
                <div class="container">
                    <span id="cat-{{category.id_category }}" class="anchor">&nbsp;</span>
                    <div class="title-cat" >{{category.name}}</div>
                    <div class="card-group mt-3">
                        {% if titles[category.id_category ] is defined %}
                            {% for title in titles[category.id_category ] %}
                                {{ card.display(title.id,'/img/titles/'~title.img,title.title,title.artists,title.youtube, title.id_vote) }}
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
            <!-- <div class="separation-cat"></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">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="voteModalLabel">Voter avec votre compte </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="fb-login-button" data-width="" data-size="medium" data-onlogin="checkLoginState" data-scope="email" data-button-type="login_with" data-auto-logout-link="false" data-use-continue-as="false"></div>
                </div>
                <div class="modal-body text-center">
                    <div id="btn_google_vote" class="d-inline-block"></div>
                </div>
            </div>
        </div>
    </div>

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

{% block javascript %}
    
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v4.0&appId=618356158695816&autoLogAppEvents=1"></script>
    
    <meta name="google-signin-client_id" content="922688293548-m89llv6ousndcjfb05ptv3kv8nqj6418.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
    <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'))
        })

        $('#lkDisco').on('click', function(){
            $.ajax({
                type : "GET",
                url : "{{ path('vote-user-social',{'params': 'action:del'}) }}",
                success : function (data, status) {
                    console.log(data);
                    if(data){
                        $('#lkDisco').html('Déconnecter').addClass('d-none');
                    }
                }
            });
        });

        $('#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'));
        });*/

        $('.lkVodeModal').on('click', function(event){

            var button = $(event.currentTarget) // Button that triggered the modal
            $('#votemodal').attr('data-idsound',button.data('idsound'));

            $.ajax({
                type : "GET",
                url : "{{ path('vote-user-social',{'params': 'action:get'}) }}",
                success : function (data, status) {
                    console.log(data);
                    //alors on lance la popin car d'info user
                    if(data['user'] == undefined){
                        $('#votemodal').modal({
                            backdrop : 'static',
                            keyboard : false
                        }).modal('show');
                    }else{
                        voteForThis(data['user']['typeAccount'],data['user']['email']);
                    }
                }
            });
            
        });

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

            $.ajax({
                type : "GET",
                url : "{{ path('vote-user-social',{'params': 'action:get'}) }}",
                success : function (data, status) {
                    console.log(data);
                    if(data['user'] != undefined){
                        $('#lkDisco').html('Déconnecter '+data['user']['email']).removeClass('d-none');
                    }
                }
            });
        });

        window.fbAsyncInit = function() {
            FB.init({
                appId      : '{{ facebookInit.appId }}',
                cookie     : {{ facebookInit.cookie }},
                xfbml      : {{ facebookInit.xfbml }},
                version    : '{{ facebookInit.version }}'
            });
            
            FB.AppEvents.logPageView();   

            //Test si connection avec FB, si c'est le cas on déco
            FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    FB.logout();
                }
            });
        };

        function gConnectOnSuccess(googleUser){
            var profile = googleUser.getBasicProfile();
            var idSound = $('#votemodal').attr('data-idsound');

            if(idSound != 0){
                saveUserSocialAccount('google', profile.getEmail());
                voteForThis('google',profile.getEmail())
            }
        }
        
        function gConnectOnFailure(response){
            console.log(response);
        }

        function renderButton() {
            gapi.signin2.render('btn_google_vote', {
                'scope': 'profile email',
                'width': 210.5,
                'height': 28,
                'longtitle': true,
                'theme': 'dark',
                'onsuccess': gConnectOnSuccess,
                'onfailure': gConnectOnFailure
            });
        }

        function saveUserSocialAccount(typeAccount, email){
            var t = 'type:'+typeAccount+'|email:'+email;
            var url = '{{ path('vote-user-social',{'params': 'action:add|??'}) }}';
            var position = url.indexOf("??");
            
            url = url.substr(0,position) + t;

            $.ajax({
                type : "GET",
                url : url,
                success : function (data, status) {
                    console.log(data);
                    $('#lkDisco').html('Déconnecter '+email).removeClass('d-none');
                }
            });
        }

        function checkLoginState(response) {
            if (response.status === 'connected') {
                FB.api('/me', {fields: 'email, first_name'}, function (response) {
                    saveUserSocialAccount('facebook', response.email);
                    voteForThis('facebook',response.email)
                    console.log(response);
                });
            }
        }

        function voteForThis(typeCpt, email){
            var idSound = $('#votemodal').attr('data-idsound');

            if(idSound > 0 ){
                $.ajax({
                    type : "POST",
                    url : "{{ path('vote-add') }}",
                    data : { type_cpt: typeCpt, id_ev_cat_titles: idSound, mail: email},
                    success : function (data, status) {
                        console.log(data);
                        displayAlert(data['alert']['message'], data['alert']['class']);
                        $("span[data-idsound="+idSound+"]").addClass('active-card-vote')
                    },
                    error : function (result, status, error) {
                        //console.log(error);
                        displayAlert('Problème lors du vote', 'alert-danger');
                    }
                });
            }
        }

        function displayAlert(pmessage, pclass){
            $('#votemodal').modal('hide');
            $($('#alertMsg h5')[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 %}