@extends('layouts.location')

@section('title', 'Short Picklist')
@section('page-title', 'Short Picklist')
@push('styles')
<style>
  .no-select, .no-select * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .no-select a:focus { outline: none !important; box-shadow: none !important; }

  /* Short Picklist styling */
  #shortPicklistTable thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  #shortPicklistTable tbody tr.short-pic-summary {
    background-color: #f8f9fa;
    font-weight: 500;
  }
  #shortPicklistTable tbody tr.short-pic-summary td {
    border-top-width: 0;
    border-bottom: 1px solid #dee2e6;
  }
  #shortPicklistTable tbody tr.short-pic-row td {
    border-top-width: 0;
    font-size: 0.85rem;
  }
  .toggle-short-rows {
    color: #0d6efd;
  }
  .toggle-short-rows:hover {
    text-decoration: none;
  }

  /* Short Packlist styling */
  #shortPacklistTable thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  #shortPacklistTable tbody tr.short-pack-summary {
    background-color: #f8f9fa;
    font-weight: 500;
  }
  #shortPacklistTable tbody tr.short-pack-summary td {
    border-top-width: 0;
    border-bottom: 1px solid #dee2e6;
  }
  #shortPacklistTable tbody tr.short-pack-row td {
    border-top-width: 0;
    font-size: 0.85rem;
  }
  .toggle-short-pack-rows {
    color: #0d6efd;
  }
  .toggle-short-pack-rows:hover {
    text-decoration: none;
  }
</style>
@endpush

@section('content')
<div class="no-select">
  <div class="row">
    <div class="col-lg-12 mb-4">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent">
          <ul class="nav nav-tabs card-header-tabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="shortpick-tab" data-bs-toggle="tab" data-bs-target="#shortpick-tab-pane" type="button" role="tab">Short Picklist</button>
            </li>

            {{-- <li class="nav-item" role="presentation">
              <button class="nav-link" id="shortpack-tab" data-bs-toggle="tab" data-bs-target="#shortpack-tab-pane" type="button" role="tab">Short Packlist</button>
            </li> --}}
            
          </ul>
        </div>
        <div class="card-body">
          <div class="tab-content">
            <div class="tab-pane fade show active" id="shortpick-tab-pane" role="tabpanel" aria-labelledby="shortpick-tab">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                  <h5 class="mb-1">Short Picklist (Hold Items)</h5>
                  <small class="text-muted">Items from so_picklist with status = 'hold', grouped by PIC ID.</small>
                </div>
              </div>

              @php
                $shortGroups = collect($shortPicklist ?? [])->groupBy('pic_id');
              @endphp

              @if($shortGroups->isEmpty())
                <div class="alert alert-info mb-0">No short picklist items in hold status.</div>
              @else
                <div class="table-responsive">
                  <table class="table table-sm align-middle mb-0" id="shortPicklistTable">
                    <thead class="table-light">
                      <tr>
                        <th style="width:40px;"></th>
                        <th>PIC ID</th>
                        <th>Sales Orders</th>
                        <th>Items (Count)</th>
                        {{-- <th class="text-end" style="width:160px;">Bulk Actions</th> --}}
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($shortGroups as $picId => $rows)
                        @php
                          $soList = $rows->pluck('sales_order_number')->unique()->implode(', ');
                          $itemCount = $rows->count();
                        @endphp
                        <tr class="short-pic-summary" data-pic-id="{{ $picId }}">
                          <td>
                            <button type="button" class="btn btn-link btn-sm p-0 toggle-short-rows" data-pic-id="{{ $picId }}" aria-label="Toggle rows">
                              ▶
                            </button>
                          </td>
                          <td>{{ $picId }}</td>
                          <td>{{ $soList }}</td>
                          <td>{{ $itemCount }}</td>
                          {{-- <td class="text-end">
                            <button type="button" class="btn btn-success btn-sm short-action-accept-all" data-pic-id="{{ $picId }}">Accept All</button>
                            <button type="button" class="btn btn-danger btn-sm short-action-reject-all ms-1" data-pic-id="{{ $picId }}">Reject All</button>
                          </td> --}}
                        </tr>
                        @foreach($rows as $r)
                          <tr class="short-pic-row d-none" data-parent-pic-id="{{ $picId }}" data-row-id="{{ $r->id }}" data-pick-qty="{{ $r->pick_qty ?? 0 }}">
                            <td></td>
                            <td colspan="4">
                              <div class="d-flex flex-wrap align-items-center justify-content-between">
                                <div class="small">
                                  <div><strong>SO:</strong> {{ $r->sales_order_number }}</div>
                                  <div><strong>SKU:</strong> {{ $r->sku }} | <strong>Rack:</strong> {{ $r->rack }}</div>
                                  <div><strong>Picked:</strong> {{ $r->picked_qty }} | <strong>Pick Qty:</strong> {{ $r->pick_qty ?? 0 }}</div>
                                  <div><strong>Status:</strong> {{ $r->status }}</div>
                                </div>

                                {{-- <div class="d-flex gap-2 mt-1 mt-md-0">

                                  <button type="button" class="btn btn-success btn-sm short-action-accept"
                                          data-id="{{ $r->id }}"
                                          data-pick-qty="{{ $r->pick_qty ?? 0 }}">
                                    Accept
                                  </button>
                                  <button type="button" class="btn btn-danger btn-sm short-action-reject"
                                          data-id="{{ $r->id }}"
                                          data-pick-qty="{{ $r->pick_qty ?? 0 }}">
                                    Reject
                                  </button>

                                </div> --}}

                              </div>
                            </td>
                          </tr>
                        @endforeach
                      @endforeach
                    </tbody>
                  </table>
                </div>
              @endif
            </div>

            {{-- <div class="tab-pane fade" id="shortpack-tab-pane" role="tabpanel" aria-labelledby="shortpack-tab">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                  <h5 class="mb-1">Short Packlist (Hold SOs)</h5>
                  <!-- <small class="text-muted">SO-level packing entries from so_packing with status = 'hold'.</small> -->
                </div>
              </div>

              @php
                $shortPackGroups = collect($shortPacklist ?? [])->groupBy('so_no');
              @endphp

              @if($shortPackGroups->isEmpty())
                <div class="alert alert-info mb-0">No short packlist entries in hold status.</div>
              @else
                <div class="table-responsive">
                  <table class="table table-sm align-middle mb-0" id="shortPacklistTable">
                    <thead class="table-light">
                      <tr>
                        <th style="width:40px;"></th>
                        <th>SO No</th>
                        <th>Boxes</th>
                        <th>Items (Total Qty)</th>
                        <th class="text-end" style="width:220px;">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($shortPackGroups as $soNo => $rows)
                        @php
                          $boxCount = $rows->count();
                          $totalQty = 0;
                          foreach ($rows as $row) {
                              try {
                                  $items = json_decode($row->items, true);
                                  if (is_array($items)) {
                                      foreach ($items as $it) {
                                          if (is_string($it)) {
                                              $it = json_decode($it, true);
                                          }
                                          if (is_array($it) && isset($it['qty'])) {
                                              $totalQty += (float)$it['qty'];
                                          }
                                      }
                                  }
                              } catch (\Throwable $e) {}
                          }

                          $diffsForSo = collect($shortPackDiffs[$soNo] ?? []);
                        @endphp
                        <tr class="short-pack-summary" data-so-no="{{ $soNo }}">
                          <td>
                            <button type="button" class="btn btn-link btn-sm p-0 toggle-short-pack-rows" data-so-no="{{ $soNo }}" aria-label="Toggle rows">
                              ▶
                            </button>
                          </td>
                          <td>{{ $soNo }}</td>
                          <td>{{ $boxCount }}</td>
                          <td>{{ $totalQty }}</td>
                          <td class="text-end">
                            <button type="button" class="btn btn-success btn-sm short-pack-accept" data-so-no="{{ $soNo }}">Accept (Force Pack)</button>
                            <button type="button" class="btn btn-danger btn-sm ms-1 short-pack-reject" data-so-no="{{ $soNo }}">Reject (Back to Pending)</button>
                          </td>
                        </tr>
                        @foreach($rows as $r)
                          @php
                            $boxVal = $r->box;
                            $boxDecoded = null;
                            try {
                              $boxDecoded = json_decode($r->box, true);
                            } catch (\Throwable $e) {}
                            if (is_array($boxDecoded)) {
                              $boxVal = implode(', ', $boxDecoded);
                            }
                          @endphp
                          <tr class="short-pack-row d-none" data-parent-so-no="{{ $soNo }}" data-pack-id="{{ $r->id }}">
                            <td></td>
                            <td colspan="4">
                              <div class="small">
                                <div class="mb-1"><strong>Box:</strong> {{ $boxVal }}</div>
                                <div class="mb-1"><strong>Dimension:</strong> {{ $r->dimension }} | <strong>Weight:</strong> {{ $r->weight }}</div>
                                <div class="mb-1"><strong>Status:</strong> {{ $r->status }}</div>

                                @if($diffsForSo->isNotEmpty())
                                  <div class="mt-2">
                                    <strong>Items:</strong>
                                    <div class="table-responsive mt-1">
                                      <table class="table table-sm table-bordered mb-0">
                                        <thead class="table-secondary">
                                          <tr>
                                            <th>Item</th>
                                            <th class="text-end">SO Qty</th>
                                            <th class="text-end">Packed Qty</th>
                                            <th class="text-end">Diff</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          @foreach($diffsForSo as $d)
                                            <tr>
                                              <td>{{ $d['item_name'] ?? '' }}</td>
                                              <td class="text-end">{{ $d['so_qty'] ?? 0 }}</td>
                                              <td class="text-end">{{ $d['packed_qty'] ?? 0 }}</td>
                                              <td class="text-end">{{ $d['diff'] ?? 0 }}</td>
                                            </tr>
                                          @endforeach
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                @else
                                  <div class="mt-2 text-muted">No quantity differences for this SO.</div>
                                @endif
                              </div>
                            </td>
                          </tr>
                        @endforeach
                      @endforeach
                    </tbody>
                  </table>
                </div>
              @endif
            </div> --}}

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  try {
    // --- Short Picklist (existing behavior) ---
    const shortToggleButtons = document.querySelectorAll('.toggle-short-rows');
    shortToggleButtons.forEach(function (btn) {
      btn.addEventListener('click', function () {
        const picId = btn.getAttribute('data-pic-id');
        const rows = document.querySelectorAll('.short-pic-row[data-parent-pic-id="' + picId + '"]');
        const isOpen = btn.classList.contains('open');
        rows.forEach(function (tr) {
          tr.classList.toggle('d-none', isOpen);
        });
        btn.classList.toggle('open', !isOpen);
        btn.textContent = isOpen ? '▶' : '▼';
      });
    });

    const shortUser = @json(session('email'));
    const shortLocationId = @json(session('location_id'));

    function sendShortUpdate(id, pickQty, status) {
      const formData = new FormData();
      formData.append('id', id);
      formData.append('status', status);
      formData.append('pick_qty', String(pickQty));
      formData.append('user', shortUser || 'dispatch');
      if (shortLocationId) {
        formData.append('location_id', String(shortLocationId));
      }

      return fetch('/directapi/update_picklist.php', {
        method: 'POST',
        body: formData
      })
        .then(function (res) { return res.json().catch(function () { return { success: false, message: 'Invalid JSON response' }; }); })
        .then(function (data) {
          if (!data || data.success !== true) {
            throw new Error(data && data.message ? data.message : 'Failed to update picklist status');
          }
          return data;
        });
    }

    function handleShortAction(button, action) {
      if (!button) return;
      const id = button.getAttribute('data-id');
      const pickQtyStr = button.getAttribute('data-pick-qty') || '0';
      const pickQty = parseFloat(pickQtyStr) || 0;

      let status = '';
      if (action === 'accept') {
        status = 'force_completed';
      } else if (action === 'reject') {
        status = (pickQty === 0 ? 'pending' : 'partial');
      }

      if (!id || !status) return;

      button.setAttribute('disabled', 'disabled');

      sendShortUpdate(id, pickQty, status)
        .then(function () {
          alert('Status updated successfully.');
          window.location.reload();
        })
        .catch(function (err) {
          alert('Error updating picklist: ' + (err && err.message ? err.message : 'Unexpected error'));
        })
        .finally(function () {
          button.removeAttribute('disabled');
        });
    }

    document.querySelectorAll('.short-action-accept').forEach(function (btn) {
      btn.addEventListener('click', function () { handleShortAction(btn, 'accept'); });
    });

    document.querySelectorAll('.short-action-reject').forEach(function (btn) {
      btn.addEventListener('click', function () { handleShortAction(btn, 'reject'); });
    });

    // Bulk actions per PIC ID
    document.querySelectorAll('.short-action-accept-all').forEach(function (btn) {
      btn.addEventListener('click', function () {
        const picId = btn.getAttribute('data-pic-id');
        if (!picId) return;
        const rows = document.querySelectorAll('.short-pic-row[data-parent-pic-id="' + picId + '"]');
        if (!rows.length) return;

        if (!confirm('Accept all short items for PIC ID ' + picId + '?')) return;

        const promises = [];
        rows.forEach(function (row) {
          const id = row.getAttribute('data-row-id');
          const pickQtyStr = row.getAttribute('data-pick-qty') || '0';
          const pickQty = parseFloat(pickQtyStr) || 0;
          if (id) {
            promises.push(sendShortUpdate(id, pickQty, 'force_completed'));
          }
        });

        Promise.allSettled(promises).then(function (results) {
          const failed = results.filter(function (r) { return r.status === 'rejected'; });
          if (failed.length) {
            alert('Some items failed to update. Please refresh and check.');
          }
          window.location.reload();
        });
      });
    });

    document.querySelectorAll('.short-action-reject-all').forEach(function (btn) {
      btn.addEventListener('click', function () {
        const picId = btn.getAttribute('data-pic-id');
        if (!picId) return;
        const rows = document.querySelectorAll('.short-pic-row[data-parent-pic-id="' + picId + '"]');
        if (!rows.length) return;

        if (!confirm('Reject all short items for PIC ID ' + picId + ' (send back to picking)?')) return;

        const promises = [];
        rows.forEach(function (row) {
          const id = row.getAttribute('data-row-id');
          const pickQtyStr = row.getAttribute('data-pick-qty') || '0';
          const pickQty = parseFloat(pickQtyStr) || 0;
          let status = (pickQty === 0 ? 'pending' : 'partial');
          if (id) {
            promises.push(sendShortUpdate(id, pickQty, status));
          }
        });

        Promise.allSettled(promises).then(function (results) {
          const failed = results.filter(function (r) { return r.status === 'rejected'; });
          if (failed.length) {
            alert('Some items failed to update. Please refresh and check.');
          }
          window.location.reload();
        });
      });
    });
  } catch (e) {}

//   // --- Short Packlist (so_packing) ---
//   try {
//     const packToggleButtons = document.querySelectorAll('.toggle-short-pack-rows');
//     packToggleButtons.forEach(function (btn) {
//       btn.addEventListener('click', function () {
//         const soNo = btn.getAttribute('data-so-no');
//         const rows = document.querySelectorAll('.short-pack-row[data-parent-so-no="' + soNo + '"]');
//         const isOpen = btn.classList.contains('open');
//         rows.forEach(function (tr) {
//           tr.classList.toggle('d-none', isOpen);
//         });
//         btn.classList.toggle('open', !isOpen);
//         btn.textContent = isOpen ? '▶' : '▼';
//       });
//     });

//     function sendPackStatusViaProxy(soNo, status) {
//       return fetch('/directapi/picking-status-proxy.php', {
//         method: 'POST',
//         headers: { 'Content-Type': 'application/json' },
//         body: JSON.stringify({ so_no: soNo, status: status })
//       }).then(function (res) {
//         return res.json().catch(function () { return { success: false, message: 'Invalid JSON response' }; });
//       }).then(function (data) {
//         if (!data || data.success !== true) {
//           throw new Error(data && data.message ? data.message : 'Failed to update packlist status');
//         }
//         return data;
//       });
//     }

//     document.querySelectorAll('.short-pack-accept').forEach(function (btn) {
//       btn.addEventListener('click', function () {
//         const soNo = btn.getAttribute('data-so-no');
//         if (!soNo) return;
//         if (!confirm('Force accept (pack) all boxes for SO ' + soNo + '?')) return;

//         btn.setAttribute('disabled', 'disabled');
//         sendPackStatusViaProxy(soNo, 'force_completed')
//           .then(function () {
//             alert('Packing status updated to force_completed for ' + soNo);
//             window.location.reload();
//           })
//           .catch(function (err) {
//             alert('Error updating packing status: ' + (err && err.message ? err.message : 'Unexpected error'));
//           })
//           .finally(function () {
//             btn.removeAttribute('disabled');
//           });
//       });
//     });

//     document.querySelectorAll('.short-pack-reject').forEach(function (btn) {
//       btn.addEventListener('click', function () {
//         const soNo = btn.getAttribute('data-so-no');
//         if (!soNo) return;
//         if (!confirm('Reject short packlist for SO ' + soNo + ' and move back to pending?')) return;

//         btn.setAttribute('disabled', 'disabled');
//         sendPackStatusViaProxy(soNo, 'pending')
//           .then(function () {
//             alert('Packing status updated to pending for ' + soNo);
//             window.location.reload();
//           })
//           .catch(function (err) {
//             alert('Error updating packing status: ' + (err && err.message ? err.message : 'Unexpected error'));
//           })
//           .finally(function () {
//             btn.removeAttribute('disabled');
//           });
//       });
//     });
//   } catch (e) {}
});
</script>
@endpush