@extends('layouts.app')

@section('title', 'Current Stock Balance')

@section('content')
<div id="currentStockModule">

{{-- Company Selection Warning --}}
@if(!session('company_id'))
<div class="alert alert-warning alert-dismissible fade show company-warning" role="alert">
    <i class="fas fa-building me-2"></i>
    <strong>No Company Selected!</strong> Please select a company from the top navigation to view stock balance.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card mb-3 company-required-section" id="currentStockTableCard">
  <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">Current Stock Balance</h6>
      </div>
      <div class="col-auto d-flex align-items-center gap-2">
        <button class="btn btn-sm btn-falcon-default" type="button" data-bs-toggle="collapse" data-bs-target="#stockFilters">
          <span class="fas fa-filter me-1"></span>Filter
        </button>
        @can('inventory-stock-overview-current-stock-balance.export')
        <button class="btn btn-sm btn-falcon-default" type="button" id="exportCurrentStock">
          <span class="fas fa-external-link-alt me-1"></span>Export
        </button>
        @endcan
      </div>
    </div>
  </div>

  <!-- Advanced Filters (Collapsible) -->
  <div class="collapse" id="stockFilters">
    <div class="card-body border-top fs-10">
      <div class="row g-3">
        <form id="stockFilterForm" class="row gy-2 gx-2 align-items-end">
        <div class="col-6 col-md-3">
          <label class="form-label mb-1">Warehouse</label>
          <select id="filter_warehouse" class="form-select form-select-sm" name="warehouse_id">
            <option value="">All Warehouses</option>
          </select>
        </div>
        <div class="col-6 col-md-3">
          <label class="form-label mb-1">Category</label>
          <select id="filter_category" class="form-select form-select-sm" name="category_id">
            <option value="">All Categories</option>
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label mb-1">Stock Status</label>
          <select id="filter_stock_status" class="form-select form-select-sm" name="stock_status">
            <option value="">All Status</option>
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label mb-1">Alert Type</label>
          <select id="filter_alert_type" class="form-select form-select-sm" name="alert_type">
            <option value="">All Alerts</option>
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label mb-1">Show Stock</label>
          <select id="filter_has_stock" class="form-select form-select-sm" name="has_stock">
            <option value="">All Items</option>
            <option value="true">Available Stock Only</option>
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label mb-1">Search</label>
          <input id="filter_search" type="text" class="form-control form-control-sm" placeholder="Product / SKU / Warehouse" name="search">
        </div>
        <div class="col-12 col-md-3">
          <button class="btn btn-falcon-default btn-sm me-2" type="button" id="applyStockFilters">Apply</button>
          <button class="btn btn-falcon-default btn-sm" type="button" id="clearStockFilters">Clear</button>
        </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Main Table -->
  <div class="card-body p-0">
    <div class="table-responsive scrollbar">
      <div class="table-body-wrapper">
        <table class="table table-sm fs-10 mb-0 table-hover" id="currentStockTable">
          <thead class="bg-200 sticky-top" style="position: sticky; top: 0; z-index: 10;">
            <tr>
              <th class="text-900 align-middle white-space-nowrap" style="width: 10%;">Warehouse</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 10%;">SKU</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 18%;">Product Variant</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 10%;">Category</th>
              <th class="text-900 align-middle white-space-nowrap text-end" style="width: 10%;">Actual Qty</th>
              <th class="text-900 align-middle white-space-nowrap text-end" style="width: 10%;">Reserved</th>
              <th class="text-900 align-middle white-space-nowrap text-end" style="width: 10%;">Available</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 4%;">UOM</th>
              <th class="text-900 align-middle white-space-nowrap text-end" style="width: 10%;">Stock Value</th>
              <th class="text-900 align-middle white-space-nowrap text-center" style="width: 8%;">Actions</th>
            </tr>
          </thead>
          <tbody id="currentStockTbody">
            <!-- Dynamic content will be loaded here -->
          </tbody>
        </table>
        <div id="currentStockEmptyOverlay" 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 stock balance...</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 data found</div>
            <small class="text-muted">Try adjusting your filters or check if stock has been posted</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>  <!-- Pagination Footer -->
</div>

{{-- Stock Details Offcanvas --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="stockDetailsOffcanvas" aria-labelledby="stockDetailsOffcanvasLabel" style="width: 50%;">
  <div class="offcanvas-header bg-light">
    <h5 class="offcanvas-title" id="stockDetailsOffcanvasLabel">
      <i class="fas fa-box me-2"></i>Stock Details
    </h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body" id="stockDetailsBody">
    <div class="text-center py-5">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <p class="mt-2 text-muted">Loading stock details...</p>
    </div>
  </div>
</div>

{{-- Stock History Offcanvas --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="stockHistoryOffcanvas" aria-labelledby="stockHistoryOffcanvasLabel" style="width: 90%; max-width: 1200px;">
  <div class="offcanvas-header bg-light">
    <h5 class="offcanvas-title" id="stockHistoryOffcanvasLabel">
      <i class="fas fa-history me-2"></i>Stock Movement History
    </h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body p-0">
    <div id="stockHistoryBody">
      <div class="text-center py-5">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-2 text-muted">Loading stock history...</p>
      </div>
    </div>
    <div class="offcanvas-footer p-3 border-top">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="offcanvas">Close</button>
      <button type="button" class="btn btn-primary btn-sm" id="exportStockHistory">
        <i class="fas fa-download me-1"></i>Export History
      </button>
    </div>
  </div>
</div>

</div><!-- #currentStockModule -->

@endsection

@push('styles')
<link href="{{ asset('assets/css/tables-standard.css') }}" rel="stylesheet">

<style>
  /* Alert Badges */
  .alert-badge {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.25rem;
    margin: 0.1rem;
  }
  .alert-badge.reorder { background-color: #dc3545; color: white; }
  .alert-badge.expiry { background-color: #ffc107; color: #000; }
  .alert-badge.slow { background-color: #fd7e14; color: white; }
  .alert-badge.dead { background-color: #6c757d; color: white; }
  .alert-badge.overstock { background-color: #0dcaf0; color: #000; }

  /* Quality Badges */
  .quality-badge {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.25rem;
  }
  .quality-badge.good { background-color: #d1f4e0; color: #0f5132; }
  .quality-badge.damaged { background-color: #f8d7da; color: #842029; }
  .quality-badge.expired { background-color: #fff3cd; color: #664d03; }
  .quality-badge.quarantine { background-color: #cfe2ff; color: #084298; }

  /* Stock Quantity Styling */
  .stock-qty { font-weight: 600; }
  .stock-qty.positive { color: #00d27a; }
  .stock-qty.zero { color: #6c757d; }
  .stock-qty.negative { color: #dc3545; }

  /* Reserved Quantity */
  .reserved-qty { color: #fd7e14; font-weight: 500; }

  /* Available Quantity */
  .available-qty { color: #0d6efd; font-weight: 600; }

  /* Stock Value */
  .stock-value { font-weight: 600; color: #2c7a7b; }

  /* Table Row Hover */
  #currentStockTable tbody tr:hover {
    background-color: #f8f9fc !important;
  }

  /* Company Warning */
  .company-warning {
    margin-bottom: 1rem;
  }

  .company-required-section {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  /* Fix dropdown going behind table cells */
  #currentStockTable tbody tr {
    position: relative;
  }

  #currentStockTable tbody tr:hover {
    z-index: 1;
  }

  /* Ensure dropdown button cell allows overflow */
  #currentStockTable tbody tr td:last-child {
    overflow: visible !important;
    position: relative;
    z-index: 1;
  }

  /* Dropdown menu positioning */
  #currentStockTable .dropdown-menu {
    z-index: 1050 !important;
    position: absolute !important;
  }

  /* Allow overflow in table wrapper for dropdowns */
  .table-body-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
  }

  .table-responsive {
    overflow: visible !important;
  }

  /* Ensure proper stacking on dropdown open */
  #currentStockTable tbody tr:has(.dropdown.show) {
    z-index: 1051 !important;
  }

  /* Stock Details Offcanvas Styles */
  #stockDetailsOffcanvas .detail-row {
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem 0;
  }

  #stockDetailsOffcanvas .detail-row:last-child {
    border-bottom: none;
  }

  #stockDetailsOffcanvas .detail-label {
    font-weight: 600;
    color: #5e6e82;
    font-size: 0.875rem;
  }

  #stockDetailsOffcanvas .detail-value {
    color: #2c3e50;
    font-size: 0.875rem;
  }

  /* Stock History Offcanvas */
  #stockHistoryOffcanvas .offcanvas-body {
    overflow-y: auto;
  }

  #stockHistoryOffcanvas .offcanvas-footer {
    background-color: #f8f9fa;
  }

  /* Stock History Table */
  #stockHistoryTable {
    font-size: 0.875rem;
  }

  #stockHistoryTable thead {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  #stockHistoryTable .movement-in {
    color: #00d27a;
    font-weight: 600;
  }

  #stockHistoryTable .movement-out {
    color: #dc3545;
    font-weight: 600;
  }

  #stockHistoryTable .movement-adjust {
    color: #fd7e14;
    font-weight: 600;
  }


</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Single Centered Container Loader Standard
  const tbody = document.getElementById('currentStockTbody');
  const overlay = document.getElementById('currentStockEmptyOverlay');
  const wrapper = document.querySelector('#currentStockTableCard .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;

  function adjustHeight() {
    const tableBodyWrapper = document.querySelector('#currentStockTableCard .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 - 35);
    tableBodyWrapper.style.maxHeight = `${avail}px`;
    tableBodyWrapper.style.minHeight = `${avail}px`;
  }

  adjustHeight();
  window.addEventListener('resize', adjustHeight);

  function hasRenderableData() {
    if (!tbody) return false;
    return Array.from(tbody.rows).some(r => {
      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 elapsed = Date.now() - loadingSince;
      const hide = () => {
        wrapper.dataset.state = 'data';
        overlay.classList.add('d-none');
        loadingEl?.classList.add('d-none');
        emptyEl?.classList.add('d-none');
      };
      if (wrapper.dataset.state === 'loading' && elapsed < MIN_SPINNER_MS) {
        setTimeout(hide, MIN_SPINNER_MS - elapsed);
      } else {
        hide();
      }
      return;
    }

    // No data in tbody: show appropriate overlay state
    overlay.classList.remove('d-none');
    if (wrapper.dataset.state === 'empty') {
      loadingEl?.classList.add('d-none');
      emptyEl?.classList.remove('d-none');
    } else {
      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 });

  function showLoading() {
    if (!wrapper) return;
    wrapper.dataset.state = 'loading';
    loadingSince = Date.now();
    syncOverlay();
  }

  function showEmpty() {
    if (!wrapper) return;
    wrapper.dataset.state = 'empty';
    syncOverlay();
  }

  // Initialize in loading state
  if (wrapper && overlay) {
    wrapper.dataset.state = 'loading';
    loadingSince = Date.now();
    syncOverlay();
  }

  // Standard helpers requested by the spec
  window.showLoading = showLoading;
  window.showEmpty = showEmpty;
  window.CurrentStockLoader = { showLoading, showEmpty };

  // Backward compatible names
  window.showCurrentStockLoading = showLoading;
  window.showCurrentStockEmpty = showEmpty;

  document.getElementById('applyStockFilters')?.addEventListener('click', function(){ showLoading(); });
  document.getElementById('clearStockFilters')?.addEventListener('click', function(){ showLoading(); });
});
</script>
<script>
  window.pageCaps = @json([
    'view' => auth()->user()->can('inventory-stock-overview-current-stock-balance.view'),
    'export' => auth()->user()->can('inventory-stock-overview-current-stock-balance.export')
  ]);
  window.companyId = @json(session('company_id'));
  window.companyName = @json(session('company_id') ? \App\Models\CompanyMaster::find(session('company_id'))?->company_name : null);
</script>
<script src="{{ asset('assets/js/custom/inventory/current_stock.js') }}"></script>
@endpush