@extends('layouts.location')

@section('title', 'Short Packlist')
@section('page-title', 'Short 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; }

    #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="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="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;
try { $decoded = json_decode($r->box, true); }
catch (\Throwable $e) { $decoded = null; }
if (is_array($decoded)) $boxVal = implode(', ', $decoded);
@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 {
        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(tr => tr.classList.toggle('d-none', isOpen));
                btn.classList.toggle('open', !isOpen);
                btn.textContent = isOpen ? '▶' : '▼';
            });
        });

        function sendPackStatus(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(res => res.json().catch(() => ({ success: false, message: 'Invalid JSON response' })))
            .then(data => {
                if (!data || data.success !== true) {
                    throw new Error(data?.message || 'Failed to update packlist status');
                }
                return data;
            });
        }

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

                btn.disabled = true;

                sendPackStatus(soNo, 'force_completed')
                    .then(() => {
                        alert('Packing status updated to force_completed for ' + soNo);
                        window.location.reload();
                    })
                    .catch(err => alert('Error: ' + err.message))
                    .finally(() => btn.disabled = false);
            });
        });

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

                btn.disabled = true;

                sendPackStatus(soNo, 'pending')
                    .then(() => {
                        alert('Packing status updated to pending for ' + soNo);
                        window.location.reload();
                    })
                    .catch(err => alert('Error: ' + err.message))
                    .finally(() => btn.disabled = false);
            });
        });

    } catch (e) {}
});
</script>
@endpush