{% extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
    <link href="{{ asset('css/duel.css') }}" media="screen" rel="stylesheet" type="text/css">
    <style>
      body {
          background-repeat: no-repeat;
          background-position: center;
          padding-bottom: 0px !important;
      }
    {% if app.request.pathinfo == "/duel" %}
    body {
      background: url('img/bg_duelo.png');
    }
    {% else %}
    body {
      background: url('../img/bg_duelo.png');
    }
    {% endif %}
    </style>
{% endblock %}
{% block body %}
{{ parent() }}
<div class="container">
  <a href="{{ path('competition_users_list') }}"><img class="closePagesModal"  src="{{asset('img/cerrar.png')}}"></a>
  {# carrousel #}
{% set randomname = "" %}
{% set randomid = 0 %}
{% set oponentName = "RANDOM" %}
{% set oponentImage = "default.png" %}
{% for user in users %}{% if loop.index == 1 %}{% set randomname = user.name %}{% set randomid = user.id %}{% endif %}{% endfor %}
  <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 {% if userId==0 %}active{% endif %}"> 
                    <div class="pad15">
                        <p class="duel-user-name">RANDOM</p>
                        <p><img class="avatar-duel-img" src="{{asset('images/users/default.png') }}"/></p></p>
                         <p><a href="#">
                                <div  class="small-green-btn" >
                                    <div id="def" data-src="{{ asset('images/users/default.png') }}" data-id="{{randomid}}" data-name="{{randomname}}" class="text selectplayer">{% trans %}SELECT{% endtrans %}</div>
                                </div>
                                </a>
                          </p>
                    </div>
                    </div>
                {% for user in users %}
                     {% if app.user.id != user.id %}
                      <div class="item {% if userId==user.id %}active{% endif %}">
                        {% if userId==user.id %}
                          {% set oponentName = user.name %}
                        {% set oponentImage = user.image %}
                        {% endif %}
                          <div class="pad15">
                              <p class="duel-user-name">{{user.name}}</p>
                              <p><img class="avatar-duel-img" src="{{ asset('images/users/'~user.image) }}"/></p>
                              <p><a href="#">
                                <div  class="small-green-btn" >
                                    <div data-src="{{ asset('images/users/'~user.image) }}" data-id="{{user.id}}" data-name="{{user.name}}" class="text selectplayer">{% trans %}SELECT{% endtrans %}</div>
                                </div>
                                </a>
                            </p>
                          </div>
                      </div>
                  {% endif %}
                {% endfor %}
            </div>
            <div class="leftLst"><</div>
            <div class="rightLst">></div>
        </div>
  </div>
  {# end carrousel #}

  {# type of game #}
  <div class="container-buttons row">
    <div class="col-xs-6 trivial btn_game" onclick="activateBtn();"><img  src="{{ asset('img/trivial_btn.png') }}"/></div>
    <div class="col-xs-6 btn_game tinder" onclick="activateBtn();"><img  src="{{ asset('img/tinder_btn.png') }}"/></div>
  </div>
  {# end type #}

  {# selection #}
  <div class="pvpzone row">
    <div class="col-xs-5">
      <div class="padtop20" style="text-align:center;">
            <p><img class="avatar-duel-img" src="{{ asset('images/users/'~app.user.image) }}"></p>
            <p class="duel-user-name">YOU</p>
       
      </div>
    </div>
    <div class="col-xs-2" style="text-align:center; padding:0px;"><img style="max-width:100%;padding-top:42px;width:64px;"  src="{{ asset('img/vs.png') }}"/></div>
    <div class="activeopo col-xs-5" style="text-align:center;">
      <div class="padtop20">
            <p><img class="oponent_img avatar-duel-img" src="{{ asset('images/users/'~oponentImage) }}"></p>
            <p class="duel-user-name oponent_text">{{oponentName}}</p>
            
      </div>
    </div>
  </div>
  
  {# end selection #}

   {# play-btn #}

   <div class="row">             
            <div class="col-xs-12 btn-play-container">
                   <div id="playGame" data-id-trivial="1" data-tokenSession="{{app.session.get('tokenSession')}}" href="#" data-toggle="modal" data-target="#modalGame" class="btn-play" >
                                    <div class="text">{% trans %}JUGAR{% endtrans %}</div>
                    </div>
                  
     
            </div>
 </div>

   {# endplaybtn #}


  <!-- Modal -->
        <div class="modal fade" id="modalGame" role="dialog">
          <div class="modal-dialog">                  
            <!-- Modal content-->
            <div class="modal-content">
      
              <div id="game">
      
              </div>

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

</div>

{% endblock %}
{% block javascripts %}
  {{ parent() }}
  <script src="{{ asset('js/pvpcarousel.js') }}" ></script>   
  <script type="text/javascript">
  //
  // var game_type="TRIVIAL";
  // var game_opponent="RANDOM";
  // console.log(game_opponent);

    $(document).ready(function(){
        var game_opponent = 0;
        if({{userId}}==0){
          game_opponent=$("#def").data('id');
        } else {
          game_opponent={{userId}};
        }
  console.log(game_opponent);

      $('.MultiCarousel').fadeIn();
      // changeOponent("RANDOM", $("#def").data('src'));

      $('.selectplayer').on('click', function(e) {
          var x = document.getElementsByClassName("item");
          for (i = 0; i < x.length; i++) {
              $(x[i]).removeClass("active");
           }
          var div = $(e.target).closest('div[class^="item"]');
          $(div).addClass("active");
          changeOponent($(this).data('name'),$(this).data('src'));
          game_opponent=$(this).data('id');
          console.log(game_opponent);
      });

      $('.btn_game').on('click', function(e) {
          var x = document.getElementsByClassName("btn_game");
          for (i = 0; i < x.length; i++) {
              $(x[i]).removeClass("active");
           }
          $(this).addClass("active");

          if ($(this).hasClass('trivial')){
                game_type="trivial";
          }else{
                game_type="tinder";
          }

      });

      function changeOponent(name,imageurl){
         $(".oponent_text").text(name);
         $(".oponent_img").attr("src", imageurl);
      }



      $("div#playGame").on("click", function(){
        if($(this).hasClass("active")) {
        $('div#game').html('');
        var getFilterUrl = Routing.generate('play_pvp_ajax');
        var id = $(this).attr("data-id-trivial");
        var tokenSession = $(this).attr("data-tokenSession");
        $.ajax({
                url: getFilterUrl+'/'+tokenSession+'-'+id,
                type: "POST",
                dataType: "json", 
                data: {rival: game_opponent,tipo:game_type},
                async: true,
                success: function (data)
                {
            
                    if(data.message == "ok"){
                    	  $('#audio').pause();
                        $('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 {
                       alert('Ya has retado a todos los usuarios, espera a que contesten.');
                        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();
                }
            });
      } else {
         $('#modalGame').modal('hide');
      }
    });

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

    });
    function activateBtn() {
      document.getElementById("playGame").classList.add("active");
    }

  </script>
{% endblock %}