{% extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
  <link href="{{ asset('css/missions.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
	{{ parent() }}
	<div class="container">
		<div class="competition-return">
        <div class="competition-return-image"><img src="{{asset('img/go-back.png')}}"></div>
        <a class="competition-return-text mission-back" href="{{ path('missions_category') }}">{% trans %}Go to mission category{% endtrans %}</a>
            </div> 
		{% if userMission|length > 0 %}
    		<button class="tablinks active col-xs-4 no-padd easy" onclick="changeRanking(event, 'easy')">{% trans %}EASY{% endtrans %}</button>
			<button class="tablinks col-xs-4 no-padd medium" onclick="changeRanking(event, 'medium')">{% trans %}MEDIUM{% endtrans %}</button>
			<button class="tablinks col-xs-4 no-padd hard" onclick="changeRanking(event, 'hard')">{% trans %}HARD{% endtrans %}</button>
			<div id="easy" class="col-xs-12 nopadding tabcontent">
				{% set contEasy = 0 %}
				{% set completedEasy = 0 %}
				{% for m in userMission|filter(m=>m.level == 'EASY') %}
					<div class="mission-content">
						<div>
							{{ m.description }}
						</div>
						<div class="text-center">
							{% for um in m.usersMissionReferences|filter(um=>um.user == app.user)%}
								{% if um.completed %}
									{% set completedEasy = completedEasy + 1 %}
									<img src="{{asset('img/missioncheck-completed.png')}}"/>
								{% else %}
									<img src="{{asset('img/missioncheck.png')}}"/>
								{% endif %}
							{% endfor %}
						</div>
					</div>
					<hr style="border-top: dotted 1px #fff;" />
					{% set contEasy = contEasy + 1 %}
				{% endfor %}
				<div class="col-xs-12 text-center mission-btn"> 
						{% if easyChest == 1 %}
							<div class="btn btn-openedChest"><img src="{{asset('img/chests/bronze.png')}}"><img src="{{asset('img/check.png')}}"/></div>
						{% else %}
							{% if completedEasy == contEasy %}
								<div class="btn btn-openChest" onclick="openChest(this,'{{missionCategory.id}}','EASY')"><img src="{{asset('img/chests/bronze.png')}}"></div>
							{% else %}
								<div class="btn btn-openChest" disabled><img src="{{asset('img/chests/bronze.png')}}"></div>
							{% endif %}
						{% endif %}
				</div>
			</div>
			<div id="medium" class="col-xs-12 nopadding tabcontent" style="display:none">
				{% set contMedium = 0 %}
				{% set completedMedium = 0 %}
				{% for m in userMission|filter(m=>m.level == 'MEDIUM') %}
					<div class="mission-content">
						<div >
							{{ m.description }}
						</div>
						<div class="text-center">
							{% for um in m.usersMissionReferences|filter(um=>um.user == app.user)%}
								{% if um.completed %}
									{% set completedMedium = completedMedium + 1 %}
									<img src="{{asset('img/missioncheck-completed.png')}}"/>
								{% else %}
									<img src="{{asset('img/missioncheck.png')}}"/>
								{% endif %}
							{% endfor %}
						</div>
					</div>
					<hr style="border-top: dotted 1px #fff;" />
					{% set contMedium = contMedium + 1 %}
				{% endfor %}
				<div class="col-xs-12 text-center mission-btn"> 
						{% if mediumChest == 1 %}
							<div class="btn btn-openedChest"><img src="{{asset('img/chests/silver.png')}}"><img src="{{asset('img/check.png')}}"/></div>
						{% else %}
							{% if completedMedium == contMedium %}
								<div class="btn btn-openChest" onclick="openChest(this,'{{missionCategory.id}}','MEDIUM')"><img src="{{asset('img/chests/silver.png')}}"></div>
							{% else %}
								<div class="btn btn-openChest" disabled><img src="{{asset('img/chests/silver.png')}}"></div>
							{% endif %}
						{% endif %}
				</div>
			</div>
			<div id="hard" class="col-xs-12 nopadding tabcontent" style="display:none">
				{% set contHard = 0 %}
				{% set completedHard = 0 %}
				{% for m in userMission|filter(m=>m.level == 'HARD') %}
					<div class="mission-content">
						<div>
							{{ m.description }}
						</div>
						<div class="text-center">
							{% for um in m.usersMissionReferences|filter(um=>um.user == app.user)%}
								{% if um.completed %}
									{% set completedHard = completedHard + 1 %}
									<img src="{{asset('img/missioncheck-completed.png')}}"/>
								{% else %}
									<img src="{{asset('img/missioncheck.png')}}"/>
								{% endif %}
							{% endfor %}
						</div>
					</div>
					<hr style="border-top: dotted 1px #fff;" />
					{% set contHard = contHard + 1 %}
				{% endfor %}
				<div class="col-xs-12 text-center mission-btn"> 
						{% if hardChest == 1 %}
							<div class="btn btn-openedChest"><img src="{{asset('img/chests/gold.png')}}"><img src="{{asset('img/check.png')}}"/></div>
						{% else %}
							{% if completedHard == contMedium %}
								<div class="btn btn-openChest" onclick="openChest(this,'{{missionCategory.id}}','HARD')"><img src="{{asset('img/chests/gold.png')}}"></div>
							{% else %}
								<div class="btn btn-openChest" disabled><img src="{{asset('img/chests/gold.png')}}"></div>
							{% endif %}
						{% endif %}
				</div>
			</div>
		{% else %}
			<h2 style="text-align: center;margin: 40px 0;">{% trans %}There are not missions created{% endtrans %}</h2>
		{% endif %}
	</div>
{% endblock %}
{% block javascripts %}
  {{parent()}}
  <script type="text/javascript">
  	function changeRanking(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";
	}

	function openChest(elem,id,level){
      elem.setAttribute('onclick','');
      elem.classList.add('disabled');
      var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            data = JSON.parse(this.responseText);
            if(data.status == 0 ){
              elem.setAttribute('onclick','claimReward(this,'+id+','+level+')');
              elem.classList.remove('disabled');
              alert('Ha ocurrido un error, vuelve a intentarlo más tarde');
            } else if (data.status==1){
              $('#self-points-reward').html("<img src='"+data.message+"'/>");
              showSelfModal();
              elem.classList.remove('btn-openChest');
              elem.classList.remove('disabled');
              elem.classList.add('btn-openedChest');
              elem.innerHTML = "<img src='"+data.message+"'><img src=\'{{asset('img/check.png')}}\'/>"; 
            }
          }
        };
      xhttp.open("POST", Routing.generate('missions_open_chest'), true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send("id="+id+"&level="+level);  
    }
    </script>
{% endblock %}