{% 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 V2C Transfer #{{ master.transfer_no }}{% else %}New V2C Transfer{% endif %}
    </h4>
    <a href="{% url 'transactions:v2c_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 → Customer</strong>
    </div>

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

        <div class="form-row">

          <div class="form-group col-md-5">
            <label class="mb-1">Vendor (From)</label>
            <select id="vendor_id" name="vendor_id" class="form-control">
              {% if is_edit %}
                <option value="{{ vendor_id }}" selected="selected">{{ 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">Vendor Balance</label>
            <input type="text" id="vendor_balance" class="form-control" value="{% if is_edit %}{{ vendor_balance }}{% else %}0{% endif %}" readonly>
          </div>

          <div class="form-group col-md-5">
            <label class="mb-1">Customer (To)</label>
            <select id="customer_id" name="customer_id" class="form-control">
              {% if is_edit %}
                <option value="{{ customer_id }}" selected="selected">{{ customer_name }}</option>
              {% endif %}
            </select>
            <small class="text-muted">Type name / phone to search</small>
          </div>

        </div>

        <div class="form-row">

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

          <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-3">
            <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:v2c_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 initCustomerSelect($el) {
      if (!$el.length || !$.fn.select2) return;
      $el.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Search customer...',
        allowClear: true,
        ajax: {
          url: "{% url 'transactions:ajax_customers' %}",
          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(){});
    }

    function loadCustomerBalance(customerId, $target) {
      if (!customerId) { $target.val('0'); return; }
      $.get("{% url 'transactions:ajax_customer_balance' %}", { customer_id: customerId })
        .done(function(res){ if(res && typeof res.balance !== 'undefined') $target.val(res.balance); })
        .fail(function(){});
    }

    var $v = $('#vendor_id');
    var $c = $('#customer_id');

    initVendorSelect($v);
    initCustomerSelect($c);

    $v.on('change', function(){ loadVendorBalance($(this).val(), $('#vendor_balance')); });
    $c.on('change', function(){ loadCustomerBalance($(this).val(), $('#customer_balance')); });

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