{%extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
  <link href="{{ asset('css/competition.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/document.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
{{ parent() }}
  <div class="container marketing lista">
      <div class="competition-return"> 
          <div class="competition-return-image"><img src="{{asset('img/competition-return.png')}}"></div>
        {% if app.user.role == 'ROLE_ADMIN' %}
               <a class="competition-return-text" href="{{ path('competition_list') }}">Volver a Campañas</a>
         {% elseif app.user.role == 'ROLE_TUTOR'%}
          <a class="competition-return-text"  href="{{ path('competition_client_list') }}">Volver a Campañas</a>
        {% else %}
          <a class="competition-return-text" href="{{ path('competition_users_list') }}">Volver a Campañas</a>
        {% endif %}
    </div>  
    <div class="fondo col-xs-12">
        <div class="col-xs-12 gametool-title document-title">Documentación de "{{ competition.name }}"</div>
          {% if documentsCategory|length == 0 %}
            <div class="col-xs-12"><h2>Aún no se ha añadido documentación</h2></div>
          {% else %}
            <div>
            {% for dc in documentsCategory %}
            <div class="col-xs-12 no-padd document-category" data-id="{{dc.id}}">
              <div class="col-xs-11 category-name">{{dc.name}}</div>
              <div class="col-xs-12 table-responsive">
                <table class="table gametool-table">
                  <thead>
                    <tr>
                      {% if app.user.role == "ROLE_USER" %}<th>VISTO</th>{% endif %}
                      <th>ICONO</th>
                      <th class="document-table-name">NOMBRE</th>
                      <th>FORMATO</th>
                      {% if app.user.role == "ROLE_TUTOR" or app.user.role =="ROLE_ADMIN" %}<th>PÚBLICO</th>{% endif %}
                      <th>ACCIONES</th>
                      {% if app.user.role == "ROLE_ADMIN" or app.user.role == "ROLE_TUTOR" %}
                        <th>POSICIÓN</th>
                      {% endif %}
                    </tr>
                  </thead>
                  <tbody>
                {% for area in dc.areas %}
                  {% for document in area.documents %}
                  {% set seen = 0 %}
                  <tr
                    {# {% if app.user.role == "ROLE_TUTOR" or app.user.role =="ROLE_ADMIN" %}
                      class="column" dragable="true"
                    {% endif %} #}
                    data-id="{{document.id}}" data-name="{{document.name}}" data-type="la documentación">
                     {% if app.user.role == "ROLE_USER" %}
                      <td>
                      <label class="col-md-3 trivial-question-add-checkbox-container document-checkbox-container">                                      
                        {% for dUser in document.users %}
                          {% if dUser == app.user %}
                            {% set seen = 1 %}
                          {% endif %}
                        {% endfor %}
                        {% if seen %}
                          <input class="cb" type="checkbox" checked disabled>                        
                        {% else %}
                          <input class="cb" type="checkbox" disabled>
                        {% endif %}
                        <span id="trivial-badge" class="checkmark document-checkmark"></span>
                      </label>
                    </td>
                    {% endif %}
                    <td>
                      {% if document.type == "DOCUMENTO" %}
                        {% set ext = document.extension|lower %}
                        {% if ext == "jpeg" or ext == "png" %}
                          {% set ext = "jpg" %}
                        {% endif %}
                        {% if ext == "rar"%}
                          {% set ext = "zip" %}
                        {% endif %}
                          {% if ext == "avi" or ext == "css" or ext == "doc" or ext == "docx" or ext == "eps" or ext == "jpg" or ext == "mp3" or ext == "mp4" or ext == "pdf" or ext == "ppt" or ext == "psd" or ext == "txt" or ext == "wav" or ext == "xls" or ext == "zip" %}
                            <img src="{{asset('img/'~ext~'.png')}}">  
                          {% else %}
                            <img src="{{asset('img/url.png')}}">
                          {% endif %}
                      {% else %}
                        <img src="{{asset('img/url.png')}}">
                      {% endif %}

                    </td>
                    <td class="document-table-name">
                      {% if document.type == "DOCUMENTO" %}
                        {{document.name}}
                      {% else %}
                        <a href="{{document.url}}" target="blank"
                        {% if app.user.role == "ROLE_USER" and seen == 0 %}
                          class="check-document"
                        {% endif %} 
                        >{{document.name}}</a>
                      {% endif %}
                    </td>
                    <td>
                      {% if document.type == "DOCUMENTO" %}
                        {{document.extension}}
                      {% else %}
                        url
                      {% endif %}
                    </td>
                    {% if app.user.role == "ROLE_TUTOR" or app.user.role =="ROLE_ADMIN" %}
                      <td>
                        {% if document.public %}
                          <div class="btn btn-warning" onclick="publicDocument(this)">OCULTAR</div>
                        {% else %}
                          <div class="btn btn-info" onclick="publicDocument(this)">PUBLICAR</div>
                        {% endif %}
                      </td>
                    {% endif %}                     
                    <td class="document-accions">
                      {% if app.user.role != "ROLE_USER" %}
                        {% if document.type == "DOCUMENTO" %}
                          {# <a class="btn" href="#"><img src="{{asset('img/previewDocument.png')}}"></a> #}
                          <a class="btn" href="{{ path('download_route', {id: document.id }) }}"><img src="{{asset('img/downloadDocument.png')}}"></a>
                       {% endif %} 
                        {% if dc.trinder.competition.beginAt|date("Y-m-d") > "now"|date("Y-m-d")  or app.user.role == "ROLE_ADMIN" %}
                            <a class="btn" href="{{ path('document_edit', {id: document.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a>
                            <a class="btn btn-delete" href="#"><img src="{{asset('img/delete-competition.png')}}"></a>
                        {% endif %}                                                                                                        
                      {% else %}
                        {% if document.type == "DOCUMENTO" %}
                          {# <a class="btn" href="#"><img src="{{asset('img/previewDocument.png')}}"></a> #}
                          <a 
                          {% if seen == 0 %}
                            class="btn check-document" 
                          {% else %}
                            class="btn" 
                          {% endif %}
                            href="{{ path('download_route', {id: document.id }) }}"><img src="{{asset('img/downloadDocument.png')}}"></a>
                       {% endif %}
                      {% endif %}
                    </td>
                    {% if app.user.role == "ROLE_ADMIN" or app.user.role == "ROLE_TUTOR" %}
                      <td>
                        <p>
                          <i onclick="move('UP', this);" class="up"></i>
                        </p>
                        <p>
                          <i onclick="move('DOWN', this);" class="down"></i>                            
                        </p>
                      </td>
                    {% endif %}
                  </tr>
                {% endfor %}
                {% endfor %}
              </tbody>
            </table>
            </div>
          </div>
          {% endfor %}
          {% if app.user.role == "ROLE_USER" and app.user.usersMisionReferences|length > 0 %}
            <div class="col-xs-11 category-name">Sabías que?</div>
            <div class="col-xs-12 table-responsive">
            <table class="table gametool-table">
              <thead>
                <tr>
                  <th>NOMBRE</th>
                  <th>DESCRIPCIÓN</th>
                  <th>CONTENIDO</th>
                </tr>
              </thead>
              <tbody>
            {% for um in app.user.usersMisionReferences%}
            <tr>
              <td>{{um.mision.name}}</td>
              <td>{{um.mision.description}}</td>
              {% if um.completed %}
                <td><a href="{{um.mision.url}}" target="blank">Ver</a></td>
              {% else %}
                <td>?</td>
              {% endif %}
            </tr>
            {% endfor %}
              </tbody>
            </table>
          </div>
          {% endif %}
        </div>
          {% endif %}
          {% if app.user.role == 'ROLE_ADMIN' or  app.user.role == 'ROLE_TUTOR' %}
             <a class="btn gametool-btn-orange btn-add " data-toggle="modal" data-target="#documentModal" href="#">Añadir nuevo documento</a>
          {% endif %}
          {% if app.user.role == 'ROLE_ADMIN' %}
             <div class="col-xs-12 gametool-gb"> 
                <a class="btn gametool-btn-green btn-add" href="{{ path('competition_list') }}">Guardar y volver</a>
            </div>
           {% elseif app.user.role == 'ROLE_TUTOR'%}
           <div class="col-xs-12 gametool-gb"> 
                <a class="btn gametool-btn-green btn-add" href="{{ path('competition_client_list', {client: app.user.cliente.id}) }}">Guardar y volver</a>
            </div>
        {% endif %}

           
    </div>
  </div>       

  {{ include ('Clientes/forms/form.html.twig',{form: deleteform_document_ajax,message:'Estás seguro?',id:"form-delete",with_submit:false}) }}
  {{ include ('Document/forms/addDocumentform.html.twig',{form: form,message:'Estás seguro?',id:"documentModal",with_submit:false}) }}       
{% endblock %}  
{% block javascripts %}
  {{parent()}}
  <script src="{{ asset('js/document.js') }}" ></script>
  <script>
    var b = true;
    var myFile = document.getElementById('documentbundle_document_documentFile');
  //binds to onchange event of the input field
  myFile.addEventListener('change', function() {
    this.nextElementSibling.innerHTML = ""
    //this.files[0].size gets the size of your file.
    if(this.files[0].size>2000000){
      this.nextElementSibling.innerHTML = "<li>El fichero pesa demasiado (max 2MB)</li>"
      b=false;
    } else {
      b = true;
    }

  });

  function validateForm(){
    docType = document.getElementById("documentbundle_document_type").value;
    if(!b && docType == "DOCUMENTO"){
      return false;
    } else {
      return true;
    }
  }

  </script>
{% endblock %}