@extends('layouts.app')
@section('title','Opening Stock')
@section('content')
<div class="" id="openingStockModule" data-route="inventory.stock-transactions.stock-opening">
  <div class="card mb-3" id="openingStockCard" data-route="inventory.stock-transactions.stock-opening">
    <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">Opening Stock</h6>
        </div>
        <div class="col-auto d-flex align-items-center gap-2">
          <button class="btn btn-sm btn-falcon-default" id="toggleOpeningFilters" type="button" data-bs-toggle="collapse" data-bs-target="#openingStockFilters" aria-expanded="false">
            <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Filters</span>
          </button>
          <!--@can('inventory-stock-transactions-stock-opening.export')
          <button class="btn btn-sm btn-falcon-default" id="exportOpeningStock" type="button">Export</button>
          @endcan-->
          @can('inventory-stock-transactions-stock-opening.create')
          <button class="btn btn-sm btn-falcon-default" id="importOpeningStockBtn" type="button">
            <i class="fas fa-file-excel me-1"></i>Import
          </button>
          <button class="btn btn-sm btn-primary" id="openingStockNewBtn" type="button">
            <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">New</span>
          </button>
          @endcan
        </div>
      </div>
    </div>
    <div class="collapse" id="openingStockFilters">
      <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 gy-2 gx-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 number">
            </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">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="applyOpeningFilters" type="button"><i
                            class="fas fa-search"></i> Apply</button>
              <button class="btn btn-outline-secondary btn-sm" id="clearOpeningFilters" type="button"><i
                            class="fas fa-times"></i> Clear</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body p-0">
      <x-table-standard class="position-relative table-dropdown-visible">
        <x-slot:after>
          <div id="openingListOverlay" 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 opening stock data...</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 opening stock documents found</div>
              <small class="text-muted">Try adjusting your filters or create a new document</small>
            </div>
          </div>
        </x-slot:after>
        <thead class="bg-200 text-900 sticky-top">
            <tr class="text-nowrap">
              <th style="width:28px" class="pe-1 align-middle">
                <!-- <div class="form-check mb-0">
                  <input class="form-check-input" type="checkbox" id="selectAllOpening" data-bulk-select='{"body":"openingStockTbody","actions":"openingStockBulkActions","replacedElement":"openingStockBulkReplace"}'>
                </div> -->
              </th>
              <th class="text-900 sort pe-1 align-middle document_number" data-sort="document_number">Document #</th>
              <th class="text-900 sort pe-1 align-middle posting_date" data-sort="posting_date">Posting Date</th>
              <th class="text-900 sort pe-1 align-middle lines_count" data-sort="lines_count">Lines</th>
              <th class="text-900 sort pe-1 align-middle total_qty" data-sort="total_qty">Total Qty</th>
              <th class="text-900 sort pe-1 align-middle warehouse" data-sort="warehouse">Warehouse</th>
              <th class="text-900 sort pe-1 align-middle status" data-sort="status">Status</th>
              <th class="text-900 sort pe-1 align-middle created_at" data-sort="created_at">Created</th>
              <th class="text-900 pe-1 align-middle" style="width:140px">Operations</th>
              <th class="text-900 pe-1 align-middle" style="width:80px" id="openingStockBulkReplace">Actions</th>
            </tr>
          </thead>
          <tbody id="openingStockTbody">

          </tbody>
        </x-table-standard>


    </div>
    <div class="card-footer px-2 py-2 fs-10 d-none" style="position: sticky; bottom: 0; border-top: 1px solid #dee2e6;">
      <div class="d-flex align-items-end justify-content-end flex-wrap gap-2">
        <!-- <div class="small text-muted order-1">
          <span id="pg_showing" class="me-1">Showing</span>
          <span id="pg_from">0</span>–<span id="pg_to">0</span>
          of <span id="pg_total">0</span>
        </div> -->

        <!-- Standard Laravel paginator container (links injected by AJAX helper / controller) -->
        <div id="laravel_paginator1" class="text-sm"></div>

        <!-- <div class="d-flex align-items-center gap-2 order-3">
          <label for="perPageItem" class="mb-0 small text-muted">Per page</label>
          <select id="perPageItem" class="form-select form-select-sm" style="width: auto; min-width: 84px;">
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="25" selected>25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </div> -->
      </div>



  </div>
</div>

<!-- Offcanvas Form -->
<div class="offcanvas offcanvas-end offcanvas-wide" tabindex="-1" id="openingStockOffcanvas" aria-labelledby="openingStockOffcanvasLabel" style="width: 90%!important;">
  <div class="offcanvas-header bg-light offcanvas-header-polished">
    <h5 class="offcanvas-title" id="openingStockOffcanvasLabel"><span class="fas fa-box-open me-2"></span><span>New Opening Stock</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 tight">
    <div class="form-scroll-container flex-grow-1 p-3">
      <div class="card h-100 border-0 d-flex flex-column shadow-none">
        <div class="card-body py-0 overflow-auto">
          <div class="px-sm-2 px-md-3">
            <form id="openingStockForm" class="needs-validation" novalidate>
              @csrf
              <input type="hidden" name="id" id="opening_id" />
              <div class="row g-3">
                <div class="col-sm-4">
                  <label class="form-label" for="warehouse_id">Warehouse</label>
                  <select name="warehouse_id" id="warehouse_id" class="form-select form-select-sm" required data-warehouse-select>
                    <option value="">Select warehouse...</option>
                  </select>
                  <div class="invalid-feedback">Required</div>
                </div>
                <div class="col-sm-4">
                  <label class="form-label" for="posting_date">Posting Date</label>
                  <input type="date" name="posting_date" id="posting_date" class="form-control form-control-sm" required>
                  <div class="invalid-feedback">Required</div>
                </div>
                <div class="col-sm-4">
                  <label class="form-label" for="remarks">Remarks</label>
                  <input type="text" name="remarks" id="remarks" class="form-control form-control-sm" placeholder="Optional remarks">
                </div>
              </div>
              <hr class="my-3" />
              <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="mb-0 small text-uppercase">Lines</h6>
                <div class="d-flex gap-2">
                  <button type="button" class="btn btn-sm btn-falcon-default" id="importLinesBtn"><span class="fas fa-file-excel me-1"></span>Import Lines</button>
                  <button type="button" class="btn btn-sm btn-falcon-default" id="addOpeningLineBtn"><span class="fas fa-plus me-1"></span>Add Line</button>
                </div>
              </div>
              <div class="table-responsive border rounded-1" style="max-height: calc(100vh - 280px); min-height: 360px; overflow-y: auto;">
                <table class="table table-sm table-hover mb-0" id="openingLinesTable" style="border-collapse: separate; border-spacing: 0;">
                  <thead class="bg-200 text-900 sticky-top" style="position: sticky; top: 0; z-index: 9999;">
                    <tr class="text-nowrap" style="box-shadow: 0 2px 4px rgba(0,0,0,0.05); height: 44px;">
                     {{-- <th class="align-middle text-center" style="width: 48px; min-width: 48px; padding: 0.75rem 0.5rem; vertical-align: middle;">#</th> --}}
                      <th class="align-middle fw-bold ps-2" style="width: 280px; min-width: 280px; padding: 0.75rem 0.5rem; vertical-align: middle;">
                        <i class="fas fa-box-open me-1 text-primary"></i>Variant
                      </th>
                      <th class="align-middle fw-bold" style="width: 200px; min-width: 200px; padding: 0.75rem 0.5rem; vertical-align: middle;">
                        <i class="fas fa-tag me-1 text-success"></i>Rate
                      </th>

                      <th class="align-middle fw-bold" style="width: 160px; min-width: 160px; padding: 0.75rem 0.5rem; vertical-align: middle;">
                        <i class="fas fa-balance-scale me-1 text-info"></i>UOMs
                      </th>
                        <th class="align-middle fw-bold text-center" style="width: 140px; min-width: 140px; padding: 0.75rem 0.5rem; vertical-align: middle;">
                        <i class="fas fa-calculator me-1"></i>Base Rate
                      </th>
                      <th class="align-middle text-center" style="width: 50px; min-width: 50px; padding: 0.75rem 0.5rem; vertical-align: middle;">
                        <i class="fas fa-cog text-muted"></i>
                      </th>
                    </tr>
                  </thead>
                  <tbody id="openingLinesBody" style="font-size: 0.875rem;"></tbody>
                  <tfoot class="bg-light">
                    <tr id="openingLinesEmpty">
                      <td colspan="6" class="text-center text-muted py-4">
                        <i class="fas fa-inbox fa-2x mb-2 d-block opacity-50"></i>
                        <span class="fw-semibold">No lines added yet</span>
                        <p class="mb-0 small">Click "Add Line" to start</p>
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="border-top px-3 py-2 d-flex justify-content-between align-items-center mt-auto sticky-bottom-footer offcanvas-footer-polished">
      <button type="button" class="btn btn-sm btn-outline-danger" data-bs-dismiss="offcanvas"><i class="fas fa-times"></i> Cancel</button>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-sm btn-outline-success d-none" id="submitOpeningBtn"><i class="fas fa-check"></i> Submit</button>
        <button type="button" class="btn btn-sm btn-outline-danger d-none" id="cancelOpeningBtn"><i class="fas fa-ban"></i> Cancel Doc</button>
        <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="resetOpeningBtn"><i class="fas fa-undo"></i> Reset</button>
        <button type="button" class="btn btn-sm btn-outline-info d-none" id="editOpeningBtn"><i class="fas fa-edit"></i> Edit</button>
        <button type="button" class="btn btn-sm btn-outline-primary" id="saveOpeningBtn"><i class="fas fa-save"></i> Save</button>
      </div>
    </div>
  </div>
</div>

<template id="openingLineTemplate">
  <tr class="opening-line-row" style="transition: background-color 0.15s ease;">
    <td class="ps-2" style="vertical-align: top;">
      <div class="variant-cell d-flex align-items-center" style="gap:.5rem;">
        <span class="line-no text-muted fw-semibold" style="display:inline-block; min-width: 20px; text-align: left;"></span>
        <select class="form-select form-select-sm variant variant-select flex-grow-1" name="lines[__i__][product_variant_id]" required data-variant-select style="min-height: 32px;">
        <option value="">Select variant...</option>
        </select>
      </div>
    </td>
    <td style="vertical-align: top;">
      <div class="input-group input-group-sm">
        <input type="text" inputmode="decimal" class="form-control form-control-sm rate rate-input" name="lines[__i__][rate]" placeholder="0.00" required style="min-height: 32px; max-width: 110px;" pattern="[0-9]*\.?[0-9]*" data-numeric-only="true">
        <select class="form-select form-select-sm rate-uom" name="lines[__i__][rate_uom_code]" required style="min-height: 32px; max-width: 110px;">
          <option value="">UOM...</option>
        </select>
      </div>
      <div class="d-flex justify-content-end align-items-start mt-1" style="min-height: 18px;">
        <div class="rate-uom-indicator small text-end" style="font-size: 0.75rem;"></div>
      </div>
    </td>

    <td style="vertical-align: top;">
      <div class="multi-uom-accordion small" data-uom-accordion>
        <div class="accordion accordion-flush border rounded" id="uomAccWrap___i__" style="background: #f9fafb;">
          <div class="accordion-item border-0" style="background: transparent;">
            <h2 class="accordion-header" id="uomAccHead___i__">
              <button class="accordion-button collapsed py-1 px-2 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#uomAccBody___i__" aria-expanded="false" aria-controls="uomAccBody___i__" 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___i__" class="accordion-collapse collapse" data-bs-parent="#uomAccWrap___i__">
              <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="text" class="form-control form-control-sm uom d-none" name="lines[__i__][stock_uom]" value="PCS" readonly>
      {{-- Hidden field reserved for future parity with stock receipt (optional JSON cache of UOM inputs) --}}
      <input type="hidden" class="uom-data-json d-none" name="lines[__i__][uom_data_json]" value="">
    </td>
     <td class="text-end" style="vertical-align: top;">
      <div class="base-rate-display fw-semibold" title="Calculated base rate"></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>

{{-- Import Lines Modal (for adding lines to current document) --}}
<div class="modal fade" id="importLinesModal" tabindex="-1" aria-labelledby="importLinesModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="importLinesModalLabel">
          <i class="fas fa-file-excel text-success me-2"></i>Import Lines from Excel
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info fs-10 mb-3">
          <i class="fas fa-info-circle me-1"></i>
          <strong>Instructions:</strong> Upload an Excel file with columns: <code>sku</code>, <code>qty</code>, <code>rate</code>, <code>rate_uom</code>, <code>uoms</code> (optional).
          <br><strong>UOMS Format:</strong> <code>CODE:QTY|CODE:QTY</code> (e.g., <code>SQM:200|RM:100|PCS:20</code>)
          <br>The system will automatically find variants by SKU and add them to the lines table.
        </div>

        <div class="mb-3">
          <label class="form-label fw-bold">Select Excel File</label>
          <input type="file" class="form-control form-control-sm" id="importLinesFileInput" accept=".xlsx,.xls,.csv">
          <div class="form-text fs-10">Max file size: 5MB. Supported formats: .xlsx, .xls, .csv</div>
        </div>

        <div id="importLinesPreview" class="d-none">
          <div class="alert alert-success fs-10 mb-3">
            <i class="fas fa-check-circle me-1"></i>
            Preview of data. Click "Import to Table" to add these lines.
          </div>



          <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
            <table class="table table-sm table-bordered fs-10">
              <thead class="bg-light sticky-top" style="position: sticky; top: 0; z-index: 10;">
                <tr>
                  <th style="width: 48px;">#</th>
                  <th>SKU</th>
                  <th>Variant</th>
                  <th>Rate</th>
                  <th>Rate UOM</th>
                  <th>UOMS</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody id="linesPreviewBody"></tbody>
            </table>
          </div>
        </div>

        <div id="importLinesLoading" class="d-none text-center py-4">
          <i class="fas fa-spinner fa-spin fa-2x text-primary mb-2"></i>
          <div class="fw-bold">Processing file...</div>
          <div class="text-muted fs-10">Please wait</div>
        </div>
      </div>
      <div class="modal-footer">
           <div class="mb-2 align-left me-auto">
            <strong>Total Rows:</strong> <span id="linesPreviewCount">0</span>
          </div>
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-sm btn-success" id="importToTableBtn" disabled>Import to Table</button>
      </div>
    </div>
  </div>
</div>

{{-- Import Modal --}}
<div class="modal fade" id="importOpeningStockModal" tabindex="-1" aria-labelledby="importOpeningStockModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="importOpeningStockModalLabel">
          <i class="fas fa-file-excel text-success me-2"></i>Import Opening Stock
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="importStepSelect" class="import-step">
          <div class="alert alert-info fs-10 mb-3">
            <i class="fas fa-info-circle me-1"></i>
            <strong>Before importing:</strong> Download the template, fill in your data, and upload the completed file.
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold">Step 1: Download Template</label>
            <div>
              <a href="{{ route('inventory.stock-transactions.stock-opening.import.template') }}" class="btn btn-falcon-default btn-sm" id="downloadTemplateBtn">
                <i class="fas fa-download me-1"></i>Download Excel Template
              </a>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold">Step 2: Upload Filled Excel</label>
            <input type="file" class="form-control form-control-sm" id="importFileInput" accept=".xlsx,.xls">
            <div class="form-text fs-10">Max file size: 5MB. Supported formats: .xlsx, .xls</div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold">Import Options</label>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="skipDuplicates" checked>
              <label class="form-check-label fs-10" for="skipDuplicates">
                Skip duplicate documents (same document_number)
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="updateExisting">
              <label class="form-check-label fs-10" for="updateExisting">
                Update existing documents (replace lines with new data)
              </label>
            </div>
          </div>
        </div>

        <div id="importStepPreview" class="import-step d-none">
          <div class="alert alert-success fs-10 mb-3">
            <i class="fas fa-check-circle me-1"></i>
            Preview of first 5 rows. Review before importing.
          </div>

          <div class="mb-2">
            <strong>Total Rows:</strong> <span id="previewTotalRows">0</span>
          </div>

          <div class="table-responsive" style="max-height: 300px;">
            <table class="table table-sm table-bordered fs-10" id="previewTable">
              <thead class="bg-light sticky-top">
                <tr id="previewHeaders"></tr>
              </thead>
              <tbody id="previewBody"></tbody>
            </table>
          </div>
        </div>

        <div id="importStepResults" class="import-step d-none">
          <div id="importSuccessAlert" class="alert alert-success fs-10 d-none">
            <i class="fas fa-check-circle me-1"></i>
            <strong>Import completed successfully!</strong>
            <div class="mt-2">
              <div><strong>Documents Created:</strong> <span id="resultHeadersCreated">0</span></div>
              <div><strong>Lines Created:</strong> <span id="resultLinesCreated">0</span></div>
              <div><strong>Total Processed:</strong> <span id="resultTotal">0</span></div>
              <div><strong>Success:</strong> <span id="resultSuccess">0</span></div>
              <div><strong>Failed:</strong> <span id="resultFailed">0</span></div>
            </div>
          </div>

          <div id="importErrorAlert" class="alert alert-warning fs-10 d-none">
            <i class="fas fa-exclamation-triangle me-1"></i>
            <strong>Import completed with errors:</strong>
            <div class="mt-2" id="importErrorsList"></div>
          </div>
        </div>

        <div id="importLoadingOverlay" class="d-none position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-white bg-opacity-75" style="z-index:10;">
          <div class="text-center">
            <i class="fas fa-spinner fa-spin fa-3x text-primary mb-2"></i>
            <div class="fw-bold">Processing import...</div>
            <div class="text-muted fs-10">Please wait</div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-sm btn-primary" id="previewImportBtn" disabled>Preview</button>
        <button type="button" class="btn btn-sm btn-success d-none" id="executeImportBtn">Import Now</button>
        <button type="button" class="btn btn-sm btn-primary d-none" id="backToSelectBtn">Back</button>
      </div>
    </div>
  </div>
</div>

{{-- View Opening Stock Offcanvas (Read-Only) --}}
<div class="offcanvas offcanvas-end offcanvas-wide" tabindex="-1" id="openingStockViewOffcanvas" aria-labelledby="openingStockViewOffcanvasLabel" style="width: 80%!important;">
  <div class="offcanvas-header bg-light offcanvas-header-polished sticky-top" style="z-index: 1020;">
    <h5 class="offcanvas-title" id="openingStockViewOffcanvasLabel">
      <span class="fas fa-eye me-2"></span><span>View Opening Stock</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">
    {{-- Sticky Header Card --}}
    <div class="p-2 border-bottom bg-white sticky-header" style="position: sticky; top: 0; z-index: 1010;">
      <div class="card border mb-0 view-document-header">
        <div class="card-body p-2">
          <div class="row g-2">
            <div class="col-md-3 col-6">
              <label class="form-label text-muted small mb-0">Doc No</label>
              <div class="fw-semibold small" id="viewDocNumber">-</div>
            </div>
            <div class="col-md-3 col-6">
              <label class="form-label text-muted small mb-0">Status</label>
              <div class="small" id="viewStatus">-</div>
            </div>
            <div class="col-md-3 col-6">
              <label class="form-label text-muted small mb-0">Warehouse</label>
              <div class="small" id="viewWarehouse">-</div>
            </div>
            <div class="col-md-3 col-6">
              <label class="form-label text-muted small mb-0">Posting Date</label>
              <div class="small" id="viewPostingDate">-</div>
            </div>
            <div class="col-12">
              <label class="form-label text-muted small mb-0">Remarks</label>
              <div class="small text-wrap" id="viewRemarks">-</div>
            </div>
          </div>

          {{-- Collapsible Metadata Section --}}
          <div class="collapse mt-2" id="viewMetadataCollapse">
            <div class="border-top pt-2">
              <div class="row g-2">
                <div class="col-md-3 col-6">
                  <label class="form-label text-muted small mb-0">Created By</label>
                  <div class="small" id="viewCreatedBy">-</div>
                </div>
                <div class="col-md-3 col-6">
                  <label class="form-label text-muted small mb-0">Created At</label>
                  <div class="small" id="viewCreatedAt">-</div>
                </div>
                <div class="col-md-3 col-6">
                  <label class="form-label text-muted small mb-0">Updated By</label>
                  <div class="small" id="viewUpdatedBy">-</div>
                </div>
                <div class="col-md-3 col-6">
                  <label class="form-label text-muted small mb-0">Updated At</label>
                  <div class="small" id="viewUpdatedAt">-</div>
                </div>
              </div>
            </div>
          </div>

          <div class="text-center mt-1">
            <button class="btn btn-link btn-sm p-0 text-decoration-none" type="button" data-bs-toggle="collapse" data-bs-target="#viewMetadataCollapse">
              <small>Show/Hide Details</small>
            </button>
          </div>
        </div>
      </div>
    </div>

    {{-- Scrollable Table Section --}}
    <div class="flex-grow-1 p-2" style="position: relative;">
      <div class="mb-2">
        <h6 class="mb-0 small"><i class="fas fa-list-ul me-1"></i>Line Items</h6>
      </div>

      <div class="border rounded" style="overflow: visible;">
        <div style="max-height: 600px; overflow-y: auto; position: relative;">
          <table class="table table-sm table-hover mb-0" id="viewOpeningLinesTable" style="position: relative;">
            <thead class="bg-200 text-900" style="position: sticky; top: 0; z-index: 10;">
              <tr class="text-nowrap">
                <th class="ps-2" style="min-width: 40px;">##</th>
                <th style="min-width: 180px;">Variant</th>
                <th style="min-width: 120px;">Rate</th>
                <th style="min-width: 180px;">UOMs</th>
                <th class="text-end" style="min-width: 100px;">Base Rate</th>
              </tr>
            </thead>
            <tbody id="viewOpeningLinesTbody">
              <tr id="viewOpeningLinesEmpty">
                <td colspan="5" class="text-center text-muted py-4">
                  <i class="fas fa-inbox fa-2x mb-2"></i>
                  <div>No line items</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="border-top px-3 py-2 d-flex justify-content-end align-items-center sticky-bottom" style="position: sticky; bottom: 0; background: white; z-index: 1020;">
    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="offcanvas">
      <i class="fas fa-times"></i> Close
    </button>
  </div>
</div>

<!-- 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: 15%" id="ref_no_th" class="d-none">Ref No </th>
                <th style="width: 10%" id="breakdownUnitColumnHeader"><!-- Dynamic Breakdown Unit header --></th>
                <!-- Dynamic UOM columns will be inserted here -->

              </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 colspan="2" 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">
         <table class="table table-sm table-bordered table-hover mb-0">
            <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 class="d-flex justify-content-between w-100">
        <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>
</div>

@endsection

{{-- No inline scripts per standards; logic is in public/assets/js/custom/inventory_management/opening_stock.js --}}
@push('scripts')
<script>
  // Permission capabilities exposed to JS (see docs/ui/permission-capabilities-standard.md)
  window.pageCaps = {
    create: @json(Gate::allows('inventory-stock-transactions-stock-opening.create')),
    view: @json(Gate::allows('inventory-stock-transactions-stock-opening.view')),
    update: @json(Gate::allows('inventory-stock-transactions-stock-opening.update')),
    delete: @json(Gate::allows('inventory-stock-transactions-stock-opening.delete')),
    submit: @json(Gate::allows('inventory-stock-transactions-stock-opening.manage') || Gate::allows('inventory-stock-transactions-stock-opening.update')),
    cancel: @json(Gate::allows('inventory-stock-transactions-stock-opening.manage') || Gate::allows('inventory-stock-transactions-stock-opening.update')),
    export: @json(Gate::allows('inventory-stock-transactions-stock-opening.export')),
    // Masters permissions used by offcanvas dropdown loaders
    variantsView: @json(Gate::allows('masters-product-management-product-variants.view')),
    warehousesView: @json(Gate::allows('masters-organization-warehouse-masters.view')),
    uomsView: @json(Gate::allows('masters-product-management-units-of-measure.view'))
  };
</script>
@endpush

@push('styles')
  {{-- Searchable select styles (Falcon vendors) --}}
  <link rel="stylesheet" href="/vendors/select2/select2.min.css">
  <link rel="stylesheet" href="/vendors/select2-bootstrap-5-theme/select2-bootstrap-5-theme.min.css">
  <link rel="stylesheet" href="/vendors/choices/choices.min.css">
  <style>
    /* Improve readability inside offcanvas */
    #openingStockOffcanvas .choices, #openingStockOffcanvas .select2-container--bootstrap-5 {
      font-size: 0.9rem;
    }
    #openingStockOffcanvas .choices__list--dropdown .choices__item,
    #openingStockOffcanvas .select2-results__option {
      color: #212529 !important; /* darker text */
    }
    #openingStockOffcanvas .choices__placeholder,
    #openingStockOffcanvas .select2-selection__placeholder{
      color: #6c757d !important; /* medium placeholder */
    }
    /* Ensure dropdown overlays above the offcanvas content */
    .choices__list--dropdown, .select2-container .select2-dropdown{
      z-index: 1086 !important; /* higher than .offcanvas (z-1045..1050) */
    }
    /* Slightly thicker selection */
    #openingStockOffcanvas .choices__inner, #openingStockOffcanvas .select2-selection--single{
      border-color: #adb5bd;
    }
    /* Keep action dropdown visible when table wrapper scrolls */
    .table-responsive.table-dropdown-visible{
      overflow-x: auto !important;
      overflow-y: visible !important;
    }
    .multi-uom-inline .mu-qty-input.is-invalid{
      border-color: #dc3545;
    }
    .mu-rule-indicator{
      min-width: 28px;
      width: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #198754;
    }
    .mu-rule-indicator .spinner-border{
      width: 12px;
      height: 12px;
    }
    .rate-hint{
      min-height: 1.2rem;
      color: #198754;
    }
    .rate-hint.text-danger{
      color: #dc3545 !important;
    }

    /* Enhanced Lines Table Styling */
    #openingLinesTable {
      font-size: 0.875rem;
    }
    #openingLinesTable 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;
    }
    #openingLinesTable thead th i {
      vertical-align: middle;
      margin-top: -2px;
    }
    #openingLinesTable tbody tr {
      border-bottom: 1px solid #e9ecef;
    }
    #openingLinesTable tbody tr:hover {
      background-color: #f8f9fc !important;
    }
    #openingLinesTable tbody td {
      padding: 0.75rem 0.5rem !important;
      vertical-align: top !important;
      border-right: 1px solid #f0f2f5;
    }
    #openingLinesTable tbody td:last-child {
      border-right: none;
    }

    /* Line row animations */
    .opening-line-row {

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

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

    /* Variant cell with inline counter */
    #openingLinesTable .variant-cell { display: flex; align-items: center; gap: .5rem; }
    #openingLinesTable .variant-cell .line-no { min-width: 20px; text-align: left; color: #6b7280; }
    /* Make Select2 container flex with the cell */
    #openingLinesTable .variant-cell .select2-container { flex: 1 1 auto; min-width: 0; }

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

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

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

    /* Empty state styling */
    #openingLinesEmpty i {
      color: #9ca3af;
    }

    /* Rate hint improvements */
    .rate-hint {
      font-size: 0.7rem;
      font-weight: 500;
    }
    .rate-hint i {
      font-size: 0.65rem;
    }

    /* Lighten SweetAlert2 backdrop across the app */
    .swal2-container.swal2-backdrop-show,
    .swal2-container.swal2-noanimation {
      z-index: 99999 !important
    }
    .swal2-popup {
      border-radius: 12px;
    }

    /* ⚡ Import Lines Preview - Filter Notice Styling */
    .filter-notice-banner {
      border-left: 4px solid #0d6efd;
      background: linear-gradient(135deg, #e7f3ff 0%, #f0f8ff 100%);
      animation: slideDown 0.3s ease-out;
    }

    .filter-notice-banner .btn-close {
      opacity: 0.5;
    }

    .filter-notice-banner .btn-close:hover {
      opacity: 1;
    }

    /* Subtle highlight for filtered lines in preview */
    .table-warning-subtle {
      background-color: #fff3cd22 !important;
      border-left: 3px solid #ffc107;
    }

    .table-warning-subtle:hover {
      background-color: #fff3cd44 !important;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* View Offcanvas Styles */
    #openingStockViewOffcanvas .view-document-header {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }
    #openingStockViewOffcanvas .view-document-header .form-label {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 0;
    }
    #openingStockViewOffcanvas .view-document-header .small {
      font-size: 0.8rem;
      color: #2d3748;
    }
    #openingStockViewOffcanvas .sticky-header {
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      z-index: 1010; /* Ensure it stays above table */
    }
    #viewOpeningLinesTable {
      font-size: 0.8rem;
      width: 100%;
    }
    #viewOpeningLinesTable thead {
      position: sticky;
      top: 0;
      z-index: 10; /* ⚡ Simplified z-index - just needs to be above tbody */
      background: linear-gradient(180deg, #f5f7fa 0%, #edf0f5 100%);
    }
    #viewOpeningLinesTable thead th {
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.3px;
      padding: 0.5rem 0.4rem !important;
      vertical-align: middle !important;
      background: linear-gradient(180deg, #f5f7fa 0%, #edf0f5 100%);
      border-bottom: 2px solid #d8dce6;
      /* ⚡ REMOVED duplicate position: sticky from th - only thead needs it */
    }
    #viewOpeningLinesTable tbody tr:hover {
      background-color: #f8f9fc !important;
    }
    #viewOpeningLinesTable tbody td {
      padding: 0.5rem 0.4rem !important;
      vertical-align: top !important;
      font-size: 0.8rem;
    }
    #viewOpeningLinesTable .badge {
      font-size: 0.7rem;
    }
    .badge-soft-primary {
      background-color: #e7f3ff;
      color: #0066cc;
    }
    .badge-soft-secondary {
      background-color: #e2e8f0;
      color: #4a5568;
    }
  <style>
    /* ...existing code... */
    /* Fix dropdown menu going behind table row */
    tbody, tr {
      overflow: visible !important;
    }
    .dropdown-menu {
      z-index: 1055 !important;
    }
  </style>
@push('scripts')
  {{-- Searchable select scripts (load both; JS will pick what's available) --}}
  <script src="/vendors/jquery/jquery.min.js"></script>
  <script src="/vendors/select2/select2.min.js"></script>
  <script src="/vendors/choices/choices.min.js"></script>
  {{-- SheetJS for Excel import --}}
  <script>
    // Single overlay (loading/empty) + dynamic height for Opening Stock list
    document.addEventListener('DOMContentLoaded', function(){
      const tbody = document.getElementById('openingStockTbody');
      const overlay = document.getElementById('openingListOverlay');
      const wrapper = document.querySelector('#openingStockCard .table-body-wrapper');
      const loadingEl = overlay?.querySelector('.overlay-loading');
      const emptyEl = overlay?.querySelector('.overlay-empty');
      const MIN_SPINNER_MS = 200;
      const DEBOUNCE_MS = 60;
      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;
        if (tbody.querySelector('[data-row="data"]')) return true;
        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 {
          // loading state
          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 });

      window.showOpeningLoading = function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } };
      window.showOpeningEmpty = function(){ if (wrapper) { wrapper.dataset.state = 'empty'; syncOverlay(); } };

      function adjustHeight(){
        const tableBodyWrapper = document.querySelector('#openingStockCard .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('applyOpeningFilters')?.addEventListener('click', function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } });
      document.getElementById('clearOpeningFilters')?.addEventListener('click', function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } });
    });
  </script>
@endpush