{% extends "pos/base.html" %}
{% block title %}Create Purchase Order{% endblock %}

{% block stylesheets %}
<style>
  .po-filter-label { font-weight:500; font-size:.8rem; color:#5c6470; margin-bottom:.25rem; display:block; }
  .po-empty-state { text-align:center; color:#9aa1ac; font-size:.85rem; padding:1.5rem 1rem; }
  #poLinesTable td, #poSuggestTable td { vertical-align: middle; }
  .badge-source { background-color:#2d5f8a; color:#fff; font-weight:500; font-size:.65rem; }
</style>
{% endblock %}

{% block heading %}Create Purchase Order{% endblock %}

{% block content %}

<div class="card shadow-sm mb-3">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Filters &amp; Suggestions</h6>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-3 mb-2">
        <label class="po-filter-label">Vendor (scopes companies below)</label>
        <select id="poFilterVendor" class="form-control" style="width:100%;"></select>
      </div>
      <div class="col-md-4 mb-2">
        <label class="po-filter-label">Company</label>
        <select id="poFilterCompany" class="form-control" multiple style="width:100%;"></select>
      </div>
      <div class="col-md-3 mb-2">
        <label class="po-filter-label">Category</label>
        <select id="poFilterCategory" class="form-control" multiple style="width:100%;"></select>
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-auto mb-2">
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" name="poSuggestMode" id="poModeNone" value="" checked>
          <label class="form-check-label" for="poModeNone">None</label>
        </div>
      </div>
      <div class="col-auto mb-2">
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" name="poSuggestMode" id="poModeReorder" value="reorder_level">
          <label class="form-check-label" for="poModeReorder">Reorder Level</label>
        </div>
      </div>
      <div class="col-auto mb-2">
        <div class="form-check form-check-inline">
          <input type="radio" class="form-check-input" name="poSuggestMode" id="poModeForecast" value="sales_forecast">
          <label class="form-check-label" for="poModeForecast">Sales Forecast</label>
        </div>
      </div>
      <div class="col-auto mb-2" id="poDateRangeWrap" style="display:none;">
        <div class="d-flex">
          <input type="date" id="poDateFrom" class="form-control form-control-sm mr-1">
          <input type="date" id="poDateTo" class="form-control form-control-sm">
        </div>
      </div>
      <div class="col mb-2 text-right">
        <button type="button" id="poLoadSuggestionsBtn" class="btn btn-primary btn-sm" style="display:none;">
          <i class="fas fa-magic mr-1"></i> Load Suggestions
        </button>
      </div>
    </div>
  </div>
</div>

<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Purchase Order</h6>
  </div>
  <div class="card-body">
    <div class="row mb-3">
      <div class="col-md-4 mb-2">
        <label class="po-filter-label">PO Vendor <small class="text-muted">(optional — who this is sent to)</small></label>
        <select id="poHeaderVendor" class="form-control" style="width:100%;"></select>
      </div>
      <div class="col-md-3 mb-2">
        <label class="po-filter-label">Date</label>
        <input type="date" id="poHeaderDate" class="form-control">
      </div>
      <div class="col-md-5 mb-2">
        <label class="po-filter-label">Remarks</label>
        <input type="text" id="poHeaderRemarks" class="form-control" placeholder="Optional note for this order">
      </div>
    </div>

    <div class="mb-3">
      <a href="#poMoreDetails" data-toggle="collapse" class="small"><i class="fas fa-sliders-h mr-1"></i>More PO Details (print layout fields)</a>
      <div class="collapse mt-2" id="poMoreDetails">
        <div class="card card-body bg-light">
          <div class="row">
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Order Type</label>
              <input type="text" id="poOrderType" class="form-control form-control-sm" value="General">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Local/Imported</label>
              <input type="text" id="poLocalImported" class="form-control form-control-sm" value="Local">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Term of Payment</label>
              <input type="text" id="poTermOfPayment" class="form-control form-control-sm" placeholder="e.g. Credit">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Currency</label>
              <input type="text" id="poCurrency" class="form-control form-control-sm" value="Pak Rs">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Country</label>
              <input type="text" id="poCountry" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Delivery Terms</label>
              <input type="text" id="poDeliveryTerms" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Credit Terms (Days)</label>
              <input type="number" id="poCreditTermsDays" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Lead Time (Days)</label>
              <input type="number" id="poLeadTimeDays" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Bank Charges</label>
              <input type="text" id="poBankCharges" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Shipment By</label>
              <input type="text" id="poShipmentBy" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Shipping Mode</label>
              <input type="text" id="poShippingMode" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Shipping Term</label>
              <input type="text" id="poShippingTerm" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Actual Vendor <small class="text-muted">(if different)</small></label>
              <input type="text" id="poActualVendor" class="form-control form-control-sm">
            </div>
            <div class="col-md-6 mb-2">
              <label class="po-filter-label">Delivery Address</label>
              <input type="text" id="poDeliveryAddress" class="form-control form-control-sm">
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Posting Status</label>
              <select id="poPostingStatus" class="form-control form-control-sm">
                <option value="unposted" selected>Un-Posted</option>
                <option value="posted">Posted</option>
              </select>
            </div>
            <div class="col-md-3 mb-2">
              <label class="po-filter-label">Approval Status</label>
              <select id="poApprovalStatus" class="form-control form-control-sm">
                <option value="pending" selected>Pending</option>
                <option value="approved">Approved</option>
                <option value="rejected">Rejected</option>
              </select>
            </div>
            <div class="col-md-6 mb-2">
              <label class="po-filter-label">Penalty Clause</label>
              <textarea id="poPenaltyClause" class="form-control form-control-sm" rows="2">1% PENALTY CHARGED IN CASE OF LATE DELIVERY</textarea>
            </div>
            <div class="col-md-6 mb-2">
              <label class="po-filter-label">Special Terms And Condition</label>
              <textarea id="poSpecialTerms" class="form-control form-control-sm" rows="4">1. Include PO/SC Number on every invoice (must match the official Purchase/Service Contract issued).
2. Mention DC Number (Delivery Challan) - must be unique and pre-sequel numbered.
3. Ensure Party Name on the invoice matches exactly with the registered name in our vendor database.
4. Clearly mention valid NTN (if applicable) as per registered tax profile.</textarea>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mb-3">
      <label class="po-filter-label">Add a product</label>
      <select id="poProductSearch" class="form-control" style="width:100%; max-width:420px;"></select>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="poLinesTable">
        <thead>
          <tr>
            <th style="width:36px;">#</th><th>Product</th><th style="width:110px;">Qty</th>
            <th style="width:120px;">Rate</th><th style="width:110px;" class="text-right">Total</th>
            <th>Note</th><th style="width:70px;">Details</th><th style="width:50px;"></th>
          </tr>
        </thead>
        <tbody id="poLinesTbody"></tbody>
        <tfoot>
          <tr>
            <td colspan="4" class="text-right font-weight-bold">Grand Total</td>
            <td class="text-right font-weight-bold" id="poGrandTotal">0.00</td>
            <td colspan="3"></td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div id="poLinesEmpty" class="po-empty-state">
      No items yet — search above to add one, or load suggestions from the filters.
    </div>

    <div class="d-flex justify-content-end mt-3" style="gap:8px;">
      <button type="button" id="poSaveBtn" class="btn btn-success"><i class="fas fa-save mr-1"></i> Save as PO</button>
      <button type="button" id="poPrintBtn" class="btn btn-primary"><i class="fas fa-print mr-1"></i> Print</button>
      <button type="button" id="poExcelBtn" class="btn btn-outline-secondary"><i class="fas fa-file-excel mr-1"></i> Export Excel</button>
    </div>
  </div>
</div>

<!-- Suggestions popup -->
<div class="modal fade" id="poSuggestModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Suggested Items</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="form-check mb-2">
          <input type="checkbox" class="form-check-input" id="poSuggestTickAll" checked>
          <label class="form-check-label" for="poSuggestTickAll">Tick all</label>
        </div>
        <table class="table table-sm table-hover" id="poSuggestTable">
          <thead><tr><th style="width:30px;"></th><th>Product</th><th class="text-right">Current Stock</th><th class="text-right">Required</th></tr></thead>
          <tbody id="poSuggestTbody"></tbody>
        </table>
        <div id="poSuggestEmpty" class="po-empty-state" style="display:none;">Nothing needs reordering with the current filters.</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
        <button type="button" id="poSuggestLoadBtn" class="btn btn-primary">Add Ticked Items</button>
      </div>
    </div>
  </div>
</div>

<!-- Print / Excel options -->
<div class="modal fade" id="poPrintOptionsModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="poPrintOptionsTitle">Print Options</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <label class="po-filter-label">Group by</label>
        <div class="mb-3">
          <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input" name="poGroupBy" id="poGroupNone" value="none" checked>
            <label class="form-check-label" for="poGroupNone">None</label>
          </div>
          <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input" name="poGroupBy" id="poGroupCompany" value="company">
            <label class="form-check-label" for="poGroupCompany">Company</label>
          </div>
          <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input" name="poGroupBy" id="poGroupCategory" value="category">
            <label class="form-check-label" for="poGroupCategory">Category</label>
          </div>
        </div>
        <div id="poPrintSizeWrap">
          <label class="po-filter-label">Print size</label>
          <div class="mb-3">
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="poPrintSize" id="poSize80" value="80mm" checked>
              <label class="form-check-label" for="poSize80">80mm Thermal</label>
            </div>
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="poPrintSize" id="poSizeA4" value="a4">
              <label class="form-check-label" for="poSizeA4">A4</label>
            </div>
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" name="poPrintSize" id="poSizeA5" value="a5">
              <label class="form-check-label" for="poSizeA5">A5</label>
            </div>
          </div>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="poShowPrices" checked>
          <label class="form-check-label" for="poShowPrices">Show purchase price &amp; totals</label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
        <button type="button" id="poPrintOptionsConfirm" class="btn btn-primary">Continue</button>
      </div>
    </div>
  </div>
</div>

<!-- Line item details (print-layout replica fields) -->
<div class="modal fade" id="poLineDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Item Details — <span id="poLineDetailsName"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-3 mb-2"><label class="po-filter-label">Demand#/Gt#</label><input type="text" id="poLdDemandNo" class="form-control form-control-sm"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">Item Code</label><input type="text" id="poLdItemCode" class="form-control form-control-sm"></div>
          <div class="col-md-2 mb-2"><label class="po-filter-label">Size</label><input type="text" id="poLdSize" class="form-control form-control-sm"></div>
          <div class="col-md-2 mb-2"><label class="po-filter-label">Color</label><input type="text" id="poLdColor" class="form-control form-control-sm"></div>
          <div class="col-md-2 mb-2"><label class="po-filter-label">V.Color</label><input type="text" id="poLdVColor" class="form-control form-control-sm"></div>
          <div class="col-md-4 mb-2"><label class="po-filter-label">Remarks</label><input type="text" id="poLdRemarks" class="form-control form-control-sm"></div>
          <div class="col-md-2 mb-2"><label class="po-filter-label">Unit</label><input type="text" id="poLdUnit" class="form-control form-control-sm" placeholder="Nos"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">Del.Freq</label><input type="text" id="poLdDelFreq" class="form-control form-control-sm"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">Freq.Qty</label><input type="number" step="any" id="poLdFreqQty" class="form-control form-control-sm"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">Discount Type</label><input type="text" id="poLdDiscountType" class="form-control form-control-sm" placeholder="%  or  Amount"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">Discount Amount</label><input type="number" step="any" id="poLdDiscountAmount" class="form-control form-control-sm" value="0"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">S.E.D</label><input type="number" step="any" id="poLdSed" class="form-control form-control-sm" value="0"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">Freight</label><input type="number" step="any" id="poLdFreight" class="form-control form-control-sm" value="0"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">Handling</label><input type="number" step="any" id="poLdHandling" class="form-control form-control-sm" value="0"></div>
          <div class="col-md-3 mb-2"><label class="po-filter-label">S.Tax</label><input type="number" step="any" id="poLdSTax" class="form-control form-control-sm" value="0"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
        <button type="button" id="poLineDetailsSave" class="btn btn-primary">Apply</button>
      </div>
    </div>
  </div>
</div>

<form id="poPrintForm" method="post" action="{% url 'purchases:po_print' %}" target="_blank" style="display:none;">
  {% csrf_token %}<input type="hidden" name="payload" id="poPrintPayload">
</form>
<form id="poExcelForm" method="post" action="{% url 'purchases:po_excel_export' %}" style="display:none;">
  {% csrf_token %}<input type="hidden" name="payload" id="poExcelPayload">
</form>

{% endblock %}

{% block javascripts %}
{{ initial_po|json_script:"po-initial-data" }}
<script>
$(function () {
  const _poInitEl = document.getElementById('po-initial-data');
  window._poInitialPo = _poInitEl ? JSON.parse(_poInitEl.textContent) : null;
  const VENDOR_SEARCH_URL       = "{% url 'purchases:vendor_company_vendor_search' %}";
  const COMPANY_SEARCH_URL      = "{% url 'purchases:po_company_search' %}";
  const CATEGORY_SEARCH_URL     = "{% url 'purchases:po_category_search' %}";
  const VENDOR_ATTACHED_URL     = "{% url 'purchases:po_vendor_attached_companies' %}";
  const PRODUCT_SEARCH_URL      = "{% url 'purchases:po_product_search' %}";
  const SUGGESTIONS_URL         = "{% url 'purchases:po_suggestions' %}";
  const SAVE_URL                = "{% url 'purchases:po_save' %}";
  const CSRF_TOKEN              = $('[name=csrfmiddlewaretoken]').val() || '{{ csrf_token }}';

  let poLines = [];

  function esc(s) { return $('<div>').text(s == null ? '' : s).html(); }

  // ── name-merge engine: sum stock, max-stock_limit row wins identity ──
  function mergeByName(rows) {
    const byName = {};
    rows.forEach(r => {
      const key = (r.name || '').trim().toLowerCase();
      if (!byName[key]) byName[key] = { members: [], present_stock: 0, _maxLimit: -1 };
      const g = byName[key];
      g.members.push(r);
      g.present_stock += Number(r.present_stock) || 0;
      if (Number(r.stock_limit) > g._maxLimit) {
        g._maxLimit = Number(r.stock_limit);
        g.stock_limit = Number(r.stock_limit);
        g.prod_id = r.prod_id;
        g.company_id = r.company_id;
        g.category_id = r.category_id;
        g.purchase_price = r.purchase_price;
        g.pieces_per_pack = r.pieces_per_pack;
        g.name = r.name;
      }
    });
    return Object.values(byName);
  }

  // ── manual PO table state ──
  function blankLineDetails() {
    return {
      demand_no: '', item_code_snapshot: '', size: '', color: '', v_color: '',
      line_remarks: '', unit: '', del_freq: '', freq_qty: null,
      discount_type: '', discount_amount: 0, sed: 0, freight: 0, handling: 0, s_tax: 0,
    };
  }

  function addManualRow(g, qty, sourceType) {
    const key = (g.name || '').trim().toLowerCase();
    poLines = poLines.filter(ln => (ln.name || '').trim().toLowerCase() !== key);
    poLines.push(Object.assign({
      prod_id: g.prod_id, product_code: g.prod_id, name: g.name, company_id: g.company_id, category_id: g.category_id,
      qty: qty, purchase_price: g.purchase_price, pieces_per_pack: g.pieces_per_pack,
      note: '', source_type: sourceType,
    }, blankLineDetails()));
    renderPoLinesTable();
  }

  function sourceLabel(s) {
    if (s === 'reorder_level') return 'Reorder';
    if (s === 'sales_forecast') return 'Forecast';
    return '';
  }

  function renderPoLinesTable() {
    const $tbody = $('#poLinesTbody');
    $tbody.empty();
    if (!poLines.length) {
      $('#poLinesEmpty').show(); $('#poLinesTable').hide(); updateGrandTotal(); return;
    }
    $('#poLinesEmpty').hide(); $('#poLinesTable').show();
    poLines.forEach((ln, idx) => {
      const total = (Number(ln.qty) || 0) * (Number(ln.purchase_price) || 0);
      const badge = ln.source_type !== 'manual' ? ' <span class="badge badge-source">' + sourceLabel(ln.source_type) + '</span>' : '';
      $tbody.append(
        '<tr data-idx="' + idx + '">' +
          '<td>' + (idx + 1) + '</td>' +
          '<td>' + esc(ln.name) + badge + '</td>' +
          '<td><input type="number" step="any" class="form-control form-control-sm po-qty-input" value="' + ln.qty + '"></td>' +
          '<td><input type="number" step="any" class="form-control form-control-sm po-price-input" value="' + ln.purchase_price + '"></td>' +
          '<td class="text-right po-line-total">' + total.toFixed(2) + '</td>' +
          '<td><input type="text" class="form-control form-control-sm po-note-input" value="' + esc(ln.note) + '"></td>' +
          '<td class="text-center"><button type="button" class="btn btn-outline-secondary btn-sm po-line-details"><i class="fas fa-list"></i></button></td>' +
          '<td class="text-right"><button type="button" class="btn btn-outline-danger btn-sm po-remove-line"><i class="fas fa-trash"></i></button></td>' +
        '</tr>'
      );
    });
    updateGrandTotal();
  }

  function updateGrandTotal() {
    const total = poLines.reduce((s, ln) => s + (Number(ln.qty) || 0) * (Number(ln.purchase_price) || 0), 0);
    $('#poGrandTotal').text(total.toFixed(2));
  }

  $(document).on('input', '.po-qty-input, .po-price-input', function () {
    const idx = $(this).closest('tr').data('idx');
    poLines[idx].qty = parseFloat($(this).closest('tr').find('.po-qty-input').val()) || 0;
    poLines[idx].purchase_price = parseFloat($(this).closest('tr').find('.po-price-input').val()) || 0;
    const total = poLines[idx].qty * poLines[idx].purchase_price;
    $(this).closest('tr').find('.po-line-total').text(total.toFixed(2));
    updateGrandTotal();
  });
  $(document).on('input', '.po-note-input', function () {
    poLines[$(this).closest('tr').data('idx')].note = $(this).val();
  });
  $(document).on('click', '.po-remove-line', function () {
    poLines.splice($(this).closest('tr').data('idx'), 1);
    renderPoLinesTable();
  });

  // ── per-line "more details" modal ──
  let poLineDetailsIdx = null;
  $(document).on('click', '.po-line-details', function () {
    poLineDetailsIdx = $(this).closest('tr').data('idx');
    const ln = poLines[poLineDetailsIdx];
    $('#poLineDetailsName').text(ln.name || '');
    $('#poLdDemandNo').val(ln.demand_no || '');
    $('#poLdItemCode').val(ln.item_code_snapshot || '');
    $('#poLdSize').val(ln.size || '');
    $('#poLdColor').val(ln.color || '');
    $('#poLdVColor').val(ln.v_color || '');
    $('#poLdRemarks').val(ln.line_remarks || '');
    $('#poLdUnit').val(ln.unit || '');
    $('#poLdDelFreq').val(ln.del_freq || '');
    $('#poLdFreqQty').val(ln.freq_qty || '');
    $('#poLdDiscountType').val(ln.discount_type || '');
    $('#poLdDiscountAmount').val(ln.discount_amount || 0);
    $('#poLdSed').val(ln.sed || 0);
    $('#poLdFreight').val(ln.freight || 0);
    $('#poLdHandling').val(ln.handling || 0);
    $('#poLdSTax').val(ln.s_tax || 0);
    $('#poLineDetailsModal').modal('show');
  });
  $('#poLineDetailsSave').on('click', function () {
    if (poLineDetailsIdx === null) return;
    Object.assign(poLines[poLineDetailsIdx], {
      demand_no: $('#poLdDemandNo').val(), item_code_snapshot: $('#poLdItemCode').val(),
      size: $('#poLdSize').val(), color: $('#poLdColor').val(), v_color: $('#poLdVColor').val(),
      line_remarks: $('#poLdRemarks').val(), unit: $('#poLdUnit').val(),
      del_freq: $('#poLdDelFreq').val(), freq_qty: parseFloat($('#poLdFreqQty').val()) || null,
      discount_type: $('#poLdDiscountType').val(), discount_amount: parseFloat($('#poLdDiscountAmount').val()) || 0,
      sed: parseFloat($('#poLdSed').val()) || 0, freight: parseFloat($('#poLdFreight').val()) || 0,
      handling: parseFloat($('#poLdHandling').val()) || 0, s_tax: parseFloat($('#poLdSTax').val()) || 0,
    });
    $('#poLineDetailsModal').modal('hide');
  });

  // ── select2 setup ──
  function initSelect2(id, url, extraData) {
    $(id).select2({
      placeholder: $(id).data('placeholder') || 'Search…',
      allowClear: true, width: '100%',
      ajax: {
        url: url, dataType: 'json', delay: 200,
        data: params => Object.assign({ term: params.term }, (extraData ? extraData() : {})),
        processResults: data => ({ results: data.results }),
      },
    });
  }
  initSelect2('#poFilterVendor', VENDOR_SEARCH_URL);
  initSelect2('#poFilterCompany', COMPANY_SEARCH_URL);
  initSelect2('#poFilterCategory', CATEGORY_SEARCH_URL);
  initSelect2('#poHeaderVendor', VENDOR_SEARCH_URL);

  $('#poFilterVendor').on('change', function () {
    const vendorTId = $(this).val();
    const vendorText = $(this).find(':selected').text();
    if (vendorTId && !$('#poHeaderVendor').val()) {
      $('#poHeaderVendor').append(new Option(vendorText, vendorTId, true, true)).trigger('change');
    }
    if (!vendorTId) { $('#poFilterCompany').empty().trigger('change'); return; }
    $.getJSON(VENDOR_ATTACHED_URL, { vendor_t_id: vendorTId }, function (resp) {
      $('#poFilterCompany').empty();
      (resp.results || []).forEach(r => $('#poFilterCompany').append(new Option(r.text, r.id, true, true)));
      $('#poFilterCompany').trigger('change');
    });
  });

  // ── suggestion mode toggle ──
  $('input[name=poSuggestMode]').on('change', function () {
    const mode = $('input[name=poSuggestMode]:checked').val();
    $('#poDateRangeWrap').toggle(mode === 'sales_forecast');
    $('#poLoadSuggestionsBtn').toggle(!!mode);
  });

  $('#poLoadSuggestionsBtn').on('click', function () {
    const mode = $('input[name=poSuggestMode]:checked').val();
    if (!mode) return;
    if (mode === 'sales_forecast' && (!$('#poDateFrom').val() || !$('#poDateTo').val())) {
      Swal.fire({ icon: 'warning', title: 'Pick a date range', text: 'Both From and To dates are required for Sales Forecast.' });
      return;
    }
    $.getJSON(SUGGESTIONS_URL, {
      'company_t_ids[]': $('#poFilterCompany').val() || [],
      'category_t_ids[]': $('#poFilterCategory').val() || [],
      mode: mode, date_from: $('#poDateFrom').val(), date_to: $('#poDateTo').val(),
    }, function (resp) {
      if (!resp.ok) { Swal.fire({ icon: 'error', title: 'Could not load suggestions', text: resp.message || '' }); return; }
      openSuggestionsPopup(resp.rows, resp.sold_map || {}, mode);
    });
  });

  function openSuggestionsPopup(rawRows, soldMap, mode) {
    const groups = mergeByName(rawRows);
    const suggestions = [];
    groups.forEach(g => {
      let required = 0;
      if (mode === 'reorder_level') {
        required = Math.max(0, g.stock_limit - g.present_stock);
      } else {
        const sold = g.members.reduce((s, r) => s + (Number(soldMap[r.prod_id]) || 0), 0);
        required = Math.max(0, sold - g.present_stock);
      }
      if (required > 0) suggestions.push(Object.assign({}, g, { required: required }));
    });
    suggestions.sort((a, b) => a.name.localeCompare(b.name));

    const $tbody = $('#poSuggestTbody');
    $tbody.empty();
    if (!suggestions.length) {
      $('#poSuggestEmpty').show(); $('#poSuggestTable').hide();
    } else {
      $('#poSuggestEmpty').hide(); $('#poSuggestTable').show();
      suggestions.forEach((g, idx) => {
        $tbody.append(
          '<tr data-idx="' + idx + '">' +
            '<td><input type="checkbox" class="po-suggest-check" checked></td>' +
            '<td>' + esc(g.name) + '</td>' +
            '<td class="text-right">' + g.present_stock + '</td>' +
            '<td class="text-right">' + g.required + '</td>' +
          '</tr>'
        );
      });
    }
    window._poSuggestData = suggestions;
    window._poSuggestMode = mode;
    $('#poSuggestModal').modal('show');
  }

  $('#poSuggestTickAll').on('change', function () {
    $('.po-suggest-check').prop('checked', $(this).is(':checked'));
  });

  $('#poSuggestLoadBtn').on('click', function () {
    const suggestions = window._poSuggestData || [];
    const mode = window._poSuggestMode;
    $('#poSuggestTbody tr').each(function () {
      if (!$(this).find('.po-suggest-check').is(':checked')) return;
      const g = suggestions[$(this).data('idx')];
      addManualRow(g, g.required, mode);
    });
    $('#poSuggestModal').modal('hide');
  });

  // ── manual product search ──
  $('#poProductSearch').select2({
    placeholder: 'Search a product to add…', width: '100%',
    ajax: {
      url: PRODUCT_SEARCH_URL, dataType: 'json', delay: 200,
      data: params => ({ term: params.term }),
      processResults: data => {
        const merged = mergeByName(data.rows || []);
        return { results: merged.map(g => ({ id: g.prod_id, text: g.name + '  (Stock: ' + g.present_stock + ')', _merged: g })) };
      },
    },
  });
  $('#poProductSearch').on('select2:select', function (e) {
    addManualRow(e.params.data._merged, 1, 'manual');
    $(this).val(null).trigger('change');
  });

  // ── save / print / excel ──
  $('#poHeaderDate').val(new Date().toISOString().slice(0, 10));
  let poId = window._poInitialPo ? window._poInitialPo.po_id : null;
  let poTId = window._poInitialPo ? window._poInitialPo.po_t_id : null;

  function buildPayload() {
    return {
      po_id: poId,
      vendor_t_id: $('#poHeaderVendor').val() || '',
      vendor_name: $('#poHeaderVendor').find(':selected').text() || '',
      po_date: $('#poHeaderDate').val(),
      remarks: $('#poHeaderRemarks').val(),
      order_type: $('#poOrderType').val(),
      local_imported: $('#poLocalImported').val(),
      term_of_payment: $('#poTermOfPayment').val(),
      currency: $('#poCurrency').val(),
      country: $('#poCountry').val(),
      delivery_terms: $('#poDeliveryTerms').val(),
      credit_terms_days: parseInt($('#poCreditTermsDays').val()) || null,
      lead_time_days: parseInt($('#poLeadTimeDays').val()) || null,
      bank_charges: $('#poBankCharges').val(),
      shipment_by: $('#poShipmentBy').val(),
      shipping_mode: $('#poShippingMode').val(),
      shipping_term: $('#poShippingTerm').val(),
      actual_vendor: $('#poActualVendor').val(),
      delivery_address: $('#poDeliveryAddress').val(),
      posting_status: $('#poPostingStatus').val(),
      approval_status: $('#poApprovalStatus').val(),
      penalty_clause: $('#poPenaltyClause').val(),
      special_terms_conditions: $('#poSpecialTerms').val(),
      lines: poLines,
    };
  }

  $('#poSaveBtn').on('click', function () {
    if (!poLines.length) { Swal.fire({ icon: 'warning', title: 'Nothing to save', text: 'Add at least one item first.' }); return; }
    $.ajax({
      url: SAVE_URL, method: 'POST', contentType: 'application/json',
      data: JSON.stringify(buildPayload()), headers: { 'X-CSRFToken': CSRF_TOKEN },
      success: function (resp) {
        if (resp.ok) {
          poId = resp.po_id; poTId = resp.po_t_id;
          Swal.fire({ icon: 'success', title: 'Saved', text: resp.message, timer: 2000 });
        } else {
          Swal.fire({ icon: 'error', title: 'Could not save', text: resp.message || '' });
        }
      },
    });
  });

  let poPendingAction = null;
  $('#poPrintBtn').on('click', function () {
    if (!poLines.length) { Swal.fire({ icon: 'warning', title: 'Nothing to print', text: 'Add at least one item first.' }); return; }
    poPendingAction = 'print';
    $('#poPrintOptionsTitle').text('Print Options');
    $('#poPrintSizeWrap').show();
    $('#poPrintOptionsModal').modal('show');
  });
  $('#poExcelBtn').on('click', function () {
    if (!poLines.length) { Swal.fire({ icon: 'warning', title: 'Nothing to export', text: 'Add at least one item first.' }); return; }
    poPendingAction = 'excel';
    $('#poPrintOptionsTitle').text('Export Options');
    $('#poPrintSizeWrap').hide();
    $('#poPrintOptionsModal').modal('show');
  });
  $('#poPrintOptionsConfirm').on('click', function () {
    const payload = Object.assign(buildPayload(), {
      group_by: $('input[name=poGroupBy]:checked').val(),
      print_size: $('input[name=poPrintSize]:checked').val(),
      show_prices: $('#poShowPrices').is(':checked'),
    });
    if (poPendingAction === 'print') {
      $('#poPrintPayload').val(JSON.stringify(payload));
      $('#poPrintForm').trigger('submit');
    } else {
      $('#poExcelPayload').val(JSON.stringify(payload));
      $('#poExcelForm').trigger('submit');
    }
    $('#poPrintOptionsModal').modal('hide');
  });

  // ── edit-mode prefill ──
  if (window._poInitialPo) {
    const ip = window._poInitialPo;
    if (ip.vendor_t_id) {
      $('#poHeaderVendor').append(new Option(ip.vendor_name || '', ip.vendor_t_id, true, true)).trigger('change');
    }
    $('#poHeaderDate').val(ip.po_date || $('#poHeaderDate').val());
    $('#poHeaderRemarks').val(ip.remarks || '');
    $('#poOrderType').val(ip.order_type || 'General');
    $('#poLocalImported').val(ip.local_imported || 'Local');
    $('#poTermOfPayment').val(ip.term_of_payment || '');
    $('#poCurrency').val(ip.currency || 'Pak Rs');
    $('#poCountry').val(ip.country || '');
    $('#poDeliveryTerms').val(ip.delivery_terms || '');
    $('#poCreditTermsDays').val(ip.credit_terms_days || '');
    $('#poLeadTimeDays').val(ip.lead_time_days || '');
    $('#poBankCharges').val(ip.bank_charges || '');
    $('#poShipmentBy').val(ip.shipment_by || '');
    $('#poShippingMode').val(ip.shipping_mode || '');
    $('#poShippingTerm').val(ip.shipping_term || '');
    $('#poActualVendor').val(ip.actual_vendor || '');
    $('#poDeliveryAddress').val(ip.delivery_address || '');
    $('#poPostingStatus').val(ip.posting_status || 'unposted');
    $('#poApprovalStatus').val(ip.approval_status || 'pending');
    if (ip.penalty_clause) $('#poPenaltyClause').val(ip.penalty_clause);
    if (ip.special_terms_conditions) $('#poSpecialTerms').val(ip.special_terms_conditions);

    poLines = (ip.lines || []).map(ln => Object.assign(blankLineDetails(), {
      prod_id: ln.product_code, product_code: ln.product_code, name: ln.name,
      company_id: ln.company_id, category_id: ln.category_id, qty: ln.qty,
      purchase_price: ln.purchase_price, pieces_per_pack: ln.pieces_per_pack || 1,
      note: ln.note || '', source_type: ln.source_type || 'manual',
    }, ln));
  }

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