{% extends "pos/base.html" %}
{% load static %}
{% block title %}Customer to Vendor Payments{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block heading %}Customer → Vendor Payments{% endblock %}

{% block content %}

<form method="get" class="mb-3">
  <div class="row align-items-end">
    <div class="col-md-2 mb-2">
      <label class="small mb-1">Transfer #</label>
      <input type="text" name="transfer_no" value="{{ transfer_q }}" class="form-control" placeholder="e.g. 5">
    </div>
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Customer</label>
      <input type="text" name="customer" value="{{ customer_q }}" class="form-control" placeholder="Customer name">
    </div>
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Vendor</label>
      <input type="text" name="vendor" value="{{ vendor_q }}" class="form-control" placeholder="Vendor name">
    </div>

    <div class="col-md-4 mb-2">
      <label class="small mb-1 d-block">Date</label>
      <div class="d-flex">
        <input type="date" name="date_from" value="{{ date_from_q }}" class="form-control me-1">
        <input type="date" name="date_to" value="{{ date_to_q }}" class="form-control">
      </div>
    </div>

    <div class="col-auto mb-2">
      <button class="btn btn-primary btn-sm"><i class="fas fa-search mr-1"></i>Search</button>
      <a href="{% url 'transactions:c2v_transfer_list' %}" class="btn btn-secondary btn-sm">Reset</a>
    </div>
  </div>
</form>

<div class="row ml-0 mb-3">
  <a href="{% url 'transactions:c2v_transfer_add' %}">
    <button type="button" class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i> Create New C2V Transfer
    </button>
  </a>
</div>

<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">C2V Transfers</h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th style="width:8%">#</th>
            <th style="width:12%">Transfer</th>
            <th style="width:14%">Date</th>
            <th>Customer</th>
            <th>Vendor</th>
            <th class="text-end" style="width:12%">Amount</th>
            <th style="width:14%">Reference</th>
            <th class="text-center" style="width:10%">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ r.transfer_no }}</td>
            <td>{{ r.trx_date }}</td>
            <td>{{ r.customer_name }}</td>
            <td>{{ r.vendor_name }}</td>
            <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            <td>{{ r.reference }}</td>
            <td class="text-center">
              <a href="{% url 'transactions:c2v_transfer_edit' r.transfer_no %}" class="btn btn-warning btn-sm" title="Edit">
                <i class="fas fa-edit"></i>
              </a>
              <a href="{% url 'transactions:c2v_transfer_delete' r.transfer_no %}"
                 class="btn btn-danger btn-sm"
                 onclick="return confirm('Delete transfer #{{ r.transfer_no }}?');"
                 title="Delete">
                <i class="fas fa-trash"></i>
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="text-end mt-3">
      <span class="badge p-2" style="background:#01478f; color:#ffffff; font-size:1rem;">
        Grand&nbsp;Total:&nbsp;{{ grand_total|floatformat:2 }}
      </span>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}

<script>
  $(function(){
    $('#dataTable').DataTable({ "order": [[2,'desc']] });
  });
</script>
{% endblock %}