{# templates/transactions/vendor_payment_bulk.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}
  {% if is_edit %}Edit{% else %}Add{% endif %} Bulk Vendor Payment
{% endblock %}

{% block stylesheets %}
<style>
  .hidden { display: none; }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  input[type="number"] { -moz-appearance: textfield; }

  table.bulk-table th,
  table.bulk-table td {
      padding: 4px 6px;
      vertical-align: middle;
  }
  .form-control-sm {
      padding: 0.15rem 0.35rem;
      font-size: 0.8rem;
      height: calc(1.6em + 0.5rem);
  }

  /* Select2 dropdown styling */
  .select2-container .select2-dropdown { min-width: 320px !important; }
  .select2-container .select2-results__option { padding: 6px 10px; }

  .select2-container--bootstrap4 .select2-results>.select2-results__options>.select2-results__option {
      background-color: #fff !important; color: #000 !important; padding: 6px 10px;
  }
  .select2-container--bootstrap4 .select2-results>.select2-results__options>.select2-results__option.select2-results__option--highlighted {
      background-color: #0d5aa7 !important; color: #fff !important; font-weight: 700 !important;
  }

  .vend-option-name    { font-weight: 600; font-size: 0.85rem; }
  .vend-option-balance { font-size: 0.72rem; color: #2b6cb0; float: right; font-weight: 600; }
  .select2-container--bootstrap4 .select2-results__option--highlighted .vend-option-balance { color: #fff !important; }

  .js-prev, .js-remain { background: #f7fafc !important; }
</style>
{% endblock %}

{% block heading %}
  {% if is_edit %}Edit{% else %}Add{% endif %} Bulk Vendor Payment
{% endblock %}

{% block content %}

<!-- Hidden template for bank options (used by JS when creating rows) -->
<template id="bank-options-tpl">
  {% for b in bank_accounts %}
    <option value="{{ b.t_id }}" {% if b.t_id == default_bank_id %}selected{% endif %}>{{ b.name }}</option>
  {% endfor %}
</template>

<div class="mb-2">
  {% if is_edit %}
    <span class="badge badge-info">Bulk No: {{ bulk.bulk_no }}</span>
  {% endif %}
</div>

<form method="post" id="bulk-form" class="needs-validation" novalidate>
  {% csrf_token %}

  <!-- Header: Date, Remarks, Operator -->
  <div class="row">
    <div class="col-md-3">
      <label class="small mb-1">Date</label>
      <input type="date" class="form-control form-control-sm" name="trx_date"
             value="{{ today|date:'Y-m-d' }}" required>
    </div>
    <div class="col-md-5">
      <label class="small mb-1">Bulk Remarks</label>
      <input type="text" name="bulk_remarks" class="form-control form-control-sm"
             value="{{ bulk_remarks }}">
    </div>
    <div class="col-md-3">
      <label class="small mb-1">Operator</label>
      <select name="saleman_operator" class="form-control form-control-sm">
        <option value="0">— Select —</option>
        {% for s in salemen %}
          <option value="{{ s.t_id }}" {% if bulk.operator_id == s.t_id %}selected{% endif %}>{{ s.name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <hr>

  <!-- Table -->
  <div class="table-responsive">
    <table class="table table-bordered bulk-table" id="bulk-table">
      <thead class="thead-light">
        <tr>
          <th style="width: 55px;">Line</th>
          <th style="width: 90px;">Vendor&nbsp;ID</th>
          <th style="width: 240px;">Vendor&nbsp;Name</th>
          <th style="width: 120px;">Previous</th>
          <th style="width: 120px;">Payment</th>
          <th style="width: 120px;">Remaining</th>
          <th style="width: 110px;">Type</th>
          <th style="width: 160px;">Bank</th>
          <th>Note</th>
          <th style="width: 40px;"></th>
        </tr>
      </thead>
      <tbody id="bulk-rows">
        {% if lines %}
          {% for ln in lines %}
            <tr class="bulk-row">
              <td class="text-center align-middle">
                {{ forloop.counter }}
                <input type="hidden" name="line_id[]" value="{{ ln.id }}">
              </td>
              <td>
                <input type="number" name="vendor_id[]"
                       class="form-control form-control-sm bulk-field js-vend-id"
                       value="{{ ln.vendor_id }}">
              </td>
              <td>
                <select name="vendor_name[]"
                        class="form-control form-control-sm bulk-field js-vend-select">
                  {% if ln.vendor_obj %}
                    <option value="{{ ln.vendor_obj.t_id }}" selected>{{ ln.vendor_obj.name }}</option>
                  {% else %}
                    <option value="" selected>—</option>
                  {% endif %}
                </select>
              </td>
              <td>
                <input type="number" step="0.01" name="prev_balance[]"
                       class="form-control form-control-sm bulk-field js-prev"
                       value="{{ ln.previous_balance_snapshot }}" readonly>
              </td>
              <td>
                <input type="number" step="0.01" name="amount[]"
                       class="form-control form-control-sm bulk-field js-amt"
                       value="{{ ln.amount }}">
              </td>
              <td>
                <input type="number" step="0.01" name="remaining[]"
                       class="form-control form-control-sm js-remain"
                       value="{{ ln.remaining_balance_snapshot }}" readonly>
              </td>
              <td>
                <select name="cash_type[]" class="form-control form-control-sm bulk-field js-cash-type">
                  <option value="Bank" {% if ln.cash_type == "Bank" %}selected{% endif %}>Bank</option>
                  <option value="Cash" {% if ln.cash_type == "Cash" %}selected{% endif %}>Cash</option>
                </select>
              </td>
              <td>
                <select name="bank_id[]" class="form-control form-control-sm bulk-field js-bank">
                  {% for b in bank_accounts %}
                    <option value="{{ b.t_id }}" {% if ln.bank_id == b.t_id %}selected{% endif %}>{{ b.name }}</option>
                  {% endfor %}
                </select>
              </td>
              <td>
                <input type="text" name="note[]"
                       class="form-control form-control-sm bulk-field" value="{{ ln.note }}">
              </td>
              <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger js-remove-row">&times;</button>
              </td>
            </tr>
          {% endfor %}
        {% else %}
          {# one empty row by default #}
          <tr class="bulk-row">
            <td class="text-center align-middle">
              1
              <input type="hidden" name="line_id[]" value="">
            </td>
            <td>
              <input type="number" name="vendor_id[]"
                     class="form-control form-control-sm bulk-field js-vend-id">
            </td>
            <td>
              <select name="vendor_name[]"
                      class="form-control form-control-sm bulk-field js-vend-select"></select>
            </td>
            <td>
              <input type="number" step="0.01" name="prev_balance[]"
                     class="form-control form-control-sm bulk-field js-prev" readonly>
            </td>
            <td>
              <input type="number" step="0.01" name="amount[]"
                     class="form-control form-control-sm bulk-field js-amt">
            </td>
            <td>
              <input type="number" step="0.01" name="remaining[]"
                     class="form-control form-control-sm js-remain" readonly>
            </td>
            <td>
              <select name="cash_type[]" class="form-control form-control-sm bulk-field js-cash-type">
                <option value="Bank" selected>Bank</option>
                <option value="Cash">Cash</option>
              </select>
            </td>
            <td>
              <select name="bank_id[]" class="form-control form-control-sm bulk-field js-bank">
                {% for b in bank_accounts %}
                  <option value="{{ b.t_id }}" {% if b.t_id == default_bank_id %}selected{% endif %}>{{ b.name }}</option>
                {% endfor %}
              </select>
            </td>
            <td>
              <input type="text" name="note[]" class="form-control form-control-sm bulk-field">
            </td>
            <td class="text-center">
              <button type="button" class="btn btn-sm btn-danger js-remove-row">&times;</button>
            </td>
          </tr>
        {% endif %}
      </tbody>
      <tfoot>
        <tr>
          <th colspan="4" class="text-right">Total Paid:</th>
          <th><input type="text" id="total-amount" class="form-control form-control-sm" readonly></th>
          <th colspan="5"></th>
        </tr>
      </tfoot>
    </table>
  </div>

  <div class="mt-3 d-flex justify-content-between">
    <div>
      <button type="button" id="btn-add-row" class="btn btn-sm btn-outline-primary">+ Add Row</button>
    </div>
    <div>
      <button type="submit" class="btn btn-success">
        <i class="fas fa-save mr-1"></i>Save Bulk
      </button>
      <a href="{% url 'transactions:vendor_bulk_payment_list' %}" class="btn btn-secondary btn-sm">
        Back to Bulk List
      </a>
    </div>
  </div>
</form>

{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {

  const csrftoken = '{{ csrf_token }}';
  const bankOptionsHtml = document.getElementById('bank-options-tpl').innerHTML;

  // ════════════════════════════════════════════════════
  // UTILITY
  // ════════════════════════════════════════════════════
  function recalcRow($row) {
    const prev = parseFloat($row.find('.js-prev').val()) || 0;
    const amt  = parseFloat($row.find('.js-amt').val())  || 0;
    $row.find('.js-remain').val((prev - amt).toFixed(2));
  }

  function recalcTotals() {
    let t = 0;
    $('#bulk-rows .bulk-row').each(function () {
      t += parseFloat($(this).find('.js-amt').val()) || 0;
    });
    $('#total-amount').val(t.toFixed(2));
  }

  function renumberLines() {
    $('#bulk-rows .bulk-row').each(function (idx) {
      $(this).find('td:first').contents()
        .filter(function(){ return this.nodeType === 3; })
        .first().replaceWith((idx + 1) + ' ');
    });
  }

  function toggleBank($row) {
    const type = $row.find('.js-cash-type').val();
    const $bank = $row.find('.js-bank');
    if (type === 'Cash') {
      $bank.prop('disabled', true).css('opacity', 0.4);
    } else {
      $bank.prop('disabled', false).css('opacity', 1);
    }
  }

  function fetchBalance(vid, $row) {
    if (!vid) return;
    $.getJSON("{% url 'transactions:get_vendor_balance' %}", { vendor_id: vid })
      .done(function (data) {
        const bal = parseFloat(data.balance) || 0;
        $row.find('.js-prev').val(bal.toFixed(2));
        recalcRow($row);
      });
  }

  // ════════════════════════════════════════════════════
  // SELECT2 FOR VENDOR NAME
  // ════════════════════════════════════════════════════
  function initSelect2($row) {
    const $sel = $row.find('.js-vend-select');
    if ($sel.data('select2')) $sel.select2('destroy');

    $sel.select2({
      theme: 'bootstrap4',
      placeholder: 'Search vendor…',
      allowClear: true,
      minimumInputLength: 1,
      dropdownAutoWidth: true,
      ajax: {
        url: "{% url 'transactions:ajax_vendors' %}",
        type: 'GET',
        delay: 250,
        data: function (params) { return { q: params.term }; },
        processResults: function (data) {
          // ajax_vendors returns a plain array [{id, text}, ...]
          const arr = Array.isArray(data) ? data : (data.results || []);
          return { results: arr.map(function (it) {
            return { id: it.id, text: it.text };
          })};
        }
      },
      templateResult: function (item) {
        if (item.loading) return item.text;
        return $('<div class="vend-option-name"></div>').text(item.text);
      },
      templateSelection: function (item) { return item.text; }
    });

    $sel.off('select2:select').on('select2:select', function (e) {
      const d = e.params.data;
      const $r = $(this).closest('.bulk-row');
      $r.find('.js-vend-id').val(d.id);
      fetchBalance(d.id, $r);
      $r.find('.js-amt').focus();
    });

    $sel.off('select2:clear').on('select2:clear', function () {
      const $r = $(this).closest('.bulk-row');
      $r.find('.js-vend-id').val('');
      $r.find('.js-prev').val('');
      $r.find('.js-remain').val('');
    });
  }

  // ════════════════════════════════════════════════════
  // CREATE ROW (for Add Row)
  // ════════════════════════════════════════════════════
  function createRow(lineNum) {
    const html = `
      <tr class="bulk-row">
        <td class="text-center align-middle">${lineNum}
          <input type="hidden" name="line_id[]" value="">
        </td>
        <td><input type="number" name="vendor_id[]" class="form-control form-control-sm bulk-field js-vend-id"></td>
        <td><select name="vendor_name[]" class="form-control form-control-sm bulk-field js-vend-select"></select></td>
        <td><input type="number" step="0.01" name="prev_balance[]" class="form-control form-control-sm bulk-field js-prev" readonly></td>
        <td><input type="number" step="0.01" name="amount[]" class="form-control form-control-sm bulk-field js-amt"></td>
        <td><input type="number" step="0.01" name="remaining[]" class="form-control form-control-sm js-remain" readonly></td>
        <td>
          <select name="cash_type[]" class="form-control form-control-sm bulk-field js-cash-type">
            <option value="Bank" selected>Bank</option>
            <option value="Cash">Cash</option>
          </select>
        </td>
        <td><select name="bank_id[]" class="form-control form-control-sm bulk-field js-bank">${bankOptionsHtml}</select></td>
        <td><input type="text" name="note[]" class="form-control form-control-sm bulk-field"></td>
        <td class="text-center"><button type="button" class="btn btn-sm btn-danger js-remove-row">&times;</button></td>
      </tr>`;
    return $(html);
  }

  // ════════════════════════════════════════════════════
  // ROW EVENTS
  // ════════════════════════════════════════════════════
  function initRowEvents($row) {

    // Vendor ID Enter → fetch balance (or open select2 if empty)
    $row.find('.js-vend-id').off('keydown.vid').on('keydown.vid', function (e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        const val = ($(this).val() || '').trim();
        const $r = $(this).closest('.bulk-row');
        if (!val) {
          $r.find('.js-vend-select').select2('open');
          setTimeout(function () {
            const f = document.querySelector('.select2-container--open .select2-search__field');
            if (f) f.focus();
          }, 0);
          return;
        }
        fetchBalance(val, $r);
        $r.find('.js-amt').focus();
      }
    });

    // Amount input → recalc
    $row.find('.js-amt').off('input').on('input', function () {
      recalcRow($(this).closest('.bulk-row'));
      recalcTotals();
    });

    // Cash type change → toggle bank
    $row.find('.js-cash-type').off('change').on('change', function () {
      toggleBank($(this).closest('.bulk-row'));
    });

    // Remove row
    $row.find('.js-remove-row').off('click').on('click', function () {
      if ($('#bulk-rows .bulk-row').length > 1) {
        $(this).closest('.bulk-row').remove();
        renumberLines();
        recalcTotals();
      }
    });

    // Keyboard navigation
    $row.find('.bulk-field').off('keydown.nav').on('keydown.nav', function (e) {
      // Amount Enter → next row's amount, else new row
      if (e.key === 'Enter' && $(this).hasClass('js-amt')) {
        e.preventDefault();
        const $nextRow = $(this).closest('.bulk-row').next('.bulk-row');
        if ($nextRow.length) {
          $nextRow.find('.js-amt').focus();
        } else {
          $('#btn-add-row').click();
          $('#bulk-rows .bulk-row').last().find('.js-vend-id').focus();
        }
        return;
      }
      if (e.key === 'Enter') {
        e.preventDefault();
        const $fields = $('#bulk-rows .bulk-row .bulk-field');
        const idx = $fields.index(this);
        const next = $fields.get(idx + 1);
        if (next) next.focus();
        return;
      }
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        const $r = $(this).closest('.bulk-row');
        const colIdx = $r.find('.bulk-field').index(this);
        const $next = $r.next('.bulk-row');
        if ($next.length) $next.find('.bulk-field').eq(colIdx).focus();
        return;
      }
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        const $r = $(this).closest('.bulk-row');
        const colIdx = $r.find('.bulk-field').index(this);
        const $prev = $r.prev('.bulk-row');
        if ($prev.length) $prev.find('.bulk-field').eq(colIdx).focus();
        return;
      }
    });

    initSelect2($row);
    toggleBank($row);
    recalcRow($row);
  }

  // ════════════════════════════════════════════════════
  // INIT EXISTING ROWS
  // ════════════════════════════════════════════════════
  $('#bulk-rows .bulk-row').each(function () { initRowEvents($(this)); });
  recalcTotals();

  // Auto-open first empty row's vendor select
  setTimeout(function () {
    const $firstRow = $('#bulk-rows .bulk-row').first();
    if ($firstRow.length) {
      const $vid = $firstRow.find('.js-vend-id');
      if (!($vid.val() || '').trim()) {
        $firstRow.find('.js-vend-select').select2('open');
        setTimeout(function () {
          const f = document.querySelector('.select2-container--open .select2-search__field');
          if (f) f.focus();
        }, 50);
      }
    }
  }, 300);

  // ════════════════════════════════════════════════════
  // ADD ROW
  // ════════════════════════════════════════════════════
  $('#btn-add-row').on('click', function () {
    const lineNum = $('#bulk-rows .bulk-row').length + 1;
    const $row = createRow(lineNum);
    $('#bulk-rows').append($row);
    initRowEvents($row);
    recalcTotals();
    $row.find('.js-vend-id').focus();
  });

  // ════════════════════════════════════════════════════
  // SHORTCUTS
  // ════════════════════════════════════════════════════
  $(document).on('keydown', function (e) {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
      e.preventDefault();
      $('#bulk-form').submit();
    }
  });

  $('#bulk-form').on('keydown', function (e) {
    if (e.key === 'Enter' && !$(e.target).is('textarea') && !$(e.target).is('.select2-search__field')) {
      e.preventDefault();
    }
  });

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