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

{% block stylesheets %}


<style>
  #expenseTable .select2-container,
  #pendingControls .select2-container {
    width: 100% !important;
  }

  /* Pending box professional look */
  #pendingControls {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: .75rem 1rem;
  }

  /* Inline radio spacing */
  .bp-radio-row label {
    margin-right: 18px;
    margin-bottom: 0;
    font-weight: 500;
  }

  /* Make select2 match bootstrap input height */
  .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .75rem + 2px) !important;
  }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .75rem) !important;
  }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .75rem + 2px) !important;
  }
</style>

<style>
  /* Make all Select2 boxes inside expense table take full cell width only */
  #expenseTable .select2-container {
    width: 100% !important;
  }
</style>

{% endblock %}

{% block content %}
<h1>{% if is_edit %}Edit{% else %}New{% endif %} Expense Invoice</h1>

<form method="post" id="expenseForm">
  {% csrf_token %}
  <input type="hidden" name="contract_id"
         value="{{ contract_id|default:'0' }}">

  <div class="form-row align-items-end">
    <div class="form-group col-md-3">
      <label for="invoice_date">Date</label>
      <input type="date" class="form-control" id="invoice_date" name="invoice_date"
             value="{{ invoice.transaction_date|default:today|date:'Y-m-d' }}">
    </div>

    <div class="form-group col-md-3">
      <label for="invoice_no">Invoice No</label>
      <input type="text" readonly class="form-control" id="invoice_no"
             name="invoice_no" value="{{ next_invoice }}">
    </div>

    <div class="form-group col-md-3">
      <label for="department_id">Department</label>
      <select class="form-control" id="department_id" name="department_id">
        {% for dept in departments %}
          <option value="{{ dept.t_id }}"
            {% if invoice and invoice.company_id == dept.t_id %}selected{% endif %}>
            {{ dept.name }}
          </option>
        {% endfor %}
      </select>
    </div>

    <div class="form-group col-md-3">
      <label for="bank_id">Bank</label>
      <select class="form-control" id="bank_id" name="bank_id">
        {% for bank in banks %}
          <option value="{{ bank.t_id }}"
            {% if invoice and invoice.bank_id == bank.t_id %}
              selected
            {% elif not invoice and forloop.first %}
              selected
            {% endif %}>
            {{ bank.name }}
          </option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-4">
      <label>Expense Type</label>
      <div class="bp-radio-row">
        <label>
          <input type="radio" name="expense_type" value="cash"
                 {% if expense_type != "pending" %}checked{% endif %}> Cash Expense
        </label>
        <label>
          <input type="radio" name="expense_type" value="pending"
                 {% if expense_type == "pending" %}checked{% endif %}> Pending (Credit) Expense
        </label>
      </div>
    </div>

    <div class="col-md-8">
      <div id="pendingControls" style="{% if expense_type != 'pending' %}display:none;{% endif %}">
        <div class="form-row">
          <div class="form-group col-md-4 mb-0">
            <label class="mb-1">Pending To</label>
            <div class="bp-radio-row">
              <label>
                <input type="radio" name="pending_to" value="customer"
                       {% if pending_to != "debitor" %}checked{% endif %}> Customer
              </label>
              <label>
                <input type="radio" name="pending_to" value="debitor"
                       {% if pending_to == "debitor" %}checked{% endif %}> Debitor
              </label>
            </div>
          </div>

          <div class="form-group col-md-8 mb-0">
            <label for="pending_party_select" class="mb-1">Pending Party</label>
            <select id="pending_party_select" name="pending_party_id" class="form-control" style="width:100%">
              {% if is_edit and party_old_id %}
                <option value="{{ party_old_id }}" selected>{{ party_old_text }}</option>
              {% endif %}
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>



  <table class="table table-bordered" id="expenseTable">
    <thead>
      <tr>
        <th>Action</th><th>ID</th><th>Expense Name</th><th>Description</th>
        <th>
          Expense Type
          <span style="cursor:help; color:#6c757d; font-size:.8em; margin-left:3px;"
                title="Profit Expense: A standard operational cost included in profit &amp; loss calculations.&#10;&#10;Non-Profit Expense: A cost already captured in a purchase invoice&#39;s builty/transport charges that has not yet been settled — excluded from profit calculations to prevent double-counting.">ⓘ</span>
        </th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      {% if lines %}
        {% for line in lines %}
        <tr>
          <td><button type="button" class="btn btn-sm btn-danger remove-row">&times;</button></td>
          <td><input type="hidden" name="rows[{{ forloop.counter0 }}][id]" value="{{ line.t_id }}"></td>
          <td>
            <select class="form-control expense-name"
                    name="rows[{{ forloop.counter0 }}][expense_name]">
              <option selected>{{ line.expense_name }}</option>
            </select>
          </td>
          <td>
            <input type="text" class="form-control description-input"
                   name="rows[{{ forloop.counter0 }}][description]"
                   value="{{ line.description }}">
          </td>
          <td>
            <select class="form-select form-select-sm"
                    name="rows[{{ forloop.counter0 }}][non_profit_expense]">
              <option value="0" {% if not line.non_profit_expense %}selected{% endif %}>Profit Expense</option>
              <option value="1" {% if line.non_profit_expense %}selected{% endif %}>Non-Profit Expense</option>
            </select>
          </td>
          <td>
            <input type="number" step="0.01" class="form-control amount-input"
                   name="rows[{{ forloop.counter0 }}][amount]"
                   value="{{ line.amount }}">
          </td>
        </tr>
        {% endfor %}
      {% else %}
        <tr>
          <td><button type="button" class="btn btn-sm btn-danger remove-row">&times;</button></td>
          <td><input type="hidden" name="rows[0][id]"></td>
          <td><select class="form-control expense-name" name="rows[0][expense_name]"></select></td>
          <td><input type="text" class="form-control description-input" name="rows[0][description]"></td>
          <td>
            <select class="form-select form-select-sm" name="rows[0][non_profit_expense]">
              <option value="0">Profit Expense</option>
              <option value="1">Non-Profit Expense</option>
            </select>
          </td>
          <td><input type="number" step="0.01" class="form-control amount-input" name="rows[0][amount]"></td>
        </tr>
      {% endif %}
    </tbody>
  </table>

  <div class="form-row">
    <div class="form-group col-md-3">
      <label>Grand Total</label>
      <input type="text" readonly class="form-control" id="grand_total" value="0">
    </div>
    <div class="form-group col-md-3">
      <label>Received</label>
      <input type="text" class="form-control" id="received" name="received" value="0">
    </div>
    <div class="form-group col-md-3">
      <label>Remaining</label>
      <input type="text" readonly class="form-control" id="remaining" value="0">
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Save</button>
</form>
{% endblock %}




{% block javascripts %}

  <script>
    // CSRF Setup
    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 $expenseType = $('input[name="expense_type"]');
    const $pendingTo   = $('input[name="pending_to"]');
    const $pendingBox  = $('#pendingControls');
    const $partySel    = $('#pending_party_select');

    function partyUrl() {
      const t = ($('input[name="pending_to"]:checked').val() || 'customer');
      return (t === 'debitor')
        ? "{% url 'transactions:debitor_autocomplete' %}"
        : "{% url 'transactions:customer_autocomplete' %}";
    }

    function initPartySelect() {
      // destroy if already initialized
      if ($partySel.hasClass("select2-hidden-accessible")) {
        $partySel.select2("destroy");
      }

      $partySel.select2({
        placeholder: "Search...",
        allowClear: true,
        minimumInputLength: 1,
        ajax: {
          url: partyUrl(),
          dataType: "json",
          delay: 250,
          data: params => ({ q: params.term }),
          processResults: data => ({ results: data }),
          cache: true
        }
      });
    }

    function setPendingUI() {
      const et = ($('input[name="expense_type"]:checked').val() || 'cash');
      // if (et === 'pending') {
      if (et !== 'cash') {
        $pendingBox.show();
        initPartySelect();
        $('#received').prop('readonly', false);
      } else {
        $pendingBox.hide();
        // clear party select
        if ($partySel.hasClass("select2-hidden-accessible")) {
          $partySel.val(null).trigger("change");
        }
        $('#received').prop('readonly', true);
      }
      recalcTotals();
    }

    const isEdit = {{ is_edit|yesno:"true,false" }};

    function recalcTotals(){
      let total = 0;
      $('.amount-input').each(function(){
        total += parseFloat($(this).val()) || 0;
      });

      $('#grand_total').val(total.toFixed(2));

      const et = ($('input[name="expense_type"]:checked').val() || 'cash');

      if (et === 'cash') {
        $('#received').val(total.toFixed(2));
        $('#remaining').val("0.00");
      } else {
        let rec = parseFloat($('#received').val()) || 0;
        if (rec > total) rec = total;
        $('#received').val(rec.toFixed(2));
        $('#remaining').val((total - rec).toFixed(2));
      }
    }

    // events
    $expenseType.on('change', setPendingUI);
    $pendingTo.on('change', function(){
      initPartySelect();
      $partySel.val(null).trigger("change");
    });

    $('#expenseTable').on('input','.amount-input', recalcTotals);
    $('#received').on('input', recalcTotals);

    // submit validation
    $('#expenseForm').on('submit', function(e){
      const et = ($('input[name="expense_type"]:checked').val() || 'cash');
      const total = parseFloat($('#grand_total').val()) || 0;
      const rec   = parseFloat($('#received').val()) || 0;

      if (et === 'pending') {
        const party = $partySel.val();
        if (!party) {
          e.preventDefault();
          alert('Pending party is required for Pending Expense.');
          $partySel.select2('open');
          return;
        }
        if (rec >= total) {
          e.preventDefault();
          alert('For Pending Expense, Received must be less than Grand Total.');
          return;
        }
      }
    });

    // init
    setPendingUI();


    function renumberRows() {
      $('#expenseTable tbody tr').each(function(rowIndex){
        $(this).find('input[name^="rows["], select[name^="rows["]').each(function(){
          const oldName = $(this).attr('name');    // e.g. rows[3][amount]
          if (!oldName) return;

          const match = oldName.match(/\]\[(.+)\]$/);  // "amount", "description", "id", ...
          if (!match) return;

          const field = match[1];
          $(this).attr('name', `rows[${rowIndex}][${field}]`);
        });
      });
    }


    function initExpenseSelect($select) {
      $select.select2({
        theme: 'bootstrap4',
        placeholder: 'Select or enter expense name',
        tags: true,
        tokenSeparators: [','],
        minimumInputLength: 1,
        ajax: {
          url: "{% url 'transactions:expense_autocomplete' %}",
          dataType: 'json',
          delay: 250,
          data: params => ({ q: params.term }),
          processResults: data => ({ results: data }),
          cache: true
        },
        createTag: params => ({ id: params.term, text: params.term, newTag: true })
      })
      .on('select2:open', function(){
        setTimeout(()=>{
          document
            .querySelector('.select2-container--open .select2-search__field')
            .focus();
        }, 0);
      });
    }

    function openAndFocus($sel) {
      $sel.select2('open');
      setTimeout(()=>{
        document
          .querySelector('.select2-container--open .select2-search__field')
          .focus();
      }, 0);
    }

    // Initialize existing Select2s
    $('#expenseTable .expense-name').each(function(){
      initExpenseSelect($(this));
    });

    // On load, open & focus first
    const $firstRow = $('#expenseTable tbody tr').first();
    if ($firstRow.length) {
      openAndFocus($firstRow.find('.expense-name'));
    }

    // After select or close, go to description
    $(document).on('select2:select select2:close', '.expense-name', function(){
      $(this).closest('tr').find('.description-input').focus();
    });

    // Handle ENTER in table (navigation & new-row)
    $('#expenseTable').on('keydown','input,select', function(e){
      if(e.key==='Enter'){
        e.preventDefault();
        const $cells = $(this).closest('tr').find('td');
        const idx    = $cells.index($(this).closest('td'));
        const $next  = $cells.eq(idx+1).find('input,select');
        if($next.length){
          $next.focus();
        } else {
          // add new row
          const idxRow = $('#expenseTable tbody tr').length;
          const $tr = $(`
            <tr>
              <td>
                <button type="button" class="btn btn-sm btn-danger remove-row">&times;</button>
              </td>
              <td><input type="hidden" name="rows[${idxRow}][id]"></td>
              <td>
                <select class="form-control expense-name"
                        name="rows[${idxRow}][expense_name]"></select>
              </td>
              <td>
                <input type="text" class="form-control description-input"
                       name="rows[${idxRow}][description]">
              </td>
              <td>
                <select class="form-select form-select-sm"
                        name="rows[${idxRow}][non_profit_expense]">
                  <option value="0">Profit Expense</option>
                  <option value="1">Non-Profit Expense</option>
                </select>
              </td>
              <td>
                <input type="number" step="0.01" class="form-control amount-input"
                       name="rows[${idxRow}][amount]">
              </td>
            </tr>`);
          $('#expenseTable tbody').append($tr);

          // IMPORTANT: make sure all indices are continuous
          renumberRows();

          const $newSel = $tr.find('.expense-name');
          initExpenseSelect($newSel);
          openAndFocus($newSel);

        }
      }
    });

    // const isEdit = {{ is_edit|yesno:"true,false" }};
    // const originalReceived = parseFloat('{{ invoice.amount_transaction|default:"0" }}') || 0;
    // Recalc totals correctly using .val()
    // function recalcTotals(){
    //   let total = 0;
    //   $('.amount-input').each(function(){
    //     total += parseFloat($(this).val()) || 0;
    //   });
    //   $('#grand_total').val(total.toFixed(2));

    //   if (isEdit) {
    //     // In edit: keep the original received, don’t override
    //     $('#received').val(originalReceived.toFixed(2));
    //   } else {
    //     // In create: default received = grand total
    //     $('#received').val(total.toFixed(2));
    //   }

    //   $('#remaining').val(
    //     (total - parseFloat($('#received').val() || 0)).toFixed(2)
    //   );
    // }


    // Bind recalc on amount change
    $('#expenseTable').on('input','.amount-input', recalcTotals);

    // Remove row but leave at least one
    $('#expenseTable').on('click', '.remove-row', function(){
      if ($('#expenseTable tbody tr').length > 1) {
        $(this).closest('tr').remove();
        renumberRows();   // indices fix karo
        recalcTotals();   // totals dobara calculate
      }
    });


    recalcTotals();

    const today = "{{ today|date:'Y-m-d' }}";
    const $trxDate = $('#invoice_date');

    if (!$trxDate.val() && today) {
        $trxDate.val(today);
    }

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



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