{{ form_errors(form) }}
<div class="row">
  <div class="form-group">{{ form_label(form.client) }} {{ form_widget(form.client) }}</div>
</div>
<div class="row">
  <div class="form-group">{{ form_label(form.assignments) }} {{ form_widget(form.assignments, { 'attr':{'style':'width=100%;'}}) }}
    <span id="test" style="position:relative;"></span>
  </div>
</div>
<div class="row">
  <div class="form-group"><strong>Date</strong> {{ form_label(form.from) }} {{ form_widget(form.from) }}</div>
  <div class="form-group"><strong>Date</strong> {{ form_label(form.to) }} {{ form_widget(form.to) }}</div>
</div>
<script type="text/javascript">
  $('#form_from, #form_to').datepicker({ dateFormat: 'dd-mm-yy' });

  var $assignmentSelect = $('#form_assignments');
  function removeItemFromSelection(id) {
    var newVal = $assignmentSelect.val();
    for (var i=newVal.length-1; i>=0; i--) {
      if (newVal[i] === id) {
        newVal.splice(i, 1);
        break;
      }
    }
    $assignmentSelect.val(newVal);
    $assignmentSelect.trigger('change');
  }


  $assignmentSelect.select2({
    ajax: {
      url: "{{ path('assignments_list.json') }}",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term, // search term
          page: params.page,
          client_id: $('#form_client').val()
        };
      },
      processResults: function (data, page) {
        return { results: data };
      },
      cache: true
    },
    minimumInputLength: 0,
    placeholder: 'Select the Assignments',
    closeOnSelect: false,
    templateResult: function (data) {
      if (data.id == undefined) {
        return $('<span>'+data.text+'</span>');
      }
      return $('<i class="fa fa-square" id="result_'+data.id+'" /> <span>'+data.text+'</span>');
    },
    templateSelection: function (data) {
      if (data.id) {
        var $item = $('<i class="fa fa-check-square" id="selected_' + data.id + '" /> <span>' + data.text + '</span>');
        $item.data('id', data.id);
        $item.on('click', function (e) {
          removeItemFromSelection($(e.target).data('id').toString());
          e.preventDefault();
          e.stopPropagation();
          return false;
        });
        return $item;
      }
      return data.text;
    }
  });

  $assignmentSelect.on("select2:select", function (e) {
    // check and hide
    $('#result_'+ e.params.data.id).removeClass('fa-square').addClass('fa-check-square').parent('li');
  });
  $assignmentSelect.on("select2:unselect", function (e) {
    $('#result_'+ e.params.data.id).removeClass('fa-check-square').addClass('fa-square');
  });
</script>
<style>
  .select2-container {
    width: 688px !important;
    height: inherit !important;
  }
  li.select2-selection__choice {
    display: block;
  }
  .select2-container li.select2-selection__choice.mouse-over {
    /*display:none;*/
    background-color: #5897fb;
    color: white;
  }
  .select2.select2-container.select2-container--default .selection  .select2-selection__choice__remove {
    display:none;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    float:none;
    background: #ffffff;
    border: none;
    padding: 0 6px;
    margin-left: 0;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
  }

  .select2-container .select2-search--inline {
    margin-left: 6px;
  }

</style>