@extends('layouts.app')
@section('title','Stock Receipt')
@section('content')
<div class="" id="stockReceiptModule">
  <div class="card mb-3" id="stockReceiptCard">
    <div class="card-header py-2">
      <div class="row flex-between-center g-0">
        <div class="col-auto d-flex align-items-center">
          <h6 class="mb-0">Stock Receipt</h6>
        </div>
        <div class="col-auto d-flex align-items-center gap-2">
          <button class="btn btn-sm btn-falcon-default" id="toggleFilters" type="button" data-bs-toggle="collapse" data-bs-target="#receiptFilters" aria-expanded="false">
            <i class="fas fa-filter me-1"></i>Filters
          </button>
          @can('inventory-stock-transactions-stock-receipt.create')
          <button class="btn btn-sm btn-primary" id="newReceiptBtn" type="button">
            <i class="fas fa-plus me-1"></i>New
          </button>
          @endcan
        </div>
      </div>
    </div>

    <!-- Filters Section -->
    <div class="collapse" id="receiptFilters">
      <div class="card-body border-top fs-10 p-2">
        <div class="bg-100 rounded-1 border border-200 p-2 px-sm-3 py-2 mx-1">
          <div class="row g-2 align-items-end">
            <div class="col-auto">
              <label class="form-label mb-1 small">Document #</label>
              <input type="text" class="form-control form-control-sm" id="filterDocNumber" placeholder="Search">
            </div>
            <div class="col-auto">
              <label class="form-label mb-1 small">Status</label>
              <select id="filterStatus" class="form-select form-select-sm">
                <option value="">All</option>
                <option value="DRAFT">DRAFT</option>
                <option value="SUBMITTED">SUBMITTED</option>
                <option value="CANCELLED">CANCELLED</option>
              </select>
            </div>
            <div class="col-auto">
              <label class="form-label mb-1 small">Warehouse</label>
              <select id="filterWarehouse" class="form-select form-select-sm">
                <option value="">All</option>
              </select>
            </div>
            <div class="col-auto">
              <label class="form-label mb-1 small">Vendor</label>
              <input type="text" class="form-control form-control-sm" id="filterVendor" placeholder="Vendor name">
            </div>
            <div class="col-auto">
              <label class="form-label mb-1 small">Date From</label>
              <input type="date" id="filterDateFrom" class="form-control form-control-sm" />
            </div>
            <div class="col-auto">
              <label class="form-label mb-1 small">Date To</label>
              <input type="date" id="filterDateTo" class="form-control form-control-sm" />
            </div>
            <div class="col-auto  d-flex align-items-center">
              <button class="btn btn-primary btn-sm me-2" id="applyFilters" type="button"><i
                            class="fas fa-search"></i> Apply</button>
              <button class="btn btn-outline-secondary btn-sm" id="clearFilters" type="button"><i
                            class="fas fa-times"></i> Clear</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- List Table -->
    <div class="card-body p-0">
      <x-table-standard>

        <thead class="bg-200 ">
            <tr class="text-nowrap">
              <th class="text-900 pe-1 align-middle">Document #</th>
              <th class="text-900 pe-1 align-middle">Date</th>
              <th class="text-900 pe-1 align-middle">Vendor</th>
              <th class="text-900 pe-1 align-middle">Invoice #</th>
              <th class="text-900 pe-1 align-middle">Warehouse</th>
              <th class="text-900 pe-1 align-middle">Lines</th>
              <th class="text-900 pe-1 align-middle">Total Qty</th>
              <th class="text-900 pe-1 align-middle">Status</th>
              <th class="text-900 pe-1 align-middle" style="width:140px">Operations</th>
              <th class="text-900 pe-1 align-middle" style="width:100px">Actions</th>
            </tr>
          </thead>
          <tbody id="receiptTbody">

          </tbody>
          <x-slot name="after">
            <div id="receiptListOverlay" class="table-empty-overlay d-none" style="z-index:2;">
              <div class="overlay-loading text-center w-100">
                <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                <div class="text-muted small mt-2">Loading receipts...</div>
              </div>
              <div class="overlay-empty text-center w-100 d-none">
                <i class="fas fa-inbox fa-2x mb-2 text-muted"></i>
                <div class="fs-7">No stock receipts found</div>
                <small class="text-muted">Try adjusting your filters or create a new receipt</small>
              </div>
            </div>
          </x-slot>

      </x-table-standard>
      <div class="mt-2">
        @isset($paginator)
          {{ $paginator->links() }}
        @endisset
      </div>
    </div>
  </div>
</div>

<!-- Offcanvas Form -->
<div class="offcanvas offcanvas-end offcanvas-wide" tabindex="-1" id="receiptOffcanvas"
     aria-labelledby="receiptOffcanvasLabel" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="offcanvas-header offcanvas-header-polished">
    <h5 class="offcanvas-title" id="receiptOffcanvasLabel">
      <i class="fas fa-truck-loading me-2"></i><span id="formTitle">New Stock Receipt</span>
    </h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body p-0 d-flex flex-column form-standard">
    <div class="card h-100 border-0 d-flex flex-column">
      <div class="card-body py-3 overflow-auto">
        <div class="px-sm-2 px-md-4">
          <form id="receiptForm" class="needs-validation" novalidate>
            @csrf
            <input type="hidden" name="id" id="receipt_id" />
            <input type="hidden" name="vendor_reference" id="vendor_reference" />

            <!-- Vendor Information -->
            {{-- <div class="mb-3">
              <h6 class="text-primary mb-2">
                <i class="fas fa-user-tie me-2"></i>Vendor Information
              </h6>
            </div> --}}
            <div class="row ">
              <div class="col-md-3 mb-3">
                <label class="form-label" for="receipt_source">Receipt Source <span class="text-danger">*</span></label>
                <select name="receipt_source" id="receipt_source" class="form-select form-select-sm" required>
                  <option value="">Select receipt source...</option>
                  <option value="DIRECT">Direct Receipt</option>
                  <option value="PURCHASE_ORDER">From Purchase Order</option>
                </select>
                <div class="invalid-feedback">Receipt source is required</div>
              </div>
              <div class="col-md-3 mb-3">
                <label class="form-label" for="vendor_id">Vendor <span class="text-danger">*</span></label>
                <select name="vendor_id" id="vendor_id" class="form-select form-select-sm" required>
                  <option value="">Select vendor...</option>
                </select>
                <div class="invalid-feedback">Vendor is required</div>
              </div>
              <div class="col-md-3 mb-3" id="po_selection_group" style="display:none;">
                <label class="form-label" for="purchase_order_id">Reference Document <span class="text-danger">*</span></label>
                <select name="purchase_order_id" id="purchase_order_id" class="form-select form-select-sm">
                  <option value="">Select reference document...</option>
                </select>
                <div class="invalid-feedback">Reference document is required</div>
              </div>

              <div class="col-md-3 mb-3" id="reference_no_group">
                <label class="form-label" for="reference_number">Reference No <span class="text-danger">*</span></label>
                <input type="text" name="reference_number" id="reference_number" class="form-control"
                       placeholder="e.g., INV-2025-001" required>
                <div class="invalid-feedback">Reference number is required</div>
              </div>
              <div class="col-md-3 mb-3" id="reference_date_group">
                <label class="form-label" for="vendor_invoice_date">Reference Date</label>
                <input type="date" name="vendor_invoice_date" id="vendor_invoice_date" class="form-control">
              </div>
            </div>

            <!-- Receipt Details -->
            {{-- <div class="mb-3">
              <h6 class="text-primary mb-2">
                <i class="fas fa-warehouse me-2"></i>Receipt Details
              </h6>
            </div> --}}
            <div class="row">
              <div class="col-md-3 mb-3">
                <label class="form-label" for="warehouse_id">Warehouse <span class="text-danger">*</span></label>
                <select name="warehouse_id" id="warehouse_id" class="form-select form-select-sm" required>
                  <option value="">Select warehouse...</option>
                </select>
                <div class="invalid-feedback">Warehouse is required</div>
              </div>
              <div class="col-md-3 mb-3">
                <label class="form-label" for="posting_date">Posting Date <span class="text-danger">*</span></label>
                <input type="date" name="posting_date" id="posting_date" class="form-control" required>
                <div class="invalid-feedback">Posting date is required</div>
              </div>
              <div class="col-md-3 mb-3">
                <label class="form-label" for="remarks">Remarks</label>
                <input type="text" name="remarks" id="remarks" class="form-control"
                       placeholder="Optional notes">
              </div>
            </div>

            <!-- Transport Details (Optional) -->
            <div class="mb-3">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="text-primary mb-0">
                  <i class="fas fa-truck me-2"></i>Transport Details
                </h6>
                <button type="button" class="btn btn-sm btn-link text-decoration-none" data-bs-toggle="collapse" data-bs-target="#transportSection">
                  <i class="fas fa-chevron-down me-1"></i><small>Optional - Click to expand</small>
                </button>
              </div>
              <div class="collapse" id="transportSection">
                <div class="bg-light border rounded p-3">
                  <div class="row g-3">
                    <div class="col-md-3 mb-3">
                      <label class="form-label" for="transport_mode">Transport Mode</label>
                      <select name="transport_mode" id="transport_mode" class="form-select">
                        <option value="">Select...</option>
                        <option value="Road">Road</option>
                        <option value="Rail">Rail</option>
                        <option value="Air">Air</option>
                        <option value="Sea">Sea</option>
                        <option value="Courier">Courier</option>
                      </select>
                    </div>
                    <div class="col-md-3 mb-3">
                      <label class="form-label" for="vehicle_number">Vehicle Number</label>
                      <input type="text" name="vehicle_number" id="vehicle_number" class="form-control"
                             placeholder="e.g., MH-12-AB-1234">
                    </div>
                    <div class="col-md-3 mb-3">
                      <label class="form-label" for="driver_name">Driver Name</label>
                      <input type="text" name="driver_name" id="driver_name" class="form-control"
                             placeholder="Driver's name">
                    </div>
                    <div class="col-md-3 mb-3">
                      <label class="form-label" for="driver_contact">Driver Contact</label>
                      <input type="text" name="driver_contact" id="driver_contact" class="form-control"
                             placeholder="Contact number" maxlength="15">
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Quality Inspection -->
            <div class="mb-3 d-none">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="text-primary mb-0">
                  <i class="fas fa-clipboard-check me-2"></i>Quality Inspection
                </h6>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="quality_inspection_required" name="quality_inspection_required">
                  <label class="form-check-label" for="quality_inspection_required">Enable Quality Control</label>
                </div>
              </div>
              <div class="collapse" id="qualitySection">
                <div class="bg-light border rounded p-3">
                  <div class="row g-3">
                    <div class="col-md-6 mb-3">
                      <label class="form-label" for="quality_status">Quality Status</label>
                      <select name="quality_status" id="quality_status" class="form-select">
                        <option value="PENDING">Pending</option>
                        <option value="PASSED">Passed</option>
                        <option value="FAILED">Failed</option>
                        <option value="PARTIAL">Partial</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <hr class="my-3" />

            <!-- Line Items -->
            <div class="mb-3">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="text-primary mb-0">
                  <i class="fas fa-list-alt me-2"></i>Line Items
                </h6>
                <div class="d-flex gap-2">
                  <button type="button" class="btn btn-sm btn-falcon-primary" id="addLineBtn">
                    <i class="fas fa-plus me-1"></i>Add Line
                  </button>
                </div>
              </div>

              <!-- Line Loading Progress -->
              <div id="lineLoadingProgress" class="d-none mb-2">
                <div class="d-flex justify-content-between align-items-center mb-1">
                  <small class="text-muted">
                    <i class="fas fa-spinner fa-spin me-1"></i>
                    Loading lines: <span id="loadedCount">0</span> of <span id="totalCount">0</span>
                  </small>
                  <small class="text-muted" id="progressPercent">0%</small>
                </div>
                <div class="progress" style="height: 4px;">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" id="progressBar" style="width: 0%"></div>
                </div>
              </div>

              <div class="table-responsive border rounded position-relative" style="max-height: 400px; overflow-y: auto;" id="linesTableContainer">
                <!-- Loading overlay with blur effect -->
                <div id="linesLoadingOverlay" class="d-none position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center" style="z-index: 10; backdrop-filter: blur(3px); background-color: rgba(255, 255, 255, 0.7);">
                  <div class="bg-white shadow-lg rounded-3 p-4" style="min-width: 350px;">
                    <div class="text-center mb-3">
                      <div class="spinner-border text-primary mb-2" role="status" style="width: 2rem; height: 2rem;">
                        <span class="visually-hidden">Loading...</span>
                      </div>
                      <h6 class="mb-1">Loading Line Items</h6>
                      <small class="text-muted">
                        <span id="overlayLoadedCount">0</span> of <span id="overlayTotalCount">0</span> loaded
                        <span class="ms-2 fw-semibold" id="overlayProgressPercent">0%</span>
                      </small>
                    </div>
                    <div class="progress" style="height: 10px;">
                      <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" id="overlayProgressBar" style="width: 0%"></div>
                    </div>
                  </div>
                </div>

                <table class="table table-sm mb-0 align-middle" id="linesTable" style="table-layout: fixed;">
                  <thead class="bg-100 text-900" style="position: sticky; top: 0; z-index: 5;">
                    <tr class="text-nowrap">
                      <th style="width:32%"><i class="fas fa-box-open me-1"></i>Variant <span class="text-danger">*</span></th>
                      <th style="width:22%"><i class="fas fa-tag me-1"></i>Rate/UOM <span class="text-danger">*</span></th>
                      <th style="width:25%"><i class="fas fa-cube me-1"></i>UOMs</th>
                      <th style="width:16%"><i class="fas fa-calculator me-1"></i>Base Rate</th>
                      <th style="width:5%"><i class="fas fa-cog"></i></th>
                    </tr>
                  </thead>
                  <tbody id="linesBody"></tbody>
                  <tfoot>
                    <tr id="linesEmpty">
                      <td colspan="5" class="text-center text-muted py-3 small">No line items added</td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Footer Actions -->
    <div class="border-top px-3 py-2 d-flex justify-content-between align-items-center bg-body-tertiary mt-auto sticky-bottom-footer">
      <button type="button" class="btn btn-sm btn-falcon-default" data-bs-dismiss="offcanvas">
        <i class="fas fa-times me-1"></i>Cancel
      </button>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-sm btn-success d-none" id="submitReceiptBtn">
          <i class="fas fa-check me-1"></i>Submit
        </button>
        <button type="button" class="btn btn-sm btn-danger d-none" id="cancelReceiptBtn">
          <i class="fas fa-ban me-1"></i>Cancel Document
        </button>
        <button type="button" class="btn btn-sm btn-secondary d-none" id="resetReceiptBtn">
          <i class="fas fa-undo me-1"></i>Reset
        </button>
        <button type="button" class="btn btn-sm btn-primary d-none" id="editReceiptBtn">
          <i class="fas fa-edit me-1"></i>Edit
        </button>
        <button type="button" class="btn btn-sm btn-primary" id="saveReceiptBtn">
          <i class="fas fa-save me-1"></i>Save as Draft
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Line Item Template -->
<template id="lineTemplate">
  <tr class="line-row" data-line-index="__INDEX__" style="transition: background-color 0.15s ease;">
    <td class="ps-2" style="vertical-align: top;">
      <select class="form-select form-select-sm variant-select" name="lines[__INDEX__][product_variant_id]" required style="min-height: 32px;">
        <option value="">Select variant...</option>
      </select>
    </td>
    <td style="vertical-align: top;">
      <div class="input-group input-group-sm">
        <input type="number" step="0.0001" min="0" class="form-control form-control-sm rate-input" name="lines[__INDEX__][rate]" placeholder="0.00" required style="min-height: 32px; max-width: 110px;">
        <select class="form-select form-select-sm rate-uom" name="lines[__INDEX__][rate_uom_code]" required style="min-height: 32px; max-width: 110px;">
          <option value="">UOM...</option>
        </select>
      </div>
    </td>
    <td class="uom-cell" style="vertical-align: top;">
      <div class="multi-uom-accordion small" data-uom-accordion>
        <div class="accordion accordion-flush border rounded" id="uomAccWrap___INDEX__" style="background: #f9fafb;">
          <div class="accordion-item border-0" style="background: transparent;">
            <h2 class="accordion-header" id="uomAccHead___INDEX__">
              <button class="accordion-button collapsed py-1 px-2 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#uomAccBody___INDEX__" aria-expanded="false" aria-controls="uomAccBody___INDEX__" style="background: transparent; font-size: 0.8rem; min-height: 32px;">
                <i class="fas fa-cube me-1"></i>
                <span class="small">UOM Qty</span>
              </button>
            </h2>
            <div id="uomAccBody___INDEX__" class="accordion-collapse collapse" data-bs-parent="#uomAccWrap___INDEX__">
              <div class="accordion-body p-2 bg-white">
                <div class="uom-inline-placeholder text-muted small text-center py-2">
                  <i class="fas fa-info-circle me-1"></i>Select variant first
                </div>
                <div class="multi-uom-inline d-flex flex-column gap-1" style="display:none"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <input type="hidden" class="uom-data-json" name="lines[__INDEX__][uom_data]">
    </td>
    <td style="vertical-align: top; padding: 0.5rem;">
      <div class="base-rate-display">
        <span class="text-muted small">-</span>
      </div>
    </td>
    <td class="text-center" style="vertical-align: top;">
      <button class="btn btn-sm btn-link p-1 text-danger remove-line" type="button" title="Remove line" style="line-height: 1;">
        <i class="fas fa-trash-alt"></i>
      </button>
    </td>
  </tr>
</template>

<!-- Quantity Breakdown Modal -->
<div class="modal fade" id="quantityBreakdownModal" tabindex="-1" aria-labelledby="quantityBreakdownModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header ">
        <h5 class="modal-title" id="quantityBreakdownModalLabel">
          <i class="fas fa-layer-group me-2"></i>Quantity Breakdown
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <div class="alert alert-info mx-3 mt-3 mb-2" role="alert">
          <i class="fas fa-info-circle me-2"></i>
          <strong>Breaking down:</strong> <span id="breakdownProductName">-</span> |
          <strong>Total Units:</strong> <span id="breakdownTotalUnits">-</span>
        </div>

        <div class="table-responsive" style="max-height: 60vh;">
          <table class="table table-sm table-bordered table-hover mb-0" id="breakdownEntriesTable">
            <thead class="table-light sticky-top" style="top: 0; z-index: 10;">
              <tr>
                <th style="width: 5%">#</th>
                <th style="width: 10%" id="breakdownUnitColumnHeader"><!-- Dynamic Breakdown Unit header --></th>
                <!-- Dynamic UOM columns will be inserted here -->
                <th style="width: 5%">Actions</th>
              </tr>
            </thead>
            <tbody id="breakdownEntriesBody">
              <!-- Breakdown rows will be generated dynamically -->
            </tbody>
            <tfoot class="table-light" style="border-top: 2px solid #dee2e6;">
              <tr id="breakdownTotalRow">
                <th class="text-end">Total:</th>
                <th id="breakdownUnitTotal">-</th>
                <!-- Dynamic UOM total columns will be inserted here -->
                <th></th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-between">
        <div class="d-flex align-items-center gap-2">
          <button type="button" class="btn btn-primary btn-sm" id="addBreakdownUnitBtn">
            <i class="fas fa-plus me-1"></i>Add Unit
          </button>
          <div class="text-muted small">
            <i class="fas fa-exclamation-circle me-1"></i>
            All fields are mandatory. Complete all rows to enable save.
          </div>
        </div>
        <div>
          <button type="button" class="btn btn-secondary" id="cancelBreakdownBtn">
            <i class="fas fa-times me-1"></i>Cancel
          </button>
          <button type="button" class="btn btn-success" id="saveBreakdownBtn" disabled>
            <i class="fas fa-check me-1"></i>Save Breakdown
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script>
  // Permission capabilities exposed to JS
  window.pageCaps = {
    create: @json($caps['create'] ?? false),
    view: @json($caps['view'] ?? false),
    update: @json($caps['update'] ?? false),
    delete: @json($caps['delete'] ?? false),
    submit: @json($caps['submit'] ?? false)
  };
</script>
@endpush

@push('scripts')
<script>
  // Single overlay (loading/empty) + dynamic height for Stock Receipt list
  document.addEventListener('DOMContentLoaded', function(){
    const tbody = document.getElementById('receiptTbody');
    const overlay = document.getElementById('receiptListOverlay');
    const wrapper = document.querySelector('#stockReceiptCard .table-body-wrapper');
    const loadingEl = overlay?.querySelector('.overlay-loading');
    const emptyEl = overlay?.querySelector('.overlay-empty');
    const MIN_SPINNER_MS = 200; // minimal visible time to reduce flicker
    const DEBOUNCE_MS = 60;     // debounce DOM mutations to avoid rapid toggles
    let loadingSince = 0;
    let debounceTimer = null;
    if (wrapper && overlay) {
      wrapper.dataset.state = 'loading';
      overlay.classList.remove('d-none');
      loadingEl?.classList.remove('d-none');
      emptyEl?.classList.add('d-none');
      loadingSince = Date.now();
    }

    function hasRenderableData() {
      if (!tbody) return false;
      // Prefer explicit marker set by JS renders
      if (tbody.querySelector('[data-row="data"]')) return true;
      // Fallback: any non-placeholder row with meaningful content
      return Array.from(tbody.rows).some(r => {
        if (r.id && /no\w*data/i.test(r.id)) return false;
        return Array.from(r.cells).some(td => (td.textContent||'').trim().length > 0);
      });
    }

    function syncOverlay() {
      if (!tbody || !overlay || !wrapper) return;
      const hasData = hasRenderableData();
      if (hasData) {
        const now = Date.now();
        const elapsed = now - loadingSince;
        const hide = () => {
          wrapper.dataset.state = 'data';
          overlay.classList.add('d-none');
          loadingEl?.classList.add('d-none');
          emptyEl?.classList.add('d-none');
        };
        if (elapsed < MIN_SPINNER_MS && (wrapper.dataset.state === 'loading')) {
          setTimeout(hide, MIN_SPINNER_MS - elapsed);
        } else {
          hide();
        }
      } else if (wrapper.dataset.state === 'empty') {
        overlay.classList.remove('d-none');
        loadingEl?.classList.add('d-none');
        emptyEl?.classList.remove('d-none');
      } else {
        overlay.classList.remove('d-none');
        loadingEl?.classList.remove('d-none');
        emptyEl?.classList.add('d-none');
      }
    }

    const obs = new MutationObserver(() => {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(syncOverlay, DEBOUNCE_MS);
    });
    if (tbody) obs.observe(tbody, { childList: true, subtree: true });

    // Optional helpers
    window.showReceiptsLoading = function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } };
    window.showReceiptsEmpty = function(){ if (wrapper) { wrapper.dataset.state = 'empty'; syncOverlay(); } };

    function adjustHeight(){
      const tableBodyWrapper = document.querySelector('#stockReceiptCard .table-body-wrapper');
      if (!tableBodyWrapper) return;
      const viewportHeight = window.innerHeight;
      const top = tableBodyWrapper.getBoundingClientRect().top;
      const footerEl = document.querySelector('footer') || null;
      const footerHeight = footerEl ? footerEl.getBoundingClientRect().height : 56;
      const avail = Math.max(280, viewportHeight - top - footerHeight - 40);
      tableBodyWrapper.style.maxHeight = `${avail}px`;
      tableBodyWrapper.style.minHeight = `${avail}px`;
    }
    adjustHeight();
    window.addEventListener('resize', adjustHeight);

    document.getElementById('applyFilters')?.addEventListener('click', function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } });
    document.getElementById('clearFilters')?.addEventListener('click', function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } });
  });
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/forms-standard.css') }}">
<link rel="stylesheet" href="/vendors/select2/select2.min.css">
<link rel="stylesheet" href="/vendors/select2-bootstrap-5-theme/select2-bootstrap-5-theme.min.css">
<style>
  /* Offcanvas Responsive Width */
  #receiptOffcanvas.offcanvas-wide {
    --bs-offcanvas-width: clamp(1000px, 80vw, 1800px);
    width: clamp(1000px, 80vw, 1800px) !important;
    max-width: 100vw;
  }

  @media (max-width: 768px) {
    #receiptOffcanvas.offcanvas-wide {
      --bs-offcanvas-width: 100vw;
      width: 100vw !important;
    }
  }

  @media (min-width: 1400px) {
    #receiptOffcanvas.offcanvas-wide {
      --bs-offcanvas-width: 1800px;
      width: 1800px !important;
    }
  }

  /* Polished Header */
  .offcanvas-header-polished {
    background: linear-gradient(180deg, var(--bs-body-bg), #f8f9fb 100%) !important;
    border-bottom: 1px solid var(--bs-border-color);
  }

  /* Sticky Footer */
  .sticky-bottom-footer {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }

  /* Select2 in Offcanvas */
  .select2-container {
    z-index: 1056 !important;
  }
  .select2-dropdown {
    z-index: 1057 !important;
  }

  /* Match Select2 size with regular inputs */
  #linesTable .select2-container .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px) !important;
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    padding: 0.25rem 2rem 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-color: var(--bs-border-color) !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Select2 invalid state */
  #linesTable .select2-container.is-invalid .select2-selection--single {
    border-color: #dc3545 !important;
    background-color: #f8d7da;
  }

  /* Show tooltip on invalid elements */
  #linesTable .is-invalid[title]:hover::after,
  #linesTable .select2-container.is-invalid[title]:hover::after,
  #linesTable .accordion-button.is-invalid[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #dc3545;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 0.25rem;
    pointer-events: none;
  }

  /* Tooltip arrow */
  #linesTable .is-invalid[title]:hover::before,
  #linesTable .select2-container.is-invalid[title]:hover::before,
  #linesTable .accordion-button.is-invalid[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -0.25rem;
    border: 4px solid transparent;
    border-top-color: #dc3545;
    z-index: 10001;
    pointer-events: none;
  }

  /* Position tooltip containers relatively */
  #linesTable td {
    position: relative;
  }

  #linesTable .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #linesTable .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    line-height: 1.5 !important;
    color: #6c757d !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #linesTable .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem + 2px) !important;
    top: 0 !important;
    right: 0.5rem !important;
  }

  #linesTable .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    margin-top: 0 !important;
  }

  /* Ensure Select2 dropdown appears above table */
  .select2-container--open .select2-dropdown {
    z-index: 99999 !important;
  }

  .select2-dropdown {
    z-index: 99999 !important;
  }

  /* Fix Select2 dropdown positioning in table */
  #linesTable .select2-container {
    position: relative;
    z-index: auto;
  }

  /* Make table allow overflow for dropdowns */
  #linesTable tbody tr td:first-child {
    overflow: visible !important;
    position: relative;
  }

  #linesTable tbody tr {
    position: relative;
  }

  /* Ensure table container doesn't clip */
  .table-responsive {
    overflow: visible !important;
  }

  /* But keep Y scroll only */
  #linesTable {
    overflow-x: visible;
  }

  /* Table wrapper needs to handle scroll properly */
  .table-responsive.border.rounded {
    overflow-x: auto;
    overflow-y: auto;
  }

  /* Select2 dropdown styling */
  .select2-result-variant {
    padding: 0.25rem 0;
  }

  .select2-result-variant .fw-semibold {
    font-size: 0.875rem;
  }

  .select2-result-variant small {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.125rem;
  }

  /* Make table cell accommodate dropdown */
  #linesTable tbody tr td:first-child {
    overflow: visible !important;
  }

  /* Sticky header should stay below dropdown */
  #linesTable thead {
    z-index: 5;
  }

  /* Select2 opened container */
  .select2-container--open {
    z-index: 99999 !important;
  }

  /* Enhanced Lines Table Styling */
  #linesTable {
    font-size: 0.875rem;
  }
  #linesTable thead th {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.3px;
    padding: 0.75rem 0.5rem !important;
    vertical-align: middle !important;
    background: linear-gradient(180deg, #f5f7fa 0%, #edf0f5 100%);
    border-bottom: 2px solid #d8dce6;
    height: 44px;
    line-height: 1.2;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  #linesTable thead th i {
    vertical-align: middle;
    margin-top: -2px;
  }
  #linesTable tbody tr {
    border-bottom: 1px solid #e9ecef;
  }
  #linesTable tbody tr:hover {
    background-color: #f8f9fc !important;
  }
  #linesTable tbody td {
    padding: 0.75rem 0.5rem !important;
    vertical-align: top !important;
    border-right: 1px solid #f0f2f5;
  }
  #linesTable tbody td:last-child {
    border-right: none;
  }

  /* Line row animations */
  .line-row {
    transition: all 0.2s ease;
  }
  .line-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }

  /* Section Headers */
  .form-standard h6.text-primary {
    font-size: 0.9375rem;
    color: var(--bs-primary);
    font-weight: 600;
  }

  /* Better form control styling in table */
  #linesTable .form-control,
  #linesTable .form-select {
    border-radius: 0.25rem;
    border-color: #d1d5db;
    font-size: 0.8125rem;
  }
  #linesTable .form-control:focus,
  #linesTable .form-select:focus {
    border-color: #3b7ddd;
    box-shadow: 0 0 0 0.15rem rgba(59, 125, 221, 0.1);
  }

  /* Invalid state styling */
  #linesTable .form-control.is-invalid,
  #linesTable .form-select.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  }

  /* Input group styling */
  #linesTable .input-group .form-control {
    border-right: none;
  }
  #linesTable .input-group .form-select {
    border-left: 1px solid #d1d5db;
  }

  /* Remove button styling */
  #linesTable .remove-line {
    opacity: 0.5;
    transition: all 0.2s ease;
  }
  #linesTable .remove-line:hover {
    opacity: 1;
    transform: scale(1.1);
  }

  /* Accordion styling in table */
  #linesTable .accordion-button {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.25rem;
  }
  #linesTable .accordion-button:not(.collapsed) {
    background-color: #e7f3ff;
    color: #0c63e4;
  }
  #linesTable .accordion-button:focus {
    box-shadow: none;
    border-color: #d1d5db;
  }
  #linesTable .accordion-button.is-invalid {
    border-color: #dc3545;
    background-color: #f8d7da;
    color: #842029;
  }
  #linesTable .accordion-body {
    padding: 0.5rem;
  }

  /* Accordion sizing - fixed to column width */
  #linesTable .multi-uom-accordion {
    width: 100%;
  }

  #linesTable .multi-uom-accordion .accordion {
    width: 100%;
  }

  /* Multi-UOM inline inputs */
  .multi-uom-inline .mu-qty-input {
    font-size: 0.8125rem;
  }
  .multi-uom-inline .mu-qty-input.is-invalid {
    border-color: #dc3545;
  }
  .mu-rule-indicator {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #198754;
  }
  .mu-rule-indicator .spinner-border {
    width: 12px;
    height: 12px;
  }

  /* Hidden field */
  input[name="supplier_reference"] {
    display: none;
  }

  input[name="supplier_reference"] + .form-text {
    display: none;
  }

  /* Collapsible Section Styling */
  .form-standard .collapse .bg-light {
    background-color: #f8f9fa !important;
  }

  /* Custom Scrollbar for Card Body */
  .form-standard .card-body::-webkit-scrollbar {
    width: 6px;
  }

  .form-standard .card-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  .form-standard .card-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

  .form-standard .card-body::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
  }

  /* Multi-UOM Accordion Container */
  .multi-uom-accordion {
    font-size: 0.875rem;
  }

  .uom-cell {
    vertical-align: top;
  }

  /* UOM accordion placeholder */
  .uom-inline-placeholder {
    font-size: 0.75rem;
    color: #9ca3af;
  }

  /* Action dropdown button reveal */
  .btn-reveal {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  .btn-reveal:hover,
  .btn-reveal:focus {
    background-color: transparent;
  }

  #receiptTable .dropdown-menu {
    font-size: 0.875rem;
  }

  #receiptTable .dropdown-item {
    padding: 0.5rem 1rem;
  }

  #receiptTable .dropdown-item:hover {
    background-color: #f8f9fa;
  }

  /* Quantity Breakdown Modal Styles */
  #quantityBreakdownModal .modal-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  }

  #breakdownEntriesTable {
    font-size: 0.875rem;
  }

  #breakdownEntriesTable thead {
    background-color: #f8f9fa;
  }

  #breakdownEntriesTable thead th {
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem 0.5rem;
    text-align: center;
    vertical-align: middle;
  }

  #breakdownEntriesTable tbody td {
    padding: 0.5rem;
    vertical-align: middle;
  }

  #breakdownEntriesTable .breakdown-ref-input {
    min-width: 150px;
  }

  #breakdownEntriesTable .breakdown-uom-input {
    /* text-align: right; */
    /* min-width: 80px; */
  }

  #breakdownEntriesTable input[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed;
  }

  #breakdownEntriesTable tbody tr:hover {
    background-color: #f8f9fa;
  }

  .breakdown-indicator {
    animation: fadeIn 0.3s ease-in;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Line row with quantity breakdown */
  tr.has-breakdown {
    background-color: #f0f9ff;
  }

  tr.has-breakdown:hover {
    background-color: #e0f2fe;
  }
</style>
@endpush