{% 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">
      {% if is_edit %}Edit V2V Transfer #{{ master.transfer_no }}{% else %}New V2V Transfer{% endif %}
    </h4>
    <a href="{% url 'transactions:v2v_transfer_list' %}" class="btn btn-secondary btn-sm">
      <i class="fa fa-arrow-left"></i> Back
    </a>
  </div>

  <div class="card shadow-sm">
    <div class="card-header py-2">
      <strong>Vendor → Vendor</strong>
    </div>

    <div class="card-body">
      <form method="post" autocomplete="off">
        {% csrf_token %}

        <div class="form-row">
          <div class="form-group col-md-4">
            <label class="mb-1">From Vendor</label>
            <select id="from_vendor_id" name="from_vendor_id" class="form-control">
              {% if is_edit %}
                <option value="{{ from_vendor_id }}" selected="selected">{{ from_vendor_name }}</option>
              {% endif %}
            </select>
            <small class="text-muted">Type name / phone to search</small>
          </div>

          <div class="form-group col-md-2">
            <label class="mb-1">From Balance</label>
            <input type="text" id="from_balance" class="form-control" value="{% if is_edit %}{{ from_balance }}{% else %}0{% endif %}" readonly>
          </div>

          <div class="form-group col-md-4">
            <label class="mb-1">To Vendor</label>
            <select id="to_vendor_id" name="to_vendor_id" class="form-control">
              {% if is_edit %}
                <option value="{{ to_vendor_id }}" selected="selected">{{ to_vendor_name }}</option>
              {% endif %}
            </select>
            <small class="text-muted">Type name / phone to search</small>
          </div>

          <div class="form-group col-md-2">
            <label class="mb-1">To Balance</label>
            <input type="text" id="to_balance" class="form-control" value="{% if is_edit %}{{ to_balance }}{% else %}0{% endif %}" readonly>
          </div>
        </div>

        <div class="form-row">

          <div class="form-group col-md-2">
            <label class="mb-1">Date</label>
            <input type="date" name="trx_date" class="form-control"
              value="{% if is_edit %}{{ master.trx_date|date:'Y-m-d' }}{% else %}{{ today|date:'Y-m-d' }}{% endif %}">
          </div>

          <div class="form-group col-md-2">
            <label class="mb-1">Amount</label>
            <input type="number" step="0.01" name="amount" class="form-control"
              value="{% if is_edit %}{{ master.amount }}{% else %}{% endif %}" placeholder="0">
          </div>

          <div class="form-group col-md-3">
            <label class="mb-1">Operator</label>
            <select name="saleman_operator" class="form-control">
              <option value="0">-- Select --</option>
              {% for s in salemen %}
                <option value="{{ s.t_id }}" {% if is_edit and master.operator_id == s.t_id %}selected{% endif %}>
                  {{ s.name }}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="form-group col-md-5">
            <label class="mb-1">Reference</label>
            <input type="text" name="reference" class="form-control"
              value="{% if is_edit %}{{ master.reference }}{% endif %}" placeholder="Optional">
          </div>

        </div>

        <div class="form-group">
          <label class="mb-1">Remarks</label>
          <textarea name="remarks" rows="2" class="form-control" placeholder="Optional">{% if is_edit %}{{ master.remarks }}{% endif %}</textarea>
        </div>

        <div class="d-flex align-items-center">
          <button type="submit" class="btn btn-success mr-2">
            <i class="fa fa-save"></i> {% if is_edit %}Update{% else %}Save{% endif %}
          </button>
          <a href="{% url 'transactions:v2v_transfer_list' %}" class="btn btn-secondary">
            Cancel
          </a>
        </div>

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

</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
  (function() {

    function initVendorSelect($el) {
      if (!$el.length || !$.fn.select2) return;

      $el.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Search vendor...',
        allowClear: true,
        ajax: {
          url: "{% url 'transactions:ajax_vendors' %}",
          dataType: 'json',
          delay: 250,
          data: function(params) {
            return { q: params.term || '' };
          },
          processResults: function(data) {
            return { results: data };
          }
        }
      });
    }

    function loadVendorBalance(vendorId, $target) {
      if (!vendorId) { $target.val('0'); return; }
      $.get("{% url 'transactions:ajax_vendor_balance' %}", { vendor_id: vendorId })
        .done(function(res){
          if (res && typeof res.balance !== 'undefined') $target.val(res.balance);
        })
        .fail(function(){});
    }

    var $from = $('#from_vendor_id');
    var $to   = $('#to_vendor_id');

    initVendorSelect($from);
    initVendorSelect($to);

    $from.on('change', function() {
      loadVendorBalance($(this).val(), $('#from_balance'));
    });

    $to.on('change', function() {
      loadVendorBalance($(this).val(), $('#to_balance'));
    });

  })();
</script>
{% endblock %}