{% extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
    <link href="{{ asset('css/duel.css') }}" media="screen" rel="stylesheet" type="text/css">
    <link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">

{% endblock %}
{% block body %}
{{ parent() }}
<div class="container">



{# SLIDER #}

  <div class="row">
    <div style="display:none;" class="MultiCarousel" data-items="3,3,5,6" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
                <div class="item duelfirst"> 
                    <div class="pad15">
                        <p class="duel-user-name">{% trans %}RANDOM{% endtrans %}</p>
                        <p><img class="avatar-duel-img" src="{{asset('img/duelafriend.png') }}"/></p>
                         <p><a href="{{ path('duel') }}">
                                <div  class="small-green-btn2" >
                                    <div class="text">{% trans %}Play{% endtrans %}</div>
                                </div>
                                </a>
                              </p>
                    </div>
                    </div>
                {% for user in users %}
                     {% if app.user.id != user.id %}
                      <div class="item">
                          <div class="pad15">
                              <p  class="duel-user-name" >{{user.name}}</p>
                              <p><img class="avatar-duel-img" style="" src="{{ asset('images/users/'~user.image) }}"/></p>
                              <p><a href="{{ path('duel', {'userId': user.id}) }}">
                                <div class="small-green-btn2" >
                                    <div class="text">{% trans %}Play{% endtrans %}</div>
                                </div>
                                </a>
                              </p> 
                          </div>
                      </div>
                  {% endif %}
                {% endfor %}
            </div>
            <div class="leftLst"><</div>
            <div class=" rightLst">></div>
        </div>
  </div>

{# ENDSLIDER #}


   {% set userTurn = 0 %}
    {% set self_points = 0 %}
    {% set rival_points = 0 %}
    {% set rival_picture = 0 %}
    {% set rival_name = 0 %}
    {% set rival_ronda = 0 %}
    {% set user_ronda = 0 %}
  {# partidas activas #}

  <div class="active_play_container">
   <div class="header_active_play row"><p class="header_text">{% trans %}PARTIDAS ACTIVAS{% endtrans %}</p></div>
    <div class="content_play row">
      {% for duel in duels_active %} 
        {% if duel.lastPlayerId == app.user.id %}
           {% set userTurn = 1 %}
        {% endif %}
         {% for attempt in duel.attempts %}
              {% if attempt.user.id == app.user.id %}
                {% for tracking in attempt.tracking %}
                    {% set user_ronda = user_ronda + 1 %}
                {% endfor %}
                {#  {% set userTurn = 1 %} #}
             {% else %}
                {% for tracking in attempt.tracking %}
                    {% set rival_ronda = rival_ronda + 1 %}
                {% endfor %}
             {% endif %}
           {% if attempt.user.id == app.user.id  %}
             {% set self_points = attempt.selfpoints %}
           {% endif %}
           {% if attempt.user.id != app.user.id %}
            {% set rival_points = attempt.selfpoints %}
            {% set rival_picture = attempt.user.image %}
            {% set rival_name = attempt.user.name %}
           {% endif %}
      {% endfor %}

            <div class="col-xs-12">
                <div class="col-xs-3" style="padding:5px;text-align:center"><p style ="padding-top:5px"><img class="avatar-duel-img" src="{{ asset('images/users/'~rival_picture) }}"/></p></div>
                <div class="col-xs-5" style="padding-top:7px !important;padding:5px;text-align:left;"><p class="rival-name">{{ rival_name }}</p><p class="score-text">{{ self_points }} - {{ rival_points }}</p>{# <p class="rival-name">Ronda actual: {{ user_ronda }} - {{ rival_ronda}}</p> #}</div>
                {% if userTurn == 0 %}
                <div  class="col-xs-4" style="{# padding-top: 15px; #}padding:5px;text-align:center">
                  <span class="user-alert">{% trans %}Tu Turno{% endtrans %}

                  <div data-duel="{{duel.id}}" data-id-trivial="1" data-tokenSession="{{app.session.get('tokenSession')}}" href="#" data-toggle="modal" data-target="#modalGame" class="small-green-btn">
                                        <div class="text">{% trans %}Play{% endtrans %}</div>
                  </div>
              
                </div>

                      {% else %}

                <div  class="col-xs-4" style="{# padding-top: 15px; #}padding:5px;text-align:center">
                  <span class="rival-alert">{% trans %}Turno del rival{% endtrans %}
                  <div  style="-webkit-filter: grayscale(100%);filter: grayscale(100%);" class="small-green-btn2">
                                      <div class="text">{% trans %}Play{% endtrans %}</div>
                    </div>
              
                </div>
                       {% endif %}

                <div class="col-xs-12 duel-data"></div>
            </div>

            {% set userTurn = 0 %}
            {% set finished = 0 %}
            {% set self_points = 0 %}
            {% set rival_points = 0 %}
      {% endfor %}
    </div>
  </div>

  {# end partidas activas #}


 {# partidas terminadas #}
{% set finished = 0 %}
  <div class="end_play_container">
   <div class="header_active_play row"><p class="header_text">{% trans %}PARTIDAS TERMINADAS{% endtrans %}</p></div>
    <div class="content_play row">
      {% for duel in duels_end %} 
         {% for attempt in duel.attempts %}
              {% if attempt.user.id == app.user.id and attempt.hasRecords == 1 %}
                 {% set finished = 1 %}
             {% endif %}
           {% if attempt.user.id == app.user.id  %}
             {% set self_points = attempt.selfpoints %}
           {% endif %}
           {% if attempt.user.id != app.user.id %}
            {% set rival_points = attempt.selfpoints %}
            {% set rival_picture = attempt.user.image %}
            {% set rival_name = attempt.user.name %}
           {% endif %}
      {% endfor %}



            <div class="col-xs-12">
                <div class="col-xs-3" style="padding:5px;text-align:center"><p><img class="avatar-duel-img" src="{{ asset('images/users/'~rival_picture) }}"/></p></div>
                <div class="col-xs-5" style="padding:5px;text-align:left;"><p class="rival-end-name">{{ rival_name }}</p><p class="score-end-text">{{ self_points }} - {{ rival_points}}</p></div>
                <div  class="col-xs-4" style="padding:5px;text-align:center">{% if finished != 1 %}
                                  <div data-duel="{{duel.id}}" data-id-trivial="1" data-tokenSession="{{app.session.get('tokenSession')}}" href="#" data-toggle="modal" data-target="#modalGame" class="small-green-btn">
                                      <div class="text">{% trans %}Play{% endtrans %}</div>
                                  </div>

                {% else %}
                            <div  style="-webkit-filter: grayscale(100%);filter: grayscale(100%);" class="small-green-btn2">
                                      <div class="text">{% trans %}Play{% endtrans %}</div>
                                  </div>
                {% endif %}
                </div>

                <div class="col-xs-12 duel-data"></div>
              </div>




            {% set finished = 0 %}
            {% set self_points = 0 %}
            {% set rival_points = 0 %}
      {% endfor %}
    </div>
  </div>

  {# end partidas terminadas #}


  <!-- Modal -->
        <div class="modal fade" id="modalGame" role="dialog">
          <div class="modal-dialog">                  
            <!-- Modal content-->
            <div class="modal-content" style="margin: 0px auto;">
      
              <div id="game">
      
              </div>

            </div>
            
          </div>
        </div>

</div>

{% endblock %}
{% block javascripts %}
  {{ parent() }}
<script src="{{ asset('js/pvpcarousel.js') }}" ></script>   
<script type="text/javascript">

        $("div.small-green-btn").on("click", function(){
        $('div#game').html('');
        var getFilterUrl = Routing.generate('play_pvp_user_ajax');
        var id = $(this).attr("data-id-trivial");
        var duel = $(this).attr("data-duel");
        var tokenSession = $(this).attr("data-tokenSession");
        $.ajax({
                url: getFilterUrl+'/'+tokenSession+'-'+id,
                type: "POST",
                dataType: "json", 
                data: {duel: duel},
                async: true,
                success: function (data)
                {
            
                    if(data.message == "ok"){
                        $('div#game').html('<object class="obj" data="'+data.url+'" width="100%" height="95%" ><embed class="obj" src="'+data.url+'" width="100%" height="95%" > </embed>Error: Embedded data could not be displayed.</object>');
                    } else if(data.message == "tokenNotValid") {
                        alert('Ha ocurrido un error de sesión');
                        location.reload();
                    } else {
          
                        // location.reload();
                    }
                },
                error: function(xhr, status, error){
                    alert("No se pudo realizar la conexión con el servidor, inténtalo de nuevo más tarde.");
                   // alert("test1");
                    location.reload();
                }
            });
    });

           $("#modalGame").on('hide.bs.modal', function (e) {
            if (!confirm("¿Estás seguro que quieres salir sin acabar el juego?")){
                e.preventDefault();
            } else {
                location.reload();
            }

            // $('#modalGame').on('show.bs.modal', function (e) {
            //     var button = e.relatedTarget;
            //     if($(button).hasClass('active')) {
            //       e.stopPropagation();
            //     }  
});

    $(document).ready(function(){
      $('.MultiCarousel').fadeIn();
    });




</script>
{% endblock %}