@extends('layouts.app')

@section('title', 'Transaction History')

@section('content')
<div id="transactionHistoryModule">
{{-- 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 header dropdown to access transaction history.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card mb-3 company-required-section" id="transactionHistoryTableCard">
  <div class="card-header">
    <div class="row flex-between-center">
      <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
        <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">
          <span class="fas fa-history me-2"></span>Transaction History (Detailed)
        </h5>
      </div>
      <div class="col-8 col-sm-auto text-end ps-2">
        <div id="table-transaction-history-replace-element">
          <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#transactionHistoryFilters">
            <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Filter</span>
          </button>
          @can('inventory-stock-ledger-transaction-history.export')
          <button class="btn btn-falcon-default btn-sm mx-2" type="button" id="exportTransactionHistory">
            <span class="fas fa-download" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Export</span>
          </button>
          @endcan
        </div>
      </div>
    </div>
  </div>

  <!-- Advanced Filters (Collapsible) -->
  <div class="collapse" id="transactionHistoryFilters">
    <div class="card-body border-top fs-10">
      <div class="row g-3">
        <form id="transactionHistoryFilterForm" class="row gy-2 gx-2 align-items-end">
          <div class="col-6 col-md-3">
            <label class="form-label mb-1" for="filter_warehouse">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" for="filter_voucher_type">Voucher Type</label>
            <select id="filter_voucher_type" class="form-select form-select-sm" name="voucher_type">
              <option value="">All Types</option>
            </select>
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label mb-1" for="filter_direction">Direction</label>
            <select id="filter_direction" class="form-select form-select-sm" name="direction">
              <option value="">All</option>
              <option value="IN">Inward (IN)</option>
              <option value="OUT">Outward (OUT)</option>
            </select>
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label mb-1" for="filter_date_from">From Date</label>
            <input type="date" id="filter_date_from" class="form-control form-control-sm" name="date_from">
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label mb-1" for="filter_date_to">To Date</label>
            <input type="date" id="filter_date_to" class="form-control form-control-sm" name="date_to">
          </div>
          <div class="col-6 col-md-3">
            <label class="form-label mb-1" for="filter_search">Search</label>
            <input id="filter_search" type="text" class="form-control form-control-sm" placeholder="Voucher / Batch / Serial" name="search">
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label mb-1" for="filter_valuation">Valuation</label>
            <select id="filter_valuation" class="form-select form-select-sm" name="valuation_method">
              <option value="">All Methods</option>
            </select>
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label mb-1" for="filter_show_cancelled">Cancelled</label>
            <select id="filter_show_cancelled" class="form-select form-select-sm" name="show_cancelled">
              <option value="exclude">Exclude Cancelled</option>
              <option value="only">Only Cancelled</option>
              <option value="all">Show All</option>
            </select>
          </div>
          <div class="col-12 col-md-3">
            <button class="btn btn-falcon-default btn-sm me-2" type="button" id="applyHistoryFilters">Apply</button>
            <button class="btn btn-falcon-default btn-sm" type="button" id="clearHistoryFilters">Clear</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Main Table with unified component and overlay -->
  <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="transactionHistoryTable">
          <thead class="bg-200 sticky-top" style="position: sticky; top: 0; z-index: 10;">
            <tr>
              <th class="text-900 align-middle" style="width: 40px;"></th>
              <th class="text-900 align-middle">Date/Time</th>
              <th class="text-900 align-middle">Voucher</th>
              <th class="text-900 align-middle">Product/Warehouse</th>
              <th class="text-900 align-middle text-end">Qty IN</th>
              <th class="text-900 align-middle text-end">Qty OUT</th>
              <th class="text-900 align-middle text-end">Balance</th>
              <th class="text-900 align-middle text-end">Rate</th>
              <th class="text-900 align-middle text-end">Value</th>
              <th class="text-900 align-middle text-center">Quality</th>
              <th class="text-900 align-middle text-center">Batch/Serial</th>
              <th class="text-900 align-middle">Reference</th>
            </tr>
          </thead>
          <tbody id="table-transaction-history-body">
            <tr>
              <td colspan="12" 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 transaction history...</p>
              </td>
            </tr>
          </tbody>
        </table>
        <div id="historyListOverlay" 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 transaction history...</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 transactions found</div>
            <small class="text-muted">Try adjusting your filters</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Detail Modal for expanded view -->
<div class="modal fade" id="transactionDetailModal" tabindex="-1" aria-labelledby="transactionDetailModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="transactionDetailModalLabel">
          <span class="fas fa-info-circle me-2"></span>Transaction Details
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="transactionDetailBody">
        <!-- Dynamic content loaded here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</div>
@endsection

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

<style>
.qty-in { color: #00d27a; font-weight: 500; }
.qty-out { color: #e63757; font-weight: 500; }
.balance-qty { font-weight: 600; }
.cancelled-row {
  opacity: 0.6;
  background-color: #fff3cd;
}
.transaction-row {
  cursor: pointer;
  transition: background-color 0.2s;
}
.transaction-row:hover {
  background-color: #f8f9fa;
}
.expand-icon {
  transition: transform 0.3s;
  cursor: pointer;
}
.expand-icon.expanded {
  transform: rotate(90deg);
}
.detail-row {
  background-color: #f8f9fa;
  border-left: 3px solid #3874ff;
}
.uom-breakdown-table {
  font-size: 0.85rem;
}

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

/* Table wrapper for sticky header */
.table-body-wrapper {
  overflow-x: auto;
  overflow-y: auto;
}

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

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

.company-required-section {
  opacity: 1;
  transition: opacity 0.3s ease;
}
</style>
@endpush

@push('scripts')
<script>
  window.pageCaps = @json($caps ?? []);
  window.companyId = {{ session('company_id') ?? 'null' }};
  window.companyName = @json(session('company_id') ? \App\Models\CompanyMaster::find(session('company_id'))?->company_name : null);
</script>
<script>
  // Single overlay (loading/empty) + dynamic height for Transaction History list
  document.addEventListener('DOMContentLoaded', function(){
    const tbody = document.getElementById('table-transaction-history-body');
    const overlay = document.getElementById('historyListOverlay');
    const wrapper = document.querySelector('#transactionHistoryTableCard .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 {
        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 for module JS
    window.showHistoryLoading = function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } };
    window.showHistoryEmpty   = function(){ if (wrapper) { wrapper.dataset.state = 'empty'; syncOverlay(); } };

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

    document.getElementById('applyHistoryFilters')?.addEventListener('click', function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } });
    document.getElementById('clearHistoryFilters')?.addEventListener('click', function(){ if (wrapper) { wrapper.dataset.state = 'loading'; loadingSince = Date.now(); syncOverlay(); } });
  });
</script>
<script src="{{ asset('assets/js/custom/inventory/transaction_history.js') }}"></script>
@endpush