{# templates/petrol/daily_entry.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Petrol Daily Entry{% endblock %}

{% block stylesheets %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-4-theme@1.0.0/dist/select2-bootstrap-4.min.css" rel="stylesheet" />
<style>
:root {
  --pt-primary: #01478f; --pt-success: #1b7a3a; --pt-danger: #c0392b;
  --pt-warning: #e67e22; --pt-gray: #6c757d; --pt-light: #f5f6fa; --pt-border: #dee2e6;
}
* { box-sizing:border-box; }
body { overflow-x:hidden; }
.pt-wrap { max-width:1100px; margin:0 auto; padding:10px 12px 30px; }
.pt-bar { background:#fff; border-radius:6px; padding:8px 14px; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,0.06); display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.pt-bar .fg { display:flex; flex-direction:column; }
.pt-bar label { font-size:0.68rem; font-weight:700; color:var(--pt-gray); text-transform:uppercase; margin-bottom:1px; }
.pt-bar .form-control, .pt-bar .custom-select { height:34px; font-size:0.82rem; border-radius:4px; }
.pt-bar .btn { height:34px; font-size:0.82rem; padding:0 14px; border-radius:4px; }
.pt-section { background:#fff; border-radius:6px; padding:0; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,0.06); overflow:hidden; }
.pt-section-head { padding:8px 14px; font-weight:700; font-size:0.85rem; display:flex; justify-content:space-between; align-items:center; background:#f8f9fb; border-bottom:2px solid #eaedf2; }
.pt-section-head.blue { color:var(--pt-primary); border-bottom-color:#b8cfe6; }
.pt-section-head.green { color:var(--pt-success); border-bottom-color:#b5dcc3; }
.pt-section-head.red { color:var(--pt-danger); border-bottom-color:#e8c4c0; }
.pt-section-head.orange { color:var(--pt-warning); border-bottom-color:#f0d5b5; }
.pt-section-head .btn { font-size:0.72rem; padding:2px 10px; border-radius:3px; }
.pt-table { width:100%; border-collapse:collapse; margin:0; }
.pt-table th { background:#f5f6f8; font-size:0.66rem; font-weight:700; text-transform:uppercase; padding:6px 8px; color:#666; border-bottom:1px solid #ddd; }
.pt-table td { padding:4px 6px; border-bottom:1px solid #f0f0f0; vertical-align:middle; font-size:0.82rem; }
.pt-table .form-control { height:30px; font-size:0.82rem; padding:2px 6px; border-radius:3px; }
.pt-table .form-control[readonly] { background:#f8f9fa; color:#555; }
.pt-table .form-control.num-input { text-align:right; font-weight:600; }
.pt-table .nz-name { font-weight:700; color:#333; }
.pt-table .nz-product { font-size:0.72rem; color:#888; }
.pt-table .amount-col { font-weight:700; color:var(--pt-primary); text-align:right; }
.pt-table .del-row-btn { width:24px; height:24px; border:none; border-radius:3px; background:#ffe5e5; color:var(--pt-danger); font-size:0.7rem; cursor:pointer; }
.pt-table .del-row-btn:hover { background:#fcc; }
.pt-table .select2-container--bootstrap4 .select2-selection--single { height:30px !important; font-size:0.8rem !important; }
.pt-table .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height:26px !important; }
.pt-table .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height:28px !important; }
.pt-banks { background:#f8f9fa; border-radius:4px; padding:8px 10px; margin-top:8px; }
.banks-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.banks-header strong { font-size:0.78rem; color:#555; }
.btn-add-bank { font-size:0.72rem; padding:2px 10px; }
.bank-rows { max-height:100px; overflow-y:auto; }
.bank-row { display:flex; gap:5px; margin-bottom:5px; align-items:center; }
.bank-row select { flex:1; height:30px; font-size:0.8rem; padding:0 6px; border-radius:3px; }
.bank-row input { width:100px; height:30px; font-size:0.8rem; text-align:right; padding:0 6px; border-radius:3px; }
.bank-row .btn-del-bank { width:28px; height:28px; border:none; border-radius:3px; background:#ffe5e5; color:var(--pt-danger); font-size:0.7rem; padding:0; cursor:pointer; }
.bank-total { text-align:right; font-size:0.82rem; font-weight:700; color:var(--pt-primary); margin-top:3px; }
.pt-summary { background:#fff; border-radius:6px; padding:10px 14px; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,0.06); }
.summary-grid { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.summary-item { display:flex; align-items:center; gap:6px; }
.summary-item label { font-size:0.7rem; font-weight:700; color:#666; text-transform:uppercase; margin:0; white-space:nowrap; }
.summary-item .val { min-width:100px; padding:5px 10px; border-radius:4px; font-weight:700; font-size:0.95rem; text-align:right; }
.summary-item .val.sale { background:#e7f1ff; color:var(--pt-primary); }
.summary-item .val.credit { background:#fff3e0; color:var(--pt-warning); }
.summary-item .val.expense { background:#fce4ec; color:var(--pt-danger); }
.summary-item .val.net { background:var(--pt-primary); color:#fff; font-size:1.1rem; min-width:130px; }
.pt-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.pt-actions .btn { height:40px; min-width:130px; font-size:0.88rem; font-weight:700; border-radius:4px; }
.pt-loading { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; z-index:9999; }
.pt-loading.hidden { display:none; }
@media (max-width:768px) {
  .pt-wrap { padding:6px; }
  .summary-grid { flex-direction:column; align-items:stretch; }
  .summary-item .val { min-width:auto; flex:1; }
}
</style>
{% endblock %}

{% block content %}
<div class="pt-loading hidden" id="ptLoading">
  <div class="spinner-border text-primary" style="width:2.5rem;height:2.5rem;"></div>
</div>

<div class="pt-wrap">
  <!-- HEADER BAR -->
  <div class="pt-bar">
    <div class="fg">
      <label>Invoice #</label>
      <input type="text" id="pt_invoice_no" class="form-control" style="width:90px;" readonly value="---">
    </div>
    <div class="fg">
      <label>Date</label>
      <input type="date" id="pt_date" class="form-control" style="width:150px;" value="{{ today }}">
    </div>
    <div class="fg" style="flex:1;">
      <label>Remarks</label>
      <input type="text" id="pt_remarks" class="form-control" placeholder="Remarks...">
    </div>
    <div class="fg">
      <a href="{% url 'petrol:daily_list' %}" class="btn btn-outline-secondary"><i class="fas fa-list mr-1"></i>List</a>
    </div>
    <div class="fg">
      <a href="{% url 'petrol:nozzle_list' %}" class="btn btn-outline-primary"><i class="fas fa-gas-pump mr-1"></i>Nozzles</a>
    </div>
  </div>

  <!-- NOZZLE READINGS -->
  <div class="pt-section">
    <div class="pt-section-head blue">
      <span><i class="fas fa-tachometer-alt mr-2"></i>Nozzle Readings</span>
    </div>
    <table class="pt-table" id="nozzleTable">
      <thead>
        <tr>
          <th>Nozzle</th>
          <th style="width:100px;">Opening</th>
          <th style="width:100px;">Closing</th>
          <th style="width:80px;">Testing</th>
          <th style="width:90px;">Liters</th>
          <th style="width:90px;">Rate</th>
          <th style="width:110px;">Amount</th>
        </tr>
      </thead>
      <tbody id="nozzleBody">
        <tr><td colspan="7" class="text-center text-muted py-3">Loading nozzles...</td></tr>
      </tbody>
      <tfoot>
        <tr style="background:#f5f6f8;">
          <td colspan="4" style="text-align:right;font-weight:700;font-size:0.82rem;">Total Nozzle Sale:</td>
          <td class="amount-col" id="totalLiters">0</td>
          <td></td>
          <td class="amount-col" id="totalNozzleAmt">0</td>
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- CUSTOMER CREDIT -->
  <div class="pt-section">
    <div class="pt-section-head green">
      <span><i class="fas fa-users mr-2"></i>Customer Credit Sales</span>
      <button class="btn btn-sm btn-outline-secondary" id="btnAddCust"><i class="fas fa-plus mr-1"></i>Add</button>
    </div>
    <table class="pt-table" id="custTable">
      <thead>
        <tr>
          <th style="width:230px;">Customer</th>
          <th style="width:160px;">Nozzle / Product</th>
          <th style="width:90px;">Qty (L)</th>
          <th style="width:90px;">Rate</th>
          <th style="width:110px;">Amount</th>
          <th style="width:30px;"></th>
        </tr>
      </thead>
      <tbody id="custBody"></tbody>
      <tfoot>
        <tr style="background:#f5f6f8;">
          <td colspan="4" style="text-align:right;font-weight:700;font-size:0.82rem;">Total Customer Credit:</td>
          <td class="amount-col" id="totalCustAmt">0</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- EXPENSES -->
  <div class="pt-section">
    <div class="pt-section-head red">
      <span><i class="fas fa-receipt mr-2"></i>Expenses</span>
      <button class="btn btn-sm btn-outline-secondary" id="btnAddExp"><i class="fas fa-plus mr-1"></i>Add</button>
    </div>
    <table class="pt-table" id="expTable">
      <thead>
        <tr>
          <th style="width:230px;">Expense Name</th>
          <th>Description</th>
          <th style="width:110px;">Amount</th>
          <th style="width:30px;"></th>
        </tr>
      </thead>
      <tbody id="expBody"></tbody>
      <tfoot>
        <tr style="background:#f5f6f8;">
          <td colspan="2" style="text-align:right;font-weight:700;font-size:0.82rem;">Total Expenses:</td>
          <td class="amount-col" id="totalExpAmt">0</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>

  <!-- SUMMARY + BANK PAYMENTS -->
  <div class="pt-summary">
    <div class="d-flex flex-wrap" style="gap:14px;">
      <div style="flex:1; min-width:300px;">
        <div class="summary-grid">
          <div class="summary-item">
            <label>Total Sale</label>
            <div class="val sale" id="sumSale">0</div>
          </div>
          <div class="summary-item">
            <label>- Credit</label>
            <div class="val credit" id="sumCredit">0</div>
          </div>
          <div class="summary-item">
            <label>- Expenses</label>
            <div class="val expense" id="sumExpense">0</div>
          </div>
          <div class="summary-item">
            <label>= Net Cash</label>
            <div class="val net" id="sumNet">0</div>
          </div>
        </div>
      </div>

      <div style="flex:0 0 340px;">
        <div class="pt-banks">
          <div class="banks-header">
            <strong><i class="fas fa-university mr-1"></i>Bank Payments / Settlement</strong>
            <button type="button" class="btn btn-sm btn-outline-primary btn-add-bank" id="btnAddBank">
              <i class="fas fa-plus"></i>
            </button>
          </div>
          <div class="bank-rows" id="bankPaymentsContainer"></div>
          <div class="bank-total">Received: <span id="totalReceived">0</span></div>
        </div>
      </div>
    </div>

    <div class="pt-actions">
      <button class="btn btn-success" id="btnSave"><i class="fas fa-save mr-1"></i>Save Entry</button>
      {% if is_edit_mode %}
      <button class="btn btn-danger" id="btnDelete"><i class="fas fa-trash mr-1"></i>Delete</button>
      <a href="{% url 'petrol:daily_print' invoice_no %}" target="_blank" class="btn btn-outline-secondary">
        <i class="fas fa-print mr-1"></i>Print
      </a>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
(function(){
  'use strict';

  const API = {
    nozzles:   "{% url 'petrol:api_nozzles' %}",
    save:      "{% url 'petrol:api_daily_save' %}",
    customers: "{% url 'petrol:api_customers' %}",
    expenses:  "{% url 'transactions:expense_autocomplete' %}",
    {% if is_edit_mode %}
    getEntry:    "{% url 'petrol:api_daily_get' invoice_no %}",
    deleteEntry: "{% url 'petrol:api_daily_delete' invoice_no %}",
    {% endif %}
  };

  const isEdit    = {{ is_edit_mode|yesno:"true,false" }};
  const editInvNo = {{ invoice_no|default:0 }};

  let nozzleData = [];
  let custRowIdx = 0;
  let expRowIdx  = 0;

  const bankAccounts = [
    {% for b in bank_accounts %}
    { id: {{ b.t_id }}, name: "{{ b.name|escapejs }}" },
    {% endfor %}
  ];

  function csrf()     { return '{{ csrf_token }}'; }
  function showLoad() { $('#ptLoading').removeClass('hidden'); }
  function hideLoad() { $('#ptLoading').addClass('hidden'); }
  function fmt(n)    { return Number(n||0).toLocaleString(undefined,{minimumFractionDigits:0,maximumFractionDigits:0}); }
  function fmtDec(n) { return Number(n||0).toLocaleString(undefined,{minimumFractionDigits:1,maximumFractionDigits:1}); }
  function parseNum(s){ return +(String(s||0).replace(/,/g,'')) || 0; }

  // ============================================
  // NOZZLE READINGS
  // ============================================
  function loadNozzles(callback) {
    var dt = $('#pt_date').val();
    var params = {date: dt};
    if (isEdit) params.exclude_invoice = editInvNo;
    $.getJSON(API.nozzles, params).done(function(r) {
      if (!r.ok) return;
      nozzleData = r.nozzles;
      renderNozzleRows();
      if (callback) callback();
    });
  }

  function renderNozzleRows() {
    var html = '';
    nozzleData.forEach(function(nz) {
      html += '<tr data-nozzle-id="'+nz.id+'">'
        + '<td><div class="nz-name">'+nz.name+'</div><div class="nz-product">'+nz.product_name+'</div></td>'
        + '<td><input type="number" class="form-control num-input nz-opening" value="'+nz.opening.toFixed(1)+'" readonly tabindex="-1"></td>'
        + '<td><input type="number" class="form-control num-input nz-closing" value="'+nz.opening.toFixed(1)+'" step="0.1" min="0"></td>'
        + '<td><input type="number" class="form-control num-input nz-testing" value="0" step="0.1" min="0"></td>'
        + '<td><input type="text"   class="form-control num-input nz-qty"     value="0.0" readonly tabindex="-1"></td>'
        + '<td><input type="number" class="form-control num-input nz-rate"    value="'+nz.rate.toFixed(2)+'" step="0.01" min="0"></td>'
        + '<td><input type="text"   class="form-control num-input nz-amount"  value="0" readonly tabindex="-1" style="font-weight:700;color:var(--pt-primary);"></td>'
        + '</tr>';
    });
    if (!nozzleData.length)
      html = '<tr><td colspan="7" class="text-center text-muted py-3">No active nozzles found.</td></tr>';
    $('#nozzleBody').html(html);
  }

  $(document).on('input change', '.nz-closing, .nz-testing, .nz-rate', function(){
    var $tr     = $(this).closest('tr');
    var opening = +$tr.find('.nz-opening').val() || 0;
    var closing = +$tr.find('.nz-closing').val() || 0;
    var testing = +$tr.find('.nz-testing').val() || 0;
    var rate    = +$tr.find('.nz-rate').val()    || 0;
    var qty     = closing - opening - testing;
    var amount  = qty * rate;
    $tr.find('.nz-qty').val(qty.toFixed(1));
    $tr.find('.nz-amount').val(fmt(amount));
    recalcAll();
  });

  $('#pt_date').on('change', function(){ loadNozzles(); });

  // ============================================
  // CUSTOMER CREDIT ROWS
  // ============================================
  function nozzleOptions(selectedId) {
    var h = '<option value="">--</option>';
    nozzleData.forEach(function(nz) {
      h += '<option value="'+nz.id+'" data-rate="'+nz.rate+'" '+(nz.id==selectedId?'selected':'')+'>'+nz.name+'</option>';
    });
    return h;
  }

  // CHANGED: added autoOpen param (true for new blank rows, false when loading data)
  function addCustRow(custId, custName, nozzleId, qty, rate, amount, autoOpen) {
    if (autoOpen === undefined) autoOpen = !custId; // open select2 only for new empty rows
    custRowIdx++;
    var rid = 'cr_' + custRowIdx;
    var html = '<tr data-row="'+rid+'">'
      + '<td><select class="form-control cust-select" id="sel_'+rid+'" style="width:100%;"></select></td>'
      + '<td><select class="form-control cust-nozzle" data-row="'+rid+'">'+nozzleOptions(nozzleId)+'</select></td>'
      + '<td><input type="number" class="form-control num-input cust-qty"    value="'+(qty||0)+'" step="0.1" min="0"></td>'
      + '<td><input type="number" class="form-control num-input cust-rate"   value="'+(rate||0)+'" step="0.01" min="0"></td>'
      + '<td><input type="text"   class="form-control num-input cust-amount" value="'+(amount?fmt(amount):'0')+'" readonly tabindex="-1" style="font-weight:700;"></td>'
      + '<td><button class="del-row-btn" onclick="$(this).closest(\'tr\').remove();recalcAll();"><i class="fas fa-times"></i></button></td>'
      + '</tr>';
    $('#custBody').append(html);

    $('#sel_'+rid).select2({
      theme: 'bootstrap4',
      ajax: {
        url: API.customers, dataType: 'json', delay: 250,
        data: function(p){ return {q: p.term||''}; },
        processResults: function(data){ return {results: data}; },
        cache: true
      },
      minimumInputLength: 1,
      placeholder: 'Search customer...',
      allowClear: true
    });

    if (custId && custName) {
      var opt = new Option(custName, custId, true, true);
      $('#sel_'+rid).append(opt).trigger('change');
    }

    // CHANGED: after customer selected via select2 → move focus to nozzle dropdown
    $('#sel_'+rid).on('select2:select', function(){
      setTimeout(function(){
        $('#custBody tr[data-row="'+rid+'"] .cust-nozzle').focus();
      }, 80);
    });

    // Auto-rate from nozzle
    $('#custBody tr[data-row="'+rid+'"]').find('.cust-nozzle').on('change', function(){
      var r = $(this).find(':selected').data('rate') || 0;
      $(this).closest('tr').find('.cust-rate').val(r);
      calcCustRow($(this).closest('tr'));
    });

    // CHANGED: open select2 only for new blank rows
    if (autoOpen) {
      setTimeout(function(){ $('#sel_'+rid).select2('open'); }, 100);
    }
  }

  $('#btnAddCust').on('click', function(){ addCustRow(); });

  $(document).on('input change', '.cust-qty, .cust-rate', function(){
    calcCustRow($(this).closest('tr'));
  });

  function calcCustRow($tr) {
    var q = +$tr.find('.cust-qty').val()  || 0;
    var r = +$tr.find('.cust-rate').val() || 0;
    $tr.find('.cust-amount').val(fmt(q * r));
    recalcAll();
  }

  // CHANGED: nozzle dropdown Enter → qty
  $(document).on('keydown', '.cust-nozzle', function(e){
    if (e.which !== 13) return;
    e.preventDefault();
    $(this).closest('tr').find('.cust-qty').focus().select();
  });

  // CHANGED: qty Enter → rate
  $(document).on('keydown', '.cust-qty', function(e){
    if (e.which !== 13) return;
    e.preventDefault();
    $(this).closest('tr').find('.cust-rate').focus().select();
  });

  // CHANGED: rate Enter → add new customer row
  $(document).on('keydown', '.cust-rate', function(e){
    if (e.which !== 13) return;
    e.preventDefault();
    addCustRow();
  });

  // ============================================
  // EXPENSE ROWS
  // ============================================
  // CHANGED: added autoOpen param
  function addExpRow(name, desc, amount, autoOpen) {
    if (autoOpen === undefined) autoOpen = !name; // open select2 only for new empty rows
    expRowIdx++;
    var rid = 'er_' + expRowIdx;
    var html = '<tr data-row="'+rid+'">'
      + '<td><select class="form-control exp-select" id="expsel_'+rid+'" style="width:100%;"></select></td>'
      + '<td><input type="text"   class="form-control exp-desc"   value="'+(desc||'')+'" placeholder="Description..."></td>'
      + '<td><input type="number" class="form-control num-input exp-amount" value="'+(amount||0)+'" step="0.01" min="0"></td>'
      + '<td><button class="del-row-btn" onclick="$(this).closest(\'tr\').remove();recalcAll();"><i class="fas fa-times"></i></button></td>'
      + '</tr>';
    $('#expBody').append(html);

    $('#expsel_'+rid).select2({
      theme: 'bootstrap4',
      ajax: {
        url: API.expenses, dataType: 'json', delay: 250,
        data: function(p){ return {q: p.term||''}; },
        processResults: function(data){ return {results: data}; },
        cache: true
      },
      minimumInputLength: 0,
      placeholder: 'Search or type expense...',
      allowClear: true,
      tags: true,
      createTag: function(params) {
        var term = $.trim(params.term);
        if (term === '') return null;
        return { id: term, text: term, newTag: true };
      }
    });

    if (name) {
      var opt = new Option(name, name, true, true);
      $('#expsel_'+rid).append(opt).trigger('change');
    }

    // CHANGED: open select2 only for new blank rows
    if (autoOpen) {
      setTimeout(function(){ $('#expsel_'+rid).select2('open'); }, 100);
    }
  }

  $('#btnAddExp').on('click', function(){ addExpRow(); });

  $(document).on('input change', '.exp-amount', function(){ recalcAll(); });

  // CHANGED: Enter on exp-amount → new expense row with select2 open
  $(document).on('keydown', '.exp-amount', function(e){
    if (e.which !== 13) return;
    e.preventDefault();
    addExpRow(); // autoOpen defaults to true for blank row
  });

  // ============================================
  // BANK PAYMENTS
  // ============================================
  function bankOptions(selectedId) {
    var opts = '<option value="">-- Bank --</option>';
    bankAccounts.forEach(function(b) {
      opts += '<option value="'+b.id+'" '+(b.id==selectedId?'selected':'')+'>'+b.name+'</option>';
    });
    return opts;
  }

  // CHANGED: auto-select first bank if no bankId provided; amount auto-fill handled by recalcAll
  function addBankRow(bankId, amount) {
    var defaultBankId = bankId || (bankAccounts.length ? bankAccounts[0].id : '');
    var html = '<div class="bank-row">'
      + '<select class="form-control bank-select">'+bankOptions(defaultBankId)+'</select>'
      + '<input type="number" class="form-control bank-amount" placeholder="Amount" value="'+(amount!=null&&amount!==''?amount:'')+'" min="0">'
      + '<button type="button" class="btn-del-bank" onclick="$(this).closest(\'.bank-row\').remove();recalcAll();"><i class="fas fa-times"></i></button>'
      + '</div>';
    $('#bankPaymentsContainer').append(html);
  }

  $('#btnAddBank').on('click', function(){
    addBankRow();
    recalcAll(); // will set first bank remainder
  });

  $(document).on('input change', '.bank-amount, .bank-select', recalcBankTotal);

  function recalcBankTotal() {
    var total = 0;
    $('.bank-amount').each(function() { total += +$(this).val() || 0; });
    $('#totalReceived').text(fmt(total));
  }

  function collectBankPayments() {
    var pays = [];
    $('.bank-row').each(function() {
      var bid = +$(this).find('.bank-select').val() || 0;
      var amt = +$(this).find('.bank-amount').val() || 0;
      if (bid && amt > 0) pays.push({ bank_id: bid, amount: amt });
    });
    return pays;
  }

  $(document).on('keydown', '.bank-amount', function(e){
    if (e.which !== 13) return;
    e.preventDefault();
    addBankRow();
    recalcAll();
    setTimeout(function(){ $('.bank-row:last .bank-select').focus(); }, 50);
  });

  // ============================================
  // RECALC ALL
  // ============================================
  function recalcAll() {
    var totalLiters = 0, totalNozzle = 0;
    $('#nozzleBody tr').each(function(){
      totalLiters += +($(this).find('.nz-qty').val())                          || 0;
      totalNozzle += parseNum($(this).find('.nz-amount').val());
    });
    $('#totalLiters').text(fmtDec(totalLiters));
    $('#totalNozzleAmt').text(fmt(totalNozzle));

    var totalCust = 0;
    $('#custBody tr').each(function(){
      totalCust += parseNum($(this).find('.cust-amount').val());
    });
    $('#totalCustAmt').text(fmt(totalCust));

    var totalExp = 0;
    $('#expBody tr').each(function(){
      totalExp += +($(this).find('.exp-amount').val()) || 0;
    });
    $('#totalExpAmt').text(fmt(totalExp));

    var net = totalNozzle - totalCust - totalExp;
    $('#sumSale').text(fmt(totalNozzle));
    $('#sumCredit').text(fmt(totalCust));
    $('#sumExpense').text(fmt(totalExp));
    $('#sumNet').text(fmt(net));

    // CHANGED: auto-set first bank row amount = net minus sum of all other bank rows
    var $bankRows = $('.bank-row');
    if ($bankRows.length > 0) {
      var otherBanksTotal = 0;
      $bankRows.slice(1).each(function(){
        otherBanksTotal += +$(this).find('.bank-amount').val() || 0;
      });
      var remaining = net - otherBanksTotal;
      $bankRows.first().find('.bank-amount').val(remaining > 0 ? remaining.toFixed(2) : 0);
    }

    recalcBankTotal();
  }

  window.recalcAll = recalcAll;

  // ============================================
  // SAVE
  // ============================================
  $('#btnSave').on('click', function(){
    var readings = [];
    var hasError = false;

    $('#nozzleBody tr').each(function(){
      var nid = $(this).data('nozzle-id');
      if (!nid) return;
      var opening = +($(this).find('.nz-opening').val()) || 0;
      var closing = +($(this).find('.nz-closing').val()) || 0;
      if (closing < opening) {
        var name = $(this).find('.nz-name').text().trim();
        Swal.fire('Error','Closing ('+closing+') cannot be less than Opening ('+opening+') for "'+name+'"','error');
        $(this).find('.nz-closing').focus().select();
        hasError = true;
        return false;
      }
      readings.push({
        nozzle_id: nid,
        opening:   opening,
        closing:   closing,
        testing:   +($(this).find('.nz-testing').val()) || 0,
        rate:      +($(this).find('.nz-rate').val())    || 0,
      });
    });
    if (hasError) return;

    var hasData = readings.some(function(r){ return r.closing > r.opening; });
    if (!hasData) {
      Swal.fire('Error','Enter at least one closing reading greater than opening.','error');
      return;
    }

    var cust_lines = [];
    $('#custBody tr').each(function(){
      var cid  = +$(this).find('.cust-select').val() || 0;
      var nid  = +$(this).find('.cust-nozzle').val() || 0;
      var qty  = +($(this).find('.cust-qty').val())  || 0;
      var rate = +($(this).find('.cust-rate').val()) || 0;
      if (cid && qty > 0) {
        cust_lines.push({
          customer_id:   cid,
          customer_name: $(this).find('.cust-select option:selected').text(),
          nozzle_id:     nid,
          qty:           qty,
          rate:          rate,
          amount:        qty * rate,
        });
      }
    });

    var exp_lines = [];
    $('#expBody tr').each(function(){
      var $sel    = $(this).find('.exp-select');
      var selData = $sel.select2('data');
      var name    = (selData && selData.length) ? selData[0].text : '';
      var desc    = $(this).find('.exp-desc').val().trim();
      var amt     = +($(this).find('.exp-amount').val()) || 0;
      if (name && amt > 0) {
        exp_lines.push({ expense_name: name, description: desc, amount: amt });
      }
    });

    // CHANGED: validate bank total == net cash; if not, auto-adjust first bank
    var netCash = parseNum($('#sumNet').text());
    var bankPayments = collectBankPayments();
    var bankTotal = bankPayments.reduce(function(s, p){ return s + p.amount; }, 0);

    if (Math.abs(bankTotal - netCash) > 0.01) {
      // Put remaining amount into first bank row
      var $firstRow = $('.bank-row:first');
      var firstAmt  = +$firstRow.find('.bank-amount').val() || 0;
      var adjusted  = firstAmt + (netCash - bankTotal);
      $firstRow.find('.bank-amount').val(adjusted > 0 ? adjusted.toFixed(2) : 0);
      recalcBankTotal();
      bankPayments = collectBankPayments(); // re-collect after adjustment
    }

    var payload = {
      invoice_no:     isEdit ? editInvNo : 0,
      entry_date:     $('#pt_date').val(),
      bank_id:        0,
      remarks:        $('#pt_remarks').val() || '',
      readings:       readings,
      customer_lines: cust_lines,
      expense_lines:  exp_lines,
      bank_payments:  bankPayments,
    };

    showLoad();
    $.ajax({
      url:         API.save,
      type:        'POST',
      contentType: 'application/json',
      headers:     {'X-CSRFToken': csrf()},
      data:        JSON.stringify(payload),
      success: function(r) {
        hideLoad();
        if (r.ok) {
          Swal.fire({icon:'success', title:'Saved!', text:r.message, timer:1500, showConfirmButton:false})
            .then(function(){
              if (isEdit) location.reload();
              else window.location.href = "{% url 'petrol:daily_list' %}";
            });
        } else {
          Swal.fire('Error', r.error||'Failed', 'error');
        }
      },
      error: function(xhr){
        hideLoad();
        Swal.fire('Error', (xhr.responseJSON&&xhr.responseJSON.error)||'Server error', 'error');
      }
    });
  });

  // ============================================
  // DELETE
  // ============================================
  {% if is_edit_mode %}
  $('#btnDelete').on('click', function(){
    Swal.fire({
      title: 'Delete Entry #{{ invoice_no }}?',
      text: 'All ledger entries will be reversed.',
      icon: 'warning',
      showCancelButton:     true,
      confirmButtonColor:   '#dc3545',
      confirmButtonText:    'Delete'
    }).then(function(r){
      if (!r.isConfirmed) return;
      showLoad();
      $.ajax({
        url:     API.deleteEntry,
        type:    'POST',
        headers: {'X-CSRFToken': csrf()},
        success: function(r){
          hideLoad();
          if (r.ok) {
            Swal.fire({icon:'success', title:'Deleted!', timer:1200, showConfirmButton:false})
              .then(function(){ window.location.href="{% url 'petrol:daily_list' %}"; });
          } else {
            Swal.fire('Error', r.error, 'error');
          }
        },
        error: function(){ hideLoad(); Swal.fire('Error','Server error','error'); }
      });
    });
  });
  {% endif %}

  // ============================================
  // LOAD INVOICE (EDIT MODE)
  // ============================================
  function loadEntry() {
    if (!isEdit) return;
    showLoad();
    $.getJSON(API.getEntry).done(function(r){
      hideLoad();
      if (!r.ok) { Swal.fire('Error', r.error, 'error'); return; }
      var e = r.entry;
      $('#pt_invoice_no').val(e.invoice_no);
      $('#pt_date').val(e.entry_date);
      $('#pt_remarks').val(e.remarks);
      loadNozzles(function(){
        e.readings.forEach(function(rd){
          var $tr = $('#nozzleBody tr[data-nozzle-id="'+rd.nozzle_id+'"]');
          if (!$tr.length) return;
          $tr.find('.nz-opening').val(rd.opening.toFixed(1));
          $tr.find('.nz-closing').val(rd.closing.toFixed(1));
          $tr.find('.nz-testing').val(rd.testing.toFixed(1));
          $tr.find('.nz-qty').val(rd.qty.toFixed(1));
          $tr.find('.nz-rate').val(rd.rate.toFixed(2));
          $tr.find('.nz-amount').val(fmt(rd.amount));
        });
        // CHANGED: pass autoOpen=false so select2 doesn't pop on load
        e.customer_lines.forEach(function(cl){
          addCustRow(cl.customer_id, cl.customer_name, cl.nozzle_id, cl.qty, cl.rate, cl.amount, false);
        });
        e.expense_lines.forEach(function(el){
          addExpRow(el.expense_name, el.description, el.amount, false);
        });
        $('#bankPaymentsContainer').empty();
        if (e.bank_payments && e.bank_payments.length) {
          e.bank_payments.forEach(function(bp){ addBankRow(bp.bank_id, bp.amount); });
        } else {
          addBankRow();
        }
        recalcBankTotal();
        recalcAll();
      });
    }).fail(function(){
      hideLoad();
      Swal.fire('Error','Failed to load','error');
    });
  }

  // ============================================
  // KEYBOARD NAVIGATION (generic for nozzle table)
  // ============================================
  $(document).on('keydown',
    '.pt-table input:not([readonly]):not([tabindex="-1"]), .pt-bar input, .pt-bar select',
    function(e){
      if (e.which !== 13) return;
      // These are handled by their own specific handlers above
      if ($(this).hasClass('cust-qty') || $(this).hasClass('cust-rate') ||
          $(this).hasClass('exp-amount') || $(this).hasClass('bank-amount')) return;
      e.preventDefault();
      var allInputs = $('.pt-wrap').find(
        'input:visible:not([readonly]):not([tabindex="-1"]), select:visible:not([tabindex="-1"])'
      );
      var idx = allInputs.index(this);
      if (idx >= 0 && idx < allInputs.length - 1) {
        allInputs.eq(idx + 1).focus().select();
      }
    }
  );

  // ============================================
  // INIT
  // ============================================
  $(function(){
    if (isEdit) {
      loadEntry();
    } else {
      loadNozzles(function(){
        $('#pt_invoice_no').val('New');
        // CHANGED: add default 1 customer row and 1 expense row
        addCustRow();
        addExpRow();
        addBankRow();
        recalcAll();
        setTimeout(function(){
          $('#nozzleBody tr:first .nz-closing').focus().select();
        }, 300);
      });
    }
  });

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