{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/receptions/create.blade.php | v3.1 | 25/07/2026 --}}
{{-- v3.1 — novalidate en <form>: fix silent-block en formularios multi-tab con required. --}}
{{-- v2.1 — buildRulesTab: pre-llena Expected desde datos OC. Auto-match con tolerancia. --}}
{{-- v2.0 — Wizard 4 tabs SAP-style: Document -> Verification -> Items -> Confirm.      --}}
{{-- v3.0 — PO Info Strip muestra items con part#, SKU, material type y bin sugerido.   --}}
{{--         Modal de detalle de producto. searchPo retorna suggested_bins.              --}}

@extends('layouts.vertical', ['pageTitle' => __('warehouse.gr-new')])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-truck-loading"></i> {{ __('warehouse.gr-new') }}
        <small id="subheader-po-info">{{ __('warehouse.gr-scan-to-begin') }}</small>
    </h1>
    <div class="subheader-block">
        <a href="{{ route('warehouse.receptions.index') }}" class="btn btn-secondary btn-sm">
            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back') }}
        </a>
    </div>
</div>
@endsection

@section('content')

@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show mb-3">
    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<form action="{{ route('warehouse.receptions.store') }}" method="POST" id="grForm" novalidate>
@csrf

{{-- Scanner Bar --}}
<div class="panel mb-3">
    <div class="panel-container show">
        <div class="panel-content py-2">
            <div class="row g-2 align-items-center">
                <div class="col-auto">
                    <i class="fal fa-barcode-scan fa-2x text-primary"></i>
                </div>
                <div class="col-auto">
                    <label class="form-label fw-bold mb-0 small">{{ __('warehouse.po-number') }}</label>
                </div>
                <div class="col-md-3">
                    <input type="text" id="scanInput" class="form-control fw-bold"
                           placeholder="{{ __('warehouse.ph-scan-po') }}"
                           autocomplete="off" autofocus>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary" id="btnSearchPo">
                        <i class="fal fa-search me-1"></i> {{ __('warehouse.load-po') }}
                    </button>
                </div>
                <div class="col-auto" id="poLoadedBadge" style="display:none;">
                    <span class="badge bg-success fs-6">
                        <i class="fal fa-check me-1"></i>
                        <span id="poLoadedNumber"></span>
                    </span>
                </div>
                <div class="col" id="poLoadingSpinner" style="display:none;">
                    <span class="spinner-border spinner-border-sm text-primary me-2"></span>
                    <small class="text-muted">{{ __('warehouse.loading-po') }}</small>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- PO Info Strip --}}
<div id="poInfoStrip" style="display:none;" class="mb-3">
    <div class="panel">
        <div class="panel-container show">
            <div class="panel-content py-2">
                <div class="row g-3 mb-2">
                    <div class="col-md-2">
                        <div class="text-xs text-muted fw-bold">{{ __('warehouse.po-number') }}</div>
                        <div class="fw-bold text-primary" id="infoPONumber">--</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-xs text-muted fw-bold">{{ __('warehouse.supplier') }}</div>
                        <div class="fw-bold" id="infoSupplier">--</div>
                    </div>
                    <div class="col-md-2">
                        <div class="text-xs text-muted fw-bold">{{ __('warehouse.expected-date') }}</div>
                        <div id="infoExpected">--</div>
                    </div>
                    <div class="col-md-2">
                        <div class="text-xs text-muted fw-bold">{{ __('warehouse.currency') }}</div>
                        <div id="infoCurrency">--</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-xs text-muted fw-bold">{{ __('warehouse.po-total') }}</div>
                        <div class="fw-bold text-success" id="infoTotal">--</div>
                    </div>
                </div>
                {{-- Items de la PO con material type y bin sugerido --}}
                <div id="poItemsStrip" style="border-top:1px solid #dee2e6;padding-top:10px;margin-top:4px;"></div>
            </div>
        </div>
    </div>
</div>

{{-- Hidden fields --}}
<input type="hidden" id="hiddenPoId" name="purchase_order_id">
<input type="hidden" id="hiddenPoNumber" name="purchase_order_number">
<input type="hidden" id="hiddenSupplierId" name="supplier_id">

{{-- Wizard --}}
<div id="wizardPanel" style="display:none;">
<div class="panel">
    <div class="panel-container show">
        <div class="panel-content p-0">
            <ul class="nav nav-tabs nav-tabs-clean d-flex flex-row border-bottom-0 px-3 pt-2" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="tab1-link" data-bs-toggle="tab" href="#tab1" role="tab">
                        <i class="fal fa-file-alt me-1"></i>
                        <span class="d-none d-md-inline">{{ __('warehouse.tab-document') }}</span>
                        <span class="d-md-none">1</span>
                        <i class="fal fa-check-circle text-success ms-1" id="tab1-check" style="display:none;"></i>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab2-link" data-bs-toggle="tab" href="#tab2" role="tab">
                        <i class="fal fa-clipboard-check me-1"></i>
                        <span class="d-none d-md-inline">{{ __('warehouse.tab-verification') }}</span>
                        <span class="d-md-none">2</span>
                        <i class="fal fa-check-circle text-success ms-1" id="tab2-check" style="display:none;"></i>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab3-link" data-bs-toggle="tab" href="#tab3" role="tab">
                        <i class="fal fa-boxes me-1"></i>
                        <span class="d-none d-md-inline">{{ __('warehouse.tab-items') }}</span>
                        <span class="d-md-none">3</span>
                        <i class="fal fa-check-circle text-success ms-1" id="tab3-check" style="display:none;"></i>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab4-link" data-bs-toggle="tab" href="#tab4" role="tab">
                        <i class="fal fa-check-double me-1"></i>
                        <span class="d-none d-md-inline">{{ __('warehouse.tab-confirm') }}</span>
                        <span class="d-md-none">4</span>
                    </a>
                </li>
            </ul>

            <div class="tab-content border border-top-0 p-3" id="grTabContent">

                {{-- TAB 1 - DOCUMENT --}}
                <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">{{ __('warehouse.delivery-note-remission') }} <span class="text-danger">*</span></label>
                            <input type="text" name="supplier_document" id="supplierDocument"
                                   class="form-control" placeholder="{{ __('warehouse.ph-supplier-remission') }}"
                                   onchange="checkTab1()">
                            <div class="form-text">{{ __('warehouse.delivery-note-help') }}</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">{{ __('warehouse.bill-of-lading') }}</label>
                            <input type="text" name="bill_of_lading" class="form-control"
                                   placeholder="{{ __('warehouse.ph-transport-doc') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">{{ __('warehouse.supplier-invoice') }}</label>
                            <input type="text" name="supplier_invoice" class="form-control"
                                   placeholder="{{ __('warehouse.ph-fac') }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small">{{ __('warehouse.posting-date') }} <span class="text-danger">*</span></label>
                            <input type="datetime-local" name="received_at" id="receivedAt"
                                   class="form-control" value="{{ now()->format('Y-m-d\TH:i') }}"
                                   onchange="checkTab1()">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small">{{ __('warehouse.dest-warehouse') }} <span class="text-danger">*</span></label>
                            <select name="warehouse_id" id="warehouseSelect" class="form-select"
                                    onchange="loadZones()" required>
                                <option value="">{{ __('warehouse.select-opt') }}</option>
                                @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}" data-zones="{{ $wh->zones->toJson() }}">
                                    {{ $wh->code }} -- {{ $wh->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small">{{ __('warehouse.zone') }} <span class="text-danger">*</span></label>
                            <select name="zone_id" id="zoneSelect" class="form-select" required
                                    onchange="checkTab1()">
                                <option value="">{{ __('warehouse.select-warehouse-first') }}</option>
                            </select>
                            <div class="form-text" id="zoneSuggestionText" style="color:#185FA5;display:none;">
                                <i class="fal fa-info-circle me-1"></i>{{ __('warehouse.suggested-material-type') }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small">{{ __('warehouse.received-by') }} <span class="text-danger">*</span></label>
                            <input type="text" name="received_by_name" class="form-control"
                                   value="{{ auth()->user()->name }}" required>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-primary" onclick="goToTab(2)">
                            {{ __('warehouse.next-verification') }} <i class="fal fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>

                {{-- TAB 2 - VERIFICATION --}}
                <div class="tab-pane fade" id="tab2" role="tabpanel">
                    <div class="alert alert-info py-2 mb-3 small">
                        <i class="fal fa-info-circle me-1"></i>
                        {!! __('warehouse.eval-rule-help') !!}
                    </div>
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <span class="text-muted small">{{ __('warehouse.rules-evaluated') }}</span>
                        <div class="progress flex-grow-1" style="height:8px;">
                            <div class="progress-bar bg-success" id="rulesProgress" style="width:0%"></div>
                        </div>
                        <span class="badge bg-secondary" id="rulesCounter">0 / 0</span>
                    </div>
                    <div id="rulesContainer">
                        <div class="text-center text-muted py-4">
                            <i class="fal fa-clipboard-check fa-3x mb-3 d-block opacity-25"></i>
                            {{ __('warehouse.load-po-first-rules') }}
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="goToTab(1)">
                            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back') }}
                        </button>
                        <button type="button" class="btn btn-primary" id="btnNextToItems" onclick="validateTab2()">
                            {{ __('warehouse.next-items') }} <i class="fal fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>

                {{-- TAB 3 - ITEMS --}}
                <div class="tab-pane fade" id="tab3" role="tabpanel">
                    <div class="alert alert-info py-2 mb-3 small">
                        <i class="fal fa-info-circle me-1"></i>
                        {{ __('warehouse.enter-qty-received') }}
                    </div>
                    <div id="itemsContainer">
                        <div class="text-center text-muted py-4">
                            <i class="fal fa-boxes fa-3x mb-3 d-block opacity-25"></i>
                            {{ __('warehouse.load-po-first-items') }}
                        </div>
                    </div>
                    <div id="totalsRow" style="display:none;" class="mt-3">
                        <div class="panel">
                            <div class="panel-hdr">
                                <h2><i class="fal fa-calculator me-2"></i> {{ __('warehouse.reception-totals') }}</h2>
                            </div>
                            <div class="panel-container show">
                                <div class="panel-content">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small">{{ __('warehouse.total-ordered') }}</label>
                                            <input type="number" id="totalOrdered" name="quantity_ordered"
                                                   class="form-control bg-light text-end fw-bold" readonly>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small">{{ __('warehouse.total-received') }} <span class="text-danger">*</span></label>
                                            <input type="number" id="totalReceived" name="quantity_received"
                                                   class="form-control text-end fw-bold" step="0.0001" min="0">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small">{{ __('warehouse.accepted') }}</label>
                                            <input type="number" id="totalAccepted" name="quantity_accepted"
                                                   class="form-control text-success text-end fw-bold" step="0.0001" min="0">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small">{{ __('warehouse.rejected') }}</label>
                                            <input type="number" id="totalRejected" name="quantity_rejected"
                                                   class="form-control text-danger text-end fw-bold"
                                                   value="0" step="0.0001" min="0">
                                        </div>
                                    </div>
                                    <hr class="my-3">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small">{{ __('warehouse.lot-number-auto') }}</label>
                                            <div class="input-group">
                                                <input type="text" name="lot_number" id="lotNumber"
                                                       class="form-control bg-light fw-bold"
                                                       value="{{ $suggestedLot }}" readonly>
                                                <button type="button" class="btn btn-outline-secondary btn-sm"
                                                        id="btnNewLot" title="{{ __('warehouse.generate-new-lot') }}">
                                                    <i class="fal fa-sync-alt"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small">{{ __('warehouse.expiry-date') }}</label>
                                            <input type="date" name="expiry_date" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small">{{ __('warehouse.bin-location') }}</label>
                                            <input type="text" id="suggestedBinDisplay" class="form-control bg-light fw-bold" readonly placeholder="{{ __('warehouse.ph-auto-assign-zone') }}">
                                            <input type="hidden" name="location_id" id="locationId">
                                            <div class="form-text text-success" id="binSuggestionText" style="display:none;">
                                                <i class="fal fa-check-circle me-1"></i>{{ __('warehouse.auto-assigned-system') }}
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small">{{ __('warehouse.photo-evidence-folder') }}</label>
                                            <input type="text" name="photo_folder_reference" class="form-control"
                                                   placeholder="\\NAS\evidencias\GR-2026-XXXX\">
                                        </div>
                                    </div>
                                    <div class="mt-3" id="rejectionReasonRow" style="display:none;">
                                        <label class="form-label fw-bold small text-danger">
                                            {{ __('warehouse.rejection-reason') }} <span class="text-danger">*</span>
                                        </label>
                                        <textarea name="rejection_reason" class="form-control" rows="2"
                                                  placeholder="{{ __('warehouse.ph-rejection-reason') }}"></textarea>
                                    </div>
                                    <div class="mt-3">
                                        <label class="form-label fw-bold small">{{ __('warehouse.reception-notes') }}</label>
                                        <textarea name="notes" class="form-control" rows="2"
                                                  placeholder="{{ __('warehouse.ph-general-observations') }}"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="goToTab(2)">
                            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back') }}
                        </button>
                        <button type="button" class="btn btn-primary" onclick="goToTab(4)">
                            {{ __('warehouse.next-confirm') }} <i class="fal fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>

                {{-- TAB 4 - CONFIRM --}}
                <div class="tab-pane fade" id="tab4" role="tabpanel">
                    <div class="alert alert-warning py-2 mb-3 small">
                        <i class="fal fa-exclamation-triangle me-1"></i>
                        {!! __('warehouse.review-summary-warning') !!}
                    </div>
                    <div id="confirmSummary">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-hdr">
                                        <h2><i class="fal fa-file-invoice me-2"></i> {{ __('warehouse.document') }}</h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <table class="table table-sm mb-0">
                                                <tbody>
                                                    <tr><td class="text-muted small">{{ __('warehouse.po-number') }}</td><td class="fw-bold" id="sum-po">--</td></tr>
                                                    <tr><td class="text-muted small">{{ __('warehouse.supplier') }}</td><td id="sum-supplier">--</td></tr>
                                                    <tr><td class="text-muted small">{{ __('warehouse.delivery-note') }}</td><td id="sum-delivery">--</td></tr>
                                                    <tr><td class="text-muted small">{{ __('warehouse.warehouse-zone') }}</td><td id="sum-warehouse">--</td></tr>
                                                    <tr><td class="text-muted small">{{ __('warehouse.bin-assigned') }}</td><td class="fw-bold text-success" id="sum-bin">--</td></tr>
                                                    <tr><td class="text-muted small">{{ __('warehouse.lot') }}</td><td class="fw-bold text-primary" id="sum-lot">--</td></tr>
                                                    <tr><td class="text-muted small">{{ __('warehouse.posting-date') }}</td><td id="sum-date">--</td></tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel">
                                    <div class="panel-hdr">
                                        <h2><i class="fal fa-balance-scale me-2"></i> {{ __('warehouse.quantities') }}</h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="row g-2 text-center">
                                                <div class="col-3">
                                                    <div class="text-xs text-muted fw-bold">{{ __('warehouse.ordered') }}</div>
                                                    <div class="h5 mb-0" id="sum-ordered">--</div>
                                                </div>
                                                <div class="col-3">
                                                    <div class="text-xs text-muted fw-bold">{{ __('warehouse.received') }}</div>
                                                    <div class="h5 mb-0" id="sum-received">--</div>
                                                </div>
                                                <div class="col-3">
                                                    <div class="text-xs text-muted fw-bold text-success">{{ __('warehouse.accepted') }}</div>
                                                    <div class="h5 mb-0 text-success fw-bold" id="sum-accepted">--</div>
                                                </div>
                                                <div class="col-3">
                                                    <div class="text-xs text-muted fw-bold text-danger">{{ __('warehouse.rejected') }}</div>
                                                    <div class="h5 mb-0 text-danger" id="sum-rejected">--</div>
                                                </div>
                                            </div>
                                            <hr class="my-2">
                                            <div class="text-center">
                                                <span class="badge fs-6" id="sum-result-badge">--</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel mt-0">
                            <div class="panel-hdr">
                                <h2><i class="fal fa-clipboard-check me-2"></i> {{ __('warehouse.inspection-summary') }}</h2>
                            </div>
                            <div class="panel-container show">
                                <div class="panel-content p-0">
                                    <table class="table table-sm mb-0" id="sum-rules-table">
                                        <thead>
                                            <tr>
                                                <th>{{ __('warehouse.rule') }}</th>
                                                <th class="text-center">{{ __('warehouse.result') }}</th>
                                                <th>{{ __('warehouse.observations') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="sum-rules-body"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between align-items-center">
                        <button type="button" class="btn btn-secondary" onclick="goToTab(3)">
                            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back') }}
                        </button>
                        <button type="submit" class="btn btn-success btn-lg fw-bold" id="btnConfirmGR"
                                onclick="return confirmSubmit()">
                            <i class="fal fa-check-circle me-2"></i>
                            {{ __('warehouse.confirm-post-inventory') }}
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>

</form>

{{-- Modal FAIL -- Bloqueo total --}}
<div class="modal fade" id="failModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-danger">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fal fa-times-circle me-2"></i> {{ __('warehouse.shipment-failed') }}</h5>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger py-2 mb-3">
                    <i class="fal fa-exclamation-triangle me-2"></i>
                    <strong>{{ __('warehouse.do-not-unload') }}</strong>
                </div>
                <p class="mb-2 small text-muted">{{ __('warehouse.rules-failed') }}</p>
                <div id="failModalDetails" class="mb-3"></div>
                <p class="small text-muted mb-0">{{ __('warehouse.contact-supervisor') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.go-back-review') }}
                </button>
                <button type="button" class="btn btn-danger" onclick="rejectShipment()">
                    <i class="fal fa-times me-1"></i> {{ __('warehouse.reject-shipment') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal WARNING -- Avanzar con advertencia --}}
<div class="modal fade" id="warningModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-warning">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title"><i class="fal fa-exclamation-triangle me-2"></i> {{ __('warehouse.minor-issues') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="warningModalDetails" class="mb-3"></div>
                <p class="small text-muted mb-2">{{ __('warehouse.may-proceed-notified') }}</p>
                <label class="form-label fw-bold small">{{ __('warehouse.justification') }} <span class="text-danger">*</span></label>
                <textarea id="warningJustification" class="form-control" rows="2"
                          placeholder="{{ __('warehouse.ph-justification') }}"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.go-back') }}
                </button>
                <button type="button" class="btn btn-warning fw-bold" onclick="proceedWithWarning()">
                    <i class="fal fa-arrow-right me-1"></i> {{ __('warehouse.proceed-with-warning') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Etiqueta de Lote --}}
<div class="modal fade" id="labelModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fal fa-tag me-2"></i> {{ __('warehouse.print-apply-label') }}</h5>
            </div>
            <div class="modal-body">

                {{-- Step 1 --}}
                <div class="d-flex align-items-start gap-3 mb-3">
                    <span style="min-width:28px;height:28px;border-radius:50%;background:#185FA5;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;">1</span>
                    <div class="flex-grow-1">
                        <div class="fw-bold small mb-1">{{ __('warehouse.print-lot-label') }}</div>
                        <div class="p-2 mb-2" style="background:#f8f9fa;border-radius:6px;border:1px solid #dee2e6;font-size:11px;font-family:monospace;">
                            <div><strong id="labelLotNumber">--</strong></div>
                            <div>{{ __('warehouse.lbl-bin') }} <strong id="labelBinId">--</strong> — <span id="labelBinCode">--</span></div>
                            <div>{{ __('warehouse.lbl-product') }} <span id="labelProduct">--</span></div>
                            <div>{{ __('warehouse.lbl-qty') }} <span id="labelQty">--</span> &nbsp;|&nbsp; {{ __('warehouse.lbl-rec') }} <span id="labelReception">--</span></div>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm" onclick="printLabel()">
                            <i class="fal fa-print me-1"></i> {{ __('warehouse.print-label') }}
                        </button>
                    </div>
                </div>

                {{-- Step 2 --}}
                <div class="d-flex align-items-start gap-3 mb-3">
                    <span style="min-width:28px;height:28px;border-radius:50%;background:#185FA5;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;">2</span>
                    <div>
                        <div class="fw-bold small mb-1">{{ __('warehouse.apply-label-pallet') }}</div>
                        <div class="alert alert-warning py-2 small mb-0">
                            <i class="fal fa-exclamation-triangle me-1"></i>
                            {{ __('warehouse.stick-label') }} <strong id="labelBinId2"></strong>
                        </div>
                    </div>
                </div>

                {{-- Step 3 --}}
                <div class="d-flex align-items-start gap-3">
                    <span style="min-width:28px;height:28px;border-radius:50%;background:#185FA5;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;">3</span>
                    <div class="flex-grow-1">
                        <div class="fw-bold small mb-1">{{ __('warehouse.scan-label-confirm') }}</div>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fal fa-barcode"></i></span>
                            <input type="text" id="labelScanInput" class="form-control fw-bold"
                                   placeholder="{{ __('warehouse.ph-scan-lot') }}"
                                   onkeydown="if(event.key==='Enter'){event.preventDefault();validateLabelScan();}">
                            <button type="button" class="btn btn-outline-primary" onclick="validateLabelScan()">
                                {{ __('warehouse.confirm') }}
                            </button>
                        </div>
                        <div id="labelScanResult" style="display:none;" class="mt-2"></div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" id="btnCloseLabelModal" class="btn btn-success fw-bold"
                        style="display:none;" onclick="closeLabelModal()">
                    <i class="fal fa-check me-1"></i> {{ __('warehouse.complete-reception') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Detalle de Producto --}}
<div class="modal fade" id="productModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fal fa-box-open me-2"></i><span id="productModalTitle"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="productModalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('warehouse.close') }}</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
var GR = {
    po:            null,
    items:         [],
    rules:         [],
    suggestedBins: {},
    ruleIndex:     0,
};

// Keep scanner focused
document.addEventListener('click', function(e) {
    if (!['INPUT','SELECT','TEXTAREA','BUTTON','A'].includes(e.target.tagName)) {
        // Validacion Tab 2 -- FAIL bloquea, WARNING advierte
function validateTab2() {
    var results   = Array.from(document.querySelectorAll('.rule-result'));
    var fails     = results.filter(function(s) { return s.value === 'fail'; });
    var warnings  = results.filter(function(s) { return s.value === 'warning'; });
    var pending   = results.filter(function(s) { return s.value === 'pending'; });

    // Verificar que todas las requeridas esten evaluadas
    var requiredPending = Array.from(document.querySelectorAll('.rule-result[required]')).filter(function(s) { return s.value === 'pending'; });
    if (requiredPending.length > 0) {
        showNotification('{{ __('warehouse.eval-all-required') }}', 'warning');
        return;
    }

    // Si hay FAIL en cualquier regla requerida -> bloqueo total
    var requiredFails = Array.from(document.querySelectorAll('.rule-result[required]')).filter(function(s) { return s.value === 'fail'; });
    if (requiredFails.length > 0) {
        var details = '';
        requiredFails.forEach(function(sel) {
            var card     = sel.closest('.rule-card');
            var ruleName = card.querySelector('.fw-bold.small').textContent.trim();
            var expInp   = card.querySelector('input[name*="value_expected"]');
            var recInp   = card.querySelector('input[name*="value_received"]');
            details += '<div class="d-flex align-items-center gap-2 mb-2 p-2" style="background:#fff5f5;border-radius:6px;border:1px solid #fca5a5;">';
            details += '<i class="fal fa-times-circle text-danger"></i>';
            details += '<div><div class="fw-bold small text-danger">' + ruleName + '</div>';
            if (expInp && recInp && recInp.value) {
                var exp = parseFloat(expInp.value);
                var rec = parseFloat(recInp.value);
                var diff = rec - exp;
                var pct  = exp > 0 ? ((diff / exp) * 100).toFixed(2) : 0;
                details += '<div class="small text-muted">{{ __('warehouse.js-expected-lbl') }} <strong>' + exp.toLocaleString('es-MX') + '</strong> &nbsp;|&nbsp; ';
                details += '{{ __('warehouse.js-received-lbl') }} <strong>' + rec.toLocaleString('es-MX') + '</strong> &nbsp;|&nbsp; ';
                details += '{{ __('warehouse.js-variance-lbl') }} <strong class="text-danger">' + diff.toLocaleString('es-MX') + ' (' + pct + '%)</strong></div>';
            }
            details += '</div></div>';
        });
        document.getElementById('failModalDetails').innerHTML = details;
        new bootstrap.Modal(document.getElementById('failModal')).show();
        return;
    }

    // Si hay WARNING -> advertencia con justificacion
    if (warnings.length > 0) {
        var wDetails = '';
        warnings.forEach(function(sel) {
            var card     = sel.closest('.rule-card');
            var ruleName = card.querySelector('.fw-bold.small').textContent.trim();
            wDetails += '<div class="d-flex align-items-center gap-2 mb-2 p-2" style="background:#fffbeb;border-radius:6px;border:1px solid #fcd34d;">';
            wDetails += '<i class="fal fa-exclamation-triangle text-warning"></i>';
            wDetails += '<div class="fw-bold small">' + ruleName + '</div></div>';
        });
        document.getElementById('warningModalDetails').innerHTML = wDetails;
        document.getElementById('warningJustification').value = '';
        new bootstrap.Modal(document.getElementById('warningModal')).show();
        return;
    }

    // Todo OK -> avanzar
    goToTab(3);
}

function rejectShipment() {
    bootstrap.Modal.getInstance(document.getElementById('failModal')).hide();
    showNotification('{{ __('warehouse.shipment-rejected-notify') }}', 'danger');
}

function proceedWithWarning() {
    var just = document.getElementById('warningJustification').value.trim();
    if (!just) { showNotification('{{ __('warehouse.enter-justification') }}', 'warning'); return; }
    bootstrap.Modal.getInstance(document.getElementById('warningModal')).hide();
    // Guardar justificacion en notas
    var notesField = document.querySelector('textarea[name="notes"]');
    if (notesField) {
        notesField.value = (notesField.value ? notesField.value + ' | ' : '') + 'WARNING override: ' + just;
    }
    goToTab(3);
}

document.getElementById('scanInput').focus();
    }
});

document.getElementById('scanInput').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') { e.preventDefault(); loadPO(); }
});
document.getElementById('btnSearchPo').addEventListener('click', loadPO);

// Load PO via AJAX
function loadPO() {
    var number = document.getElementById('scanInput').value.trim();
    if (!number) return;

    document.getElementById('poLoadingSpinner').style.display = 'inline-flex';
    document.getElementById('poLoadedBadge').style.display    = 'none';

    $.ajax({
        url:    '{{ route("warehouse.receptions.search-po") }}',
        method: 'POST',
        data:   { _token: '{{ csrf_token() }}', po_number: number },
        success: function(res) {
            document.getElementById('poLoadingSpinner').style.display = 'none';
            if (!res.success) { showGRModal('error', res.message); return; }

            GR.po            = res.po;
            GR.items         = res.items;
            GR.rules         = res.rules;
            GR.suggestedBins = res.suggested_bins || {};

            // Hidden fields
            document.getElementById('hiddenPoId').value       = res.po.id;
            document.getElementById('hiddenPoNumber').value   = res.po.po_number;
            document.getElementById('hiddenSupplierId').value = res.po.supplier_id;

            // PO info strip
            document.getElementById('infoPONumber').textContent  = res.po.po_number;
            document.getElementById('infoSupplier').textContent  = res.po.supplier_name;
            document.getElementById('infoExpected').textContent  = res.po.expected_date ?? '--';
            document.getElementById('infoCurrency').textContent  = res.po.currency;
            document.getElementById('infoTotal').textContent     = '$' + parseFloat(res.po.total).toLocaleString('es-MX', {minimumFractionDigits:2});
            document.getElementById('poInfoStrip').style.display = 'block';

            // Subheader
            document.getElementById('subheader-po-info').textContent = res.po.po_number + ' -- ' + res.po.supplier_name;

            // Badge
            document.getElementById('poLoadedNumber').textContent = res.po.po_number;
            document.getElementById('poLoadedBadge').style.display = 'inline-flex';

            // Build items strip con material type y bin sugerido
            buildPoItemsStrip(res.items, GR.suggestedBins);

            // Auto-asignar bin sugerido al campo hidden
            autoAssignBin();

            // Build tabs
            buildRulesTab(res.rules);
            buildItemsTab(res.items);

            document.getElementById('wizardPanel').style.display = 'block';
            showNotification('{{ __('warehouse.js-po-loaded', ['num' => "' + res.po.po_number + '"]) }}', 'success');
        },
        error: function() {
            document.getElementById('poLoadingSpinner').style.display = 'none';
            showNotification('{{ __('warehouse.error-loading-po') }}', 'danger');
        }
    });
}

// Build PO Items Strip -- muestra productos con part#, SKU, material type y bin sugerido
function buildPoItemsStrip(items, suggestedBins) {
    var html = '<div class="row g-2">';
    items.forEach(function(item) {
        var mt      = item.material_type || 'TR';
        var mtBg    = { 'TR':'#E6F1FB','MP':'#EAF3DE','PT':'#FAEEDA','WIP':'#FBEAF0','SV':'#F1EFE8' };
        var mtBdr   = { 'TR':'#185FA5','MP':'#3B6D11','PT':'#854F0B','WIP':'#993556','SV':'#5F5E5A' };
        var mtTxt   = { 'TR':'#0C447C','MP':'#27500A','PT':'#633806','WIP':'#72243E','SV':'#444441' };
        var bg      = mtBg[mt]  || '#f8f9fa';
        var bdr     = mtBdr[mt] || '#dee2e6';
        var txt     = mtTxt[mt] || '#212529';
        var binInfo = suggestedBins && suggestedBins[mt] ? suggestedBins[mt] : null;
        var nextBin = binInfo && binInfo.next_bin ? binInfo.next_bin : null;
        var free    = binInfo ? binInfo.bins.length : 0;

        html += '<div class="col-md-6">';
        html += '<div style="border:1.5px solid ' + bdr + ';border-radius:8px;padding:10px 14px;background:' + bg + ';">';

        // Header
        html += '<div class="d-flex align-items-start justify-content-between mb-2">';
        html += '<div><span style="font-size:13px;font-weight:700;color:' + txt + ';">' + item.product_name + '</span>';
        html += '<span style="margin-left:8px;font-size:11px;background:' + bdr + ';color:#fff;padding:2px 8px;border-radius:4px;font-weight:600;">' + mt + '</span></div>';
        html += '<button type="button" class="btn btn-xs btn-outline-secondary" style="font-size:10px;padding:1px 8px;" ';
        html += 'onclick=\'showProductModal(' + JSON.stringify(item) + ')\'>';
        html += '<i class="fal fa-info-circle me-1"></i>{{ __('warehouse.js-detail') }}</button>';
        html += '</div>';

        // Info
        html += '<div class="row g-1 mb-2">';
        html += '<div class="col-4"><div style="font-size:10px;color:' + txt + ';opacity:.7;font-weight:600;">{{ __('warehouse.js-sku') }}</div>';
        html += '<div style="font-size:11px;font-family:monospace;font-weight:600;color:' + txt + ';">' + (item.sku || '--') + '</div></div>';
        html += '<div class="col-4"><div style="font-size:10px;color:' + txt + ';opacity:.7;font-weight:600;">{{ __('warehouse.js-type') }}</div>';
        html += '<div style="font-size:11px;font-weight:700;color:' + txt + ';">' + mt + '</div></div>';
        html += '<div class="col-4"><div style="font-size:10px;color:' + txt + ';opacity:.7;font-weight:600;">{{ __('warehouse.js-qty') }}</div>';
        html += '<div style="font-size:11px;font-weight:700;color:' + txt + ';">' + item.quantity + ' ' + item.unit + '</div></div>';
        html += '</div>';

        // Bin sugerido
        html += '<div style="border-top:1px solid ' + bdr + ';padding-top:8px;margin-top:4px;">';
        if (nextBin) {
            html += '<div style="font-size:10px;color:' + txt + ';opacity:.7;font-weight:600;margin-bottom:3px;">{{ __('warehouse.js-suggested-bin') }}</div>';
            html += '<div class="d-flex align-items-center gap-2">';
            html += '<span style="font-size:14px;font-weight:700;color:' + txt + ';font-family:monospace;">' + nextBin.bin_id + '</span>';
            html += '<span style="font-size:11px;color:' + txt + ';opacity:.8;">' + nextBin.code + '</span>';
            html += '<span style="margin-left:auto;font-size:10px;color:#28a745;font-weight:600;">';
            html += '<i class="fal fa-check-circle me-1"></i>' + free + ' {{ __('warehouse.js-free') }}</span>';
            html += '</div>';
        } else {
            html += '<span style="font-size:11px;color:#dc3545;font-weight:600;">';
            html += '<i class="fal fa-exclamation-triangle me-1"></i>{{ __('warehouse.js-no-free-bins', ['zone' => "' + mt + '"]) }}</span>';
        }
        html += '</div>';
        html += '</div></div>';
    });
    html += '</div>';
    document.getElementById('poItemsStrip').innerHTML = html;
}

// Auto-asignar bin sugerido al primer material_type encontrado
function autoAssignBin() {
    var firstMt = GR.items.length > 0 ? GR.items[0].material_type : null;
    if (firstMt && GR.suggestedBins[firstMt] && GR.suggestedBins[firstMt].next_bin) {
        var bin = GR.suggestedBins[firstMt].next_bin;
        document.getElementById('locationId').value        = bin.id;
        document.getElementById('suggestedBinDisplay').value = bin.bin_id + ' -- ' + bin.code;
        document.getElementById('binSuggestionText').style.display = 'block';
    }
}

// Modal detalle de producto
function showProductModal(item) {
    var mt = item.material_type || 'TR';
    var content = '<table class="table table-sm table-borderless mb-0">';
    content += '<tr><td class="text-muted small" style="width:130px;">{{ __('warehouse.js-product-name') }}</td><td class="fw-bold">' + item.product_name + '</td></tr>';
    content += '<tr><td class="text-muted small">{{ __('warehouse.js-sku') }}</td><td><code>' + (item.sku || '--') + '</code></td></tr>';
    content += '<tr><td class="text-muted small">{{ __('warehouse.js-material-type') }}</td><td><span class="badge bg-info">' + mt + '</span></td></tr>';
    content += '<tr><td class="text-muted small">{{ __('warehouse.js-qty-ordered') }}</td><td class="fw-bold">' + item.quantity + ' ' + item.unit + '</td></tr>';
    content += '<tr><td class="text-muted small">{{ __('warehouse.js-already-received') }}</td><td>' + (item.qty_received || 0) + '</td></tr>';
    content += '<tr><td class="text-muted small">{{ __('warehouse.unit-cost-lbl') }}</td><td>$' + parseFloat(item.unit_cost).toLocaleString('es-MX', {minimumFractionDigits:2}) + '</td></tr>';
    content += '<tr><td class="text-muted small">{{ __('warehouse.total') }}</td><td class="fw-bold text-success">$' + (item.quantity * item.unit_cost).toLocaleString('es-MX', {minimumFractionDigits:2}) + '</td></tr>';
    content += '</table>';
    document.getElementById('productModalTitle').textContent = item.product_name;
    document.getElementById('productModalBody').innerHTML    = content;
    new bootstrap.Modal(document.getElementById('productModal')).show();
}

// Build Rules Tab
function buildRulesTab(rules) {
    GR.ruleIndex = 0;
    var html = '';
    rules.forEach(function(rule, i) {
        var required   = rule.is_required ? '<span class="badge bg-danger ms-1" style="font-size:9px;">{{ __('warehouse.js-required') }}</span>' : '<span class="badge bg-secondary ms-1" style="font-size:9px;">{{ __('warehouse.js-optional') }}</span>';
        var hasValues  = ['quantity','price','weight','temperature'].includes(rule.rule_type);

        html += '<div class="card mb-2 rule-card" id="rule-card-' + i + '" style="border-left:3px solid #dee2e6;">';
        html += '<div class="card-body py-2 px-3">';
        html += '<input type="hidden" name="rules[' + i + '][rule_id]" value="' + rule.id + '">';
        html += '<div class="row g-2 align-items-center">';

        html += '<div class="col-md-4">';
        html += '<div class="fw-bold small"><i class="fal fa-' + rule.icon + ' me-1 text-primary"></i>' + rule.rule_name + ' ' + required + '</div>';
        if (rule.description) html += '<div class="text-muted" style="font-size:11px;">' + rule.description + '</div>';
        if (rule.tolerance_perc) html += '<div class="text-info" style="font-size:10px;"><i class="fal fa-sliders-h me-1"></i>{{ __('warehouse.js-tolerance') }} +/-' + rule.tolerance_perc + '%</div>';
        html += '</div>';

        html += '<div class="col-md-3">';
        html += '<select name="rules[' + i + '][result]" class="form-select form-select-sm rule-result" ';
        html += 'onchange="onRuleChange(this,' + i + ',' + rule.is_required + ')" ';
        html += (rule.is_required ? 'required' : '') + '>';
        html += '<option value="pending">{{ __('warehouse.opt-evaluate') }}</option>';
        html += '<option value="ok">{{ __('warehouse.opt-ok-passed') }}</option>';
        html += '<option value="warning">{{ __('warehouse.opt-warning-minor') }}</option>';
        html += '<option value="fail">{{ __('warehouse.opt-fail-not-acceptable') }}</option>';
        html += '<option value="na">{{ __('warehouse.opt-na') }}</option>';
        html += '</select>';
        html += '</div>';

        if (hasValues) {
            var expectedValue = '';
            var expectedLabel = '{{ __('warehouse.lbl-expected') }}';
            var receivedLabel = '{{ __('warehouse.lbl-received') }}';
            if (rule.rule_type === 'quantity') {
                expectedValue = GR.items.reduce(function(s, i) { return s + i.quantity; }, 0);
                expectedLabel = '{{ __('warehouse.lbl-expected-qty') }}';
                receivedLabel = '{{ __('warehouse.lbl-received-qty') }}';
            } else if (rule.rule_type === 'price') {
                expectedValue = GR.items.length > 0 ? GR.items[0].unit_cost : '';
                expectedLabel = '{{ __('warehouse.lbl-po-unit-price') }}';
                receivedLabel = '{{ __('warehouse.lbl-invoice-price') }}';
            } else if (rule.rule_type === 'weight') {
                expectedLabel = '{{ __('warehouse.lbl-expected-kg') }}';
                receivedLabel = '{{ __('warehouse.lbl-received-kg') }}';
            } else if (rule.rule_type === 'temperature') {
                expectedLabel = '{{ __('warehouse.lbl-expected-c') }}';
                receivedLabel = '{{ __('warehouse.lbl-received-c') }}';
            }
            html += '<div class="col-md-2">';
            html += '<label class="form-label small text-muted" style="font-size:10px;">' + expectedLabel + '</label>';
            html += '<input type="number" name="rules[' + i + '][value_expected]" class="form-control form-control-sm bg-light fw-bold" value="' + expectedValue + '" step="0.01" readonly>';
            html += '</div>';
            html += '<div class="col-md-2">';
            html += '<label class="form-label small text-muted" style="font-size:10px;">' + receivedLabel + ' *</label>';
            html += '<input type="number" name="rules[' + i + '][value_received]" class="form-control form-control-sm" placeholder="{{ __('warehouse.ph-enter-value') }}" step="0.01" oninput="checkValueMatch(this,' + i + ')">';
            html += '</div>';
        } else {
            html += '<div class="col-md-4">';
            html += '<input type="text" name="rules[' + i + '][observations]" class="form-control form-control-sm" placeholder="{{ __('warehouse.ph-observations') }}">';
            html += '</div>';
        }

        if (rule.requires_photo) {
            html += '<div class="col-12 mt-1"><div class="d-flex align-items-center gap-2">';
            html += '<input type="checkbox" name="rules[' + i + '][photo_taken]" class="form-check-input" value="1">';
            html += '<label class="small">{{ __('warehouse.photo-taken') }}</label>';
            html += '<input type="text" name="rules[' + i + '][photo_reference]" class="form-control form-control-sm ms-2" placeholder="\\\\NAS\\evidencias\\...">';
            html += '</div></div>';
        }

        html += '</div></div></div>';
        GR.ruleIndex++;
    });
    document.getElementById('rulesContainer').innerHTML = html;
    document.getElementById('rulesCounter').textContent = '0 / ' + rules.length;
    updateRulesProgress();
}

function checkValueMatch(input, idx) {
    var card      = document.getElementById('rule-card-' + idx);
    var expected  = parseFloat(card.querySelector('input[name="rules[' + idx + '][value_expected]"]').value) || 0;
    var received  = parseFloat(input.value) || 0;
    var select    = card.querySelector('.rule-result');
    var rule      = GR.rules[idx];
    var tolerance = rule.tolerance_perc ? parseFloat(rule.tolerance_perc) : 0;
    if (received === 0) return;
    var diff    = Math.abs(received - expected);
    var diffPct = expected > 0 ? (diff / expected * 100) : 0;
    if (received === expected || (tolerance > 0 && diffPct <= tolerance)) {
        select.value = 'ok';
    } else if (diffPct <= (tolerance * 2) || diff <= expected * 0.1) {
        select.value = 'warning';
    } else {
        select.value = 'fail';
    }
    onRuleChange(select, idx, rule.is_required);
}

function onRuleChange(select, idx, required) {
    var card = document.getElementById('rule-card-' + idx);
    card.style.borderLeftColor = '#dee2e6';
    if (select.value === 'ok')      card.style.borderLeftColor = '#198754';
    if (select.value === 'warning') card.style.borderLeftColor = '#ffc107';
    if (select.value === 'fail')    card.style.borderLeftColor = '#dc3545';
    if (select.value === 'na')      card.style.borderLeftColor = '#6c757d';
    updateRulesProgress();
}

function updateRulesProgress() {
    var total     = document.querySelectorAll('.rule-result').length;
    var evaluated = Array.from(document.querySelectorAll('.rule-result')).filter(function(s) { return s.value !== 'pending'; }).length;
    var pct       = total > 0 ? Math.round(evaluated / total * 100) : 0;
    document.getElementById('rulesProgress').style.width = pct + '%';
    document.getElementById('rulesCounter').textContent  = evaluated + ' / ' + total;
    document.getElementById('rulesCounter').className    = 'badge bg-' + (evaluated === total ? 'success' : 'secondary');
}

// Build Items Tab
function buildItemsTab(items) {
    var html = '';
    items.forEach(function(item, i) {
        var pending = item.quantity - (item.qty_received || 0);
        html += '<div class="card mb-3">';
        html += '<div class="card-header py-2"><div class="d-flex align-items-center gap-2">';
        html += '<strong class="small">' + item.product_name + '</strong>';
        html += '<span class="badge bg-secondary">' + item.material_type + '</span>';
        html += '<span class="text-muted small">SKU: ' + (item.sku || '--') + '</span>';
        html += '<span class="ms-auto text-muted small">{{ __('warehouse.js-po-qty') }} <strong>' + item.quantity + '</strong> ' + item.unit + '</span>';
        html += '</div></div>';
        html += '<div class="card-body">';
        html += '<input type="hidden" name="items[' + i + '][product_id]" value="' + item.product_id + '">';
        html += '<input type="hidden" name="items[' + i + '][material_type]" value="' + item.material_type + '">';

        html += '<div class="mb-3"><label class="form-label fw-bold small">{{ __('warehouse.counting-method') }}</label>';
        html += '<div class="d-flex gap-2">';
        html += '<button type="button" class="btn btn-outline-primary btn-sm active method-btn" onclick="setMethod(' + i + ',\'manual\',this)"><i class="fal fa-hand-paper me-1"></i>{{ __('warehouse.method-manual') }}</button>';
        html += '<button type="button" class="btn btn-outline-primary btn-sm method-btn" onclick="setMethod(' + i + ',\'scan\',this)"><i class="fal fa-barcode me-1"></i>{{ __('warehouse.method-scan-units') }}</button>';
        html += '<button type="button" class="btn btn-outline-primary btn-sm method-btn" onclick="setMethod(' + i + ',\'pallet\',this)"><i class="fal fa-pallet me-1"></i>{{ __('warehouse.method-pallet-calc') }}</button>';
        html += '</div></div>';

        // Manual
        html += '<div id="method-manual-' + i + '" class="method-content">';
        html += '<div class="row g-3 align-items-end">';
        html += '<div class="col-md-3"><label class="form-label small fw-bold">{{ __('warehouse.qty-received-req') }} *</label>';
        html += '<input type="number" name="items[' + i + '][qty_received]" class="form-control item-qty" data-idx="' + i + '" value="' + pending + '" min="0" step="0.0001" oninput="updateItemTotal(' + i + ')" required></div>';
        html += '<div class="col-md-2"><label class="form-label small fw-bold">{{ __('warehouse.unit') }}</label><input type="text" class="form-control bg-light" value="' + item.unit + '" readonly></div>';
        html += '<div class="col-md-3"><label class="form-label small fw-bold">{{ __('warehouse.unit-cost-lbl') }}</label>';
        html += '<div class="input-group"><span class="input-group-text">$</span>';
        html += '<input type="number" name="items[' + i + '][unit_cost]" class="form-control" value="' + item.unit_cost + '" min="0" step="0.000001" required></div></div>';
        html += '<div class="col-md-2"><label class="form-label small fw-bold">{{ __('warehouse.serial-lot-ref') }}</label>';
        html += '<input type="text" name="items[' + i + '][serial_ref]" class="form-control" placeholder="{{ __('warehouse.ph-optional') }}"></div>';
        html += '<div class="col-md-2"><label class="form-label small fw-bold">{{ __('warehouse.pallet-code') }}</label>';
        html += '<input type="text" name="items[' + i + '][pallet_code]" class="form-control" placeholder="{{ __('warehouse.ph-scan') }}"></div>';
        html += '</div></div>';

        // Scan
        html += '<div id="method-scan-' + i + '" class="method-content" style="display:none;">';
        html += '<div class="row g-3 align-items-center">';
        html += '<div class="col-md-4"><label class="form-label small fw-bold">{{ __('warehouse.scan-unit-barcode') }}</label>';
        html += '<input type="text" id="scan-unit-' + i + '" class="form-control" placeholder="{{ __('warehouse.ph-scan-each-unit') }}" onkeydown="scanUnit(event,' + i + ')"></div>';
        html += '<div class="col-md-2 text-center"><div class="text-xs text-muted fw-bold">{{ __('warehouse.scanned') }}</div>';
        html += '<div class="h2 mb-0 text-primary" id="scan-count-' + i + '">0</div></div>';
        html += '<div class="col-md-2 text-center"><div class="text-xs text-muted fw-bold">{{ __('warehouse.lbl-expected') }}</div>';
        html += '<div class="h2 mb-0 text-muted">' + pending + '</div></div>';
        html += '<div class="col-md-2"><button type="button" class="btn btn-outline-danger btn-sm" onclick="resetScan(' + i + ')"><i class="fal fa-undo me-1"></i>{{ __('warehouse.reset') }}</button></div>';
        html += '</div>';
        html += '<input type="hidden" id="scan-qty-' + i + '" value="0">';
        html += '</div>';

        // Pallet
        html += '<div id="method-pallet-' + i + '" class="method-content" style="display:none;">';
        html += '<div class="row g-3 align-items-end">';
        html += '<div class="col-md-2"><label class="form-label small fw-bold">{{ __('warehouse.pallets') }}</label>';
        html += '<input type="number" id="pallets-' + i + '" class="form-control text-center" value="1" min="1" oninput="calcPallet(' + i + ')"></div>';
        html += '<div class="col-auto pt-3"><span class="fw-bold text-muted">x</span></div>';
        html += '<div class="col-md-2"><label class="form-label small fw-bold">{{ __('warehouse.units-per-pallet') }}</label>';
        html += '<input type="number" id="pallet-units-' + i + '" class="form-control text-center" value="" min="1" placeholder="{{ __('warehouse.ph-eg-50') }}" oninput="calcPallet(' + i + ')"></div>';
        html += '<div class="col-auto pt-3"><span class="fw-bold text-muted">x</span></div>';
        html += '<div class="col-md-2"><label class="form-label small fw-bold">{{ __('warehouse.units-per-pack') }}</label>';
        html += '<input type="number" id="pack-units-' + i + '" class="form-control text-center" value="1" min="1" oninput="calcPallet(' + i + ')"></div>';
        html += '<div class="col-auto pt-3"><span class="fw-bold text-muted">=</span></div>';
        html += '<div class="col-md-2"><label class="form-label small fw-bold">{{ __('warehouse.total-units') }}</label>';
        html += '<input type="number" id="pallet-total-' + i + '" class="form-control bg-light fw-bold text-center" readonly></div>';
        html += '<div class="col-md-2"><button type="button" class="btn btn-primary btn-sm" onclick="applyPallet(' + i + ')">{{ __('warehouse.apply') }}</button></div>';
        html += '</div>';
        html += '</div>';

        html += '<div class="mt-2" id="item-result-' + i + '"></div>';
        html += '</div></div>';
    });
    document.getElementById('itemsContainer').innerHTML = html;
    document.getElementById('totalsRow').style.display = 'block';
    updateAllTotals();
}

function setMethod(idx, method, btn) {
    btn.closest('.d-flex').querySelectorAll('.method-btn').forEach(function(b) { b.classList.remove('active'); });
    btn.classList.add('active');
    ['manual','scan','pallet'].forEach(function(m) {
        document.getElementById('method-' + m + '-' + idx).style.display = m === method ? 'block' : 'none';
    });
    if (method === 'scan') setTimeout(function() { document.getElementById('scan-unit-' + idx).focus(); }, 100);
}

function scanUnit(e, idx) {
    if (e.key !== 'Enter') return;
    e.preventDefault();
    var count = parseInt(document.getElementById('scan-count-' + idx).textContent) + 1;
    document.getElementById('scan-count-' + idx).textContent = count;
    document.getElementById('scan-unit-' + idx).value = '';
    var qtyInput = document.querySelector('input[name="items[' + idx + '][qty_received]"]');
    if (qtyInput) qtyInput.value = count;
    updateAllTotals();
}

function resetScan(idx) {
    document.getElementById('scan-count-' + idx).textContent = '0';
    updateAllTotals();
}

function calcPallet(idx) {
    var pallets  = parseFloat(document.getElementById('pallets-' + idx).value) || 0;
    var perPallet= parseFloat(document.getElementById('pallet-units-' + idx).value) || 0;
    var perPack  = parseFloat(document.getElementById('pack-units-' + idx).value) || 1;
    var total    = pallets * perPallet * perPack;
    document.getElementById('pallet-total-' + idx).value = total || '';
}

function applyPallet(idx) {
    var total = parseFloat(document.getElementById('pallet-total-' + idx).value) || 0;
    if (total <= 0) { showNotification('{{ __('warehouse.enter-pallet-data') }}', 'warning'); return; }
    var qtyInput = document.querySelector('input.item-qty[data-idx="' + idx + '"]');
    if (qtyInput) qtyInput.value = total;
    updateItemTotal(idx);
    showNotification('{{ __('warehouse.js-total-applied', ['n' => "' + total + '"]) }}', 'success');
}

function updateItemTotal(idx) { updateAllTotals(); }

function updateAllTotals() {
    var ordered  = GR.items.reduce(function(s, i) { return s + parseFloat(i.quantity); }, 0);
    var received = 0;
    document.querySelectorAll('.item-qty').forEach(function(inp) { received += parseFloat(inp.value) || 0; });
    document.getElementById('totalOrdered').value  = ordered;
    document.getElementById('totalReceived').value = received;
    document.getElementById('totalAccepted').value = received;
    var rejected = parseFloat(document.getElementById('totalRejected').value) || 0;
    document.getElementById('rejectionReasonRow').style.display = rejected > 0 ? 'block' : 'none';
}

function goToTab(num) {
    var tab = document.getElementById('tab' + num + '-link');
    if (tab) {
        bootstrap.Tab.getOrCreateInstance(tab).show();
        for (var i = 1; i < num; i++) {
            var check = document.getElementById('tab' + i + '-check');
            if (check) check.style.display = 'inline';
        }
        if (num === 4) buildConfirmSummary();
    }
}

function checkTab1() {}

function loadZones() {
    var sel   = document.getElementById('warehouseSelect');
    var zones = JSON.parse(sel.options[sel.selectedIndex]?.dataset?.zones || '[]');
    var zSel  = document.getElementById('zoneSelect');
    zSel.innerHTML = '<option value="">-- Select zone --</option>';
    zones.forEach(function(z) {
        zSel.innerHTML += '<option value="' + z.id + '">' + z.code + ' -- ' + z.name + '</option>';
    });
    // Sugerir zona basada en material_type del primer item
    if (GR.items.length > 0) {
        var mt    = GR.items[0].material_type;
        var trOpt = Array.from(zSel.options).find(function(o) { return o.text.startsWith(mt); });
        if (trOpt) {
            trOpt.selected = true;
            document.getElementById('zoneSuggestionText').style.display = 'block';
        }
    }
}

function buildConfirmSummary() {
    if (!GR.po) return;
    var whSel    = document.getElementById('warehouseSelect');
    var zoneSel  = document.getElementById('zoneSelect');
    var whText   = whSel.options[whSel.selectedIndex]?.text || '--';
    var zoneText = zoneSel.options[zoneSel.selectedIndex]?.text || '--';
    var binDisplay = document.getElementById('suggestedBinDisplay').value || '{{ __('warehouse.js-auto-assign') }}';

    document.getElementById('sum-po').textContent        = GR.po.po_number;
    document.getElementById('sum-supplier').textContent  = GR.po.supplier_name;
    document.getElementById('sum-delivery').textContent  = document.getElementById('supplierDocument').value || '--';
    document.getElementById('sum-warehouse').textContent = whText + ' / ' + zoneText;
    document.getElementById('sum-bin').textContent       = binDisplay;
    document.getElementById('sum-lot').textContent       = document.getElementById('lotNumber').value;
    document.getElementById('sum-date').textContent      = document.getElementById('receivedAt').value;
    document.getElementById('sum-ordered').textContent   = document.getElementById('totalOrdered').value;
    document.getElementById('sum-received').textContent  = document.getElementById('totalReceived').value;
    document.getElementById('sum-accepted').textContent  = document.getElementById('totalAccepted').value;
    document.getElementById('sum-rejected').textContent  = document.getElementById('totalRejected').value;

    var badge    = document.getElementById('sum-result-badge');
    var rejected = parseFloat(document.getElementById('totalRejected').value) || 0;
    var received = parseFloat(document.getElementById('totalReceived').value) || 0;
    if (rejected > 0 && rejected >= received) {
        badge.className = 'badge fs-6 bg-danger'; badge.textContent = '{{ __('warehouse.badge-rejected') }}';
    } else if (rejected > 0) {
        badge.className = 'badge fs-6 bg-warning text-dark'; badge.textContent = '{{ __('warehouse.badge-partial') }}';
    } else {
        badge.className = 'badge fs-6 bg-success'; badge.textContent = '{{ __('warehouse.badge-accepted') }}';
    }

    var tbody = document.getElementById('sum-rules-body');
    tbody.innerHTML = '';
    document.querySelectorAll('.rule-result').forEach(function(sel, i) {
        var ruleName = sel.closest('.rule-card').querySelector('.fw-bold.small').textContent.trim();
        var colors   = { ok:'success', warning:'warning', fail:'danger', na:'secondary', pending:'light' };
        var labels   = { ok:'{{ __('warehouse.ok') }}', warning:'{{ __('warehouse.lbl-warning') }}', fail:'{{ __('warehouse.lbl-fail') }}', na:'{{ __('warehouse.lbl-na') }}', pending:'{{ __('warehouse.lbl-pending') }}' };
        var obs      = sel.closest('.rule-card').querySelector('input[type="text"]')?.value || '--';
        tbody.innerHTML += '<tr><td class="small">' + ruleName + '</td>' +
            '<td class="text-center"><span class="badge bg-' + (colors[sel.value]||'secondary') + '">' + (labels[sel.value]||sel.value) + '</span></td>' +
            '<td class="small text-muted">' + obs + '</td></tr>';
    });
}

function confirmSubmit() {
    if (!GR.po) { showNotification('{{ __('warehouse.load-po-first') }}', 'danger'); return false; }
    var delivery = document.getElementById('supplierDocument').value;
    if (!delivery) { showNotification('{{ __('warehouse.delivery-note-required') }}', 'danger'); goToTab(1); return false; }
    var required = Array.from(document.querySelectorAll('.rule-result[required]'));
    var pending  = required.filter(function(s) { return s.value === 'pending'; });
    if (pending.length > 0) { showNotification('{{ __('warehouse.eval-all-inspection') }}', 'warning'); goToTab(2); return false; }

    // Interceptar submit con AJAX
    var form = document.getElementById('grForm');
    var data = new FormData(form);

    document.getElementById('btnConfirmGR').disabled = true;
    document.getElementById('btnConfirmGR').innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> {{ __('warehouse.processing') }}';

    fetch(form.action, {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(r) { return r.json(); })
    .then(function(res) {
        if (res.success) {
            GR.receptionResult = res;
            showLabelModal(res);
        } else {
            showNotification(res.message || '{{ __('warehouse.error-processing') }}', 'danger');
            document.getElementById('btnConfirmGR').disabled = false;
            document.getElementById('btnConfirmGR').innerHTML = '<i class="fal fa-check-circle me-2"></i> {{ __('warehouse.confirm-post-inventory') }}';
        }
    })
    .catch(function() {
        showNotification('{{ __('warehouse.connection-error-retry') }}', 'danger');
        document.getElementById('btnConfirmGR').disabled = false;
        document.getElementById('btnConfirmGR').innerHTML = '<i class="fal fa-check-circle me-2"></i> Confirm & Post to Inventory';
    });

    return false; // Prevenir submit normal
}

function showLabelModal(res) {
    document.getElementById('labelLotNumber').textContent  = res.lot_number;
    document.getElementById('labelBinId').textContent      = res.bin_id || '--';
    document.getElementById('labelBinCode').textContent    = res.bin_code || '--';
    document.getElementById('labelProduct').textContent    = res.product_name || '--';
    document.getElementById('labelQty').textContent        = res.quantity || '--';
    document.getElementById('labelReception').textContent  = res.reception_number;
    document.getElementById('labelScanInput').value        = '';
    document.getElementById('labelScanResult').style.display = 'none';
    document.getElementById('btnCloseLabelModal').style.display = 'none';
    GR.redirectUrl   = res.redirect;
    GR.expectedLot  = res.lot_number;
    GR.receptionId  = res.reception_id;
    GR.confirmMethod = 'scan';
    new bootstrap.Modal(document.getElementById('labelModal'), {backdrop:'static', keyboard:false}).show();
    setTimeout(function() { document.getElementById('labelScanInput').focus(); }, 500);
}

function printLabel() {
    var win = window.open('', '_blank', 'width=400,height=300');
    var lot    = document.getElementById('labelLotNumber').textContent;
    var bin    = document.getElementById('labelBinId').textContent;
    var code   = document.getElementById('labelBinCode').textContent;
    var prod   = document.getElementById('labelProduct').textContent;
    var qty    = document.getElementById('labelQty').textContent;
    var rec    = document.getElementById('labelReception').textContent;
    var today  = new Date().toLocaleDateString('es-MX');
    win.document.write(
        '<html><head><title>Lot Label</title>' +
        '<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"><\/script>' +
        '<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"><\/script>' +
        '<style>' +
        '@page{margin:5mm}' +
        'body{font-family:monospace;padding:8px;width:340px;margin:0;}' +
        '.title{font-size:12px;font-weight:bold;text-align:center;border-bottom:2px solid #000;padding-bottom:4px;margin-bottom:6px;}' +
        '.lot{font-size:20px;font-weight:bold;text-align:center;margin:6px 0;letter-spacing:2px;}' +
        '.bin{font-size:12px;text-align:center;background:#f0f0f0;padding:3px;border-radius:3px;margin-bottom:5px;font-weight:bold;}' +
        '.row{display:flex;justify-content:space-between;margin-bottom:2px;font-size:10px;}' +
        '.lbl{color:#555;}' +
        '.val{font-weight:bold;text-align:right;max-width:200px;}' +
        '.codes{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:6px;border-top:1px dashed #999;}' +
        '.barcode-wrap{flex:1;}' +
        '.qr-wrap{margin-left:8px;}' +
        'svg{max-width:100%;}' +
        '</style></head><body>' +
        '<div class="title">Sweet Works ERP &mdash; Lot Label</div>' +
        '<div class="lot">' + lot + '</div>' +
        '<div class="bin">BIN: ' + bin + ' &mdash; ' + code + '</div>' +
        '<div class="row"><span class="lbl">Product:</span><span class="val">' + prod + '</span></div>' +
        '<div class="row"><span class="lbl">Qty:</span><span class="val">' + qty + '</span></div>' +
        '<div class="row"><span class="lbl">Reception:</span><span class="val">' + rec + '</span></div>' +
        '<div class="row"><span class="lbl">Date:</span><span class="val">' + today + '</span></div>' +
        '<div class="codes">' +
        '  <div class="barcode-wrap"><svg id="barcode"></svg></div>' +
        '  <div class="qr-wrap"><div id="qrcode"></div></div>' +
        '</div>' +
        '<script>' +
        'window.onload = function() {' +
        '  JsBarcode("#barcode", "' + lot + '", {format:"CODE128",width:1.5,height:40,displayValue:false,margin:0});' +
        '  new QRCode(document.getElementById("qrcode"), {' +
        '    text: "LOT:' + lot + '|BIN:' + bin + '|REC:' + rec + '|QTY:' + qty + '",' +
        '    width:70, height:70, colorDark:"#000", colorLight:"#fff"' +
        '  });' +
        '  setTimeout(function(){window.print();}, 800);' +
        '};' +
        '<\/script>' +
        '</body></html>'
    );
    win.document.close();
}

function validateLabelScan() {
    var scanned  = document.getElementById('labelScanInput').value.trim();
    var result   = document.getElementById('labelScanResult');
    if (!scanned) return;

    // Detectar metodo: si tardo mas de 500ms en escribirse = manual
    GR.confirmMethod = (GR.scanStartTime && (Date.now() - GR.scanStartTime) > 500) ? 'manual' : 'scan';
    if (scanned === GR.expectedLot) {
        result.className = 'alert alert-success py-2 small mt-2';
        result.innerHTML = '<i class="fal fa-check-circle me-1"></i>{!! __('warehouse.label-confirmed', ['lot' => "' + scanned + '"]) !!}';
        result.style.display = 'block';
        document.getElementById('btnCloseLabelModal').style.display = 'block';
        document.getElementById('labelScanInput').disabled = true;
        showNotification('{{ __('warehouse.label-confirmed-complete') }}', 'success');
    } else {
        result.className = 'alert alert-danger py-2 small mt-2';
        result.innerHTML = '<i class="fal fa-times-circle me-1"></i>{!! __('warehouse.scan-no-match-expected', ['lot' => "' + GR.expectedLot + '"]) !!}';
        result.style.display = 'block';
        document.getElementById('labelScanInput').value = '';
        document.getElementById('labelScanInput').focus();
    }
}

function closeLabelModal() {
    var method = GR.confirmMethod || 'scan';
    fetch('/warehouse/receptions/' + GR.receptionId + '/confirm-label', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '{{ csrf_token() }}'
        },
        body: JSON.stringify({ lot_scanned: GR.expectedLot, method: method })
    })
    .then(function(r) { return r.json(); })
    .then(function(res) {
        bootstrap.Modal.getInstance(document.getElementById('labelModal')).hide();
        window.location.href = GR.redirectUrl;
    })
    .catch(function() {
        bootstrap.Modal.getInstance(document.getElementById('labelModal')).hide();
        window.location.href = GR.redirectUrl;
    });
}

document.getElementById('btnNewLot').addEventListener('click', function() {
    $.get('{{ route("warehouse.receptions.next-lot") }}', function(data) {
        document.getElementById('lotNumber').value = data.lot_number;
    });
});

document.getElementById('totalRejected').addEventListener('input', function() {
    var rejected = parseFloat(this.value) || 0;
    var received = parseFloat(document.getElementById('totalReceived').value) || 0;
    document.getElementById('totalAccepted').value = Math.max(0, received - rejected);
    document.getElementById('rejectionReasonRow').style.display = rejected > 0 ? 'block' : 'none';
});

// Validacion Tab 2 -- FAIL bloquea, WARNING advierte
function validateTab2() {
    var results   = Array.from(document.querySelectorAll('.rule-result'));
    var fails     = results.filter(function(s) { return s.value === 'fail'; });
    var warnings  = results.filter(function(s) { return s.value === 'warning'; });
    var pending   = results.filter(function(s) { return s.value === 'pending'; });

    // Verificar que todas las requeridas esten evaluadas
    var requiredPending = Array.from(document.querySelectorAll('.rule-result[required]')).filter(function(s) { return s.value === 'pending'; });
    if (requiredPending.length > 0) {
        showNotification('{{ __('warehouse.eval-all-required') }}', 'warning');
        return;
    }

    // Si hay FAIL en cualquier regla requerida -> bloqueo total
    var requiredFails = Array.from(document.querySelectorAll('.rule-result[required]')).filter(function(s) { return s.value === 'fail'; });
    if (requiredFails.length > 0) {
        var details = '';
        requiredFails.forEach(function(sel) {
            var card     = sel.closest('.rule-card');
            var ruleName = card.querySelector('.fw-bold.small').textContent.trim();
            var expInp   = card.querySelector('input[name*="value_expected"]');
            var recInp   = card.querySelector('input[name*="value_received"]');
            details += '<div class="d-flex align-items-center gap-2 mb-2 p-2" style="background:#fff5f5;border-radius:6px;border:1px solid #fca5a5;">';
            details += '<i class="fal fa-times-circle text-danger"></i>';
            details += '<div><div class="fw-bold small text-danger">' + ruleName + '</div>';
            if (expInp && recInp && recInp.value) {
                var exp = parseFloat(expInp.value);
                var rec = parseFloat(recInp.value);
                var diff = rec - exp;
                var pct  = exp > 0 ? ((diff / exp) * 100).toFixed(2) : 0;
                details += '<div class="small text-muted">{{ __('warehouse.js-expected-lbl') }} <strong>' + exp.toLocaleString('es-MX') + '</strong> &nbsp;|&nbsp; ';
                details += '{{ __('warehouse.js-received-lbl') }} <strong>' + rec.toLocaleString('es-MX') + '</strong> &nbsp;|&nbsp; ';
                details += '{{ __('warehouse.js-variance-lbl') }} <strong class="text-danger">' + diff.toLocaleString('es-MX') + ' (' + pct + '%)</strong></div>';
            }
            details += '</div></div>';
        });
        document.getElementById('failModalDetails').innerHTML = details;
        new bootstrap.Modal(document.getElementById('failModal')).show();
        return;
    }

    // Si hay WARNING -> advertencia con justificacion
    if (warnings.length > 0) {
        var wDetails = '';
        warnings.forEach(function(sel) {
            var card     = sel.closest('.rule-card');
            var ruleName = card.querySelector('.fw-bold.small').textContent.trim();
            wDetails += '<div class="d-flex align-items-center gap-2 mb-2 p-2" style="background:#fffbeb;border-radius:6px;border:1px solid #fcd34d;">';
            wDetails += '<i class="fal fa-exclamation-triangle text-warning"></i>';
            wDetails += '<div class="fw-bold small">' + ruleName + '</div></div>';
        });
        document.getElementById('warningModalDetails').innerHTML = wDetails;
        document.getElementById('warningJustification').value = '';
        new bootstrap.Modal(document.getElementById('warningModal')).show();
        return;
    }

    // Todo OK -> avanzar
    goToTab(3);
}

function rejectShipment() {
    bootstrap.Modal.getInstance(document.getElementById('failModal')).hide();
    showNotification('{{ __('warehouse.shipment-rejected-notify') }}', 'danger');
}

function proceedWithWarning() {
    var just = document.getElementById('warningJustification').value.trim();
    if (!just) { showNotification('{{ __('warehouse.enter-justification') }}', 'warning'); return; }
    bootstrap.Modal.getInstance(document.getElementById('warningModal')).hide();
    // Guardar justificacion en notas
    var notesField = document.querySelector('textarea[name="notes"]');
    if (notesField) {
        notesField.value = (notesField.value ? notesField.value + ' | ' : '') + 'WARNING override: ' + just;
    }
    goToTab(3);
}

document.getElementById('scanInput').focus();

function showGRModal(type, message) {
    var modal = document.getElementById('grFeedbackModal');
    if (!modal) return showNotification(message, type === 'error' ? 'danger' : 'success');
    var header = document.getElementById('grModalHeader');
    var icon   = document.getElementById('grModalIcon');
    var title  = document.getElementById('grModalTitle');
    var msg    = document.getElementById('grModalMessage');
    var htitle = document.getElementById('grModalHeaderTitle');
    var btn    = document.getElementById('grModalBtn');
    if (type === 'error') {
        header.className = 'modal-header bg-danger text-white';
        icon.className   = 'fal fa-times-circle fa-4x text-danger mb-3 d-block';
        title.textContent= '{{ __('warehouse.blocked-caps') }}';
        title.className  = 'fw-bold text-danger mb-2';
        htitle.textContent='{{ __('warehouse.gr-error-title') }}';
        btn.className    = 'btn btn-lg fw-bold btn-danger';
        btn.innerHTML    = '<i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.gr-back') }}';
    } else {
        header.className = 'modal-header bg-success text-white';
        icon.className   = 'fal fa-check-circle fa-4x text-success mb-3 d-block';
        title.textContent= '{{ __('warehouse.gr-correct') }}';
        title.className  = 'fw-bold text-success mb-2';
        htitle.textContent='{{ __('warehouse.gr-doc-loaded') }}';
        btn.className    = 'btn btn-lg fw-bold btn-success';
        btn.innerHTML    = '<i class="fal fa-arrow-right me-1"></i> {{ __('warehouse.gr-continue') }}';
    }
    msg.textContent = message;
    new bootstrap.Modal(modal).show();
}
</script>
@include('warehouse::receptions.gr_document_modal')
@endsection