{% extends "pos/base.html" %}
{% block title %}Transfers By Variant{% endblock %}
{% block heading %}Transfers By Variant{% endblock %}

{% block stylesheets %}
  {{ block.super }}

  <style>.select2-container{width:100%!important;}</style>
{% endblock %}

{% block content %}
<div class="d-flex mb-3">
  <a class="btn btn-info font-weight-bold mr-2" href="{% url 'products:reports_transfers' %}">All Transfers</a>
  <a class="btn btn-success font-weight-bold" href="{% url 'products:reports_transfers_by_product' %}">By Product</a>
</div>

<div class="card mb-3">
  <div class="card-body">
    <form method="get" class="form-row">
      <div class="form-group col-md-3">
        <label>Date From</label>
        <input type="date" name="date_from" class="form-control" value="{{ filters.date_from }}">
      </div>
      <div class="form-group col-md-3">
        <label>Date To</label>
        <input type="date" name="date_to" class="form-control" value="{{ filters.date_to }}">
      </div>

      <div class="form-group col-md-4">
        <label>Variant</label>
        <select id="variant_id" name="variant_id" class="form-control">
          {% if variant %}
            <option value="{{ variant.id }}" selected>{{ variant.sku_code }} — {{ variant.product.name }}</option>
          {% endif %}
        </select>
      </div>

      <div class="form-group col-md-2">
        <label>Direction</label>
        <select name="direction" class="form-control">
          <option value="BOTH" {% if filters.direction == "BOTH" %}selected{% endif %}>Both</option>
          <option value="IN" {% if filters.direction == "IN" %}selected{% endif %}>Into Variant</option>
          <option value="OUT" {% if filters.direction == "OUT" %}selected{% endif %}>Out of Variant</option>
        </select>
      </div>

      <div class="form-group col-md-1 d-flex align-items-end">
        <button class="btn btn-primary btn-block">Go</button>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-body table-responsive">
    <table class="table table-sm table-bordered">
      <thead class="thead-light">
        <tr>
          <th>Transfer#</th><th>Date</th><th>Product</th><th>From</th><th>To</th><th>Qty</th><th>Bonus</th><th>Open</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr>
          <td>{{ r.transfer.transfer_no }}</td>
          <td>{{ r.transfer.transfer_date }}</td>
          <td>{{ r.product.product_code }} — {{ r.product.name }}</td>
          <td>{{ r.from_variant.sku_code }}</td>
          <td>{{ r.to_variant.sku_code }}</td>
          <td>{{ r.qty }}</td>
          <td>{{ r.bonus_qty }}</td>
          <td><a class="btn btn-sm btn-info" href="{% url 'products:transfers_edit' r.transfer.transfer_no %}">Open</a></td>
        </tr>
        {% empty %}
        <tr><td colspan="8">No records</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block javascripts %}
  {{ block.super }}

  <script>
    $('#variant_id').select2({
      ajax:{
        url: "{% url 'products:ajax_variants_search' %}",
        dataType:'json',
        data: params => ({term: params.term || ''}),
        processResults: data => data
      },
      placeholder:'Search variant...',
      allowClear:true,
      minimumInputLength:1
    });
  </script>
{% endblock %}