@extends('layouts.location')

@section('title', 'Short Picklist / Packlist')
@section('page-title', 'Short Picklist / Packlist')
@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] ?? []);

                            $normalizePackName = function ($name) {
                              $name = trim((string) $name);
                              if ($name === '') {
                                return $name;
                              }
                              $parts = preg_split('/\s+/', $name);
                              if (count($parts) > 1) {
                                $last = end($parts);
                                $cleanLast = preg_replace('/[^A-Z0-9-]/', '', strtoupper($last));
                                $looksLikeSku = (
                                  $cleanLast !== ''
                                  && preg_match('/^[A-Z0-9-]+$/', $cleanLast)
                                  && (str_contains($cleanLast, '-') || (preg_match('/[A-Z]/', $cleanLast) && preg_match('/[0-9]/', $cleanLast)))
                                );
                                if ($looksLikeSku) {
                                  array_pop($parts);
                                  $name = implode(' ', $parts);
                                }
                              }
                              $name = str_replace(["*", "/", "\\", "×"], ' ', $name);
                              $name = preg_replace('/\s+/', ' ', trim($name));
                              return $name;
                            };

                            $boxKeysByPackId = [];
                            $allBoxKeys = collect();
                            foreach ($rows as $row) {
                              $keys = collect();
                              try {
                                $items = json_decode($row->items, true);
                                if (is_array($items)) {
                                  foreach ($items as $it) {
                                    if (is_string($it)) {
                                      $decoded = json_decode($it, true);
                                      $it = is_array($decoded) ? $decoded : $it;
                                    }
                                    if (is_array($it) && isset($it['item'])) {
                                      $rawName = (string) ($it['item'] ?? '');
                                      $sku = trim((string) ($it['sku'] ?? ''));
                                      $key = $sku !== '' ? ('SKU:' . $sku) : ('NAME:' . $normalizePackName($rawName));
                                      if ($key !== 'NAME:' && $key !== 'SKU:') {
                                        $keys->push($key);
                                      }
                                    }
                                  }
                                }
                              } catch (\Throwable $e) {
                              }
                              $keys = $keys->filter()->unique()->values();
                              $boxKeysByPackId[(string) $row->id] = $keys;
                              $allBoxKeys = $allBoxKeys->merge($keys);
                            }
                            $allBoxKeys = $allBoxKeys->filter()->unique()->values();
                          @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);
                              }

                              $packId = (string) $r->id;
                              $keysForBox = isset($boxKeysByPackId[$packId]) ? $boxKeysByPackId[$packId] : collect();
                              if (!$keysForBox instanceof \Illuminate\Support\Collection) {
                                $keysForBox = collect($keysForBox);
                              }
                              $diffsForBox = $diffsForSo->filter(function ($d) use ($keysForBox) {
                                $k = isset($d['item_key']) ? (string) $d['item_key'] : '';
                                return $k !== '' && $keysForBox->contains($k);
                              })->values();
                            @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($diffsForBox->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($diffsForBox 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 box.</div>
                                  @endif
                                </div>
                              </td>
                            </tr>
                          @endforeach

                          @php
                            $unboxedDiffs = $diffsForSo->filter(function ($d) use ($allBoxKeys) {
                              $k = isset($d['item_key']) ? (string) $d['item_key'] : '';
                              return $k !== '' && !$allBoxKeys->contains($k);
                            })->values();
                          @endphp
                          @if($unboxedDiffs->isNotEmpty())
                            <tr class="short-pack-row d-none" data-parent-so-no="{{ $soNo }}" data-pack-id="unboxed-{{ $soNo }}">
                              <td></td>
                              <td colspan="4">
                                <div class="small">
                                  <div class="mb-1"><strong>Box:</strong> -</div>
                                  <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($unboxedDiffs 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>
                                </div>
                              </td>
                            </tr>
                          @endif
                        @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, remark, remarkType) {
          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));
          }
          if (remark !== null && remark !== undefined) {
            formData.append('remark', String(remark));
          }
          if (remarkType) {
            formData.append('remark_type', String(remarkType));
          }

          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 = 'inv-completed';
          } else if (action === 'reject') {
            // On reject from dispatch short-picklist, mark as rejected
            status = 'rejected';
          }

          if (!id || !status) return;

          const remark = window.prompt('Please enter remark for ' + (action === 'accept' ? 'Accept' : 'Reject') + ':', '');
          if (remark === null) {
            return;
          }

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

          sendShortUpdate(id, pickQty, status, remark, action)
            .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;

            const remark = window.prompt('Please enter remark for Accept All for PIC ID ' + picId + ':', '');
            if (remark === null) 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, 'inv-completed', remark, 'accept'));
              }
            });

            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;

            const remark = window.prompt('Please enter remark for Reject All for PIC ID ' + picId + ':', '');
            if (remark === null) 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;
              // For bulk reject, mark items as rejected
              const status = 'rejected';
              if (id) {
                promises.push(sendShortUpdate(id, pickQty, status, remark, 'reject'));
              }
            });

            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, remark, remarkType) {
          return fetch('/directapi/picking-status-proxy.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ so_no: soNo, status: status, remark: remark, remark_type: remarkType })
          }).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;
          });
        }

        // function printPackStatusToConsole(soNo, status) {
        //   // Use console.log to print the values that would have been used in the request body
        //   console.log('📦 Simulating Pack Status Update 📦');
        //   console.log('--- Request Details ---');
        //   console.log('Endpoint: /directapi/picking-status-proxy.php');
        //   console.log('Method: POST');
        //   console.log('Content-Type: application/json');
        //   console.log('Request Body:');

        //   // Create and print the JSON object that would be sent
        //   const requestBody = {
        //     so_no: soNo,
        //     status: status
        //   };

        //   console.log(JSON.stringify(requestBody, null, 2));

        //   // Optional: A final confirmation message
        //   console.log('✅ Values printed to console. No API call was made.');
        // }


        document.querySelectorAll('.short-pack-accept').forEach(function (btn) {
          btn.addEventListener('click', function () {
            const soNo = btn.getAttribute('data-so-no');
            if (!soNo) return;
            const remark = window.prompt('Please enter remark for Accept (Force Pack) for SO ' + soNo + ':', '');
            if (remark === null) return;
            if (!confirm('Force accept (pack) all boxes for SO ' + soNo + '?')) return;

            btn.setAttribute('disabled', 'disabled');
            sendPackStatusViaProxy(soNo, 'inv-completed', remark, 'accept')
              .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;
            const remark = window.prompt('Please enter remark for Reject (Back to Pending) for SO ' + soNo + ':', '');
            if (remark === null) return;
            if (!confirm('Reject short packlist for SO ' + soNo + ' and mark as rejected?')) return;

            btn.setAttribute('disabled', 'disabled');
            sendPackStatusViaProxy(soNo, 'rejected', remark, 'reject')
              .then(function () {
                alert('Packing status updated to rejected 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