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

@section('styles')
<style>
  .header-blue {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0083b0 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .panel-controls {
    background: #fff;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 10px 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }
  .badge-admin {
    background: rgba(255,193,7,.2);
    border: 1px solid #ffc107;
    color: #856404;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .5px;
    vertical-align: middle;
  }
  .kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
  }
  .kpi-info .kpi-num {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
  }
  .kpi-info .kpi-lbl {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  /* Tabla Responsiva */
  .tabla-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 12px;
  }
  .tabla-gemelos {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    margin-bottom: 0;
  }
  .tabla-gemelos thead th {
    background-color: #0f172a;
    color: #f8fafc;
    font-size: 11px;
    font-weight: 700;
    padding: 9px 8px;
    text-align: center;
    border-bottom: 2px solid #334155;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
  .tabla-gemelos tbody td {
    font-size: 12px;
    vertical-align: middle;
    padding: 7px 8px;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
  }
  .tabla-gemelos tbody tr:hover td {
    background-color: #f8fafc !important;
  }

  .badge-separata {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.75rem;
  }
  .badge-bodega {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
  }
  .price-highlight {
    font-weight: 700;
    color: #047857;
  }
  .price-muted {
    font-size: 0.75rem;
    color: #64748b;
    text-decoration: line-through;
  }

  /* Autocomplete */
  .autocomplete-wrap { position: relative; }
  .autocomplete-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1060;
    background: #fff;
    border: 1px solid #0083b0;
    border-radius: 0 0 6px 6px;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
  }
  .ac-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: .82rem;
    border-bottom: 1px solid #f1f5f9;
  }
  .ac-item:hover { background: #e0f2fe; }

  /* Toolbar */
  .table-toolbar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  /* Toast */
  #toast-ig {
    position: fixed; bottom: 25px; right: 25px;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    color: #fff;
    z-index: 9999;
    display: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
  }
  #toast-ig.ok  { background: #10b981; }
  #toast-ig.err { background: #ef4444; }

  /* Tema Oscuro */
  [data-theme='dark'] .panel-controls,
  [data-theme='dark'] .table-toolbar,
  [data-theme='dark'] .kpi-card,
  [data-theme='dark'] .modal-content {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }
  [data-theme='dark'] .kpi-info .kpi-num {
    color: #f8fafc !important;
  }
  [data-theme='dark'] .tabla-outer {
    background: #1e293b !important;
    border-color: #334155 !important;
  }
  [data-theme='dark'] .tabla-gemelos thead th {
    background-color: #090d16 !important;
    border-color: #334155 !important;
  }
  [data-theme='dark'] .tabla-gemelos tbody td {
    border-color: #334155 !important;
    color: #f1f5f9 !important;
  }
  [data-theme='dark'] .tabla-gemelos tbody tr:hover td {
    background-color: #243248 !important;
  }
  [data-theme='dark'] .autocomplete-list {
    background: #1e293b !important;
    border-color: #0284c7 !important;
  }
  [data-theme='dark'] .ac-item {
    color: #f1f5f9 !important;
    border-color: #334155 !important;
  }
  [data-theme='dark'] .ac-item:hover {
    background: #0369a1 !important;
  }
  [data-theme='dark'] .form-control,
  [data-theme='dark'] .form-select {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
  }
</style>
@endsection

@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container-fluid mt-2">

  {{-- ===== ENCABEZADO ===== --}}
  <div class="header-blue">
    <div class="d-flex align-items-center gap-2">
      <h5 class="fw-bold mb-0 text-white fs-6">ADMINISTRACIÓN &gt;&gt; SEPARATAS / INVENTARIO GEMELOS</h5>
      <span class="badge-admin">SOLO ADMIN</span>
    </div>
    <div>
      @include('menu.botonRegresar')
    </div>
  </div>

  {{-- ===== MÉTRICAS / KPIS ===== --}}
  <div class="row g-2 my-2">
    <div class="col-6 col-md-3">
      <div class="kpi-card">
        <div class="kpi-icon" style="background: rgba(13, 110, 253, 0.1); color: #0d6efd;">📑</div>
        <div class="kpi-info">
          <div class="kpi-num" id="kpiTotalRegistros">0</div>
          <div class="kpi-lbl">Total Registros</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="kpi-card">
        <div class="kpi-icon" style="background: rgba(40, 167, 69, 0.1); color: #28a745;">📦</div>
        <div class="kpi-info">
          <div class="kpi-num" id="kpiTotalProductos">0</div>
          <div class="kpi-lbl">Productos Únicos</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="kpi-card">
        <div class="kpi-icon" style="background: rgba(255, 193, 7, 0.15); color: #856404;">🏢</div>
        <div class="kpi-info">
          <div class="kpi-num" id="kpiTotalBodegas">0</div>
          <div class="kpi-lbl">Bodegas Activas</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="kpi-card">
        <div class="kpi-icon" style="background: rgba(111, 66, 193, 0.1); color: #6f42c1;">📊</div>
        <div class="kpi-info">
          <div class="kpi-num" id="kpiTotalStock">0</div>
          <div class="kpi-lbl">Stock Total</div>
        </div>
      </div>
    </div>
  </div>

  {{-- ===== BARRA DE CONTROL Y FILTROS ===== --}}
  <div class="table-toolbar">
    <div class="row g-2 align-items-center">
      <!-- Filtro Bodega -->
      <div class="col-12 col-sm-6 col-md-3">
        <label class="form-label mb-1 fw-bold text-muted small" style="font-size: 0.72rem;">BODEGA:</label>
        <select id="filtroBodega" class="form-select form-select-sm" onchange="cargarTabla(1)">
          <option value="0">🏢 Todas las Bodegas</option>
          @foreach($bodegas as $b)
            <option value="{{ $b->id }}">{{ $b->id }} - {{ $b->nombreBodega }}</option>
          @endforeach
        </select>
      </div>

      <!-- Filtro Tipo -->
      <div class="col-12 col-sm-6 col-md-2">
        <label class="form-label mb-1 fw-bold text-muted small" style="font-size: 0.72rem;">TIPO / ORIGEN:</label>
        <select id="filtroTipo" class="form-select form-select-sm" onchange="cargarTabla(1)">
          <option value="todos">Todos los Tipos</option>
          @foreach($tipos as $t)
            <option value="{{ $t }}" {{ $t == 'separata' ? 'selected' : '' }}>{{ ucfirst($t) }}</option>
          @endforeach
        </select>
      </div>

      <!-- Buscador -->
      <div class="col-12 col-sm-12 col-md-4">
        <label class="form-label mb-1 fw-bold text-muted small" style="font-size: 0.72rem;">BUSCAR PRODUCTO:</label>
        <div class="input-group input-group-sm">
          <span class="input-group-text bg-white">🔍</span>
          <input type="text" id="filtroBuscar" class="form-control" placeholder="Buscar por código, nombre o barras..." onkeyup="delayBuscar()">
          <button class="btn btn-outline-secondary" type="button" onclick="limpiarBuscador()" title="Limpiar búsqueda">✕</button>
        </div>
      </div>

      <!-- Botones de Acción -->
      <div class="col-12 col-md-3 text-md-end d-flex flex-wrap gap-1 justify-content-md-end mt-2 mt-md-0">
        <button type="button" class="btn btn-sm btn-primary" onclick="abrirModalNuevo()">
          <i class="fas fa-plus"></i> + Nuevo Producto
        </button>
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Excel
          </button>
          <ul class="dropdown-menu dropdown-menu-end shadow-sm">
            <li>
              <a class="dropdown-item small" href="#" onclick="abrirModalImportar(); return false;">
                📥 Importar Archivo Excel/CSV
              </a>
            </li>
            <li>
              <a class="dropdown-item small" href="{{ url('/inventarioGemelos/descargarPlantilla') }}">
                📊 Descargar Plantilla Oficial
              </a>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li>
              <a class="dropdown-item small" href="#" onclick="exportarExcel(); return false;">
                📤 Exportar Vista Actual a Excel
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  {{-- ===== BARRA DE ACCIÓN MASIVA (Selección múltiple) ===== --}}
  <div id="bulkActionBar" class="alert alert-warning py-1 px-3 mb-2 d-none d-flex justify-content-between align-items-center" style="font-size: 0.8rem;">
    <div>
      <span class="fw-bold"><span id="lblSelectedCount">0</span> registro(s) seleccionados.</span>
    </div>
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-sm btn-danger py-0" onclick="eliminarSeleccionados()">
        🗑️ Retirar / Eliminar Seleccionados
      </button>
      <button type="button" class="btn btn-sm btn-outline-secondary py-0" onclick="deseleccionarTodos()">
        Cancelar
      </button>
    </div>
  </div>

  {{-- ===== TABLA PRINCIPAL ===== --}}
  <div class="tabla-outer">
    <table class="tabla-gemelos">
      <thead>
        <tr>
          <th style="width: 35px;"><input type="checkbox" id="checkSelectAll" onchange="toggleSelectAll(this)"></th>
          <th style="width: 60px;">ID</th>
          <th style="width: 110px;">Código</th>
          <th style="text-align: left; min-width: 200px;">Nombre Producto</th>
          <th style="width: 120px;">Bodega</th>
          <th style="width: 105px;">Precio Venta</th>
          <th style="width: 95px;">Precio Base</th>
          <th style="width: 100px;">Costo</th>
          <th style="width: 95px;">Costo Base</th>
          <th style="width: 90px;">Stock</th>
          <th style="width: 90px;">Fracción</th>
          <th style="width: 90px;">Tipo</th>
          <th style="width: 100px;">Acciones</th>
        </tr>
      </thead>
      <tbody id="tbodyInventarioGemelos">
        <tr>
          <td colspan="13" class="text-center py-4 text-muted">
            <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
            Cargando registros de Inventario Gemelos...
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  {{-- ===== PAGINACIÓN Y RESUMEN ===== --}}
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 px-1" style="font-size: 0.82rem;">
    <div class="text-muted" id="infoPaginacion">
      Mostrando 0 - 0 de 0 registros
    </div>
    <div class="d-flex align-items-center gap-2">
      <label class="form-label mb-0 small text-muted">Por pág:</label>
      <select id="perPage" class="form-select form-select-sm" style="width: 75px;" onchange="cargarTabla(1)">
        <option value="15">15</option>
        <option value="25" selected>25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
      <nav>
        <ul class="pagination pagination-sm mb-0" id="ulPaginacion"></ul>
      </nav>
    </div>
  </div>

</div>

{{-- ===== MODAL CREAR / EDITAR PRODUCTO EN INVENTARIO GEMELOS ===== --}}
<div class="modal fade" id="modalProductoGemelo" tabindex="-1" aria-labelledby="modalProductoGemeloLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content shadow">
      <div class="modal-header py-2 bg-dark text-white">
        <h6 class="modal-title fw-bold" id="modalProductoGemeloLabel">
          <span id="modalAccionTitulo">Nuevo Producto</span>
        </h6>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="formProductoGemelo" onsubmit="guardarProductoGemelo(event)">
          <input type="hidden" id="modal_idg" value="">

          <!-- SECCIÓN 1: SELECCIÓN DEL PRODUCTO -->
          <div class="mb-3">
            <label class="form-label fw-bold small mb-1">BUSCAR PRODUCTO (CÓDIGO, NOMBRE O BARRAS): <span class="text-danger">*</span></label>
            <div class="autocomplete-wrap">
              <input type="text" id="modal_buscar_producto" class="form-control form-control-sm" placeholder="Escriba código o nombre del producto..." autocomplete="off" onkeyup="buscarProductoModal(this.value)">
              <div id="modal_lista_productos" class="autocomplete-list"></div>
            </div>
            <div id="modal_producto_seleccionado" class="alert alert-info py-2 px-3 mt-2 d-none" style="font-size: 0.82rem;">
              <div class="d-flex justify-content-between align-items-start">
                <div>
                  <strong>Producto:</strong> <span id="prod_sel_nombre">---</span><br>
                  <strong>Código:</strong> <span id="prod_sel_codigo" class="badge bg-secondary">---</span>
                  <span class="ms-2"><strong>Barras:</strong> <span id="prod_sel_barras">---</span></span>
                  <span class="ms-2"><strong>Factor:</strong> <span id="prod_sel_factor">---</span></span>
                </div>
                <div class="text-end">
                  <div class="small text-muted">Precio Base: <span id="prod_sel_precio_base" class="fw-bold text-dark">$0</span></div>
                  <div class="small text-muted">Costo Base: <span id="prod_sel_costo_base" class="fw-bold text-dark">$0</span></div>
                </div>
              </div>
            </div>
          </div>

          <input type="hidden" id="modal_codigo" value="">

          <!-- SECCIÓN 2: ASIGNACIÓN DE BODEGA -->
          <div class="card mb-3 bg-light border-0">
            <div class="card-body p-2">
              <div class="row g-2 align-items-center">
                <div class="col-12 col-md-6">
                  <label class="form-label fw-bold small mb-1">BODEGA DESTINO:</label>
                  <select id="modal_bodega" class="form-select form-select-sm">
                    @foreach($bodegas as $b)
                      <option value="{{ $b->id }}">{{ $b->id }} - {{ $b->nombreBodega }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-12 col-md-6 pt-md-3">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="modal_todas_bodegas" onchange="toggleTodasBodegas(this.checked)">
                    <label class="form-check-label fw-bold small text-primary" for="modal_todas_bodegas">
                      🌐 Replicar / Aplicar a TODAS las Bodegas
                    </label>
                  </div>
                  <small class="text-muted d-block" style="font-size: 0.72rem;">Crea o actualiza el precio y costo en todas las sucursales al mismo tiempo.</small>
                </div>
              </div>
            </div>
          </div>

          <!-- SECCIÓN 3: PRECIOS Y COSTOS -->
          <div class="row g-2 mb-3">
            <div class="col-6 col-md-3">
              <label class="form-label fw-bold small mb-1 text-success">PRECIO VENTA: <span class="text-danger">*</span></label>
              <input type="number" step="any" id="modal_precio_caja" class="form-control form-control-sm text-end fw-bold" placeholder="0" required>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label fw-bold small mb-1 text-danger">COSTO:</label>
              <input type="number" step="any" id="modal_costo_caja" class="form-control form-control-sm text-end" placeholder="0">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label fw-bold small mb-1">CANTIDAD / INVENTARIO:</label>
              <input type="number" step="any" id="modal_inventario" class="form-control form-control-sm text-end" value="0">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label fw-bold small mb-1">PRECIO FRACCIÓN:</label>
              <input type="number" step="any" id="modal_precio_frcc" class="form-control form-control-sm text-end" placeholder="0">
            </div>
          </div>

          <!-- SECCIÓN 4: OPCIONALES -->
          <div class="row g-2 mb-2">
            <div class="col-6 col-md-4">
              <label class="form-label fw-bold small mb-1">TIPO (OTRODATO 1):</label>
              <input type="text" id="modal_tipo" class="form-control form-control-sm" value="separata" placeholder="separata">
            </div>
            <div class="col-6 col-md-4">
              <label class="form-label fw-bold small mb-1">COSTO FRACCIÓN:</label>
              <input type="number" step="any" id="modal_costo_frcc" class="form-control form-control-sm text-end" placeholder="0">
            </div>
            <div class="col-12 col-md-4">
              <label class="form-label fw-bold small mb-1">NOTA / DATO 2 (OPCIONAL):</label>
              <input type="text" id="modal_otrodato2" class="form-control form-control-sm" placeholder="Observación adicional">
            </div>
          </div>

          <div class="modal-footer px-0 pb-0 pt-3 border-top mt-3">
            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn btn-sm btn-primary" id="btnGuardarModal">
              💾 Guardar Producto
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- ===== MODAL IMPORTACIÓN MASIVA EXCEL / CSV ===== --}}
<div class="modal fade" id="modalImportarGemelos" tabindex="-1" aria-labelledby="modalImportarGemelosLabel" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content shadow">
      <div class="modal-header py-2 bg-dark text-white">
        <h6 class="modal-title fw-bold" id="modalImportarGemelosLabel">📥 Importar Inventario Gemelos desde Excel</h6>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="formImportar" onsubmit="ejecutarImportacion(event)">
          <div class="alert alert-light border small py-2 px-3 mb-3">
            <strong>Instrucciones rápidas:</strong><br>
            • Descargue la <a href="{{ url('/inventarioGemelos/descargarPlantilla') }}" class="fw-bold text-primary">plantilla oficial (.xlsx)</a>.<br>
            • La columna <code>codigo</code> es obligatoria.<br>
            • Si la columna <code>bodega</code> es 0 o está vacía, se aplicará a <strong>todas las bodegas</strong>.
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold small mb-1">SELECCIONE EL ARCHIVO (.xlsx, .xls o .csv): <span class="text-danger">*</span></label>
            <input type="file" id="import_archivo" class="form-control form-control-sm" accept=".xlsx,.xls,.csv" required>
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold small mb-1">FORZAR BODEGA (OPCIONAL):</label>
            <select id="import_bodega_forzada" class="form-select form-select-sm">
              <option value="-1">📄 Respetar bodega especificada en cada fila del archivo</option>
              <option value="0">🌐 Aplicar a TODAS las Bodegas</option>
              @foreach($bodegas as $b)
                <option value="{{ $b->id }}">🏢 Solo Bodega {{ $b->id }} - {{ $b->nombreBodega }}</option>
              @endforeach
            </select>
          </div>

          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" id="import_sobrescribir" checked>
            <label class="form-check-label small" for="import_sobrescribir">
              Sobrescribir datos si el producto ya existe en la bodega
            </label>
          </div>

          <div class="modal-footer px-0 pb-0 pt-2 border-top">
            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn btn-sm btn-success" id="btnProcesarImport">
              🚀 Iniciar Importación
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- Toast flotante --}}
<div id="toast-ig"></div>

@endsection

@section('pie')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  const CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
  let paginaActual = 1;
  let timerBusqueda = null;
  let timerModalBusqueda = null;
  let selectedIds = new Set();

  function abrirModal(id) {
    if (window.bootstrap && bootstrap.Modal) {
      try {
        const el = document.getElementById(id);
        let m = bootstrap.Modal.getInstance(el);
        if (!m) m = new bootstrap.Modal(el);
        m.show();
        return;
      } catch(e) {}
    }
    $('#' + id).modal('show');
  }

  function cerrarModal(id) {
    if (window.bootstrap && bootstrap.Modal) {
      try {
        const el = document.getElementById(id);
        const m = bootstrap.Modal.getInstance(el);
        if (m) {
          m.hide();
          return;
        }
      } catch(e) {}
    }
    $('#' + id).modal('hide');
  }

  $(document).ready(function() {
    cargarTabla(1);

    // Cerrar autocomplete al hacer clic fuera
    $(document).on('click', function(e) {
      if (!$(e.target).closest('.autocomplete-wrap').length) {
        $('#modal_lista_productos').hide();
      }
    });
  });

  // Mostrar mensaje flotante Toast
  function showToast(msg, type = 'ok') {
    const $t = $('#toast-ig');
    $t.removeClass('ok err').addClass(type).html(msg).fadeIn(200);
    setTimeout(() => $t.fadeOut(300), 3500);
  }

  // Retardo de búsqueda en vivo
  function delayBuscar() {
    clearTimeout(timerBusqueda);
    timerBusqueda = setTimeout(() => cargarTabla(1), 350);
  }

  function limpiarBuscador() {
    $('#filtroBuscar').val('');
    cargarTabla(1);
  }

  // Cargar tabla AJAX
  function cargarTabla(page = 1) {
    paginaActual = page;
    const bodega = $('#filtroBodega').val();
    const tipo = $('#filtroTipo').val();
    const search = $('#filtroBuscar').val().trim();
    const perPage = $('#perPage').val();

    $('#tbodyInventarioGemelos').html(`
      <tr>
        <td colspan="13" class="text-center py-4 text-muted">
          <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
          Cargando registros...
        </td>
      </tr>
    `);

    $.ajax({
      url: "{{ url('/inventarioGemelos/listar') }}",
      type: 'GET',
      data: {
        bodega: bodega,
        tipo: tipo,
        search: search,
        per_page: perPage,
        page: page
      },
      headers: { 'X-CSRF-TOKEN': CSRF_TOKEN },
      success: function(res) {
        if (!res || res.res !== 'ok') {
          showToast('Error al cargar datos: ' + ((res && res.mensa) || ''), 'err');
          $('#tbodyInventarioGemelos').html(`
            <tr>
              <td colspan="13" class="text-center py-4 text-danger">
                ❌ ${res && res.mensa ? escapeHtml(res.mensa) : 'Error inesperado al cargar datos.'}
              </td>
            </tr>
          `);
          return;
        }

        // Actualizar KPIs
        if (res.totales) {
          $('#kpiTotalRegistros').text((res.totales.registros || 0).toLocaleString());
          $('#kpiTotalProductos').text((res.totales.productos || 0).toLocaleString());
          $('#kpiTotalBodegas').text((res.totales.bodegas || 0).toLocaleString());
          $('#kpiTotalStock').text(parseFloat(res.totales.stock || 0).toLocaleString());
        }

        renderTabla(res.data);
        renderPaginacion(res);
      },
      error: function(xhr) {
        const errorMsg = xhr.responseJSON && xhr.responseJSON.mensa ? xhr.responseJSON.mensa : 'Error de conexión o permisos al cargar registros.';
        $('#tbodyInventarioGemelos').html(`
          <tr>
            <td colspan="13" class="text-center py-4 text-danger">
              ❌ ${escapeHtml(errorMsg)} <br>
              <button class="btn btn-sm btn-outline-primary mt-2" onclick="cargarTabla(${page})">Reintentar</button>
            </td>
          </tr>
        `);
      }
    });
  }

  // Renderizar filas de la tabla
  function renderTabla(items) {
    const $tbody = $('#tbodyInventarioGemelos');
    $tbody.empty();

    if (!items || items.length === 0) {
      $tbody.html(`
        <tr>
          <td colspan="13" class="text-center py-4 text-muted">
            🔍 No se encontraron productos en Inventario Gemelos con los filtros aplicados.
          </td>
        </tr>
      `);
      return;
    }

    items.forEach(item => {
      const isChecked = selectedIds.has(item.idg) ? 'checked' : '';
      const precioSep = parseFloat(item.precioCajaGm || 0).toLocaleString();
      const precioBase = parseFloat(item.producto_precio_base || 0).toLocaleString();
      const costoSep = parseFloat(item.CostoCajaGm || 0).toLocaleString();
      const costoBase = parseFloat(item.producto_costo_base || 0).toLocaleString();
      const stock = parseFloat(item.InventarioGm || 0);

      const filaHtml = `
        <tr id="row-ig-${item.idg}">
          <td class="text-center">
            <input type="checkbox" class="check-item" value="${item.idg}" ${isChecked} onchange="toggleItemSelect(${item.idg}, this.checked)">
          </td>
          <td class="text-center text-muted small">${item.idg}</td>
          <td class="text-center">
            <span class="badge bg-light text-dark border font-monospace">${item.codeProdgm}</span>
          </td>
          <td style="white-space: normal; max-width: 320px;">
            <div class="fw-bold text-dark">${escapeHtml(item.producto_nombre || '---')}</div>
            <div class="text-muted small" style="font-size: 0.72rem;">Barras: ${item.producto_barras || 'N/A'}</div>
          </td>
          <td class="text-center">
            <span class="badge-bodega">${escapeHtml(item.bodega_nombre || ('Bodega ' + item.bodegaGm))}</span>
          </td>
          <td class="text-end price-highlight">$${precioSep}</td>
          <td class="text-end text-muted small">$${precioBase}</td>
          <td class="text-end fw-bold text-secondary">$${costoSep}</td>
          <td class="text-end text-muted small">$${costoBase}</td>
          <td class="text-center fw-bold ${stock > 0 ? 'text-primary' : 'text-muted'}">${stock}</td>
          <td class="text-end small">${item.precioFrccGm > 0 ? '$' + parseFloat(item.precioFrccGm).toLocaleString() : '-'}</td>
          <td class="text-center">
            <span class="badge-separata">${escapeHtml(item.otrodato1 || 'separata')}</span>
          </td>
          <td class="text-center">
            <div class="btn-group btn-group-sm">
              <button class="btn btn-outline-primary btn-sm py-0 px-2" title="Editar registro" onclick="abrirModalEditar(${JSON.stringify(item).replace(/"/g, '&quot;')})">
                ✏️
              </button>
              <button class="btn btn-outline-danger btn-sm py-0 px-2" title="Retirar / Eliminar" onclick="confirmarEliminar(${item.idg}, '${item.codeProdgm}', '${escapeHtml(item.producto_nombre || '')}')">
                🗑️
              </button>
            </div>
          </td>
        </tr>
      `;
      $tbody.append(filaHtml);
    });
  }

  // Renderizar controles de paginación
  function renderPaginacion(res) {
    $('#infoPaginacion').text(`Mostrando ${res.from || 0} - ${res.to || 0} de ${res.total_filtradas || 0} registros`);

    const $ul = $('#ulPaginacion');
    $ul.empty();

    if (res.last_page <= 1) return;

    // Botón Anterior
    const prevDisabled = res.current_page === 1 ? 'disabled' : '';
    $ul.append(`<li class="page-item ${prevDisabled}"><a class="page-link" href="#" onclick="cargarTabla(${res.current_page - 1}); return false;">«</a></li>`);

    const start = Math.max(1, res.current_page - 2);
    const end = Math.min(res.last_page, res.current_page + 2);

    for (let p = start; p <= end; p++) {
      const active = p === res.current_page ? 'active' : '';
      $ul.append(`<li class="page-item ${active}"><a class="page-link" href="#" onclick="cargarTabla(${p}); return false;">${p}</a></li>`);
    }

    // Botón Siguiente
    const nextDisabled = res.current_page === res.last_page ? 'disabled' : '';
    $ul.append(`<li class="page-item ${nextDisabled}"><a class="page-link" href="#" onclick="cargarTabla(${res.current_page + 1}); return false;">»</a></li>`);
  }

  // Selección múltiple
  function toggleItemSelect(id, checked) {
    if (checked) {
      selectedIds.add(id);
    } else {
      selectedIds.delete(id);
    }
    actualizarBarraSeleccion();
  }

  function toggleSelectAll(master) {
    const isChecked = master.checked;
    $('.check-item').each(function() {
      this.checked = isChecked;
      const id = parseInt($(this).val());
      if (isChecked) selectedIds.add(id);
      else selectedIds.delete(id);
    });
    actualizarBarraSeleccion();
  }

  function deseleccionarTodos() {
    selectedIds.clear();
    $('#checkSelectAll').prop('checked', false);
    $('.check-item').prop('checked', false);
    actualizarBarraSeleccion();
  }

  function actualizarBarraSeleccion() {
    const count = selectedIds.size;
    $('#lblSelectedCount').text(count);
    if (count > 0) {
      $('#bulkActionBar').removeClass('d-none');
    } else {
      $('#bulkActionBar').addClass('d-none');
    }
  }

  // Eliminar seleccionados
  function eliminarSeleccionados() {
    if (selectedIds.size === 0) return;

    const ids = Array.from(selectedIds);
    const msj = `¿Está seguro de retirar ${ids.length} producto(s) seleccionados de Inventario Gemelos?`;

    const proceder = () => {
      $.ajax({
        url: "{{ url('/inventarioGemelos/eliminar') }}",
        type: 'POST',
        data: { ids: ids },
        headers: { 'X-CSRF-TOKEN': CSRF_TOKEN },
        success: function(res) {
          if (res.res === 'ok') {
            showToast(res.mensa, 'ok');
            deseleccionarTodos();
            cargarTabla(paginaActual);
          } else {
            showToast('Error: ' + res.mensa, 'err');
          }
        },
        error: function() { showToast('Error al procesar la solicitud.', 'err'); }
      });
    };

    if (typeof Swal !== 'undefined') {
      Swal.fire({
        title: '¿Retirar Seleccionados?',
        text: msj,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        confirmButtonText: 'Sí, retirar',
        cancelButtonText: 'Cancelar'
      }).then(r => { if (r.isConfirmed) proceder(); });
    } else {
      if (confirm(msj)) proceder();
    }
  }

  // Confirmar eliminación individual
  function confirmarEliminar(idg, codigo, nombre) {
    const eliminarIndividual = () => {
      $.ajax({
        url: "{{ url('/inventarioGemelos/eliminar') }}",
        type: 'POST',
        data: { idg: idg },
        headers: { 'X-CSRF-TOKEN': CSRF_TOKEN },
        success: function(res) {
          if (res.res === 'ok') {
            showToast(res.mensa, 'ok');
            cargarTabla(paginaActual);
          } else {
            showToast('Error: ' + res.mensa, 'err');
          }
        },
        error: function() { showToast('Error al eliminar.', 'err'); }
      });
    };

    const eliminarTodasBodegas = () => {
      $.ajax({
        url: "{{ url('/inventarioGemelos/eliminar') }}",
        type: 'POST',
        data: { eliminar_codigo_todas: codigo },
        headers: { 'X-CSRF-TOKEN': CSRF_TOKEN },
        success: function(res) {
          if (res.res === 'ok') {
            showToast(res.mensa, 'ok');
            cargarTabla(paginaActual);
          } else {
            showToast('Error: ' + res.mensa, 'err');
          }
        },
        error: function() { showToast('Error al eliminar.', 'err'); }
      });
    };

    if (typeof Swal !== 'undefined') {
      Swal.fire({
        title: `Retirar Producto`,
        html: `<strong>${codigo}</strong> - ${nombre}<br><br>¿Cómo desea retirar este producto?`,
        icon: 'question',
        showCancelButton: true,
        showDenyButton: true,
        confirmButtonColor: '#dc3545',
        denyButtonColor: '#6c757d',
        cancelButtonColor: '#3085d6',
        confirmButtonText: '🗑️ De TODAS las Bodegas',
        denyButtonText: 'Solo de ESTA Bodega',
        cancelButtonText: 'Cancelar'
      }).then((result) => {
        if (result.isConfirmed) {
          eliminarTodasBodegas();
        } else if (result.isDenied) {
          eliminarIndividual();
        }
      });
    } else {
      if (confirm(`¿Retirar ${codigo} de esta bodega?`)) {
        eliminarIndividual();
      }
    }
  }

  // Modal Nuevo
  function abrirModalNuevo() {
    $('#modalAccionTitulo').text('Nuevo Producto');
    $('#modal_idg').val('');
    $('#modal_codigo').val('');
    $('#modal_buscar_producto').val('').prop('readonly', false);
    $('#modal_producto_seleccionado').addClass('d-none');
    $('#modal_todas_bodegas').prop('checked', false);
    $('#modal_bodega').prop('disabled', false);
    $('#modal_precio_caja').val('');
    $('#modal_costo_caja').val('');
    $('#modal_inventario').val('0');
    $('#modal_precio_frcc').val('0');
    $('#modal_costo_frcc').val('0');
    $('#modal_tipo').val('separata');
    $('#modal_otrodato2').val('');

    abrirModal('modalProductoGemelo');
  }

  // Modal Editar
  function abrirModalEditar(item) {
    $('#modalAccionTitulo').text(`Editar Producto [${item.codeProdgm}]`);
    $('#modal_idg').val(item.idg);
    $('#modal_codigo').val(item.codeProdgm);
    $('#modal_buscar_producto').val(item.codeProdgm).prop('readonly', true);

    $('#prod_sel_nombre').text(item.producto_nombre || '---');
    $('#prod_sel_codigo').text(item.codeProdgm);
    $('#prod_sel_barras').text(item.producto_barras || 'N/A');
    $('#prod_sel_factor').text(item.producto_factor || '0');
    $('#prod_sel_precio_base').text('$' + parseFloat(item.producto_precio_base || 0).toLocaleString());
    $('#prod_sel_costo_base').text('$' + parseFloat(item.producto_costo_base || 0).toLocaleString());
    $('#modal_producto_seleccionado').removeClass('d-none');

    $('#modal_bodega').val(item.bodegaGm).prop('disabled', false);
    $('#modal_todas_bodegas').prop('checked', false);

    $('#modal_precio_caja').val(item.precioCajaGm || '0');
    $('#modal_costo_caja').val(item.CostoCajaGm || '0');
    $('#modal_inventario').val(item.InventarioGm || '0');
    $('#modal_precio_frcc').val(item.precioFrccGm || '0');
    $('#modal_costo_frcc').val(item.CostofrccGm || '0');
    $('#modal_tipo').val(item.otrodato1 || 'separata');
    $('#modal_otrodato2').val(item.otrodato2 || '');

    abrirModal('modalProductoGemelo');
  }

  function toggleTodasBodegas(checked) {
    $('#modal_bodega').prop('disabled', checked);
  }

  // Búsqueda predictiva dentro del modal
  function buscarProductoModal(query) {
    clearTimeout(timerModalBusqueda);
    const q = query.trim();
    if (q.length < 2) {
      $('#modal_lista_productos').hide();
      return;
    }

    timerModalBusqueda = setTimeout(() => {
      $.ajax({
        url: "{{ url('/inventarioGemelos/buscarProducto') }}",
        type: 'GET',
        data: { q: q },
        headers: { 'X-CSRF-TOKEN': CSRF_TOKEN },
        success: function(items) {
          const $list = $('#modal_lista_productos');
          $list.empty();

          if (!items || items.length === 0) {
            $list.html('<div class="p-2 text-muted small">No se encontraron productos coincidentes.</div>').show();
            return;
          }

          items.forEach(p => {
            const itemHtml = `
              <div class="ac-item" onclick="seleccionarProductoModal(${JSON.stringify(p).replace(/"/g, '&quot;')})">
                <div class="fw-bold">${escapeHtml(p.nombre)}</div>
                <div class="text-muted small">
                  Código: <span class="badge bg-light text-dark border">${p.codigo}</span>
                  ${p.barras ? ' | Barras: ' + p.barras : ''}
                  | Base: $${parseFloat(p.VentaCajaP || 0).toLocaleString()}
                </div>
              </div>
            `;
            $list.append(itemHtml);
          });
          $list.show();
        }
      });
    }, 250);
  }

  function seleccionarProductoModal(prod) {
    $('#modal_codigo').val(prod.codigo);
    $('#modal_buscar_producto').val(`${prod.codigo} - ${prod.nombre}`);
    $('#modal_lista_productos').hide();

    $('#prod_sel_nombre').text(prod.nombre);
    $('#prod_sel_codigo').text(prod.codigo);
    $('#prod_sel_barras').text(prod.barras || 'N/A');
    $('#prod_sel_factor').text(prod.factor || '0');
    $('#prod_sel_precio_base').text('$' + parseFloat(prod.VentaCajaP || 0).toLocaleString());
    $('#prod_sel_costo_base').text('$' + parseFloat(prod.CostoCajaP || 0).toLocaleString());
    $('#modal_producto_seleccionado').removeClass('d-none');

    // Auto-completar valores sugeridos si están vacíos
    if (!$('#modal_precio_caja').val() || $('#modal_precio_caja').val() == '0') {
      $('#modal_precio_caja').val(prod.VentaCajaP || 0);
    }
    if (!$('#modal_costo_caja').val() || $('#modal_costo_caja').val() == '0') {
      $('#modal_costo_caja').val(prod.CostoCajaP || 0);
    }
    if (!$('#modal_precio_frcc').val() || $('#modal_precio_frcc').val() == '0') {
      $('#modal_precio_frcc').val(prod.VentaFrccP || 0);
    }
    if (!$('#modal_costo_frcc').val() || $('#modal_costo_frcc').val() == '0') {
      $('#modal_costo_frcc').val(prod.CostoFrccP || 0);
    }
  }

  // Guardar producto
  function guardarProductoGemelo(e) {
    e.preventDefault();

    const codigo = $('#modal_codigo').val().trim();
    if (!codigo) {
      showToast('Debe buscar y seleccionar un producto del catálogo.', 'err');
      return;
    }

    const data = {
      idg: $('#modal_idg').val() || null,
      codigo: codigo,
      bodega: $('#modal_bodega').val(),
      todas_bodegas: $('#modal_todas_bodegas').is(':checked') ? 1 : 0,
      precio_caja: $('#modal_precio_caja').val() || '0',
      costo_caja: $('#modal_costo_caja').val() || 0,
      inventario: $('#modal_inventario').val() || '0',
      precio_frcc: $('#modal_precio_frcc').val() || '0',
      costo_frcc: $('#modal_costo_frcc').val() || '0',
      tipo: $('#modal_tipo').val() || 'separata',
      otrodato2: $('#modal_otrodato2').val() || ''
    };

    const $btn = $('#btnGuardarModal');
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Guardando...');

    $.ajax({
      url: "{{ url('/inventarioGemelos/guardar') }}",
      type: 'POST',
      data: data,
      headers: { 'X-CSRF-TOKEN': CSRF_TOKEN },
      success: function(res) {
        $btn.prop('disabled', false).html('💾 Guardar Producto');
        if (res.res === 'ok') {
          showToast(res.mensa, 'ok');
          cerrarModal('modalProductoGemelo');
          cargarTabla(paginaActual);
        } else {
          showToast('Error: ' + res.mensa, 'err');
        }
      },
      error: function(xhr) {
        $btn.prop('disabled', false).html('💾 Guardar Producto');
        const err = xhr.responseJSON ? xhr.responseJSON.mensa : 'Error de comunicación.';
        showToast('Error: ' + err, 'err');
      }
    });
  }

  // Modal Importación
  function abrirModalImportar() {
    $('#import_archivo').val('');
    $('#import_bodega_forzada').val('-1');
    $('#import_sobrescribir').prop('checked', true);

    abrirModal('modalImportarGemelos');
  }

  // Ejecutar importación
  function ejecutarImportacion(e) {
    e.preventDefault();
    const file = $('#import_archivo')[0].files[0];
    if (!file) {
      showToast('Seleccione un archivo para importar.', 'err');
      return;
    }

    const formData = new FormData();
    formData.append('archivo', file);
    formData.append('bodega_forzada', $('#import_bodega_forzada').val());
    formData.append('sobrescribir', $('#import_sobrescribir').is(':checked') ? 1 : 0);

    const $btn = $('#btnProcesarImport');
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Procesando...');

    $.ajax({
      url: "{{ url('/inventarioGemelos/importar') }}",
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      headers: { 'X-CSRF-TOKEN': CSRF_TOKEN },
      success: function(res) {
        $btn.prop('disabled', false).html('🚀 Iniciar Importación');
        if (res.res === 'ok') {
          cerrarModal('modalImportarGemelos');
          const msj = `✅ ${res.mensa}\n• Creados: ${res.creados}\n• Actualizados: ${res.actualizados}\n• Ignorados: ${res.ignorados}`;
          if (typeof Swal !== 'undefined') {
            Swal.fire('Importación Exitosa', msj.replace(/\n/g, '<br>'), 'success');
          } else {
            alert(msj);
          }
          cargarTabla(1);
        } else {
          showToast('Error: ' + res.mensa, 'err');
        }
      },
      error: function(xhr) {
        $btn.prop('disabled', false).html('🚀 Iniciar Importación');
        const err = xhr.responseJSON ? xhr.responseJSON.mensa : 'Error de comunicación.';
        showToast('Error al importar: ' + err, 'err');
      }
    });
  }

  // Exportar a Excel
  function exportarExcel() {
    const bodega = $('#filtroBodega').val();
    const tipo = $('#filtroTipo').val();
    const search = $('#filtroBuscar').val().trim();

    const url = "{{ url('/inventarioGemelos/exportar') }}?bodega=" + encodeURIComponent(bodega) +
      "&tipo=" + encodeURIComponent(tipo) +
      "&search=" + encodeURIComponent(search);

    window.location.href = url;
  }

  function escapeHtml(text) {
    if (!text) return '';
    return String(text)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }
</script>
@endsection