wms-app/app/ics/location_barcode_label.php

<?php
  session_start();
  require '../config.php';
  if (!in_array($_SESSION['login_role'] ?? 'viewer', ['owner', 'admin', 'staff'], true)) {
    http_response_code(403);
    exit('Access denied.');
  }
  require '../include_header.php';
?>

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

  <main id="content" class="content py-15">
    <div class="container-fluid">
      <div class="row mb-6">
        <div class="col-12 d-flex justify-content-between align-items-center">
          <div>
            <h1 class="fs-3 mb-1">Location Barcode Labels</h1>
            <p class="mb-0 text-muted">Print or reprint labels from the rack master list.</p>
          </div>
          <div class="d-flex gap-2">
            <button id="btn_print" class="btn btn-outline-success" data-min-role="staff" onclick="print_selected_label()" disabled>
              <i class="ti ti-printer me-1"></i>Print
            </button>
            <button id="btn_disable" class="btn btn-outline-danger" data-min-role="staff" onclick="disable_selected_label()" disabled>
              <i class="ti ti-ban me-1"></i>Disable
            </button>
            <button id="btn_reenable" class="btn btn-outline-primary d-none" data-min-role="staff" onclick="reenable_selected_label()">
              <i class="ti ti-refresh me-1"></i>Re-enable
            </button>
          </div>
        </div>
      </div>

      <div class="row g-5">
        <div class="col-lg-7">
          <div class="card"><div class="card-body p-5">
            <div class="position-relative mb-4">
              <input type="search" id="search_location" class="form-control ps-9"
                placeholder="Search warehouse, zone, aisle, rack, or SKU...">
              <span class="position-absolute top-25 ms-4">
                <i class="ti ti-search text-muted"></i>
              </span>
            </div>
            <div class="table-responsive table-scroll">
              <table class="table table-hover mb-0">
                <thead class="table-light">
                  <tr>
                    <th>Warehouse</th>
                    <th class="th-zone">Zone</th>
                    <th class="th-aisle">Aisle</th>
                    <th id="th-rack">Rack</th>
                    <th>Status</th>
                    <th>Label Status</th>
                    <th class="text-end">Action</th>
                  </tr>
                </thead>
                <tbody id="rack_tbody">
                  <tr><td colspan="7" class="text-center text-muted py-4">Loading locations...</td></tr>
                </tbody>
              </table>
            </div>
          </div></div>
        </div>
        <div class="col-lg-5">
          <div class="card"><div class="card-body p-5">
            <div id="label_preview" class="border rounded p-4 text-center text-muted">
              Select a location to preview its label.
            </div>
          </div></div>
        </div>
      </div>
    </div>
  </main>

  <?php require '../include_ending.php'; ?>
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
  <script>
    var advanced = false;
    var label_rack = 'Location';
    var label_zone = 'Zone';
    var label_aisle = 'Aisle';
    var racks = [];
    var barcode_status = {};
    var selected_payload = '';
    var selected_rack_index = -1;

    function escape_html(value) {
      return String(value ?? '').replace(/[&<>"']/g, function(char) {
        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[char];
      });
    }

    function refresh_header_buttons() {
      var status = selected_payload ? barcode_status[selected_payload] : null;
      var is_active   = status === 'active';
      var is_disabled = status === 'disabled';
      $('#btn_print').prop('disabled', !is_active).toggleClass('d-none', is_disabled);
      $('#btn_disable').prop('disabled', !is_active).toggleClass('d-none', is_disabled);
      $('#btn_reenable').toggleClass('d-none', !is_disabled);
    }

    function highlight_selected_row() {
      $('#rack_tbody tr').removeClass('table-active');
      if (selected_rack_index >= 0) {
        $('#rack_tbody tr[data-rack-index="' + selected_rack_index + '"]').addClass('table-active');
      }
    }

    function load_config() {
      return ajax_request({
        url: server_url + 'setting/api/engine/company_setting.php',
        autoPrepare: true,
        checkRequired: 0,
        action: 'read',
        queueLock: false,
        onSuccess: function(res) {
          var s = res.output || {};
          advanced = s.advanced_location == 1;
          label_rack = s.location_label_rack || (advanced ? 'Rack' : 'Location');
          label_zone = s.location_label_zone || 'Zone';
          label_aisle = s.location_label_aisle || 'Aisle';
          $('.th-zone').text(label_zone).toggleClass('d-none', !advanced);
          $('.th-aisle').text(label_aisle).toggleClass('d-none', !advanced);
          $('#th-rack').text(label_rack);
        }
      });
    }

    function load_racks() {
      return ajax_request({
        url: server_url + 'reports/api/engine_report/rack_occupancy.php',
        autoPrepare: true,
        checkRequired: 0,
        action: 'read',
        queueLock: false,
        onSuccess: function(res) {
          racks = res.output || [];
          render_racks();
          highlight_selected_row();
        }
      });
    }

    function load_barcode_statuses() {
      return ajax_request({
        url: server_url + 'ics/api/engine/location_barcode_label.php',
        autoPrepare: true,
        checkRequired: 0,
        action: 'read',
        queueLock: false,
        data: { label_action: 'list' },
        onSuccess: function(res) {
          barcode_status = {};
          (res.output || []).forEach(function(item) {
            barcode_status[item.barcode] = parseInt(item.status) === 1 ? 'active' : 'disabled';
          });
          render_racks();
        }
      });
    }

    function location_payload(item) {
      return advanced
        ? `LOC|${item.warehouse_id}|${item.zone}|${item.aisle}|${item.rack}`
        : `LOC|${item.warehouse_id}|${item.rack}`;
    }

    function render_racks() {
      var keyword = $('#search_location').val().toLowerCase();
      var rows = racks.filter(function(item) {
        if (!keyword) return true;
        return [
          item.warehouse_name,
          item.zone,
          item.aisle,
          item.rack,
          item.product_sku,
          item.product_name,
          item.status
        ].join(' ').toLowerCase().includes(keyword);
      });

      if (!rows.length) {
        $('#rack_tbody').html('<tr><td colspan="7" class="text-center text-muted py-4">No locations found.</td></tr>');
        return;
      }

      var body = '';
      rows.forEach(function(item) {
        var idx = racks.indexOf(item);
        var status = item.status === 'occupied'
          ? '<span class="badge bg-warning text-dark">Occupied</span>'
          : '<span class="badge bg-success">Empty</span>';
        var payload = location_payload(item);
        var labelStatus = '<span class="badge bg-secondary">Not prepared</span>';
        if (barcode_status[payload] === 'active') {
          labelStatus = '<span class="badge bg-success">Active</span>';
        }
        if (barcode_status[payload] === 'disabled') {
          labelStatus = '<span class="badge bg-danger">Disabled</span>';
        }
        body += `<tr data-rack-index="${idx}">
          <td>${escape_html(item.warehouse_name)}</td>
          <td class="th-zone ${advanced ? '' : 'd-none'}">${escape_html(item.zone)}</td>
          <td class="th-aisle ${advanced ? '' : 'd-none'}">${escape_html(item.aisle)}</td>
          <td>${escape_html(item.rack)}</td>
          <td>${status}</td>
          <td>${labelStatus}</td>
          <td class="text-end">
            <button class="btn btn-sm btn-outline-primary" onclick="preview_label(${idx})">
              <i class="ti ti-barcode me-1"></i>Preview
            </button>
          </td>
        </tr>`;
      });
      $('#rack_tbody').html(body);
    }

    function render_preview(item, payload) {
      $('#label_preview').html(`
        <div class="barcode-label mx-auto">
          <div class="fw-bold fs-5">${escape_html(item.warehouse_name)}</div>
          <div class="small">${advanced
            ? `${escape_html(item.zone)} / ${escape_html(item.aisle)} / ${escape_html(item.rack)}`
            : escape_html(item.rack)}</div>
          <svg id="barcode_svg"></svg>
          <div class="small text-muted">${escape_html(payload)}</div>
        </div>`);
      JsBarcode('#barcode_svg', payload, { format: 'CODE128', width: 1.6, height: 70, displayValue: false });
    }

    function preview_label(index) {
      var item = racks[index];
      if (!item) return;
      var payload = location_payload(item);

      ajax_request({
        url: server_url + 'ics/api/engine/location_barcode_label.php',
        autoPrepare: true,
        checkRequired: 0,
        action: 'read',
        queueLock: false,
        data: {
          label_action: 'create',
          barcode: payload,
          warehouse_id: item.warehouse_id,
          zone: item.zone || '',
          aisle: item.aisle || '',
          rack: item.rack
        },
        onSuccess: function() {
          selected_payload = payload;
          selected_rack_index = index;
          if (!barcode_status[payload]) barcode_status[payload] = 'active';
          render_racks();
          refresh_header_buttons();
          highlight_selected_row();
          render_preview(item, payload);
        }
      });
    }

    function print_selected_label() {
      if (!selected_payload) {
        bootbox.alert('Select a location label first.');
        return;
      }
      ajax_request({
        url: server_url + 'ics/api/engine/location_barcode_label.php',
        autoPrepare: true,
        checkRequired: 0,
        action: 'read',
        queueLock: false,
        data: { label_action: 'print', barcode: selected_payload },
        onSuccess: function() { window.print(); }
      });
    }

    function disable_selected_label() {
      if (!selected_payload) {
        bootbox.alert('Select a location label first.');
        return;
      }

      bootbox.confirm({
        message: 'Disable this location barcode label? It will no longer be accepted by stock scans.',
        buttons: {
          confirm: { label: 'Disable', className: 'btn-danger' },
          cancel:  { label: 'Back',    className: 'btn-secondary' }
        },
        callback: function(result) {
          if (!result) return;
          ajax_request({
            url: server_url + 'ics/api/engine/location_barcode_label.php',
            autoPrepare: true,
            checkRequired: 0,
            action: 'read',
            queueLock: false,
            data: { label_action: 'disable', barcode: selected_payload },
            onSuccess: function() {
              barcode_status[selected_payload] = 'disabled';
              selected_payload = '';
              selected_rack_index = -1;
              $('#label_preview').html('Select a location to preview its label.');
              render_racks();
              refresh_header_buttons();
              highlight_selected_row();
            }
          });
        }
      });
    }

    function reenable_selected_label() {
      if (!selected_payload) return;
      var index = selected_rack_index;
      var item = racks[index];
      if (!item) return;

      ajax_request({
        url: server_url + 'ics/api/engine/location_barcode_label.php',
        autoPrepare: true,
        checkRequired: 0,
        action: 'read',
        queueLock: false,
        data: { label_action: 'enable', barcode: selected_payload },
        onSuccess: function() {
          barcode_status[selected_payload] = 'active';
          render_racks();
          refresh_header_buttons();
          highlight_selected_row();
          render_preview(item, selected_payload);
        }
      });
    }

    function enable_label_for_row(index) {
      var item = racks[index];
      if (!item) return;
      var payload = location_payload(item);

      ajax_request({
        url: server_url + 'ics/api/engine/location_barcode_label.php',
        autoPrepare: true,
        checkRequired: 0,
        action: 'read',
        queueLock: false,
        data: { label_action: 'enable', barcode: payload },
        onSuccess: function() {
          barcode_status[payload] = 'active';
          selected_payload = payload;
          selected_rack_index = index;
          render_racks();
          refresh_header_buttons();
          highlight_selected_row();
          render_preview(item, payload);
        }
      });
    }

    $('#search_location').on('input', render_racks);

    $(async function() {
      await load_config();
      await load_racks();
      await load_barcode_statuses();
    });
  </script>
  <style>
    .barcode-label { max-width: 420px; background: #fff; color: #111; }
    .table-scroll {
      max-height: calc(100vh - 320px);
      overflow-y: auto;
    }
    .table-scroll thead th {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #f8f9fa !important;
      box-shadow: inset 0 -1px 0 #dee2e6;
    }
    @media print {
      body * { visibility: hidden; }
      #label_preview, #label_preview * { visibility: visible; }
      #label_preview { position: absolute; left: 0; top: 0; width: 100%; border: 0 !important; }
    }
  </style>
</body>
</html>