@extends('layouts.app')

@section('title', 'Number Series')

@section('content')

{{-- Company Selection Warning --}}
@if(!session('company_id'))
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>No Company Selected!</strong> Please select a company from the header dropdown to manage number series.
  <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<div class="card mb-3" id="numberSeriesTableCard" data-route="system-administration.system-configuration.number-series"   data-list='{"valueNames":["series_code","module_name","voucher_category","scope_type","prefix","status","created_at"],"page":10,"pagination":true}'>
  <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">
          Number Series
        </h5>
      </div>
      <div class="col-8 col-sm-auto text-end ps-2">
        <div class="d-none" id="table-number-series-actions">
          <div class="d-flex">
            <select class="form-select form-select-sm" aria-label="Bulk actions">
              <option selected>Bulk actions</option>
              <option value="activate">Activate</option>
              <option value="deactivate">Deactivate</option>
              <option value="delete">Delete</option>
              <option value="export">Export Selected</option>
            </select>
            <button class="btn btn-falcon-default btn-sm ms-2" type="button">Apply</button>
          </div>
        </div>
        <div id="table-number-series-replace-element">
          @can('system-administration-system-configuration-number-series.create')
          <button class="btn btn-primary btn-sm" type="button" id="addNumberSeriesBtn" data-bs-toggle="offcanvas" data-bs-target="#numberSeriesFormOffcanvas" aria-controls="numberSeriesFormOffcanvas">
            <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="#numberSeriesFilters">
            <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('system-administration-system-configuration-number-series.export')
          <button class="btn btn-falcon-default btn-sm" type="button" id="exportNumberSeries">
            <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
        </div>
      </div>
    </div>
  </div>

  <!-- Advanced Filters (Collapsible) -->
  <div class="collapse" id="numberSeriesFilters">
    <div class="card-body border-top fs-10">
      <div class="row g-3">
        <form id="numberSeriesFilterForm" class="row gy-2 gx-2 align-items-end">
          <div class="col-6 col-md-2">
            <select id="filter_voucher_category" class="form-select form-select-sm" name="voucher_category">
              <option value="">All Categories</option>
              <option value="SALES">Sales</option>
              <option value="PURCHASE">Purchase</option>
              <option value="ACCOUNTS">Accounts</option>
              <option value="INVENTORY">Inventory</option>
              <option value="PRODUCTION">Production</option>
            </select>
          </div>
          <div class="col-6 col-md-2">
            <select id="filter_scope_type" class="form-select form-select-sm" name="scope_type">
              <option value="">All Scopes</option>
              <option value="GSTIN">GSTIN</option>
              <option value="WAREHOUSE">Warehouse</option>
              <option value="PLANT">Plant</option>
              <option value="COMPANY">Company</option>
            </select>
          </div>
          <div class="col-6 col-md-2">
            <select id="filter_status" class="form-select form-select-sm" name="status">
              <option value="">Any Status</option>
              <option value="1">Active</option>
              <option value="0">Inactive</option>
            </select>
          </div>
          <div class="col-6 col-md-2">
            <select id="filter_deleted" class="form-select form-select-sm" name="show_deleted">
              <option value="">Active Only</option>
              <option value="with">Include Deleted</option>
              <option value="only">Deleted Only</option>
            </select>
          </div>
          <div class="col-6 col-md-2">
            <input id="filter_search" type="text" class="form-control form-control-sm" placeholder="Series Code / Voucher" name="search">
          </div>
          <div class="col-6 col-md-3">
            <button class="btn btn-falcon-default btn-sm me-2" type="button" id="applyNumberSeriesFilters">Apply</button>
            <button class="btn btn-falcon-default btn-sm" type="button" id="clearNumberSeriesFilters">Clear</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive scrollbar">
      <table class="table table-sm table-striped fs-10 mb-0 overflow-hidden">
        <thead class="bg-200">
          <tr>
            <th style="width:28px;">
              <div class="form-check fs-9 mb-0 d-flex align-items-center">
                <input class="form-check-input" id="checkbox-bulk-number-series-select" type="checkbox" data-bulk-select='{"body":"table-number-series-body","actions":"table-number-series-actions","replacedElement":"table-number-series-replace-element"}' />
              </div>
            </th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="series_code">Series Code</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="module_name">Voucher Type</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="voucher_category">Category</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="scope_type">Scope</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="prefix">Prefix</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="status">Status</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="created_at">Created</th>
            <th class="align-middle no-sort"></th>
          </tr>
        </thead>
        <tbody class="list" id="table-number-series-body">
          <tr>
            <td colspan="9" class="text-center py-4">
              <i class="fas fa-spinner fa-spin fa-2x"></i><br>
              <span class="text-muted">Loading data...</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Include: Number Series Form Offcanvas (kept as partial for cleanliness) -->
@include('system-administration.system-configuration.partials.number-series-form-canvas')
@endsection

@push('styles')
<style>
  #numberSeriesTableCard table td { vertical-align: middle; }
  .badge-status-active { background: var(--falcon-success-bg-subtle,#d1e7dd); color:#0f5132; }
  .badge-status-inactive { background: var(--falcon-secondary-bg-subtle,#e2e3e5); color:#41464b; }
  
  /* Offcanvas width and sticky footer pattern (flex layout) */
  #numberSeriesFormOffcanvas,
  #numberSeriesViewOffcanvas {
    --bs-offcanvas-width: clamp(700px, 60vw, 960px);
    width: clamp(700px, 60vw, 960px) !important;
    max-width: 100vw;
  }
  @media (max-width: 768px) {
    #numberSeriesFormOffcanvas,
    #numberSeriesViewOffcanvas { --bs-offcanvas-width: 100vw; width: 100vw !important; }
  }
  
  /* Offcanvas sticky footer; scroll content only */
  #numberSeriesFormOffcanvas .offcanvas-body,
  #numberSeriesViewOffcanvas .offcanvas-body { display: flex; flex-direction: column; height: 100%; }
  #numberSeriesFormOffcanvas .form-scroll-container,
  #numberSeriesViewOffcanvas .form-scroll-container { flex: 1 1 auto; overflow: visible; min-height: 0; }
  #numberSeriesFormOffcanvas .card.h-100 { display: flex; flex-direction: column; min-height: 0; }
  #numberSeriesFormOffcanvas .card-body { flex: 1 1 auto; min-height: 0; }
  #numberSeriesFormOffcanvas .sticky-bottom-footer { flex: 0 0 auto; position: sticky; bottom: 0; }
  
  .bg-body-tertiary { background-color: var(--falcon-body-bg,#f8f9fa) !important; }
  
  /* Compact and professional field sizing */
  #numberSeriesFormOffcanvas .form-control,
  #numberSeriesFormOffcanvas .form-select { font-size: 0.875rem; }
  #numberSeriesFormOffcanvas .form-label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }

  /* Validation styling */
  .form-control.is-valid,
  .form-select.is-valid {
    border-color: #198754 !important;
    box-shadow: none !important;
  }
  .form-control.is-invalid,
  .form-select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: none !important;
  }
  .was-validated .form-control:valid,
  .was-validated .form-select:valid {
    border-color: inherit !important;
    box-shadow: none !important;
  }

  /* Font Awesome spinner styling */
  .fa-spinner.fa-spin {
    color: #207ab7;
  }

  /* Nice scrollbar */
  #numberSeriesFormOffcanvas .card-body.overflow-auto::-webkit-scrollbar { width: 6px; }
  #numberSeriesFormOffcanvas .card-body.overflow-auto::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
  #numberSeriesFormOffcanvas .card-body.overflow-auto::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
  #numberSeriesFormOffcanvas .card-body.overflow-auto::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

  /* View Canvas Professional Styling */
  #numberSeriesViewOffcanvas .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-weight: 600;
  }
  
  #numberSeriesViewOffcanvas .avatar-xl {
    width: 3.5rem;
    height: 3.5rem;
  }
  
  #numberSeriesViewOffcanvas .avatar-s {
    width: 2rem;
    height: 2rem;
  }
  
  #numberSeriesViewOffcanvas .bg-primary-subtle {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  }
  
  #numberSeriesViewOffcanvas .bg-success-subtle {
    background-color: rgba(var(--bs-success-rgb), 0.1) !important;
  }
  
  #numberSeriesViewOffcanvas .bg-warning-subtle {
    background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
  }
  
  #numberSeriesViewOffcanvas .bg-info-subtle {
    background-color: rgba(var(--bs-info-rgb), 0.1) !important;
  }
  
  #numberSeriesViewOffcanvas .bg-danger-subtle {
    background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
  }
  
  #numberSeriesViewOffcanvas .bg-secondary-subtle {
    background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
  }

  #numberSeriesViewOffcanvas .border-300 {
    border-color: #e6e9ec !important;
  }
  
  #numberSeriesViewOffcanvas .fs-10 {
    font-size: 0.75rem !important;
  }
  
  #numberSeriesViewOffcanvas .fs-7 {
    font-size: 1rem !important;
  }
  
  #numberSeriesViewOffcanvas .text-700 {
    color: #6c757d !important;
  }
  
  #numberSeriesViewOffcanvas .text-900 {
    color: #212529 !important;
  }
  
  #numberSeriesViewOffcanvas .card-header {
    padding: 1.25rem 1.5rem 0.75rem;
  }
  
  #numberSeriesViewOffcanvas .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  }

  /* Smooth animations */
  #numberSeriesViewOffcanvas .card {
    transition: all 0.2s ease;
  }
  
  #numberSeriesViewOffcanvas .card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Badge enhancements */
  #numberSeriesViewOffcanvas .badge-phoenix {
    padding: 0.375rem 0.75rem;
    font-weight: 500;
    border-radius: 0.25rem;
  }

  /* Inline offcanvas small loader (centered square inside the canvas - NOT full-page overlay) */
  .offcanvas-content-wrapper { position: relative; }

  /* Center the loader box only. This avoids covering the entire page or canvas with a backdrop.
     The loader container itself doesn't cover the whole wrapper anymore. */
  .offcanvas-inline-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* don't block interactions outside the tiny loader box */
    z-index: 5;
  }
  .offcanvas-inline-loader .loader-box {
    width: 88px;
    height: 88px;
    background: rgba(0,0,0,0.72); /* translucent dark background to mimic modal look */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #fff;
  }
  .offcanvas-inline-loader .loader-box .loader-icon i {
    color: #fff;
  }
  .offcanvas-inline-loader .loader-box .loader-label {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;
  }
  .offcanvas-inline-loader.d-none { display: none !important; }

  /* Form population animation: when the wrapper has .pre-populate the form
     inputs are visually hidden and slightly translated; switching to .populated
     will animate them into view for a smooth data-population effect. */
  .offcanvas-content-wrapper.pre-populate input,
  .offcanvas-content-wrapper.pre-populate select,
  .offcanvas-content-wrapper.pre-populate textarea,
  .offcanvas-content-wrapper.pre-populate .form-control,
  .offcanvas-content-wrapper.pre-populate .form-select {
    opacity: 0;
    transform: translateY(6px);
  }

  .offcanvas-content-wrapper.populated input,
  .offcanvas-content-wrapper.populated select,
  .offcanvas-content-wrapper.populated textarea,
  .offcanvas-content-wrapper.populated .form-control,
  .offcanvas-content-wrapper.populated .form-select {
    opacity: 1;
    transform: none;
    transition: opacity 260ms cubic-bezier(.2,.8,.2,1), transform 260ms cubic-bezier(.2,.8,.2,1);
  }

  /* Also animate labels and help text for a cohesive effect */
  .offcanvas-content-wrapper.pre-populate .form-label,
  .offcanvas-content-wrapper.pre-populate .form-text,
  .offcanvas-content-wrapper.pre-populate .form-check-label {
    opacity: 0.3;
    transform: translateY(4px);
  }
  .offcanvas-content-wrapper.populated .form-label,
  .offcanvas-content-wrapper.populated .form-text,
  .offcanvas-content-wrapper.populated .form-check-label {
    opacity: 1;
    transform: none;
    transition: opacity 300ms ease, transform 300ms ease;
  }
</style>
@endpush

@push('scripts')
<!-- SweetAlert2 for nice alerts (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
<script src="{{ asset('assets/js/common/ajax-standards.js') }}"></script>
{{-- Number series JS is already included in app.blade.php for this route --}}
<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);
  document.addEventListener('DOMContentLoaded', function(){
    const c = window.pageCaps || {};
    if(!c.create) document.getElementById('addNumberSeriesBtn')?.classList.add('d-none');
    if(!c.export) document.getElementById('exportNumberSeries')?.classList.add('d-none');
    const saveBtn = document.getElementById('saveNumberSeriesBtn');
    if(saveBtn && !(c.create || c.update)) saveBtn.classList.add('d-none');
  });
</script>
@endpush

<!-- Include: Number Series View Offcanvas (kept as partial for cleanliness) -->
@include('system-administration.system-configuration.partials.number-series-view-canvas')