@extends('layouts.location')

@section('title', 'Picklist Results')
@section('page-title', 'Picklist Results')

@section('content')
<div class="card mt-4">
  <div class="card-body">

    <!-- <h6 class="mb-3">Location ID: {{ session('location_id') }}</h6> -->

    {{-- Alerts --}}
    @if(session('alert'))
      <div class="alert alert-danger"><i class="fas fa-exclamation-triangle"></i> {{ session('alert') }}</div>
    @endif

    @if(session('success'))
      <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
    @endif

    @if(session('info'))
      <div class="alert alert-info"><i class="fas fa-info-circle"></i> {{ session('info') }}</div>
    @endif

    <ul class="nav nav-tabs mb-3" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-all-picklist" data-bs-toggle="tab" data-bs-target="#tab-all-picklist-pane" type="button" role="tab">Replenishment</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-short-picklist" data-bs-toggle="tab" data-bs-target="#tab-short-picklist-pane" type="button" role="tab">Short Picklist</button>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane fade show active" id="tab-all-picklist-pane" role="tabpanel" aria-labelledby="tab-all-picklist">
        {{-- Continue form --}}
        <form id="picklistStoreForm" method="POST" action="{{ route('location.picklist.store') }}">
          @csrf
          <input type="hidden" id="picklist-data" name="picklist" value="{{ json_encode($picklist) }}">

          {{-- Controls --}}
          <div class="mb-3 d-flex align-items-center gap-3">
            <div>
              <input type="checkbox" id="select-all-sos">
              <label for="select-all-sos" class="ms-1">Select all SOs</label>
            </div>
            <button type="button" class="btn btn-primary continue-btn" onclick="document.getElementById('showConfirmModal').click()">
              <i class="fas fa-arrow-right"></i> <span class="btn-text">Continue</span>
            </button>

            {{-- Filter --}}
            <div class="ms-auto">
              <select id="filter-status" class="form-select">
                <option value="all">All PickLists</option>
                <option value="ok">OK PickList</option>
                <option value="issue">Issue PickList</option>
              </select>
            </div>
          </div>

          {{-- Table --}}
          <div class="table-responsive">
            <table class="table table-bordered table-striped align-middle">
              <thead class="table-dark">
                <tr>
                  <th>Sales Order Number</th>
                  <th>Status</th>
                  <th>Action</th>
                  <th>Include</th>
                </tr>
              </thead>
              <tbody>
                @forelse($picklist as $salesOrderNo => $itemsGroup)
                  @php
                    $hasIssue = false;
                    $hasShortage = false;
                    $needsReplenishment = false;
                    $hasOverflowStock = false;

                    // IMPORTANT:
                    // A single SKU can be fulfilled from multiple racks.
                    // Shortage must be computed per SKU (sum of picked across racks) vs required.
                    // Also treat explicit N/A replenishment rows (status != OK) as shortage.
                    $skuAgg = [];
                    foreach ($itemsGroup as $items) {
                      foreach ($items as $item) {
                        $status = $item['status'] ?? 'OK';
                        if ($status !== 'OK') { $hasIssue = true; }

                        $ov = $item['overflow_location'] ?? null;
                        if (is_string($ov) && trim($ov) !== '' && trim($ov) !== '-') { $hasOverflowStock = true; }

                        if (is_string($status) && stripos($status, 'replenishment') !== false) { $needsReplenishment = true; }

                        $sku = $item['sku'] ?? '';
                        $rack = $item['rack'] ?? 'N/A';
                        $req = (float) ($item['required_qty'] ?? 0);
                        $picked = (float) ($item['picked_qty'] ?? 0);

                        if (!isset($skuAgg[$sku])) {
                          $skuAgg[$sku] = [
                            'required' => $req,
                            'picked' => 0.0,
                            'has_na_short' => false,
                          ];
                        }

                        // Prefer the maximum required seen for this SKU (defensive)
                        $skuAgg[$sku]['required'] = max($skuAgg[$sku]['required'], $req);

                        // Sum picked only from real racks; N/A rows represent remaining qty.
                        if ($rack !== 'N/A') {
                          $skuAgg[$sku]['picked'] += $picked;
                        }

                        if ($rack === 'N/A' && $status !== 'OK') {
                          $skuAgg[$sku]['has_na_short'] = true;
                        }
                      }
                    }

                    foreach ($skuAgg as $skuKey => $row) {
                      if ($row['has_na_short'] || $row['picked'] + 0.0001 < $row['required']) {
                        $hasShortage = true;
                        break;
                      }
                    }

                    // Only treat as "Replenishment" tab when overflow stock exists.
                    $needsReplenishment = $needsReplenishment && $hasOverflowStock;
                  @endphp
                  @if(!$hasShortage || $needsReplenishment)
                  <tr class="so-row" data-status="{{ $hasIssue ? 'issue' : 'ok' }}">
                    <td>{{ $salesOrderNo }}</td>
                    <td>
                      @if($needsReplenishment)
                        <span class="badge bg-warning">Replenishment</span>
                      @elseif($hasIssue)
                        <span class="badge bg-danger">Issue</span>
                      @else
                        <span class="badge bg-success">OK</span>
                      @endif
                    </td>
                    <td>
                      <button type="button" class="btn btn-sm btn-outline-primary toggle-details" 
                              data-target="details-{{ $salesOrderNo }}">
                        <i class="fas fa-eye"></i> Show
                      </button>
                    </td>
                    <td>
                      <div class="form-check">
                        <input class="form-check-input so-select" type="checkbox" 
                               name="selected_sos[]" value="{{ $salesOrderNo }}" 
                               id="so_sel_{{ $salesOrderNo }}">
                        <label class="form-check-label" for="so_sel_{{ $salesOrderNo }}"></label>
                      </div>
                    </td>
                  </tr>

                  {{-- Details row --}}
                  <tr id="details-{{ $salesOrderNo }}" class="details-row d-none">
                    <td colspan="4">
                      <table class="table table-sm table-bordered">
                        <thead class="table-secondary">
                          <tr>
                            <th>SKU / Part No</th>
                            <th>Description</th>
                            <th>Required Quantity</th>
                            <th>Picked Quantity</th>
                            <th>Overflow Location</th>
                            <th>Rack</th>
                            <th>Status</th>
                          </tr>
                        </thead>
                        <tbody>
                          @php $seenSkuRequired = []; @endphp
                          @foreach($itemsGroup as $items)
                            @foreach($items as $item)
                              @if(($item['picked_qty'] ?? 0) > 0 || $item['status'] !== 'OK')
                                @php
                                  $sku = (string) ($item['sku'] ?? '');
                                  $showRequired = !isset($seenSkuRequired[$sku]);
                                  if ($showRequired) {
                                    $seenSkuRequired[$sku] = true;
                                  }
                                @endphp
                                <tr class="{{ $item['status'] !== 'OK' ? 'table-danger' : '' }}">
                                  <td>{{ $item['sku'] }}</td>
                                  <td>{{ $item['description'] ?? '-' }}</td>
                                  <td>{{ $showRequired ? number_format($item['required_qty'], 0) : '' }}</td>
                                  <td>{{ number_format($item['picked_qty'] ?? 0, 0) }}</td>
                                  <td>{{ $item['overflow_location'] ?? '-' }}</td>
                                  <td>{{ $item['rack'] }}</td>
                                  <td>
                                    @if($item['status'] === 'OK')
                                      <span class="badge bg-success">OK</span>
                                    @else
                                      <span class="badge bg-danger">{{ $item['status'] }}</span>
                                    @endif
                                  </td>
                                </tr>
                              @endif
                            @endforeach
                          @endforeach
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  @endif
                @empty
                  <tr><td colspan="4" class="text-center">No matching items found</td></tr>
                @endforelse
              </tbody>
            </table>
          </div>

          {{-- Continue button after table --}}
          <div class="mt-3">
            <button type="button" class="btn btn-primary continue-btn" id="showConfirmModal">
              <i class="fas fa-arrow-right"></i> <span class="btn-text">Continue</span>
            </button>
          </div>
        </form>
      </div>

      <div class="tab-pane fade" id="tab-short-picklist-pane" role="tabpanel" aria-labelledby="tab-short-picklist">
        <form id="shortPicklistForm" method="POST" action="{{ route('location.picklist.store') }}">
          @csrf
          <input type="hidden" id="short-picklist-data" name="picklist" value="">
          <input type="hidden" name="skip_replenishment_alert" value="1">

          {{-- Controls --}}
          <div class="mb-3">
            <button type="button" class="btn btn-primary continue-btn" id="shortContinueBtn">
              <i class="fas fa-arrow-right"></i> <span class="btn-text">Continue</span>
            </button>
          </div>

          <div class="table-responsive">
            <table class="table table-bordered table-striped align-middle">
              <thead class="table-dark">
                <tr>
                  <th>Sales Order Number</th>
                  <th>Status</th>
                  <th>Action</th>
                  <th>Include</th>
                </tr>
              </thead>
              <tbody>
                @php $hasShortRows = false; @endphp
                @foreach($picklist as $salesOrderNo => $itemsGroup)
                  @php
                    $hasShortForSo = false;
                    $needsReplenishment = false;
                    $hasOverflowStock = false;
                    $skuAgg = [];
                    foreach ($itemsGroup as $items) {
                      foreach ($items as $item) {
                        $sku = $item['sku'] ?? '';
                        $rack = $item['rack'] ?? 'N/A';
                        $status = $item['status'] ?? 'OK';

                        $ov = $item['overflow_location'] ?? null;
                        if (is_string($ov) && trim($ov) !== '' && trim($ov) !== '-') { $hasOverflowStock = true; }

                        if (is_string($status) && stripos($status, 'replenishment') !== false) { $needsReplenishment = true; }
                        $req = (float) ($item['required_qty'] ?? 0);
                        $picked = (float) ($item['picked_qty'] ?? 0);

                        if (!isset($skuAgg[$sku])) {
                          $skuAgg[$sku] = [
                            'required' => $req,
                            'picked' => 0.0,
                            'has_na_short' => false,
                          ];
                        }

                        $skuAgg[$sku]['required'] = max($skuAgg[$sku]['required'], $req);
                        if ($rack !== 'N/A') {
                          $skuAgg[$sku]['picked'] += $picked;
                        }
                        if ($rack === 'N/A' && $status !== 'OK') {
                          $skuAgg[$sku]['has_na_short'] = true;
                        }
                      }
                    }

                    foreach ($skuAgg as $skuKey => $row) {
                      if ($row['has_na_short'] || $row['picked'] + 0.0001 < $row['required']) {
                        $hasShortForSo = true;
                        break;
                      }
                    }

                    // Only treat as "Replenishment" tab when overflow stock exists.
                    $needsReplenishment = $needsReplenishment && $hasOverflowStock;
                  @endphp
                  @if($hasShortForSo && !$needsReplenishment)
                    @php $hasShortRows = true; @endphp
                    <tr class="so-row short-so-row" data-so="{{ $salesOrderNo }}">
                      <td>{{ $salesOrderNo }}</td>
                      <td>
                        <span class="badge bg-warning">Short</span>
                      </td>
                      <td>
                        <button type="button" class="btn btn-sm btn-outline-primary toggle-details" 
                                data-target="short-details-{{ $salesOrderNo }}">
                          <i class="fas fa-eye"></i> Show
                        </button>
                      </td>
                      <td>
                        <div class="form-check">
                          <input class="form-check-input short-so-select" type="checkbox"
                                 value="{{ $salesOrderNo }}"
                                 id="short_so_sel_{{ $salesOrderNo }}">
                          <label class="form-check-label" for="short_so_sel_{{ $salesOrderNo }}"></label>
                        </div>
                      </td>
                    </tr>

                    {{-- Details row for all items in short SO --}}
                    <tr id="short-details-{{ $salesOrderNo }}" class="details-row d-none">
                      <td colspan="4">
                        <table class="table table-sm table-bordered">
                          <thead class="table-secondary">
                            <tr>
                              <th>SKU / Part No</th>
                              <th>Description</th>
                              <th>Required Quantity</th>
                              <th>Picked Quantity</th>
                              <th>Shortage</th>
                              <th>Rack</th>
                              <th>Status</th>
                            </tr>
                          </thead>
                          <tbody>
                            @php
                              // Flatten items for easier per-SKU checks
                              $flatItems = [];
                              foreach ($itemsGroup as $grpItems) {
                                foreach ($grpItems as $it) {
                                  $flatItems[] = $it;
                                }
                              }

                              // Aggregate by SKU across racks (this fixes the "8 + 7 fulfills 15" case)
                              $skuAgg = [];
                              foreach ($flatItems as $it) {
                                $sku = $it['sku'] ?? '';
                                $rack = $it['rack'] ?? 'N/A';
                                $status = $it['status'] ?? 'OK';
                                $req = (float) ($it['required_qty'] ?? 0);
                                $picked = (float) ($it['picked_qty'] ?? 0);

                                if (!isset($skuAgg[$sku])) {
                                  $skuAgg[$sku] = [
                                    'required' => $req,
                                    'picked' => 0.0,
                                    'has_na_short' => false,
                                  ];
                                }
                                $skuAgg[$sku]['required'] = max($skuAgg[$sku]['required'], $req);
                                if ($rack !== 'N/A') {
                                  $skuAgg[$sku]['picked'] += $picked;
                                }
                                if ($rack === 'N/A' && $status !== 'OK') {
                                  $skuAgg[$sku]['has_na_short'] = true;
                                }
                              }
                            @endphp

                            @foreach($flatItems as $item)
                              @php
                                $sku = $item['sku'] ?? '';
                                $rack = $item['rack'] ?? 'N/A';

                                // Hide N/A "remaining qty" rows if we have any real racks for that SKU.
                                $hasRealRack = collect($flatItems)->contains(function($x) use ($sku) {
                                  return ($x['sku'] ?? '') === $sku && ($x['rack'] ?? 'N/A') !== 'N/A';
                                });
                                if ($rack === 'N/A' && $hasRealRack) {
                                  continue;
                                }

                                $req = (float) ($skuAgg[$sku]['required'] ?? ($item['required_qty'] ?? 0));
                                $totalPickedSku = (float) ($skuAgg[$sku]['picked'] ?? 0);
                                $skuShortage = max(0, $req - $totalPickedSku);

                                $pickedRow = (float) ($item['picked_qty'] ?? 0);
                                $rowIsShort = ($skuAgg[$sku]['has_na_short'] ?? false) || ($skuShortage > 0);
                              @endphp
                              <tr class="{{ $rowIsShort ? 'table-danger' : '' }}">
                                <td>{{ $item['sku'] }}</td>
                                <td>{{ $item['description'] ?? '-' }}</td>
                                <td>{{ number_format($req, 0) }}</td>
                                <td>{{ number_format($pickedRow, 0) }}</td>
                                <td><strong>{{ number_format($skuShortage, 0) }}</strong></td>
                                <td>{{ $item['rack'] ?? 'N/A' }}</td>
                                <td>{{ $rowIsShort ? 'Short' : 'OK' }}</td>
                              </tr>
                            @endforeach
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  @endif
                @endforeach
                @if(!$hasShortRows)
                  <tr>
                    <td colspan="4" class="text-center">No short / issue quantities found.</td>
                  </tr>
                @endif
              </tbody>
            </table>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- Confirmation Modal for All Picklist --}}
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">Confirm Selected Sales Orders</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-2"><strong>You have selected the following Sales Orders:</strong></p>
        <div id="selectedSoList" class="alert alert-info" style="max-height: 300px; overflow-y: auto;">
          <!-- Selected SOs will be listed here -->
        </div>
        <p class="text-muted mb-0"><small>Click Continue to process these orders or Cancel to go back.</small></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="cancelBtn">
          <i class="fas fa-times"></i> Cancel
        </button>
        <button type="button" class="btn btn-primary" id="confirmContinueBtn">
          <i class="fas fa-check"></i> Continue
        </button>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Store full picklist data
  var fullPicklistData = @json($picklist);
  var currentFilter = 'all';

  // Expose current location ID from session for client-side checks
  var currentLocationId = "{{ session('location_id') }}";

  // Select all checkboxes
  var selectAll = document.getElementById('select-all-sos');
  var checkboxes = document.querySelectorAll('.so-select');
  if (selectAll) {
    selectAll.addEventListener('change', function () {
      // Only check visible checkboxes
      document.querySelectorAll('.so-row:not([style*="display: none"]) .so-select').forEach(cb => {
        cb.checked = selectAll.checked;
      });
    });
  }

  // Toggle details for Replenishment tab only
  var replenishmentPane = document.getElementById('tab-all-picklist-pane');
  if (replenishmentPane) {
    replenishmentPane.querySelectorAll('.toggle-details').forEach(btn => {
      btn.addEventListener('click', function () {
        var targetId = this.getAttribute('data-target');
        var row = document.getElementById(targetId);
        if (row.classList.contains('d-none')) {
          row.classList.remove('d-none');
          this.innerHTML = '<i class="fas fa-eye-slash"></i> Hide';
        } else {
          row.classList.add('d-none');
          this.innerHTML = '<i class="fas fa-eye"></i> Show';
        }
      });
    });
  }

  // Filter
  document.getElementById('filter-status').addEventListener('change', function () {
    currentFilter = this.value;
    document.querySelectorAll('.so-row').forEach(row => {
      if (currentFilter === 'all') {
        row.style.display = '';
      } else {
        row.style.display = (row.dataset.status === currentFilter) ? '' : 'none';
        // also hide details when filtering
        var targetId = row.querySelector('.toggle-details').getAttribute('data-target');
        document.getElementById(targetId).classList.add('d-none');
      }
    });
    
    // Update picklist data based on filter
    updatePicklistData();
  });

  // Function to update picklist data based on current filter
  function updatePicklistData() {
    var filteredPicklist = {};
    
    if (currentFilter === 'all') {
      // Send all data
      filteredPicklist = fullPicklistData;
    } else {
      // Filter based on status
      Object.keys(fullPicklistData).forEach(function(soNumber) {
        var itemsGroup = fullPicklistData[soNumber];
        var hasIssue = false;
        
        // Check if SO has issues
        itemsGroup.forEach(function(items) {
          items.forEach(function(item) {
            if ((item.status || 'OK') !== 'OK') {
              hasIssue = true;
            }
          });
        });
        
        var rowStatus = hasIssue ? 'issue' : 'ok';
        
        // Only include if matches filter
        if (rowStatus === currentFilter) {
          filteredPicklist[soNumber] = itemsGroup;
        }
      });
    }
    
    // Update hidden input with filtered data
    document.getElementById('picklist-data').value = JSON.stringify(filteredPicklist);
    
    console.log('Filtered picklist updated. Filter:', currentFilter, 'SOs count:', Object.keys(filteredPicklist).length);
  }

  // Show confirmation modal when Continue is clicked
  var confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
  var form = document.getElementById('picklistStoreForm');
  var submitted = false;

  document.getElementById('showConfirmModal').addEventListener('click', function() {
    // Get selected SOs
    var selectedCheckboxes = document.querySelectorAll('.so-select:checked');

    // Build list of selected SOs
    var selectedSOs = [];
    selectedCheckboxes.forEach(function(cb) {
      selectedSOs.push(cb.value);
    });
    
    // Display selected SOs in modal
    var soListHtml = '<ul class="mb-0">';
    selectedSOs.forEach(function(so) {
      soListHtml += '<li>' + so + '</li>';
    });
    soListHtml += '</ul>';
    soListHtml += '<hr class="my-2"><strong>Total: ' + selectedSOs.length + ' Sales Order(s)</strong>';
    
    document.getElementById('selectedSoList').innerHTML = soListHtml;
    
    // Show modal
    confirmModal.show();
  });

  // Handle Cancel button - redirect to generate-picklist
  document.getElementById('cancelBtn').addEventListener('click', function() {
    confirmModal.hide();
    window.location.href = '/location-user/generate-picklist';
  });

  // Handle Continue button - submit form (with location_id check)
  document.getElementById('confirmContinueBtn').addEventListener('click', function() {
    if (submitted) return;

    // Client-side safety: ensure location_id is available before submitting
    if (!currentLocationId || currentLocationId === 'null' || currentLocationId === 'undefined') {
      alert('Location is not set. Please login again from the location dashboard.');
      window.location.href = '/location-dashboard';
      return;
    }
    
    // Create picklist with ONLY OK SOs (no short SOs)
    var okOnlyPicklist = {};
    Object.keys(fullPicklistData).forEach(function(soNumber) {
      var itemsGroup = fullPicklistData[soNumber];

      // Short check must be per SKU aggregated across racks
      var skuAgg = {};
      itemsGroup.forEach(function(items) {
        items.forEach(function(item) {
          var sku = (item.sku || '').toString();
          var rack = (item.rack || 'N/A').toString();
          var status = (item.status || 'OK').toString();
          var req = parseFloat(item.required_qty || 0) || 0;
          var picked = parseFloat(item.picked_qty || 0) || 0;

          if (!skuAgg[sku]) {
            skuAgg[sku] = { required: req, picked: 0, hasNaShort: false };
          }
          skuAgg[sku].required = Math.max(skuAgg[sku].required, req);
          if (rack !== 'N/A') {
            skuAgg[sku].picked += picked;
          }
          if (rack === 'N/A' && status !== 'OK') {
            skuAgg[sku].hasNaShort = true;
          }
        });
      });

      var hasShort = Object.keys(skuAgg).some(function(sku) {
        var r = skuAgg[sku];
        return r.hasNaShort || (r.picked + 1e-6 < r.required);
      });
      
      // Only include if it's NOT a short SO (i.e., no shortage items)
      if (!hasShort) {
        okOnlyPicklist[soNumber] = itemsGroup;
      }
    });
    
    // Update hidden input with OK-only data
    document.getElementById('picklist-data').value = JSON.stringify(okOnlyPicklist);
    
    submitted = true;
    
    // Disable buttons and show spinner
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
    document.getElementById('cancelBtn').disabled = true;
    
    // Submit form
    form.submit();
  });
  
  // Initialize with current filter
  updatePicklistData();

  // ===== SHORT PICKLIST TAB LOGIC =====
  
  // Toggle details for short items - use event delegation
  document.addEventListener('click', function(e) {
    var btn = e.target.closest('button.toggle-details');
    var shortPane = document.getElementById('tab-short-picklist-pane');
    if (btn && shortPane && shortPane.contains(btn)) {
      e.preventDefault();
      e.stopPropagation();
      var targetId = btn.getAttribute('data-target');
      var row = document.getElementById(targetId);
      if (row) {
        if (row.classList.contains('d-none')) {
          row.classList.remove('d-none');
          btn.innerHTML = '<i class="fas fa-eye-slash"></i> Hide';
        } else {
          row.classList.add('d-none');
          btn.innerHTML = '<i class="fas fa-eye"></i> Show';
        }
      }
    }
  });

  // Handle short continue button
  var shortBtn = document.getElementById('shortContinueBtn');
  if (shortBtn) {
    shortBtn.addEventListener('click', function() {
      if (!currentLocationId || currentLocationId === 'null' || currentLocationId === 'undefined') {
        alert('Location is not set. Please login again from the location dashboard.');
        window.location.href = '/location-dashboard';
        return;
      }

      // 1) Get selected short SOs in Short tab
      var selectedCheckboxes = document.querySelectorAll('#tab-short-picklist-pane .short-so-select:checked');
      var selectedSOs = [];
      selectedCheckboxes.forEach(function (cb) { selectedSOs.push(cb.value); });

      // 2) Decide which SOs to include in payload
      //    Always send ALL short SOs in picklist payload; backend will merge
      //    only the explicitly selected ones and make separate picklists for the rest.
      var sosToProcess = [];
      document.querySelectorAll('#tab-short-picklist-pane .short-so-row').forEach(function (row) {
        var soNum = row.getAttribute('data-so');
        if (soNum) sosToProcess.push(soNum);
      });

      if (sosToProcess.length === 0) {
        alert('No short Sales Orders found to generate picklist.');
        return;
      }

      // 3) Build payload: send full data for each SO (no status filtering)
      var shortOnlyPicklist = {};
      sosToProcess.forEach(function (soNum) {
        if (fullPicklistData[soNum]) {
          shortOnlyPicklist[soNum] = fullPicklistData[soNum];
        }
      });

      // 4) Prepare selected_sos[] fields
      var shortForm = document.getElementById('shortPicklistForm');

      // Remove any existing dynamically added selected_sos inputs
      shortForm.querySelectorAll('input[name="selected_sos[]"]').forEach(function (el) {
        el.parentNode.removeChild(el);
      });

      // Only add selected_sos[] inputs when user has explicitly selected SOs
      if (selectedSOs.length > 0) {
        selectedSOs.forEach(function (so) {
          var hidden = document.createElement('input');
          hidden.type = 'hidden';
          hidden.name = 'selected_sos[]';
          hidden.value = so;
          shortForm.appendChild(hidden);
        });
      }

      // 5) Fill hidden field and submit
      document.getElementById('short-picklist-data').value = JSON.stringify(shortOnlyPicklist);

      this.disabled = true;
      this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

      document.getElementById('shortPicklistForm').submit();
    });
  }

});
</script>
@endsection