{% set question = questions[0] %}

<link rel="stylesheet" href="../webcati/_plugins/emotionalprofilingquadrant/web/css/style.css">

  <div class="DaDSurveyGrid" id="DaDSurveyGrid">
      <div class="DaDSurveyGrid--itemContainer DaDSurveyGrid--itemContaine--background">
          {% for answer in question.answers %}
            {% if answer.hasValue %}
                <div class="draggableItemWrapper" data-item-container-id="{{ answer.value }}">

                </div>
            {% else %}
                <div class="draggableItemWrapper" data-item-container-id="{{ answer.value }}">
                  <div class="draggableItem" data-item-id="{{ answer.value }}">
                      {% for legend in answer.legend %}
                            <input type="hidden" id='input_{{ legend.questionField }}' name="answers[{{ legend.questionField }}]" value="{{ legend.value }}"  />
                      {% endfor %}
                      <button class="draggableItem--remove"></button>
                      <div class="draggableItem--content">
                        {{ answer.label | raw }}
                      </div>
                   </div>
               </div>
            {% endif %}
          {% endfor %}

          <!-- this is workaround for make drop work when you have no elements for drag-->
          <div class="draggableItemWrapper" data-item-container-id="-1" style="display:none">
              <div class="draggableItem" data-item-id="-1">
                  <button class="draggableItem--remove"></button>
                  <div class="draggableItem--content">
                   <div>fake item</div>
                </div>
               </div>
           </div>
      </div>
      <div class="DaDSurveyGrid--gridContainer">
          <div class="DaDSurveyGrid--grid">
              <div class="DaDSurveyGrid--grid-items">
                  {% for answer in question.answers %}
                    {% if answer.hasValue %}
                               <div class="draggableItem in--grid in-droppable" data-item-id="{{ answer.value }}" style="left:{{ answer.legend[0].value }}%; top:{{ answer.legend[1].value }}%;">
                                   {% for legend in answer.legend %}
                                         <input type="hidden" id='input_{{ legend.questionField }}' name="answers[{{ legend.questionField }}]" value="{{ legend.value }}"  />
                                   {% endfor %}
                                  <button class="draggableItem--remove"></button>
                                  <div class="draggableItem--content">
                                    {{ answer.label | raw }}
                                  </div>
                               </div>
                     {% endif %}
                 {% endfor %}
              </div>

              <!-- LABELS -->
              <div class="DaDSurveyGrid--grid-labelLeft">{{ plugin.left_label }}</div>
              <div class="DaDSurveyGrid--grid-labelRight">{{ plugin.right_label }}</div>

              <div class="DaDSurveyGrid--grid-labelTop">{{ plugin.top_label }}</div>
              <div class="DaDSurveyGrid--grid-labelBottom">{{ plugin.bottom_label }}</div>

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

  <style>
      /* Change 'thumb' width */
      .draggableItemWrapper {width:{{ plugin.answer_box_width }}; height: {{ plugin.answer_box_height }};}
      .draggableItemWrapper .draggableItem--content {width: {{ plugin.answer_box_width }}; }
      .DaDSurveyGrid--grid-background {  background-color: {{ plugin.bacground_color }}; border: {{ plugin.border_color }}; }
      .DaDSurveyGrid--itemContaine--background { height: 150px;}
</style>

  <script src="../webcati/_plugins/dragtoscale/web/js/jquery.1.12.4.min.js"></script>
  <script src="../webcati/_plugins/dragtoscale/web/js/jquery-ui.min.js"></script>
  <script src="../webcati/_plugins/dragtoscale/web/js/jquery-ui-touch.min.js"></script>

  <script>
  $(function() {

      //this plugin was designed on jquery 1.12.4 but warpit uses different version.
      //this workaround allow as to use two different versions of jQuery on same page
      //to use newer version you just need to replace $ with $j
      var $j = jQuery.noConflict(true);

      var draggableContainer = $j('.DaDSurveyGrid#DaDSurveyGrid');
      var draggableItem      = $j('#DaDSurveyGrid .draggableItem');
      var draggableItemCnr   = $j('#DaDSurveyGrid .draggableItem--itemContainer');

      var currentDroppableCnt = '';

      var draggable_x = 0;
      var draggable_y = 0;

      //Default init params
      var draggableDefaultInit = {
          opacity: 0.7,
          helper: 'clone',
          revert: function(is_valid_drop){
              if(!is_valid_drop){
                  $j(this).css('opacity',1);
                 return true;
              }
          },
          create: function(event, ui) {

              //Droppable init
              $j('#DaDSurveyGrid .DaDSurveyGrid--grid').droppable({
                  accept: $j('.draggableItem'),
                  tolerance: 'pointer',
                  drop: function(event, ui) {

                      //Initial 'grid' drop
                      if( !$j(ui.draggable).hasClass('in-droppable') ){
                           $j(ui.draggable).appendTo('#DaDSurveyGrid .DaDSurveyGrid--grid-items').addClass('in-droppable');
                           $j(ui.draggable).css({left: (draggable_x)+'px',top: (draggable_y - $j('#DaDSurveyGrid .DaDSurveyGrid--grid').position().top) +'px' });
                      }

                      //Set opacity to 1
                      $j(ui.draggable).css('opacity',1);

                      //Re init draggable
                      $j(ui.draggable).draggable({
                          containment: 'parent',
                          helper: 'original'
                      });

                      //Convert px to %
                      var draggable_x_percentage = $j(ui.draggable).position().left / $j(this).outerWidth() * 100;
                      var draggable_y_percentage = $j(ui.draggable).position().top / $j(this).outerHeight() * 100;

                      //Set new values in %
                      $j(ui.draggable).css({left:draggable_x_percentage+'%',top:draggable_y_percentage+'%'});


                //    console.log('Pozicija katero shraniš v bazo: X: '+draggable_x_percentage+'%'+ ' Y: '+draggable_y_percentage+'%');

                      ui.draggable.children('input').eq(0).val(draggable_x_percentage);
                      ui.draggable.children('input').eq(1).val(draggable_y_percentage);

                  }
              });

          },
          drag: function(event, ui) {

              //Get position while dragging
              draggable_x = ui.position.left;
              draggable_y = ui.position.top;

              //Set opacity to 0.2 while dragging
              $j(this).css('opacity',0.2);

          }
      };

      //Position already known params
      var draggableAlreadyKnownInit = {
          opacity: 0.7,
          helper: 'original',
          containment: 'parent'
      };

      //Draggable init
      draggableItem.each(function(){
          $j(this).hasClass('in--grid') ? $j(this).draggable(draggableAlreadyKnownInit) : $j(this).draggable(draggableDefaultInit);
      });


      //Reset draggableItem
      $j('body').on('click', '.draggableItem--remove', function(){

          var el_parent = $j(this).closest('.draggableItem');
          var el_id = el_parent.data('item-id');

          el_parent.children('input').eq(0).val("");
          el_parent.children('input').eq(1).val("");

          el_parent.remove().clone(true).removeClass('in-droppable').attr('style','').appendTo($j('div[data-item-container-id="'+el_id+'"]')).draggable(draggableDefaultInit);

      });

  });
  </script>