{% extends 'assets/base.html' %}
{% load bob %}
{% load icons %}

{% block extra_headers %}
  <style type="text/css">
    #fill_all_rows {
      color: white;
      text-decoration: underline;
    }

    #float_toolbar {
      position: absolute;
      left: 0px;
      top: 0px;
      padding: 4px;
      background-color: white;
      border: solid #ccc 2px;
      border-radius: 3px;
      display: none;
    }
    .overflow-x {
        overflow-x: scroll;
    }
    .scrollable-table {
        min-width: 2000px;
    }
  </style>
{% endblock %}

{% block scripts %}
{{ block.super }}
<script type='text/javascript'>

  // Disable autocomplete without cluttering html attributes
  $('input').attr('autocomplete','off');

  /* After closing datepicker toogle toolbar */
  $('.datepicker').on('changeDate', function(ev){
        toggle_toolbar(this);
  });

  $("input[type=text].fillable,select.fillable").blur(function(event) {
    $("#float_toolbar").hide();
  });

  var toggle_toolbar = function(input) {
    console.log(input);
    var toolbar = $("#float_toolbar");
    var offset = $(input).offset();
    var width = input.clientWidth;
    var height = input.clientHeight;
    var distance_left = 0;
    var distance_top = 0;

    /* Clear data */
    $(toolbar).data('input_name', '');
    $(toolbar).data('input_id', '');

    /* For fields without id set, save its name as selector */
    if (input.id === '') {
      $(toolbar).data('input_name', input.name);
    }
    else {
      $(toolbar).data('input_id', input.id);
    }
    toolbar.css("left", parseInt(offset.left) + width + distance_left + "px");
    toolbar.css("top", parseInt(offset.top) + height + distance_top +  "px");
    toolbar.show();

  }

  $("input[type=text].fillable,select.fillable").focus(function(event) {
    toggle_toolbar(this);
  });

  $("#fill_all_rows").mousedown(function(event) {
    console.log('down');
    var MAX_ROWS = 100;
    var input_id = $("#float_toolbar").data('input_id');
    var input_name = $("#float_toolbar").data('input_name');
    var matcher = /(.*)-([0-9]+)-(.*)/;
    var results, pre, number, post, value_to_fill, el;
    if (input_id != '') {
      results = matcher.exec(input_id);
      value_to_fill = $('#'+input_id).val();
    } else if (input_name != '') {
        results = matcher.exec(input_name);
        value_to_fill = $('input[name="'+input_name+'"]').val();
      }

      pre = results[1];
      number = results[2];
      post = results[3];
      for (var i=0; i < MAX_ROWS; i++) {
        if (input_id != '') {
          el = $('#' + pre + "-" + i + "-" + post);
        }
        else {
          el = $('input[name="' + pre + "-" + i + "-" + post + '"]');
        }
        if (!el.length) {
          break;
        }
        el.val(value_to_fill);
      }
      $("#float_toolbar").hide();
      return false;
    });

</script>
{% endblock scripts %}

{% block content %}
<div id="float_toolbar">
  <a id='fill_all_rows' href title='Fill all rows'>
    {% icon 'fugue-pencil--plus' %}
  </a>
</div>

<div class="row"><h3>Bulk edit</h3></div>
<form action="" method="POST" class="form form-inline">
  {% csrf_token %}
  {{ formset.management_form }}
  <div class="row overflow-x">
      <table class="table table-striped table-bordered table-condensed scrollable-table">
      <thead><tr>
        <th></th>
        {% if mode == 'BO' %}<th>Type</th>{% endif %}
        <th>Model</th>
        <th>Invoice Number</th>
        <th>Order Number</th>
        <th>SN</th>
        <th>Barcode</th>
        <th>Price</th>
        <th>Support price</th>
        <th>Support period</th>
        <th>Support type</th>
        <th>Support void reporting</th>
        <th>Provider</th>
        <th>Source</th>
        <th>Status</th>
        <th>Request date</th>
        <th>Delivery date</th>
        <th>Invoice date</th>
        <th>Production use date</th>
        <th>Provider order date</th>
      </tr></thead>
      <tbody>{% for form in formset %}
        <tr>
          <td style="vertical-align:middle">
            {{ forloop.counter }}
            {{ form.id }}
            {{ form.device_info }}
          </td>
          {% for field in form %}
            {% if "-device_info" in field.html_name or "-id" in field.html_name %}
              {# do nothing... #}
            {% elif "-barcode" in field.html_name  %}
              <td class="control-group{% if form.device_info.value and field.errors %} error{% endif %}" style="vertical-align:middle">
                {% if form.device_info.value %}
                  {{ field }}
                  {% if field.errors %}
                    <span class="help-inline">{% for error in field.errors %}{{ error }} {% endfor %}</span>
                  {% endif %}
                {% endif %}
              </td>
            {% else %}
              <td class="control-group{% if "-support_period" in field.html_name %} small{% endif %}{% if field.errors %} error{% endif %}" style="vertical-align:middle">
                {{ field }}
                {% if field.errors %}
                  <span class="help-inline">{% for error in field.errors %}{{ error }} {% endfor %}</span>
                {% endif %}
              </td>
            {% endif %}
          {% endfor %}
        </tr>
      {% endfor %}</tbody>
    </table>
  </div>
  <div class="row">
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Save</button>
    </div>
  </div>
</form>
{% endblock %}
