@extends('layouts.app')

@section('title', 'HSN Masters')

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

<style>
    /* Table wrapper for sticky headers */
    .table-body-wrapper {
        overflow-x: auto;
        overflow-y: auto;
    position: relative;
    }

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

    /* Sticky header positioning */
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #f8f9fa;
    }

    /* White space nowrap for headers */
    .white-space-nowrap {
        white-space: nowrap;
    }

    /* Centered empty-state overlay */
    .table-empty-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        color: #6c757d;
      background: rgba(255, 255, 255, 0.85);
      z-index: 9;
    }

    /* Loading and empty state styling */
    .table-loading-state,
    .table-empty-state {
        text-align: center;
        padding: 2rem;
        color: #6c757d;
    }

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

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

    #hsnMainTable tbody tr td:last-child {
        overflow: visible !important;
        position: relative;
        z-index: 1;
    }

    #hsnMainTable .dropdown-menu {
        z-index: 1050 !important;
        position: absolute !important;
    }

    #hsnMainTable tbody tr:has(.dropdown.show) {
        z-index: 1051 !important;
    }
</style>
@endpush

@section('content')

<div class="card mb-3" id="hsnTable">
  <div class="card-header py-2">
    <div class="row flex-between-center g-0">
      <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
        <h6 class="mb-0">HSN Masters</h6>
      </div>
      <div class="col-8 col-sm-auto text-end ps-2">
        <div id="table-hsn-replace-element">
          @can('masters-product-management-hsn-masters.create')
          <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#hsnOffcanvas">
            <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
          <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#hsnFilters">
            <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('masters-product-management-hsn-masters.export')
          <button class="btn btn-falcon-default btn-sm" type="button" id="exportHsns">
            <span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Export</span>
          </button>
          @endcan
          @can('masters-product-management-hsn-masters.manage')
          <button class="btn btn-falcon-default btn-sm ms-2" type="button" data-bs-toggle="modal" data-bs-target="#hsnImportModal">
            <span class="fas fa-file-import" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Import</span>
          </button>
          @endcan
        </div>
      </div>
    </div>
  </div>

  <div class="collapse" id="hsnFilters">
    <div class="card-body border-top fs-10">
      <div class="row g-3">
        <div class="col-auto">
          <label class="form-label" for="filterHsnCode">HSN Code</label>
          <input id="filterHsnCode" class="form-control form-control-sm" type="text" placeholder="e.g. 1001 or 100190">
        </div>
        <div class="col-auto">
          <label class="form-label" for="filterDescription">Description</label>
          <input id="filterDescription" class="form-control form-control-sm" type="text" placeholder="Search text">
        </div>
        <div class="col-auto">
          <label class="form-label" for="filterGstRate">GST %</label>
          <input id="filterGstRate" class="form-control form-control-sm" type="number" step="0.01" min="0" max="100">
        </div>
        <div class="col-auto">
          <label class="form-label" for="filterStatus">Status</label>
          <select id="filterStatus" class="form-select form-select-sm">
            <option value="">All</option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </div>
        <div class="col-auto d-flex align-items-end">
          <div class="d-grid gap-2 d-md-flex">
            <button id="applyHsnFilters" type="button" class="btn btn-primary btn-sm"><i class="fas fa-search"></i> Apply</button>
            <button id="clearHsnFilters" type="button" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i> Clear</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <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="hsnMainTable">
          <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: 12%;">HSN Code</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 25%;">Description</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">GST %</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">IGST %</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">CGST %</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">SGST %</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">CESS %</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">UQC</th>
              <th class="text-900 align-middle white-space-nowrap" style="width: 8%;">Status</th>
              @canany(['masters-product-management-hsn-masters.update','masters-product-management-hsn-masters.delete'])
              <th class="text-900 align-middle white-space-nowrap" style="width: 7%;">Action</th>
              @endcanany
            </tr>
          </thead>
          <tbody id="table-hsn-body">

          </tbody>
        </table>
        <div id="hsnEmptyOverlay" class="table-empty-overlay d-none">
          <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 HSN codes...</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 HSN codes found</div>
            <small class="text-muted">Try adjusting your filters or add new HSN entries</small>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- Import Modal -->
<div class="modal fade" id="hsnImportModal" tabindex="-1" aria-labelledby="hsnImportModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="hsnImportModalLabel">Import HSN CSV</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="hsnImportForm">
          @csrf
          <div class="mb-3">
            <label for="hsnCsvFile" class="form-label">CSV File</label>
            <input class="form-control" type="file" id="hsnCsvFile" name="file" accept=".csv,text/csv">
            <div class="form-text">Headers: HSN Code, Description, GST %, Cess %, IGST %, SGST %, CGST %, UQC, Status</div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  @can('masters-product-management-hsn-masters.manage')
  <button type="button" class="btn btn-primary" id="hsnImportSubmit"><i class="fas fa-upload me-1"></i> Upload</button>
  @endcan
      </div>
    </div>
  </div>
 </div>

<!-- Offcanvas Form -->
<div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" id="hsnOffcanvas" aria-labelledby="hsnOffcanvasLabel" style="width: 40%" backdrop>

  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="hsnOffcanvasLabel">Add HSN</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <div class="card">
      <div class="card-body">
        <form id="hsnForm">
          @csrf
          <input type="hidden" id="hsn_id" name="id">
          <div class="row g-3">
            <div class="col-md-4">
          <label class="form-label" for="hsn_code">HSN Code <span class="text-danger">*</span></label>
          <input id="hsn_code" name="hsn_code" class="form-control" type="text" maxlength="8" placeholder="4/6/8 digits">
        </div>
        <div class="col-md-8">
          <label class="form-label" for="description">Description <span class="text-danger">*</span></label>
          <input id="description" name="description" class="form-control" type="text" maxlength="500">
        </div>
        <div class="col-md-3">
          <label class="form-label" for="gst_rate">GST %</label>

          <input id="gst_rate" name="gst_rate" class="form-control" type="number" step="0.01" min="0" max="100">
        </div>
        <div class="col-md-3">
          <label class="form-label" for="igst_rate">IGST %</label>
          <input id="igst_rate" name="igst_rate" class="form-control" type="number" step="0.01" min="0" max="100">
        </div>
        <div class="col-md-3">
          <label class="form-label" for="cgst_rate">CGST %</label>
          <input id="cgst_rate" name="cgst_rate" class="form-control" type="number" step="0.01" min="0" max="100">
        </div>
        <div class="col-md-3">
          <label class="form-label" for="sgst_rate">SGST %</label>
          <input id="sgst_rate" name="sgst_rate" class="form-control" type="number" step="0.01" min="0" max="100">
        </div>
        <div class="col-md-3">
          <label class="form-label" for="cess_rate">CESS %</label>
          <input id="cess_rate" name="cess_rate" class="form-control" type="number" step="0.01" min="0" max="100">
        </div>
        <div class="col-md-3">
          <label class="form-label" for="uqc_code">UQC</label>
          <input id="uqc_code" name="uqc_code" class="form-control" type="text" maxlength="10" placeholder="e.g. PCS">
        </div>
        <div class="col-md-3 d-flex align-items-end">
          <div class="form-check form-switch">
            <input id="status" name="status" class="form-check-input" type="checkbox" checked>
            <label class="form-check-label" for="status">Active</label>
          </div>
        </div>
      </div>
      <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-outline-secondary" id="resetHsnBtn"><i class="fas fa-redo me-1"></i>Reset</button>
        <div>
          <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="offcanvas">Cancel</button>
          @canany(['masters-product-management-hsn-masters.create','masters-product-management-hsn-masters.update'])
          <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
          @endcanany
        </div>
      </div>
    </form>
      </div>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script>
  @php
    $pageCaps = isset($caps) ? $caps : [
      'view' => false,
      'create' => false,
      'update' => false,
      'delete' => false,
      'export' => false,
    ];
  @endphp
  window.pageCaps = @json($pageCaps);
  document.addEventListener('DOMContentLoaded', function(){
    if (!window.pageCaps?.export) {
      const btn = document.getElementById('exportHsns'); if (btn) btn.style.display = 'none';
    }
  });
</script>
<script>
document.getElementById('hsnImportSubmit')?.addEventListener('click', function(){
  const input = document.getElementById('hsnCsvFile');
  if(!input || !input.files || !input.files[0]) {
    if (window.Swal && typeof Swal.fire === 'function') {
      Swal.fire({ icon: 'warning', title: 'No File Selected', text: 'Please choose a CSV file to import' });
    } else {
      alert('Please choose a CSV file');
    }
    return;
  }
  const fd = new FormData();
  fd.append('file', input.files[0]);
  const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
  fetch('{{ url('/masters/product-management/hsn-masters/import') }}', {
    method: 'POST',
    headers: { 'X-CSRF-TOKEN': token },
    body: fd
  }).then(async (res)=>{
    const ct = res.headers.get('content-type')||'';
    const data = ct.includes('application/json') ? await res.json() : {};
    if(!res.ok) throw new Error(data.message || 'Import failed');
    // Close modal
    const modal = bootstrap.Modal.getInstance(document.getElementById('hsnImportModal'));
    modal?.hide();
    // Show summary
    const msg = `Created: ${data.created||0}, Updated: ${data.updated||0}, Skipped: ${data.skipped||0}`;
    const el = document.createElement('div');
    el.className = 'alert alert-success position-fixed';
    el.style.cssText = 'top:20px;right:20px;z-index:1055';
    el.textContent = 'Import completed. ' + msg;
    document.body.appendChild(el);
    setTimeout(()=>el.remove(), 3000);
    // Reload table
    if (window.getRequestedData) {
      // Trigger first page reload
      const event = new Event('click');
      // Just call the list loader used in hsn_master.js
      if (typeof loadHsns === 'function') loadHsns(1);
    }
  }).catch((err)=>{
    const el = document.createElement('div');
    el.className = 'alert alert-danger position-fixed';
    el.style.cssText = 'top:20px;right:20px;z-index:1055';
    el.textContent = err.message || 'Import failed';
    document.body.appendChild(el);
    setTimeout(()=>el.remove(), 4000);
  });
});
// Align table behavior with Attribute Masters: dynamic height + centered empty overlay
;(function(){
  const tbody = document.getElementById('table-hsn-body');
  const overlay = document.getElementById('hsnEmptyOverlay');
  const wrapper = document.querySelector('#hsnTable .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 adjustHeight(){
    const tableBodyWrapper = document.querySelector('#hsnTable .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);

  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 });

  // In case the table renders before the observer attaches (script order),
  // sync once immediately based on current DOM.
  syncOverlay();

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

  // Standard API (required)
  window.showLoading = showLoading;
  window.showEmpty = showEmpty;
  // Backward-compatible aliases
  window.showHsnLoading = showLoading;
  window.showHsnEmpty = showEmpty;

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