{% extends "pos/base.html" %}
{% load static %}
{% block title %}{{ is_edit|yesno:"Edit Payout,New Payout" }}{% endblock %}
{% block stylesheets %}

{% endblock %}
{% block heading %}{{ is_edit|yesno:"Edit Payout,New Payout" }}{% endblock %}
{% block content %}
<form method="post">
  {% csrf_token %}
  <div class="row mb-3">
    <div class="col-md-6">
      <label>Debitor</label>
      <select id="debitor_select" name="debitor_name" class="form-control" style="width:100%">
        {% if payment %}<option value="{{payment.name}}" selected>{{payment.party_descp}}</option>{% endif %}
      </select>
    </div>
    <div class="col-md-3">
      <label>Balance</label>
      <input id="debitor_balance" class="form-control" readonly value="{{payment.previous_balance|floatformat:2}}">
    </div>
    <div class="col-md-3">
      <label>Amount to Pay</label>
      <input type="number" step="0.01" name="paid_amount" class="form-control" value="{{payment.total_amount|default_if_none:''}}">
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-md-3"><label>Date</label><input type="date" name="trx_date" class="form-control" value="{{payment.transaction_date|default:today}}"></div>
    <div class="col-md-3">
      <label>Payment Type</label>
      <select id="cash_type" name="cash_type" class="form-control">
        <option value="Bank"   {% if payment and payment.bank_id and not payment.cheque_no %}selected{% endif %}>Bank</option>
        <option value="Cheque" {% if payment and payment.cheque_no %}selected{% endif %}>Cheque</option>
      </select>
    </div>
    <div class="col-md-3" id="bank_field">
      <label>Bank Account</label>
      <select name="bank_name" class="form-control">
        {% for b in bank_accounts %}
          <option value="{{b.t_id}}" {% if payment and payment.bank_id == b.t_id %}selected{% endif %}>{{b.name}}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-3">
      <label>Handled By</label>
      <select name="saleman_operator" class="form-control">
        <option value="">-- 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>
  <div class="row mb-3" id="cheque_fields">
    <div class="col-md-4"><label>Cheque #</label><input name="cheque_no" class="form-control" value="{{payment.cheque_no|default:''}}"></div>
    <div class="col-md-4"><label>Cheque Date</label><input type="date" name="cheque_date" class="form-control" value="{{payment.cheque_date|default:''}}"></div>
    <div class="col-md-4"><label>Description</label><input name="description" class="form-control" value="{{payment.bill_title_descp|default:''}}"></div>
  </div>

  <button class="btn btn-primary"> {{ is_edit|yesno:"Update,Save" }} </button>
  <a href="{% url 'transactions:debitor_payout_list' %}" class="btn btn-secondary">Cancel</a>
</form>
{% endblock %}
{% block javascripts %}

<script>
  function getCookie(n){
    let v = null;
    document.cookie.split(';').forEach(c => {
      let [k, val] = c.trim().split('=');
      if (k === n) v = decodeURIComponent(val);
    });
    return v;
  }

  $.ajaxSetup({
    beforeSend(xhr, settings) {
      if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
        xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
      }
    }
  });

  $(function(){
    const $debitor = $('#debitor_select');

    // 1) Initialize Select2
    $debitor.select2({
      placeholder: 'Search debitor…',
      allowClear: true,
      minimumInputLength: 1,
      ajax: {
        url: '{% url "transactions:get_debitors" %}',
        type: 'POST',
        data: params => ({ term: params.term }),
        processResults: d => ({ results: d.results })
      }
    });

    // 2) Auto-open Select2 on load
    setTimeout(() => {
      $debitor.select2('open');
      setTimeout(() => {
        document.querySelector('.select2-container--open .select2-search__field').focus();
      }, 0);
    }, 200);

    // 3) On Debitor select → show balance + focus on paid_amount
    $debitor.on('select2:select', e => {
      const tid = e.params.data.id;
      $.getJSON("{% url 'transactions:get_debitor_balance' %}", { debitor_id: tid })
        .done(d => $('#debitor_balance').val(parseFloat(d.balance).toFixed(2)));
      $('input[name="paid_amount"]').focus();
    });

    // 4) Enter on amount → focus on description
    $('input[name="paid_amount"]').on('keydown', function(e){
      if (e.key === 'Enter') {
        e.preventDefault();
        $('input[name="description"]').focus();
      }
    });

    // 5) Enter on Select2 → focus paid_amount
    $(document).on('keydown', '.select2-search__field', function(e){
      if (e.key === 'Enter') {
        e.preventDefault();
        setTimeout(() => {
          $('input[name="paid_amount"]').focus();
        }, 100);
      }
    });

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

    // 7) Prevent Enter from submitting form accidentally
    $('form').on('keydown', function(e){
      if (e.key === 'Enter' &&
          !$(e.target).is('textarea') &&
          !$(e.target).is('.select2-search__field')) {
        e.preventDefault();
      }
    });


    const today = new Date().toISOString().split("T")[0];
    const $trxDate = $('#trx_date');

    if (!$trxDate.val()) $trxDate.val(today);


    // 8) Toggle Bank / Cheque fields
    function toggleFields() {
      const t = $('#cash_type').val();
      if (t === 'Bank') {
        $('#bank_field').show();
        $('#cheque_fields').hide();
      } else if (t === 'Cheque') {
        $('#bank_field').show();
        $('#cheque_fields').show();
      } else {
        $('#bank_field, #cheque_fields').hide();
      }
    }
    $('#cash_type').change(toggleFields);
    toggleFields();
  });
</script>

{% endblock %}