wms-app/app/finance/manage_payment_billing.php

<?php
  session_start();
  require '../config.php';

  // A detail-only page: payment billings are created from their list, so with
  // no id there is nothing to show. Send the user there instead of rendering an
  // empty page that alerts "Payment billing id is required."
  $billing_id = (int)($_GET['id'] ?? 0);
  if (!$billing_id) {
    header('Location: ' . $server_url . 'finance/payment_billing.php');
    exit;
  }

  require '../include_header.php';
?>

<body>
  <?php require '../include_topbar.php'; ?>
  <?php require '../include_sidebar_ac.php'; ?>

  <main id="content" class="content py-15">
    <div class="container-fluid">

      <div class="row">
        <div class="col-12">
          <div class="mb-6 d-flex justify-content-between align-items-center">
            <div>
              <h1 class="fs-3 mb-1" id="page_title">Payment Billing Detail</h1>
              <p class="mb-0 text-muted">Supplier payment billing and document allocations</p>
            </div>
            <a href="<?php echo $server_url?>finance/payment_billing.php" class="btn btn-light">
              <i class="ti ti-arrow-left me-1"></i>Back
            </a>
          </div>
        </div>
      </div>

      <div class="row g-5">
        <div class="col-lg-8">
          <div class="card">
            <div class="card-body p-5">
              <h2 class="fs-5 mb-4">Documents</h2>
              <div class="table-responsive">
                <table class="table mb-0">
                  <thead class="table-light">
                    <tr>
                      <th>Document</th>
                      <th>Type</th>
                      <th>PO #</th>
                      <th class="text-end">Included</th>
                      <th class="text-end">Document Total</th>
                    </tr>
                  </thead>
                  <tbody id="allocation_tbody">
                    <tr><td colspan="5" class="text-center py-5 text-muted">Loading payment billing...</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4">
          <div class="card mb-5">
            <div class="card-body p-4">
              <h2 class="fs-5 mb-3">Billing Info</h2>
              <div class="mb-3" id="badge_status"></div>
              <div class="mb-2 small"><span class="text-muted">Billing #:</span><span class="ms-1 fw-semibold" id="display_number">—</span></div>
              <div class="mb-2 small"><span class="text-muted">Supplier:</span><span class="ms-1 fw-semibold" id="display_contact">—</span></div>
              <div class="mb-2 small"><span class="text-muted">Date:</span><span class="ms-1" id="display_date">—</span></div>
              <div class="mt-3 small">
                <span class="text-muted">Notes:</span>
                <div class="mt-1" id="display_notes">—</div>
              </div>
            </div>
          </div>

          <div class="card mb-5">
            <div class="card-body p-4">
              <h2 class="fs-5 mb-3">Summary</h2>
              <div class="d-flex justify-content-between mb-2"><span class="text-muted">Amount Due</span><span id="summary_amount">0.00</span></div>
              <div class="d-flex justify-content-between mb-2"><span class="text-muted">Paid</span><span id="summary_payment">0.00</span></div>
              <hr>
              <div class="d-flex justify-content-between fw-bold fs-5"><span>Balance</span><span id="summary_balance">0.00</span></div>
            </div>
          </div>

          <div class="card">
            <div class="card-body p-4 d-flex flex-column gap-2">
              <a href="#" class="btn btn-primary w-100" id="btn_payment">
                <i class="ti ti-cash me-1"></i>Create Payment
              </a>
              <button class="btn btn-outline-secondary w-100" onclick="window.print()">
                <i class="ti ti-printer me-1"></i>Print / Save PDF
              </button>
              <button class="btn btn-outline-danger w-100 d-none" id="btn_void" onclick="void_billing()">
                <i class="ti ti-ban me-1"></i>Void Billing
              </button>
              <button class="btn btn-outline-danger w-100 d-none" id="btn_delete" onclick="delete_billing()">
                <i class="ti ti-trash me-1"></i>Delete Billing
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <?php require '../include_ending.php'; ?>

  <script>

  const can_delete = ['admin', 'owner'].includes(user_role);

  var billing_id = <?php echo $billing_id; ?>;
  var billing = null;

  function display_text(value) {
    return value ? escape_html(value) : '<span class="text-muted">—</span>';
  }

  function status_badge(status) {
    const map = {
      '1': '<span class="badge bg-info text-white">Open</span>',
      '2': '<span class="badge bg-success">Settled</span>',
      '3': '<span class="badge bg-warning text-dark">Partial</span>',
      '4': '<span class="badge bg-light text-dark">Void</span>',
    };
    return map[String(status)] || '—';
  }

  function doc_type_badge(doc_type) {
    return doc_type === 'supplier_credit_note'
      ? '<span class="badge bg-warning text-dark">Supplier Credit Note</span>'
      : '<span class="badge bg-primary">Purchase Invoice</span>';
  }

  function retrieve_billing() {
    return ajax_request({
      url: '<?php echo $server_url?>finance/api/engine/manage_payment_billing.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'retrieve',
      data: { id: billing_id },
      onSuccess: function(res) {
        billing = res.output || {};
        render_billing();
      }
    });
  }

  function render_billing() {
    $('#page_title').text(billing.billing_number || 'Payment Billing Detail');
    $('#badge_status').html(status_badge(billing.status));
    $('#display_number').html(display_text(billing.billing_number));
    $('#display_contact').html(display_text(billing.contact_name));
    $('#display_date').html(billing.billing_date ? format_date(billing.billing_date) : '<span class="text-muted">—</span>');
    $('#display_notes').html(billing.notes ? escape_html(billing.notes).replace(/\n/g, '<br>') : '<span class="text-muted">—</span>');
    $('#summary_amount').text(format_number(billing.amount, 2));
    $('#summary_payment').text(format_number(billing.paid_amount, 2));
    $('#summary_balance').text(format_number(billing.balance_amount, 2));
    $('#btn_payment').attr('href', '<?php echo $server_url?>finance/payment.php?billing_id=' + billing.id);
    $('#btn_payment').toggleClass('d-none', String(billing.status) === '4' || parseFloat(billing.balance_amount || 0) <= 0.0001);
    $('#btn_void').toggleClass('d-none', String(billing.status) === '4' || parseFloat(billing.paid_amount || 0) > 0.0001);
    $('#btn_delete').toggleClass('d-none', !can_delete || !billing_id);

    var rows = '';
    $.each(billing.allocations || [], function(i, line) {
      var is_cn = line.doc_type === 'supplier_credit_note';
      var included = parseFloat(line.amount || 0);
      var doc_total = parseFloat(line.grand_total || 0);
      rows += `<tr>
        <td>
          <div class="fw-semibold">${escape_html(line.invoice_number || '')}</div>
          <a href="<?php echo $server_url?>expense/manage_purchase_invoice.php?id=${line.invoice_id}" class="small">View document</a>
        </td>
        <td>${doc_type_badge(line.doc_type)}</td>
        <td>${line.order_number ? escape_html(line.order_number) : '<span class="text-muted">—</span>'}</td>
        <td class="text-end fw-semibold ${is_cn ? 'text-danger' : ''}">${format_number(is_cn ? -included : included, 2)}</td>
        <td class="text-end ${is_cn ? 'text-danger' : ''}">${format_number(doc_total, 2)}</td>
      </tr>`;
    });
    $('#allocation_tbody').html(rows || '<tr><td colspan="5" class="text-center py-5 text-muted">No documents found.</td></tr>');
  }

  function delete_billing() {
    bootbox.confirm({
      message: 'Delete this billing? All linked payments must be deleted first.',
      buttons: { confirm: { label: 'Delete', className: 'btn-danger' }, cancel: { label: 'Back', className: 'btn-secondary' } },
      callback: function(result) {
        if (!result) return;
        ajax_request({
          url: '<?php echo $server_url?>finance/api/engine/delete_payment_billing.php',
          autoPrepare: false,
          checkRequired: 0,
          action: 'delete',
          data: { id: billing_id },
          onSuccess: function() { window.location.href = '<?php echo $server_url?>finance/payment_billing.php'; }
        });
      }
    });
  }


  function void_billing() {
    bootbox.confirm('Void this payment billing?', function(ok) {
      if (!ok) return;
      ajax_request({
        url: '<?php echo $server_url?>finance/api/engine/manage_payment_billing.php',
        autoPrepare: true,
        checkRequired: 0,
        action: 'void',
        data: { id: billing_id },
        onSuccess: function() {
          retrieve_billing();
        }
      });
    });
  }

  $(function() {
    if (!billing_id) {
      bootbox.alert('Payment billing id is required.');
      return;
    }
    retrieve_billing();
  });
  </script>

</body>
</html>