@extends('../padre.padre')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
  .table-responsive {
    max-height: 70vh;
    overflow: auto; /* Permite scroll en ambas direcciones */
    position: relative;
  }
  #tablaActualizarProductos {
    display: table !important;
    height: auto !important;
    overflow: visible !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
  }
  #tablaActualizarProductos tr {
    display: table-row !important;
  }
  #tablaActualizarProductos th,
  #tablaActualizarProductos td {
    display: table-cell !important;
    width: auto !important; /* Neutralizar el width: 7% global */
  }
  
  /* Altura estricta y uniforme para todas las filas del cuerpo */
  #tablaActualizarProductos tbody tr {
    height: 38px !important;
    max-height: 38px !important;
  }
  #tablaActualizarProductos tbody th,
  #tablaActualizarProductos tbody td {
    height: 38px !important;
    max-height: 38px !important;
    padding: 3px 8px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
  }
  
  /* Controles dentro de las celdas para no alterar la altura de fila */
  #tablaActualizarProductos select.form-control,
  #tablaActualizarProductos input.form-control {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }
  #tablaActualizarProductos .modificadorCelda {
    width: 100% !important;
    height: 26px !important;
    padding: 1px 4px !important;
    font-size: 0.82rem !important;
    border: 1px solid #007bff !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    text-align: inherit !important;
  }

  /* Anchos fijos e inmovilizados para las columnas */
  #tablaActualizarProductos th:nth-child(1),
  #tablaActualizarProductos td:nth-child(1) {
    width: 135px !important;
    min-width: 135px !important;
    max-width: 135px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #tablaActualizarProductos th:nth-child(2),
  #tablaActualizarProductos td:nth-child(2) {
    width: 420px !important;
    min-width: 420px !important;
    max-width: 450px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.82rem !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
  }
  #tablaActualizarProductos th:nth-child(3),
  #tablaActualizarProductos td:nth-child(3) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
  #tablaActualizarProductos th:nth-child(4),
  #tablaActualizarProductos td:nth-child(4) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
  #tablaActualizarProductos th:nth-child(5),
  #tablaActualizarProductos td:nth-child(5) {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }
  #tablaActualizarProductos th:nth-child(6),
  #tablaActualizarProductos td:nth-child(6) {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }
  #tablaActualizarProductos th:nth-child(7),
  #tablaActualizarProductos td:nth-child(7) {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  }

  /* =======================================================
     DYNAMIC STICKY COLUMNS SYSTEM (LIKE ARCHIVO PLANO)
     ======================================================= */

  /* Base dynamic sticky style for any element with class starting with sticky- */
  #tablaActualizarProductos [class*="sticky-"] {
    position: sticky !important;
    opacity: 1 !important;
  }

  /* Sticky headers styles */
  #tablaActualizarProductos thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #343a40 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #454d55;
    box-shadow: inset 0 -1px 0 #454d55;
  }

  #tablaActualizarProductos thead th[class*="sticky-"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 101 !important;
    background-color: #343a40 !important;
    color: #ffffff !important;
  }

  /* Sticky body cells styles */
  #tablaActualizarProductos tbody td[class*="sticky-"],
  #tablaActualizarProductos tbody th[class*="sticky-"] {
    position: sticky !important;
    z-index: 10 !important;
  }

  /* Dynamic CSS left offsets using CSS variables */
  #tablaActualizarProductos .sticky-1 { left: var(--off-prod-1, 0) !important; }
  #tablaActualizarProductos .sticky-2 { left: var(--off-prod-2, 0) !important; }
  #tablaActualizarProductos .sticky-3 { left: var(--off-prod-3, 0) !important; }
  #tablaActualizarProductos .sticky-4 { left: var(--off-prod-4, 0) !important; }
  #tablaActualizarProductos .sticky-5 { left: var(--off-prod-5, 0) !important; }
  #tablaActualizarProductos .sticky-6 { left: var(--off-prod-6, 0) !important; }
  #tablaActualizarProductos .sticky-7 { left: var(--off-prod-7, 0) !important; }

  /* Shadows for the last frozen column */
  #tablaActualizarProductos.freeze-1 .sticky-1,
  #tablaActualizarProductos.freeze-2 .sticky-2,
  #tablaActualizarProductos.freeze-3 .sticky-3,
  #tablaActualizarProductos.freeze-4 .sticky-4,
  #tablaActualizarProductos.freeze-5 .sticky-5,
  #tablaActualizarProductos.freeze-6 .sticky-6,
  #tablaActualizarProductos.freeze-7 .sticky-7 {
    box-shadow: 4px 0 8px -3px rgba(0, 0, 0, 0.15) !important;
  }

  #tablaActualizarProductos.freeze-1 thead th.sticky-1,
  #tablaActualizarProductos.freeze-2 thead th.sticky-2,
  #tablaActualizarProductos.freeze-3 thead th.sticky-3,
  #tablaActualizarProductos.freeze-4 thead th.sticky-4,
  #tablaActualizarProductos.freeze-5 thead th.sticky-5,
  #tablaActualizarProductos.freeze-6 thead th.sticky-6,
  #tablaActualizarProductos.freeze-7 thead th.sticky-7 {
    box-shadow: 4px 0 8px -3px rgba(0, 0, 0, 0.3), inset 0 -1px 0 #454d55 !important;
  }

  /* Solid backgrounds for clear mode to prevent overlapping transparency */
  #tablaActualizarProductos tbody tr:nth-of-type(even) [class*="sticky-"] {
    background-color: #ffffff !important;
  }
  #tablaActualizarProductos tbody tr:nth-of-type(odd) [class*="sticky-"] {
    background-color: #f8f9fa !important;
  }

  /* Solid backgrounds for dark mode to prevent overlapping transparency */
  [data-theme='dark'] #tablaActualizarProductos tbody tr:nth-of-type(even) [class*="sticky-"] {
    background-color: #1e293b !important;
  }
  [data-theme='dark'] #tablaActualizarProductos tbody tr:nth-of-type(odd) [class*="sticky-"] {
    background-color: #1b2234 !important;
  }

  /* Hover styles for sticky cells */
  #tablaActualizarProductos.table-hover tbody tr:hover [class*="sticky-"] {
    background-color: #f1f3f5 !important;
  }
  [data-theme='dark'] #tablaActualizarProductos.table-hover tbody tr:hover [class*="sticky-"] {
    background-color: #242f41 !important;
  }

  /* Compactar el formulario de filtros */
  #formFiltros {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
  }
  [data-theme='dark'] #formFiltros {
    background-color: #1e293b;
    border-color: #334155;
  }
  #formFiltros .form-group {
    margin-bottom: 0.5rem !important;
  }
  #formFiltros label {
    font-size: 0.78rem;
    margin-bottom: 3px !important;
    color: #495057;
  }
  [data-theme='dark'] #formFiltros label {
    color: #cbd5e1;
  }
  #formFiltros .form-control {
    height: 31px !important;
    padding: 2px 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    border-radius: 4px !important;
  }
  #formFiltros .bodegas-wrapper label {
    margin-bottom: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  #formFiltros .btn {
    height: 31px !important;
    padding: 2px 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Select2 compact styling for filters form */
  #formFiltros .select2-container--default .select2-selection--single {
    height: 31px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
  }
  [data-theme='dark'] #formFiltros .select2-container--default .select2-selection--single {
    border-color: #334155 !important;
    background-color: #1e293b !important;
  }
  #formFiltros .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 27px !important;
    font-size: 0.82rem !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
    color: #495057 !important;
  }
  [data-theme='dark'] #formFiltros .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #cbd5e1 !important;
  }
  #formFiltros .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px !important;
    right: 5px !important;
  }
  #formFiltros .select2-container {
    width: 100% !important;
    margin-top: 0px !important;
  }

  /* Select2 compact styling for table body selects */
  #tablaActualizarProductos .select2-container--default .select2-selection--single {
    height: 28px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
  }
  [data-theme='dark'] #tablaActualizarProductos .select2-container--default .select2-selection--single {
    border-color: #334155 !important;
  }
  #tablaActualizarProductos .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px !important;
    font-size: 0.8rem !important;
    padding-left: 6px !important;
    padding-right: 15px !important;
    color: #495057 !important;
  }
  [data-theme='dark'] #tablaActualizarProductos .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #cbd5e1 !important;
  }
    #tablaActualizarProductos .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 26px !important;
      right: 3px !important;
    }

    /* ── Flechas de ordenar DataTables en color amarillo ── */
    #tablaActualizarProductos thead .sorting::after,
    #tablaActualizarProductos thead .sorting_asc::after,
    #tablaActualizarProductos thead .sorting_desc::after,
    #tablaActualizarProductos thead .sorting_asc_disabled::after,
    #tablaActualizarProductos thead .sorting_desc_disabled::after {
      color: #FFD600 !important;
      opacity: 1 !important;
    }
    /* Flecha inactiva (↕) en blanco translúcido, flecha activa en amarillo brillante */
    table.dataTable thead .sorting:before,
    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting_asc:before,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:before,
    table.dataTable thead .sorting_desc:after {
      color: rgba(255, 255, 255, 0.5) !important;
    }
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:before {
      color: #FFD600 !important; /* Amarillo brillante para la flecha activa */
      opacity: 1 !important;
    }
  </style>
  @endsection

@section('contenido') 

<div class="card shadow-sm m-2">
  <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center py-2 px-3">
    <h4 class="mb-0 text-white" style="font-weight: 500; font-size: 1.15rem;"><i class="fa fa-cubes"></i> ACTUALIZACIONES PRODUCTOS</h4>
    <small class="text-white-50">Los cambios se guardan automáticamente.</small>
  </div>
  <div class="card-body p-2">
    <form id="formFiltros" action="productosactulizar" method="GET" class="mb-2">
      <!-- Fila 1: Filtros Principales y Búsqueda Directa + Botones -->
      <div class="d-flex flex-wrap align-items-end mb-2" style="gap: 8px;">
        <!-- Bodega -->
        <div class="form-group mb-0" style="min-width: 130px; flex: 1.2;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;"><i class="fa fa-home"></i> Bodega</label>
          <div class="bodegas-wrapper">
            @include('../menu.bodegas')
          </div>
        </div>

        <!-- Buscar Producto (Nombre, Código o Barras) -->
        <div class="form-group mb-0" style="min-width: 140px; max-width: 190px; flex: 1.2;">
          <label class="font-weight-bold small mb-1 text-primary text-uppercase" style="font-size: 0.75rem;"><i class="fa fa-search"></i> Producto / Cód.</label>
          <input type="search" class="form-control" name="nombreProd" value="{{ $nombreProd ?? '' }}" placeholder="Nombre o código..." style="height: 31px; font-size: 0.82rem; font-weight: 500; border: 1.5px solid #007bff;" autocomplete="off">
        </div>

        <!-- Marca -->
        <div class="form-group mb-0" style="min-width: 120px; flex: 1.2;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;">Marca</label>
          <select class="form-control" name="marca" style="height: 31px;">
            <option value="Todos">Todos</option>
            @foreach ($marcas as $item)
              <option value="{{$item->codmarca}}" {{ $marc == $item->codmarca ? 'selected' : '' }}>
                {{$item->nommarca}}
              </option>
            @endforeach
          </select>
        </div>

        <!-- Categoría -->
        <div class="form-group mb-0" style="min-width: 120px; flex: 1.2;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;">Categoría</label>
          <select class="form-control" name="cate" style="height: 31px;">
            <option value="Todos">Todos</option>
            <option value="Comision" {{ $cate == 'Comision' ? 'selected' : '' }}>productos_Comision</option>
            @foreach ($categorias as $item)
              <option value="{{$item->codcategoria}}" {{ $cate == $item->codcategoria ? 'selected' : '' }}>
                {{$item->nomcategoria}}
              </option>
            @endforeach
          </select>
        </div>

        <!-- Factura Compra -->
        <div class="form-group mb-0" style="min-width: 105px; flex: 1;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;"><i class="fa fa-file-text-o"></i> Fact. Compra</label>
          <input type="text" class="form-control" name="facturaCompra" value="{{ $facturaCompra ?? '' }}" placeholder="Nro Factura" style="height: 31px; font-size: 0.82rem;">
        </div>

        <!-- Registros por Página -->
        <div class="form-group mb-0" style="min-width: 85px; flex: 0.7;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;"><i class="fa fa-list-ol"></i> Por Pág.</label>
          <select class="form-control" name="porPagina" style="height: 31px; font-size: 0.82rem;">
            <option value="50" {{ ($porPagina ?? 100) == 50 ? 'selected' : '' }}>50</option>
            <option value="100" {{ ($porPagina ?? 100) == 100 ? 'selected' : '' }}>100</option>
            <option value="200" {{ ($porPagina ?? 100) == 200 ? 'selected' : '' }}>200</option>
            <option value="500" {{ ($porPagina ?? 100) == 500 ? 'selected' : '' }}>500</option>
          </select>
        </div>

        <!-- Botones -->
        <div class="form-group mb-0 d-flex align-items-center ml-auto" style="gap: 5px;">
          <button type="submit" id="botonf" name="Generar" value="" class="btn btn-warning font-weight-bold" style="height: 31px;">
            <i class="fa fa-search"></i> Consultar
          </button>
          <button type="submit" name="exportar" class="btn btn-success font-weight-bold" value="1" style="height: 31px;">
            <i class="fa fa-file-excel-o"></i> Exportar
          </button>
          @include('menu.botonRegresar')
        </div>
      </div>

      <!-- Fila 2: Filtros Secundarios (Ultra Compacta) -->
      <div class="d-flex flex-wrap align-items-end" style="gap: 8px;">
        <!-- Inicio Creación -->
        <div class="form-group mb-0" style="min-width: 115px; flex: 1;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;">Inicio Creación</label>
          <input type="date" class="form-control" name="fechaInicio" value="{{ $fechaInicio ?? '' }}" style="height: 31px; font-size: 0.82rem;">
        </div>

        <!-- Fin Creación -->
        <div class="form-group mb-0" style="min-width: 115px; flex: 1;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;">Fin Creación</label>
          <input type="date" class="form-control" name="fechaFin" value="{{ $fechaFin ?? '' }}" style="height: 31px; font-size: 0.82rem;">
        </div>

        <!-- Comisión Adicional -->
        <div class="form-group mb-0" style="min-width: 110px; flex: 1;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;">Comisión Adic.</label>
          <select class="form-control" name="conComision" style="height: 31px; font-size: 0.82rem;">
            <option value="0" {{ ($conComision ?? '0') == '0' ? 'selected' : '' }}>Todos</option>
            <option value="1" {{ ($conComision ?? '0') == '1' ? 'selected' : '' }}>Solo con Comisión</option>
          </select>
        </div>

        <!-- Listas 2 y 3 -->
        <div class="form-group mb-0" style="min-width: 100px; flex: 1;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;"><i class="fa fa-list"></i> Listas 2 y 3</label>
          <select class="form-control" name="mostrarListas23" style="height: 31px; font-size: 0.82rem;">
            <option value="0" {{ ($mostrarListas23 ?? '0') == '0' ? 'selected' : '' }}>Ocultar</option>
            <option value="1" {{ ($mostrarListas23 ?? '0') == '1' ? 'selected' : '' }}>Mostrar</option>
          </select>
        </div>

        <!-- Fijar Columnas -->
        <div class="form-group mb-0" style="min-width: 120px; flex: 1.2;">
          <label class="font-weight-bold small mb-1 text-muted text-uppercase" style="font-size: 0.75rem;"><i class="fa fa-thumb-tack"></i> Fijar Columnas</label>
          <select id="selectFreeze" class="form-control" style="height: 31px; font-size: 0.82rem;">
            <option value="none">Ninguna</option>
            <option value="codigo">Hasta Código</option>
            <option value="nombre" selected>Hasta Nombre</option>
            <option value="marca">Hasta Marca</option>
            <option value="categoria">Hasta Categoría</option>
            @if($permisoProductos != 'hidden')
            <option value="factor">Hasta Factor</option>
            <option value="blister">Hasta Fact. Blíster</option>
            @endif
          </select>
        </div>

        @if(!empty($nombreProd))
          <div class="form-group mb-0 d-flex align-items-center ml-auto" style="gap: 5px;">
            <span class="badge badge-info py-1 px-2" style="font-size: 0.8rem;">
              <i class="fa fa-filter"></i> Filtrando por: "<strong>{{ $nombreProd }}</strong>"
            </span>
            <a href="productosactulizar?bodega={{ $bodega ?? 1 }}&porPagina={{ $porPagina ?? 100 }}" class="btn btn-sm btn-outline-danger" style="height: 28px; padding: 2px 8px; font-size: 0.78rem;" title="Quitar filtro de producto">
              <i class="fa fa-times"></i> Limpiar
            </a>
          </div>
        @endif
      </div>
    </form>

    <div id="contenedorTablaProductos" class="table-responsive">
      @include('../menu/exportar.actulizacuinespreductos')
    </div>

    <div id="contenedorPaginacion">
      @if(is_object($productos) && method_exists($productos, 'hasPages') && $productos->hasPages())
        <div class="d-flex justify-content-between align-items-center flex-wrap mt-3 px-3 py-2 bg-light rounded border shadow-sm">
          <div class="text-muted small mb-2 mb-md-0 font-weight-bold">
            <i class="fa fa-info-circle text-primary"></i> Mostrando registros del <strong>{{ $productos->firstItem() }}</strong> al <strong>{{ $productos->lastItem() }}</strong> de un total de <strong>{{ number_format($productos->total()) }}</strong> productos (Página <strong>{{ $productos->currentPage() }}</strong> de <strong>{{ $productos->lastPage() }}</strong>)
          </div>
          <div class="mb-0">
            {{ $productos->appends(request()->query())->links('pagination::bootstrap-4') }}
          </div>
        </div>
      @endif
    </div>
  </div>
</div>
@endsection

@section('pie')
{{-- Enlazar scripts de DataTables y Select2 --}}
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
  // Mapping of selectFreeze options to column count
  const freezeMapping = {
    'none': 0,
    'codigo': 1,
    'nombre': 2,
    'marca': 3,
    'categoria': 4,
    'factor': 5,
    'blister': 6
  };

  function updateStickyColumns() {
    const table = document.getElementById('tablaActualizarProductos');
    if (!table) return;
    
    requestAnimationFrame(() => {
      const firstRow = table.querySelector('thead tr');
      if (!firstRow) return;
      
      let leftOffset = 0;
      const headers = firstRow.querySelectorAll('th');
      headers.forEach((th, index) => {
        if (index < 8) {
          document.documentElement.style.setProperty(`--off-prod-${index + 1}`, leftOffset + 'px');
          leftOffset += th.getBoundingClientRect().width;
        }
      });
    });
  }

  function updateStickyColsCount() {
    const selectEl = document.getElementById('selectFreeze');
    if (!selectEl) return;
    const mode = selectEl.value;
    const count = freezeMapping[mode] || 0;
    const table = document.getElementById('tablaActualizarProductos');
    if (!table) return;

    requestAnimationFrame(() => {
      // Remove all sticky classes first
      table.querySelectorAll('[class*="sticky-"]').forEach(el => {
        el.classList.remove(...Array.from(el.classList).filter(c => c.startsWith('sticky-')));
      });

      // Remove all freeze-X classes
      table.classList.remove('freeze-0', 'freeze-1', 'freeze-2', 'freeze-3', 'freeze-4', 'freeze-5', 'freeze-6', 'freeze-7');
      table.classList.add(`freeze-${count}`);

      if (count === 0) {
        updateStickyColumns();
        return;
      }

      // Apply to header
      const headerCells = table.querySelectorAll('thead th');
      headerCells.forEach((cell, index) => {
        if (index < count) {
          cell.classList.add(`sticky-${index + 1}`);
        }
      });

      // Apply to body
      const bodyRows = table.querySelectorAll('tbody tr');
      bodyRows.forEach(row => {
        const cells = row.querySelectorAll('th, td');
        cells.forEach((cell, index) => {
          if (index < count) {
            cell.classList.add(`sticky-${index + 1}`);
          }
        });
      });
      
      updateStickyColumns();
    });
  }

  $(document).ready(function() {
    // Inicializar Select2 en los filtros de Marca y Categoría
    $('select[name="marca"], select[name="cate"]').select2({
      width: '100%',
      dropdownAutoWidth: true
    });

    // Inicializar DataTable con drawCallback para mantener celdas editables y fijación de columnas en cada cambio de página
    let table = $('#tablaActualizarProductos').DataTable({
      "language": {
        "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
      },
      "paging": false,
      "info": false,
      "drawCallback": function(settings) {
        // Desvincular eventos anteriores para evitar acumulaciones múltiples al paginar/ordenar
        $(".venta").off('click');
        $(".venta").makeEditable();
        // Re-aplicar el congelamiento de columnas
        updateStickyColsCount();
        // Inicializar Select2 en los dropdowns de la tabla sólo si no están ya inicializados
        $(".select-brand, .select-category").each(function() {
          if (!$(this).hasClass('select2-hidden-accessible')) {
            $(this).select2({
              width: '100%',
              dropdownAutoWidth: true
            });
          }
        });
      }
    });

    // Controlar cambio en el selector de fijación
    $('#selectFreeze').on('change', function() {
      updateStickyColsCount();
    });

    // Recalcular offsets al cambiar el tamaño de la ventana
    window.addEventListener('resize', updateStickyColumns);

    // Respaldar el valor original en focus
    $(document).on("focus", "#tablaActualizarProductos .modificadorCelda", function() {
      let input = $(this);
      let cell = input.closest('td');
      cell.attr('data-old-val', input.val());
    });

    // Función unificada para guardar celdas editadas
    function guardarCeldaEditada(input) {
      let cell = input.closest('td');
      let row = input.closest('tr');
      let codigo = cell.data('codigo') || row.data('codigo');
      let campo = cell.data('campo');
      let value = input.val();
      let oldVal = cell.attr('data-old-val');
      let bodega = row.data('bodega') || "{{ $bodega ?? 1 }}";

      if (value === oldVal) {
        return;
      }

      // Advertencia si edita el factor y hay existencias
      if (campo === 'factor') {
        let inventario = parseFloat(row.data('inventario')) || 0;
        if (inventario > 0) {
          if (!confirm("Este cambio afecta el inventario. ¿Confirmas que quieres continuar?")) {
            input.val(oldVal);
            return;
          }
        }
      }

      let modoFinanciero = parseInt(row.data('calculo-financiero')) || 0;

      function calcUtil(costo, precio) {
        costo = parseFloat(costo) || 0;
        precio = parseFloat(precio) || 0;
        if (precio === 0 || precio <= costo) return 0;
        let res = 0;
        if (modoFinanciero === 1) {
          res = ((precio - costo) / precio) * 100;
        } else {
          if (costo === 0) return 0;
          res = ((precio - costo) / costo) * 100;
        }
        return parseFloat(res.toFixed(4));
      }

      function calcPrice(costo, utilidad) {
        costo = parseFloat(costo) || 0;
        utilidad = parseFloat(utilidad) || 0;
        let res = 0;
        if (modoFinanciero === 1) {
          if (utilidad >= 100) return Math.round(costo / 100) * 100;
          res = (costo / (100 - utilidad)) * 100;
        } else {
          res = ((costo / 100) * utilidad) + costo;
        }
        return Math.round(res / 100) * 100;
      }

      let ajaxData = {
        codigo: codigo,
        campo: campo,
        valor: value,
        bodega: bodega
      };

      // Recálculos recíprocos - Lista 1 Caja
      if (campo === 'costocaja' || campo === 'VentaCaja' || campo === 'utilidacaja') {
        let costVal = parseFloat(row.find('td[data-campo="costocaja"]').text()) || 0;
        let priceVal = parseFloat(row.find('td[data-campo="VentaCaja"]').text()) || 0;
        let utilVal = parseFloat(row.find('td[data-campo="utilidacaja"]').text()) || 0;

        if (campo === 'costocaja') {
          costVal = parseFloat(value) || 0;
          let uVal = calcUtil(costVal, priceVal);
          row.find('td[data-campo="utilidacaja"]').text(uVal);
          ajaxData.utilidacajaVal = uVal;
        } else if (campo === 'VentaCaja') {
          priceVal = parseFloat(value) || 0;
          let uVal = calcUtil(costVal, priceVal);
          row.find('td[data-campo="utilidacaja"]').text(uVal);
          ajaxData.utilidacajaVal = uVal;
        } else if (campo === 'utilidacaja') {
          utilVal = parseFloat(value) || 0;
          let newPrice = calcPrice(costVal, utilVal);
          row.find('td[data-campo="VentaCaja"]').text(newPrice);
          ajaxData.campo = 'VentaCaja';
          ajaxData.valor = newPrice;
          ajaxData.utilidacajaVal = utilVal;
        }
      }

      // Recálculos recíprocos - Lista 1 Fracción
      if (campo === 'costofrcc' || campo === 'VentaFrcc' || campo === 'utilidafrcc') {
        let costVal = parseFloat(row.find('td[data-campo="costofrcc"]').text()) || 0;
        let priceVal = parseFloat(row.find('td[data-campo="VentaFrcc"]').text()) || 0;
        let utilVal = parseFloat(row.find('td[data-campo="utilidafrcc"]').text()) || 0;

        if (campo === 'costofrcc') {
          costVal = parseFloat(value) || 0;
          let uVal = calcUtil(costVal, priceVal);
          row.find('td[data-campo="utilidafrcc"]').text(uVal);
          ajaxData.utilidafrccVal = uVal;
        } else if (campo === 'VentaFrcc') {
          priceVal = parseFloat(value) || 0;
          let uVal = calcUtil(costVal, priceVal);
          row.find('td[data-campo="utilidafrcc"]').text(uVal);
          ajaxData.utilidafrccVal = uVal;
        } else if (campo === 'utilidafrcc') {
          utilVal = parseFloat(value) || 0;
          let newPrice = calcPrice(costVal, utilVal);
          row.find('td[data-campo="VentaFrcc"]').text(newPrice);
          ajaxData.campo = 'VentaFrcc';
          ajaxData.valor = newPrice;
          ajaxData.utilidafrccVal = utilVal;
        }
      }

      // Recálculos recíprocos - Lista 2 Caja
      if (campo === 'VentaCaja2' || campo === 'utilidacaja2') {
        let costVal = parseFloat(row.find('td[data-campo="costocaja"]').text()) || 0;
        if (campo === 'VentaCaja2') {
          let uVal = calcUtil(costVal, parseFloat(value) || 0);
          row.find('td[data-campo="utilidacaja2"]').text(uVal);
          ajaxData.utilidacaja2Val = uVal;
        } else if (campo === 'utilidacaja2') {
          let newPrice = calcPrice(costVal, parseFloat(value) || 0);
          row.find('td[data-campo="VentaCaja2"]').text(newPrice);
          ajaxData.campo = 'VentaCaja2';
          ajaxData.valor = newPrice;
          ajaxData.utilidacaja2Val = parseFloat(value) || 0;
        }
      }

      // Recálculos recíprocos - Lista 2 Fracción
      if (campo === 'VentaFrcc2' || campo === 'utilidafrcc2') {
        let costVal = parseFloat(row.find('td[data-campo="costofrcc"]').text()) || 0;
        if (campo === 'VentaFrcc2') {
          let uVal = calcUtil(costVal, parseFloat(value) || 0);
          row.find('td[data-campo="utilidafrcc2"]').text(uVal);
          ajaxData.utilidafrcc2Val = uVal;
        } else if (campo === 'utilidafrcc2') {
          let newPrice = calcPrice(costVal, parseFloat(value) || 0);
          row.find('td[data-campo="VentaFrcc2"]').text(newPrice);
          ajaxData.campo = 'VentaFrcc2';
          ajaxData.valor = newPrice;
          ajaxData.utilidafrcc2Val = parseFloat(value) || 0;
        }
      }

      // Recálculos recíprocos - Lista 3 Caja
      if (campo === 'VentaCaja3' || campo === 'utilidacaja3') {
        let costVal = parseFloat(row.find('td[data-campo="costocaja"]').text()) || 0;
        if (campo === 'VentaCaja3') {
          let uVal = calcUtil(costVal, parseFloat(value) || 0);
          row.find('td[data-campo="utilidacaja3"]').text(uVal);
          ajaxData.utilidacaja3Val = uVal;
        } else if (campo === 'utilidacaja3') {
          let newPrice = calcPrice(costVal, parseFloat(value) || 0);
          row.find('td[data-campo="VentaCaja3"]').text(newPrice);
          ajaxData.campo = 'VentaCaja3';
          ajaxData.valor = newPrice;
          ajaxData.utilidacaja3Val = parseFloat(value) || 0;
        }
      }

      // Recálculos recíprocos - Lista 3 Fracción
      if (campo === 'VentaFrcc3' || campo === 'utilidafrcc3') {
        let costVal = parseFloat(row.find('td[data-campo="costofrcc"]').text()) || 0;
        if (campo === 'VentaFrcc3') {
          let uVal = calcUtil(costVal, parseFloat(value) || 0);
          row.find('td[data-campo="utilidafrcc3"]').text(uVal);
          ajaxData.utilidafrcc3Val = uVal;
        } else if (campo === 'utilidafrcc3') {
          let newPrice = calcPrice(costVal, parseFloat(value) || 0);
          row.find('td[data-campo="VentaFrcc3"]').text(newPrice);
          ajaxData.campo = 'VentaFrcc3';
          ajaxData.valor = newPrice;
          ajaxData.utilidafrcc3Val = parseFloat(value) || 0;
        }
      }

      // Respaldar nuevo valor
      cell.attr('data-old-val', value);

      $.ajax({
        url: 'actualizarProductoIndividual',
        type: 'POST',
        data: ajaxData,
        success: function(response) {
          if (response.res === 'ok') {
            cell.css('background-color', '#d4edda');
            setTimeout(function() {
              cell.css('background-color', '');
            }, 1200);
          } else {
            alert('Error al guardar: ' + response.mensa);
          }
        },
        error: function(err) {
          console.error(err);
          let msg = 'Error al conectar con el servidor.';
          if (err.responseJSON && err.responseJSON.mensa) {
            msg = err.responseJSON.mensa;
          } else if (err.responseText) {
            try {
              let parsed = JSON.parse(err.responseText);
              if (parsed.mensa) msg = parsed.mensa;
            } catch(e) {}
          }
          alert(msg);
        }
      });
    }

    // Interceptar Enter en la celda que está siendo editada
    $(document).on("keypress", "#tablaActualizarProductos .modificadorCelda", function(e) {
      if (e.which == 13) {
        guardarCeldaEditada($(this));
      }
    });

    // Guardar también si el usuario cambia el valor y hace click fuera (blur)
    $(document).on("blur", "#tablaActualizarProductos .modificadorCelda", function() {
      guardarCeldaEditada($(this));
    });

    // Enviar cambios inmediatos de Marca y Categoría
    $(document).on("change", "#tablaActualizarProductos .select-brand, #tablaActualizarProductos .select-category", function() {
      let select = $(this);
      let cell = select.closest('td');
      let row = select.closest('tr');
      let codigo = select.data('codigo') || row.data('codigo');
      let campo = select.data('campo');
      let value = select.val();
      let selectedText = select.find('option:selected').text().trim();
      let bodega = row.data('bodega') || "{{ $bodega ?? 1 }}";

      cell.attr('data-search', selectedText);
      cell.attr('data-order', selectedText);
      if (typeof table !== 'undefined' && table.cell) {
        table.cell(cell).invalidate();
      }

      $.ajax({
        url: 'actualizarProductoIndividual',
        type: 'POST',
        data: {
          codigo: codigo,
          campo: campo,
          valor: value,
          bodega: bodega
        },
        success: function(response) {
          if (response.res === 'ok') {
            cell.css('background-color', '#d4edda');
            setTimeout(function() {
              cell.css('background-color', '');
            }, 1200);
          } else {
            alert('Error al guardar: ' + response.mensa);
          }
        },
        error: function(err) {
          console.error(err);
          let msg = 'Error al conectar con el servidor.';
          if (err.responseJSON && err.responseJSON.mensa) {
            msg = err.responseJSON.mensa;
          } else if (err.responseText) {
            try {
              let parsed = JSON.parse(err.responseText);
              if (parsed.mensa) msg = parsed.mensa;
            } catch(e) {}
          }
          alert(msg);
        }
      });
    });

    // Enviar cambios inmediatos de Ubicaciones
    $(document).on("change", "#tablaActualizarProductos .select-location", function() {
      let select = $(this);
      let cell = select.closest('td');
      let row = select.closest('tr');
      let codigo = select.data('codigo') || row.data('codigo');
      let campo = select.data('campo');
      let value = select.val();
      let bodega = row.data('bodega') || "{{ $bodega ?? 1 }}";

      cell.attr('data-search', value);
      cell.attr('data-order', value);
      if (typeof table !== 'undefined' && table.cell) {
        table.cell(cell).invalidate();
      }

      $.ajax({
        url: 'actualizarProductoIndividual',
        type: 'POST',
        data: {
          codigo: codigo,
          campo: campo,
          valor: value,
          bodega: bodega
        },
        success: function(response) {
          if (response.res === 'ok') {
            cell.css('background-color', '#d4edda');
            setTimeout(function() {
              cell.css('background-color', '');
            }, 1200);
          } else {
            alert('Error al guardar: ' + response.mensa);
          }
        },
        error: function(err) {
          console.error(err);
          let msg = 'Error al conectar con el servidor.';
          if (err.responseJSON && err.responseJSON.mensa) {
            msg = err.responseJSON.mensa;
          } else if (err.responseText) {
            try {
              let parsed = JSON.parse(err.responseText);
              if (parsed.mensa) msg = parsed.mensa;
            } catch(e) {}
          }
          alert(msg);
        }
      });
    });
  });
</script>
@endsection