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

{% block title %}{{ is_edit|yesno:"Edit,New" }} Vendor Settlement{% endblock %}
{% block heading %}{{ is_edit|yesno:"Edit,New" }} Vendor Settlement{% endblock %}

{% block stylesheets %}
  <!-- Select2 CSS -->

{% endblock %}

{% block content %}
<form method="post" id="vendor-settlement-form">
  {% csrf_token %}
  <input type="hidden" name="action" id="form-action" value="save">
  <div class="row mb-3">
    <!-- Vendor Select -->
    <div class="col-md-6">
      <label for="vendor_select">Vendor</label>
      <select id="vendor_select" name="vendor_name" class="form-control" style="width:100%">
        {% if payment %}
          <option value="{{ payment.name }}" selected>{{ payment.party_descp }}</option>
        {% endif %}
      </select>
    </div>

    <!-- Current Balance -->
    <div class="col-md-3">
      <label for="vendor_balance">Current Balance</label>
      <input type="text" id="vendor_balance" class="form-control" readonly
             value="{% if payment %}{{ payment.previous_balance|floatformat:2 }}{% endif %}">
    </div>

    <!-- Adjusted Amount -->
    <div class="col-md-3">
      <label for="paid_amount">Adjusted Amount</label>
      <input
        type="number"
        step="0.01"
        min="0.01"
        id="paid_amount"
        name="received_amount"
        value="{% if is_edit %}{{ payment_abs_amount|default_if_none:'' }}{% else %}{{ payment.amount_transaction|default_if_none:'' }}{% endif %}"
        required
        class="form-control">
      <small class="text-muted">Positive amount will reduce vendor ledger.</small>
    </div>
  </div>

  <div class="row mb-3">
    <!-- Date -->
    <div class="col-md-3">
      <label for="trx_date">Date</label>
      <input type="date" id="trx_date" name="trx_date" class="form-control"
             value="{{ payment.transaction_date|default:today }}">
    </div>

    <!-- Settlement Type (+) -->
    <div class="col-md-4">
      <label class="d-flex align-items-center">
        <span>Settlement Type</span>
        <a href="{% url 'products:settlements_add' %}" class="btn btn-sm btn-outline-secondary ml-2" title="Add new type">+</a>
      </label>
      <select id="settlement_t_id" name="settlement_t_id" class="form-control" required>
        <option value="">-- Select Type --</option>
        {% for s in settlement_types %}
          <option value="{{ s.t_id }}"
            {% if meta and meta.settlement_t_id == s.t_id %}selected{% endif %}>
            {{ s.name }}
          </option>
        {% endfor %}
      </select>
    </div>

    <!-- Description -->
    <div class="col-md-5">
      <label for="description">Description</label>
      <input type="text" id="description" name="description" class="form-control"
             value="{{ payment.bill_title_descp|default:'Vendor Balance Adjustment' }}">
    </div>
  </div>

  <div class="row mb-3">
    <!-- Handled By -->
    <div class="col-md-3">
      <label for="saleman_operator">Handled By</label>
      <select id="saleman_operator" name="saleman_operator" class="form-control">
        <option value="">-- Select Salesman --</option>
        {% for s in salemen %}
          <option value="{{ s.t_id }}"
            {% if payment and payment.saleman_name == s.t_id %}selected{% endif %}>
            {{ s.name }}
          </option>
        {% endfor %}
      </select>
    </div>
  </div>

  <button type="submit"
          class="btn btn-success"
          onclick="document.getElementById('form-action').value='save';">
    {{ is_edit|yesno:"Update,Save" }}
  </button>

  <button type="submit"
          class="btn btn-dark"
          onclick="document.getElementById('form-action').value='save_share';">
    Save &amp; Share
  </button>

  <a href="{% url 'transactions:vendor_settlement_list' %}" class="btn btn-secondary">
    Cancel
  </a>

</form>
{% endblock %}

{% block javascripts %}

<script>
  function getCookie(name) {
    let cookieValue = null;
    document.cookie.split(';').forEach(c => {
      let [k,v] = c.trim().split('=');
      if (k === name) cookieValue = decodeURIComponent(v);
    });
    return cookieValue;
  }
  $.ajaxSetup({
    beforeSend: function(xhr, settings) {
      if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
        xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
      }
    }
  });

  $(function(){
    const $vendorSelect = $('#vendor_select');

    // Select2: vendor search (same endpoint you already use)
    $vendorSelect.select2({
      placeholder: 'Search vendor…',
      allowClear: true,
      minimumInputLength: 1,
      ajax: {
        url: '{% url "purchases:get_vendors" %}',
        type: 'POST',
        data: params => ({ term: params.term }),
        processResults: data => ({ results: data.results })
      }
    });

    // Auto open and focus on Select2
    setTimeout(() => {
      $vendorSelect.select2('open');
      setTimeout(() => {
        const f = document.querySelector('.select2-container--open .select2-search__field');
        if (f) f.focus();
      }, 0);
    }, 200);

    // On vendor select → show balance + focus on amount
    $vendorSelect.on('select2:select', function(e){
      let tid = e.params.data.id;
      $.getJSON("{% url 'transactions:get_vendor_balance' %}", { vendor_id: tid })
        .done(data => {
          $('#vendor_balance').val(parseFloat(data.balance || 0).toFixed(2));
        });
      $('#paid_amount').focus();
    });

    // Amount field Enter → Description
    $('#paid_amount').on('keydown', function(e){
      if(e.key === 'Enter'){
        e.preventDefault();
        $('#description').focus();
      }
    });

    // Select2 search field Enter → Amount
    $(document).on('keydown', '.select2-search__field', function(e){
      if(e.key === 'Enter'){
        e.preventDefault();
        setTimeout(() => {
          $('#paid_amount').focus();
        }, 100);
      }
    });

    // Ctrl + S → Submit Form
    $(document).on('keydown', function(e){
      if((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's'){
        e.preventDefault();
        $('#vendor-settlement-form').submit();
      }
    });

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

    // Default Date = today if empty
    const today = new Date().toISOString().split("T")[0];
    const $trxDate = $('#trx_date');
    if (!$trxDate.val()) $trxDate.val(today);
  });
</script>
{% endblock %}