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

{% endblock %}
{% block body %}
{{ parent() }}
<div class="container">
	<div style="max-width:500px;margin-left:auto;margin-right:auto;">
	    <div class="title-almacen row">
	        	<div class="col-xs-4" style="text-align:right;"><img src="{{asset('img/chesttitle.png')}}"></div><div style="text-align:left; padding-left:0px;" class="col-xs-6">{% trans %}ALMACÉN{% endtrans %}</div><div class="col-xs-2">  <a href="{{ path('competition_users_list') }}"><img class="closePagesModal" style="top:5px;"  src="{{asset('img/cerrar.png')}}"></a></div>

	  	</div>

		<div class="row" style="margin-right:auto;margin-left:auto;">
	        		<button class="tablinks tabcofre col-xs-6 no-padd" onclick="changeTab(event, 'Cofres')">{% trans %}COFRES{% endtrans %}</button>
	  				<button class="tablinks tabpower col-xs-6 no-padd copp" onclick="changeTab(event, 'Items')">{% trans %}POWERUPS{% endtrans %}</button>
	  	</div>




	   <div id="Cofres" class="tabcontent" style="{# padding-top:80px #}">
			<div class="reward_container init_reward row">
						<div class="col-xs-4" ><img  class="itemimg" src="{{asset('img/itembomb.png')}}"></div>
						<div class="col-xs-8" >
							<div  class="itemname">{% trans %}BOMBA{% endtrans %}</div>
							<div  class="itemdescr">{% trans %}Destruya la pregunta{% endtrans %}</div>
							<div  class="itemquant"><span class="text-align:left;">{% trans %}Cantidad{% endtrans %}: </span><span class="text-align:right;">4</span></div>

						</div>

			</div>
				
			<div class=" init_chest_txt"><span>{% trans %}Selecciona el cofre para abrirlo{% endtrans %}</span></div>
			<div class="chestzone row" >

				<img  class="init chest" src="{{asset('img/chest1.png')}}">
				<div class=" init noti_chest"><div class="noti_txt_chest"><span id="total_items">0</span></div></div>
				<img  class="init sombra" src="{{asset('img/sombra.png')}}">
			</div>

			<div class="buttonzone row">
			
				<div class="col-xs-4" ><div class="noti_almacen"><div class="noti_txt bronce_noti"><span>{{ bronce }}</span></div></div><img class="bronce_btn"  src="{{asset('img/bronce_btn.png')}}"></div>
				<div class="col-xs-4" ><div class="noti_almacen"><div class="noti_txt plata_noti"><span>{{ plata  }}</span></div></div><img class="plata_btn"  src="{{asset('img/plata_btn.png')}}"></div>
				<div class="col-xs-4" ><div class="noti_almacen"><div class="noti_txt oro_noti"><span>{{ oro }}</span></div></div><img class="oro_btn"  src="{{asset('img/oro_btn.png')}}"></div>
			</div>
	</div>


	   <div id="Items" class="tabcontent" style="padding-top:20px;display:none;">

	   	{% for itemUser in items %}
	   		<div class="item_container row">
	   			<div class="col-xs-4"><img  class="item_tab_img" src="{{ asset('img/'~itemUser.item.image) }}"></div>
	   			<div class="col-xs-6">
	   				<p class="item_name">{{itemUser.item.name}}</p>
	   				<p class="item_desc">{{itemUser.item.description}}</p>
	   			</div>

	   			{# revisar de actualizar por ajax #}
	   			<div class="col-xs-2"><p class="item_cant {{itemUser.item.name}}_cant">{{itemUser.ammount}}</p></div>
	   		</div>

	   	{% endfor %}
		
		</div>
</div>
</div>

{% endblock %}
{% block javascripts %}
  {{ parent() }}
        <script src="{{ asset('js/chest.js') }}" ></script>
        <script type="text/javascript">
 		var bronce="{{ bronce }}";
        var plata="{{ plata }}";
        var oro="{{ oro }}";
        var total_bombas=0;
        var total_escudos=0;
        var total_cronos=0;
        var total_dobles=0;
        var total_items=0;
        var tipo_cofre;
        var firstclick=0;
        var animation_trigger=0;
     
      	function changeTab(evt, type) {
				      var i, tabcontent, tablinks;
				      tabcontent = document.getElementsByClassName("tabcontent");
				      for (i = 0; i < tabcontent.length; i++) {
				        tabcontent[i].style.display = "none";
				      }
				      tablinks = document.getElementsByClassName("tablinks");
				      for (i = 0; i < tablinks.length; i++) {
				        tablinks[i].className = tablinks[i].className.replace(" active", "");
				      }
				      document.getElementById(type).style.display = "block";
				      evt.currentTarget.className += " active";
		}




            $(document).ready(function(){



      


            	function whichAnimationEvent(){
  var t,
      el = $('.chest')[0];

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

var animationEvent = whichAnimationEvent();


function fallChest (){
	   $(".init_chest_txt").fadeOut(); 
	       $(".chestzone").removeClass("endanim"); 
	       	$(".reward_container").removeClass("endanim"); 
		   $('.reward_container').addClass("init_reward");
			$('.sombra').addClass("opacityanim");
			
			$('.sombra').removeClass("init");
			$('.chest').removeClass("init");
			$('.chest').addClass("fallanim");
            var assetsBaseDir = "{{ asset('img/') }}";
            var path = '' + assetsBaseDir + ''+tipo_cofre+'1.png'+'';
            $(".chest").attr("src",path);

		    $('.chest').one(animationEvent,
		              function(event) {
				    $('.chest').removeClass("fallanim");
					$('.chest').addClass("shakeanim");

					$('.sombra').removeClass("opacityanim");
					$('.sombra').addClass("shakeanim");
		    });

}


function openchest (){
		$('.noti_chest').removeClass("init");

		$('.reward_container').removeClass("init_reward");
		$('.reward_container').addClass("rewardanim");


		$('.sombra').removeClass("shakeanim");
		$('.sombra').addClass("sizeanim");

		$('.chest').removeClass("shakeanim");
		// $(".chest").attr("src","{{ asset('img/chest1.png' ) }}");
		var assetsBaseDir = "{{ asset('img/') }}";
        var path = '' + assetsBaseDir + ''+tipo_cofre+'2.png'+'';
        $(".chest").attr("src",path);
		$('.chest').addClass("jumpanim");

		$('.chest').one(animationEvent,
		              function(event) {
		          // $(".chest").attr("src","{{ asset('img/chest2.png' ) }}");
		         $('.sombra').removeClass("sizeanim");
		    	$('.chest').removeClass("jumpanim");
		    	animation_trigger=0;

		  });

		   $('.reward_container').one(animationEvent,
		              function(event) {
		         $('.reward_container').removeClass("rewardanim");

		  });
		  
}

function closeChest (){

		$(".chestzone").addClass("endanim"); 
		$(".reward_container").addClass("endanim"); 
		$('.chest').addClass("init");
		$('.sombra').addClass("init");
		$('.noti_chest').addClass("init");
		$(".init_chest_txt").fadeIn(); 

}


function randomizePull (bombas,escudos,cronos,dobles){
	total_items=0;
	total_bombas=bombas;
	total_escudos=escudos;
	total_cronos=cronos;
	total_dobles=dobles;
	console.log(bombas+"-"+escudos+"-"+cronos+"-"+dobles)

	for (var i = 0; i < bombas; i++) {
		
			if(i<1){total_items++;}
		
	}
	for (var i = 0; i < escudos; i++) {
		
			if(i<1){total_items++;}
	
	}
	for (var i = 0; i < cronos; i++) {

			if(i<1){total_items++;}
		
	}
	for (var i = 0; i < dobles; i++) {
		
			if(i<1){total_items++;}
		
	}
	  $('#total_items').text(total_items);
	 prepareReward();
	 openchest();

}


function prepareReward (){
	console.log(total_bombas+"+"+total_escudos+"+"+total_cronos+"+"+total_dobles)
	for (var i = 0; i < total_bombas; i++) {
		
			if(i<1){
				var assetsBaseDir = "{{ asset('img/') }}";
		        var path = '' + assetsBaseDir + 'bomba.png'+'';
		        $(".itemimg").attr("src",path);
				$('.itemname').text("Bombas");
				$('.itemdescr').text("Bombas descripcion");
				$('.itemquant').text("Cantidad: "+total_bombas);
				total_items=total_items-1;
				$('#total_items').text(total_items);
				total_bombas=0;
				return true;


			}
		
	}
	for (var i = 0; i < total_escudos; i++) {
		
			if(i<1){
				var assetsBaseDir = "{{ asset('img/') }}";
		        var path = '' + assetsBaseDir + 'escudo.png'+'';
		        $(".itemimg").attr("src",path);
				$('.itemname').text("Escudos");
				$('.itemdescr').text("Escudos descripcion");
				$('.itemquant').text("Cantidad: "+total_escudos);
				total_items=total_items-1;
				$('#total_items').text(total_items);
				total_escudos=0;
				return true;


			}
		
	}
	for (var i = 0; i < total_cronos; i++) {
		
			if(i<1){
				var assetsBaseDir = "{{ asset('img/') }}";
		        var path = '' + assetsBaseDir + 'cronos.png'+'';
		        $(".itemimg").attr("src",path);
				$('.itemname').text("Cronos");
				$('.itemdescr').text("Cronos descripcion");
				$('.itemquant').text("Cantidad: "+total_cronos);
				total_items=total_items-1;
				$('#total_items').text(total_items);
				total_cronos=0;
				return true;


			}
		
	}
	for (var i = 0; i < total_dobles; i++) {
		
			if(i<1){
				var assetsBaseDir = "{{ asset('img/') }}";
		        var path = '' + assetsBaseDir + 'doble.png'+'';
		        $(".itemimg").attr("src",path);
				$('.itemname').text("Dobles");
				$('.itemdescr').text("Dobles descripcion");
				$('.itemquant').text("Cantidad: "+total_dobles);
				total_items=total_items-1;
				$('#total_items').text(total_items);
				total_dobles=0;
				return true;


			}	
	}

}

function getRandomItemsAjaxData(tipo){
//ajax
		var getFilterUrl = Routing.generate('random_items');
        $.ajax({
                url: getFilterUrl,
                type: "POST",
                dataType: "json", 
                data: {
                   "tipo": tipo,
                },
                async: true,
                success: function (data)
                {
					$('.bomba_cant').text(parseInt($('.bomba_cant').text())+data.bombas);
					$('.escudo_cant').text(parseInt($('.escudo_cant').text())+data.escudo);
					$('.cronos_cant').text(parseInt($('.cronos_cant').text())+data.cronos);
					$('.doble_cant').text(parseInt($('.doble_cant').text())+data.doble);
                	randomizePull(data.bombas,data.escudo,data.cronos,data.doble)
                	//(prepareData(data.bombas,data.escudo,data.cronos,data.doble);
                	// openchest();
					
                   	
                },
                error: function(xhr, status, error){
                    alert("error");
                   // alert("test1");
                    // location.reload();
                }
            });
}



$(".bronce_btn").click(function(){

	if (bronce > 0 && firstclick==0){
		animation_trigger=0;
		tipo_cofre="bronce";
		fallChest();
	}

});
		

$(".plata_btn").click(function(){
	if (plata > 0 && firstclick==0){
		animation_trigger=0;
		tipo_cofre="plata";
		fallChest();
	}
});


$(".oro_btn").click(function(){
	if (oro > 0 && firstclick==0){
		animation_trigger=0;
		tipo_cofre="oro";
		fallChest();

	}
});



$(".chest").click(function(){

	if ($('.chest').css('opacity') != '0'){
		if(animation_trigger==0){
			animation_trigger=1;
			if (firstclick==0){
				firstclick=1;
				if(tipo_cofre=="bronce"){bronce--;$('.bronce_noti').text(bronce);}if(tipo_cofre=="plata"){plata--;$('.plata_noti').text(plata);}if(tipo_cofre=="oro"){oro--;$('.oro_noti').text(oro);}
			    getRandomItemsAjaxData(tipo_cofre);
				}
			else{
				if(total_items>0){
			        prepareReward();
		 		  	openchest();
				}else{
					firstclick=0;
					closeChest();
				}

			}

	    }

	}
});







    });










        </script>
{% endblock %}