@extends('layouts.app')

@section('title', 'Product-wise Stock')

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

{{-- 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 product-wise stock.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card mb-3 company-required-section" id="productWiseTableCard">
  <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">Product-wise Stock</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="#productFilters">
          <span class="fas fa-filter me-1"></span>Filter
        </button>
        @can('inventory-stock-overview-product-wise-stock.export')
        <button class="btn btn-sm btn-falcon-default" type="button" id="exportProductStock">
          <span class="fas fa-external-link-alt me-1"></span>Export
        </button>
        @endcan
      </div>
    </div>
  </div>

  <!-- Advanced Filters (Collapsible) -->
  <div class="collapse" id="productFilters">
    <div class="card-body border-top fs-10">
      <div class="row g-3">
        <form id="productFilterForm" 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 / Category" name="search">
        </div>
        <div class="col-12 col-md-3">
          <button class="btn btn-falcon-default btn-sm me-2" type="button" id="applyProductFilters">Apply</button>
          <button class="btn btn-falcon-default btn-sm" type="button" id="clearProductFilters">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="productStockTable">
          <thead class="bg-200 sticky-top" style="position: sticky; top: 0; z-index: 10;">
            <tr>
              <th class="text-900 align-middle white-space-nowrap text-center" style="width: 5%;"></th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 12%;">SKU</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 22%;">Product</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 15%;">Category</th>
              <th class="text-900 align-middle white-space-nowrap text-end" style="width: 12%;">Total Qty</th>
              <th class="text-900 align-middle white-space-nowrap text-end" style="width: 12%;">Available</th>
              <th class="text-900 align-middle white-space-nowrap text-end" style="width: 14%;">Total Value</th>
              <th class="text-900 align-middle white-space-nowrap text-center" style="width: 8%;">Warehouses</th>
            </tr>
          </thead>
          <tbody id="productStockTbody">
            <tr>
              <td colspan="8" class="text-center py-4">
                <div class="spinner-border spinner-border-sm text-primary" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mb-0 mt-2 text-muted">Loading product-wise stock...</p>
              </td>
            </tr>
          </tbody>
        </table>
        <div id="productStockEmptyOverlay" class="table-empty-overlay d-none">
          <div class="text-center">
            <i class="fas fa-inbox fa-2x mb-2 text-muted"></i>
            <div class="fs-7">No product data found</div>
            <small class="text-muted">Try adjusting your filters</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</div><!-- #productWiseModule -->

@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 */
  #productStockTable tbody tr:hover {
    background-color: #f8f9fc !important;
  }

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

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

  /* Parent Row (Product Summary) */
  .parent-row {
    background-color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .parent-row:hover {
    background-color: #edf0f5;
  }

  .parent-row.expanded {
    background-color: #f5f7fa;
  }

  /* Child Row (Warehouses with Product) */
  .child-row {
    background-color: #ffffff;
    border-left: 3px solid #3874ff;
    display: none;
  }

  .child-row.visible {
    display: table-row;
  }

  .child-row td {
    padding-left: 2rem !important;
  }

  /* Expand Icon Animation */
  .expand-icon {
    transition: transform 0.3s ease;
    cursor: pointer;
    color: #6c757d;
  }

  .expand-icon.expanded {
    transform: rotate(90deg);
  }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Dynamic table height adjustment for sticky header
    const tbody = document.getElementById('productStockTbody');
    const overlay = document.getElementById('productStockEmptyOverlay');
    const wrapper = overlay?.parentElement;

    function adjustHeight() {
        const tableBodyWrapper = document.querySelector('#productWiseTableCard .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);

    // Sync empty overlay visibility
    function syncOverlay() {
        if (!tbody || !overlay || !wrapper) return;
        const hasData = Array.from(tbody.rows).some(r => r.querySelectorAll('td').length > 1 || r.dataset.row === 'data');
        if (hasData) {
            wrapper.dataset.state = 'data';
            overlay.classList.add('d-none');
        } else if (wrapper.dataset.state === 'empty') {
            overlay.classList.remove('d-none');
        } else {
            overlay.classList.add('d-none');
        }
    }

    const obs = new MutationObserver(syncOverlay);
    if (tbody) obs.observe(tbody, { childList: true });

    window.showProductStockLoading = function() {
        if (wrapper) {
            wrapper.dataset.state = 'loading';
            overlay?.classList.add('d-none');
        }
    };

    window.showProductStockEmpty = function() {
        if (wrapper) {
            wrapper.dataset.state = 'empty';
            syncOverlay();
        }
    };
});
</script>
<script>
  window.pageCaps = @json([
    'view' => auth()->user()->can('inventory-stock-overview-product-wise-stock.view'),
    'export' => auth()->user()->can('inventory-stock-overview-product-wise-stock.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/product_wise.js') }}"></script>
@endpush