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

{% block title %}{% if mode == "add" %}New Journal Voucher{% else %}Edit Journal Voucher{% endif %}{% endblock %}
{% block heading %}{% if mode == "add" %}New Journal Voucher{% else %}Edit — {{ txn.voucher_no }}{% endif %}{% endblock %}

{% block content %}
<div class="card shadow">
  <div class="card-body">
    <form method="post" id="jvForm">
      {% csrf_token %}

      <div class="form-row">
        <div class="form-group col-md-3">
          <label>Voucher Date <span class="text-danger">*</span></label>
          <input type="date" name="voucher_date" class="form-control"
                 value="{{ txn.voucher_date|default:today|date:'Y-m-d' }}" required>
        </div>
        <div class="form-group col-md-3">
          <label>Reference No</label>
          <input type="text" name="reference_no" class="form-control" value="{{ txn.reference_no|default:'' }}">
        </div>
        <div class="form-group col-md-6">
          <label>Description / Narration</label>
          <input type="text" name="description" class="form-control" value="{{ txn.description|default:'' }}">
        </div>
      </div>

      <hr>
      <h6>Entry Lines <small class="text-muted">(Total Debit must equal Total Credit)</small></h6>
      <p class="text-muted small mb-2">
        Party select karte hi Account field automatically us party ke linked COA account par lock ho jata hai —
        manually account choose karne ki zaroorat nahi.
      </p>

      <table class="table table-bordered" id="jvLinesTable">
        <thead class="thead-light">
          <tr>
            <th style="width:28%">Account</th>
            <th style="width:20%">Party (optional)</th>
            <th style="width:20%">Narration</th>
            <th style="width:12%">Debit</th>
            <th style="width:12%">Credit</th>
            <th style="width:8%"></th>
          </tr>
        </thead>
        <tbody id="jvLinesBody">
          <!-- rows injected by JS -->
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3" class="text-right"><strong>Totals:</strong></td>
            <td><strong id="totalDebit">0.00</strong></td>
            <td><strong id="totalCredit">0.00</strong></td>
            <td></td>
          </tr>
        </tfoot>
      </table>

      <button type="button" class="btn btn-sm btn-outline-secondary mb-3" id="addLineBtn">+ Add Line</button>
      <div id="balanceWarning" class="alert alert-danger" style="display:none;">
        Debit and Credit totals do not match!
      </div>
      <div id="noAccountWarning" class="alert alert-warning" style="display:none;">
        Kuch party-selected lines mein linked account nahi mil raha — pehle us Party ko edit karke
        Linked Account set karein.
      </div>

      <div>
        <button type="submit" class="btn btn-secondary" id="jvSubmitBtn">
          {% if mode == "add" %}Post Voucher{% else %}Save Changes{% endif %}
        </button>
        <a href="{% url 'coa:jv_list' %}" class="btn btn-light">Cancel</a>
      </div>
    </form>
  </div>
</div>

<!-- Hidden template row -->
<template id="jvRowTemplate">
  <tr>
    <td>
      <select name="account_id[]" class="form-control select2-account-row"></select>
      <input type="hidden" name="account_locked_hint[]" class="account-locked-flag" value="0">
    </td>
    <td><select name="party_id[]" class="form-control select2-party-row"><option value="">—</option></select></td>
    <td><input type="text" name="line_narration[]" class="form-control"></td>
    <td><input type="number" step="0.01" name="debit[]" class="form-control line-debit" value="0"></td>
    <td><input type="number" step="0.01" name="credit[]" class="form-control line-credit" value="0"></td>
    <td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-line">&times;</button></td>
  </tr>
</template>
{% endblock %}

{% block javascripts %}
<script>
$(document).ready(function(){

  function lockAccountToParty(row, accountId, accountText) {
    const $accountSelect = row.find('.select2-account-row');
    $accountSelect.empty();
    if (accountId) {
      const opt = new Option(accountText, accountId, true, true);
      $accountSelect.append(opt).trigger('change');
    }
    $accountSelect.prop('disabled', true);
    row.find('.account-locked-flag').val('1');
  }

  function unlockAccount(row) {
    const $accountSelect = row.find('.select2-account-row');
    $accountSelect.prop('disabled', false);
    $accountSelect.val(null).trigger('change');
    row.find('.account-locked-flag').val('0');
  }

  function initRowSelect2(row) {
    row.find('.select2-account-row').select2({
      width: '100%',
      ajax: {
        url: "{% url 'coa:ajax_account_search' %}",
        dataType: 'json',
        delay: 250,
        data: function (params) { return { q: params.term, leaf_only: 1 }; },
        processResults: function (data) { return { results: data.results }; }
      },
      minimumInputLength: 0
    });

    row.find('.select2-party-row').select2({
      width: '100%',
      ajax: {
        url: "{% url 'coa:ajax_party_search' %}",
        dataType: 'json',
        delay: 250,
        data: function (params) { return { q: params.term }; },
        processResults: function (data) { return { results: data.results }; }
      },
      minimumInputLength: 1,
      allowClear: true,
      placeholder: '—'
    });

    // Whenever a party is picked/cleared on this row, lock/unlock the account field.
    row.find('.select2-party-row').on('select2:select', function (e) {
      const data = e.params.data;
      if (data && data.linked_account_id) {
        lockAccountToParty(row, data.linked_account_id, data.linked_account_text);
      } else if (data) {
        // Party selected but has no linked account — block this line.
        unlockAccount(row);
        row.find('.select2-account-row').val(null).trigger('change');
        $('#noAccountWarning').show();
        alert('Party "' + data.text + '" ka COA account link nahi hai.\nPehle Party edit karke Linked Account set karein.');
        row.find('.select2-party-row').val(null).trigger('change');
      }
    });

    row.find('.select2-party-row').on('select2:clear', function () {
      unlockAccount(row);
    });
  }

  function addLine() {
    const tpl = document.getElementById('jvRowTemplate');
    const clone = document.importNode(tpl.content, true);
    const $row = $(clone.querySelector('tr'));
    $('#jvLinesBody').append($row);
    initRowSelect2($row);
    return $row;
  }

  function recalcTotals() {
    let dr = 0, cr = 0;
    $('.line-debit').each(function(){ dr += parseFloat($(this).val() || 0); });
    $('.line-credit').each(function(){ cr += parseFloat($(this).val() || 0); });
    $('#totalDebit').text(dr.toFixed(2));
    $('#totalCredit').text(cr.toFixed(2));
    if (Math.abs(dr - cr) > 0.001) {
      $('#balanceWarning').show();
    } else {
      $('#balanceWarning').hide();
    }
  }

  $('#addLineBtn').on('click', function(){ addLine(); });

  $(document).on('input', '.line-debit, .line-credit', recalcTotals);

  $(document).on('click', '.remove-line', function(){
    $(this).closest('tr').remove();
    recalcTotals();
  });

  // Mutually exclusive: if debit entered, clear credit and vice versa
  $(document).on('input', '.line-debit', function(){
    if (parseFloat($(this).val()) > 0) {
      $(this).closest('tr').find('.line-credit').val(0);
    }
  });
  $(document).on('input', '.line-credit', function(){
    if (parseFloat($(this).val()) > 0) {
      $(this).closest('tr').find('.line-debit').val(0);
    }
  });

  {% if mode == "edit" %}
    // Pre-fill existing lines. If a line has a party, lock its account field
    // to the account that line is actually saved against (which, going forward,
    // will always equal party.linked_account thanks to the backend fix).
    const existingLines = [
      {% for line in existing_lines %}
      {
        account_id: {{ line.account.id }},
        account_text: "{{ line.account.code }} — {{ line.account.name|escapejs }}",
        party_id: {% if line.party %}{{ line.party.id }}{% else %}null{% endif %},
        party_text: "{% if line.party %}{{ line.party.name|escapejs }}{% endif %}",
        narration: "{{ line.narration|escapejs }}",
        debit: {{ line.debit }},
        credit: {{ line.credit }}
      },
      {% endfor %}
    ];

    existingLines.forEach(function(line){
      const $row = addLine();
      const accOption = new Option(line.account_text, line.account_id, true, true);
      $row.find('.select2-account-row').append(accOption).trigger('change');

      if (line.party_id) {
        const partyOption = new Option(line.party_text, line.party_id, true, true);
        $row.find('.select2-party-row').append(partyOption).trigger('change');
        // Lock the account field since this line belongs to a party.
        $row.find('.select2-account-row').prop('disabled', true);
        $row.find('.account-locked-flag').val('1');
      }
      $row.find('input[name="line_narration[]"]').val(line.narration);
      $row.find('.line-debit').val(line.debit);
      $row.find('.line-credit').val(line.credit);
    });
    recalcTotals();
  {% else %}
    addLine();
    addLine();
  {% endif %}

  $('#jvForm').on('submit', function(e){
    let dr = 0, cr = 0;
    $('.line-debit').each(function(){ dr += parseFloat($(this).val() || 0); });
    $('.line-credit').each(function(){ cr += parseFloat($(this).val() || 0); });
    if (Math.abs(dr - cr) > 0.001) {
      e.preventDefault();
      alert('Debit and Credit totals must be equal before saving.');
      return;
    }

    // Re-enable any disabled selects right before submit — disabled fields
    // are NOT sent in form POST data, and we need account_id[] present
    // (the backend will ignore it anyway for party lines and use the
    // party's linked_account, but we still want a value submitted in case
    // a row somehow has no party — better safe than a missing index).
    $('.select2-account-row:disabled').prop('disabled', false);
  });

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