{% extends "pos/base.html" %}
{% load static %}

{% block content %}
<div class="container-fluid">

  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0">Vendor → Customer Transfers (V2C)</h4>
    <a href="{% url 'transactions:v2c_transfer_add' %}" class="btn btn-primary btn-sm">
      <i class="fa fa-plus"></i> New V2C Transfer
    </a>
  </div>

  <div class="card shadow-sm mb-3">
    <div class="card-header py-2">
      <strong>Filters</strong>
    </div>
    <div class="card-body">
      <form method="get" class="mb-0">
        <div class="form-row">

          <div class="form-group col-md-2">
            <label class="mb-1">Date From</label>
            <input type="date" name="date_from" class="form-control form-control-sm" value="{{ date_from_q }}">
          </div>

          <div class="form-group col-md-2">
            <label class="mb-1">Date To</label>
            <input type="date" name="date_to" class="form-control form-control-sm" value="{{ date_to_q }}">
          </div>

          <div class="form-group col-md-2">
            <label class="mb-1">Transfer #</label>
            <input type="text" name="transfer_no" class="form-control form-control-sm" placeholder="e.g 101" value="{{ transfer_q }}">
          </div>

          <div class="form-group col-md-3">
            <label class="mb-1">Vendor</label>
            <input type="text" name="vendor" class="form-control form-control-sm" placeholder="Vendor name..." value="{{ vendor_q }}">
          </div>

          <div class="form-group col-md-3">
            <label class="mb-1">Customer</label>
            <input type="text" name="customer" class="form-control form-control-sm" placeholder="Customer name..." value="{{ customer_q }}">
          </div>

        </div>

        <div class="d-flex align-items-center">
          <button type="submit" class="btn btn-success btn-sm mr-2">
            <i class="fa fa-search"></i> Apply
          </button>
          <a href="{% url 'transactions:v2c_transfer_list' %}" class="btn btn-secondary btn-sm">
            Reset
          </a>

          <div class="ml-auto text-right">
            <span class="badge badge-info p-2">
              Grand Total: {{ grand_total }}
            </span>
          </div>
        </div>

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

  <div class="card shadow-sm">
    <div class="card-header py-2">
      <strong>Transfers</strong>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table id="dt_v2c" class="table table-sm table-bordered table-striped mb-0">
          <thead class="thead-light">
            <tr>
              <th style="width:60px;">#</th>
              <th style="width:100px;">Transfer</th>
              <th style="width:110px;">Date</th>
              <th>Vendor</th>
              <th>Customer</th>
              <th style="width:120px;" class="text-right">Amount</th>
              <th style="width:160px;">Reference</th>
              <th>Remarks</th>
              <th style="width:150px;">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for r in rows %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td><strong>#{{ r.transfer_no }}</strong></td>
              <td>{{ r.trx_date }}</td>
              <td>{{ r.vendor_name }}</td>
              <td>{{ r.customer_name }}</td>
              <td class="text-right">{{ r.amount }}</td>
              <td>{{ r.reference }}</td>
              <td>{{ r.remarks }}</td>
              <td>
                <a class="btn btn-primary btn-sm mr-1"
                   href="{% url 'transactions:v2c_transfer_edit' r.transfer_no %}">
                  Edit
                </a>
                <a class="btn btn-danger btn-sm"
                   href="{% url 'transactions:v2c_transfer_delete' r.transfer_no %}"
                   onclick="return confirm('Delete V2C transfer #{{ r.transfer_no }} ?');">
                  Delete
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
  (function() {
    var $tbl = $('#dt_v2c');
    if ($tbl.length && $.fn.DataTable) {
      $tbl.DataTable({
        pageLength: 25,
        order: [[2,'desc'], [1,'desc']],
        autoWidth: false
      });
    }
  })();
</script>
{% endblock %}