// new DataTable('#dbContact', {
//   autoWidth: true,
//   responsive: true,

//   columnDefs: [
//     {
//       targets: 3, // Recuerda, empieza en 0: Fecha(0), Nombre(1), Estado(2), Empleados(3)
//       visible: window.innerWidth >= 1024 && window.innerWidth <= 1439 ? false : true
//     }
//   ],

//   initComplete: function () {
//     this.api().columns().every(function () {
//       let column = this;
//       let header = $(column.header());
//       let title = header.text().trim();
      
//       if (title !== 'Estatus') {
//         header.append('<div class="filter"><input type="text" class="form-control" placeholder=" Filtro ' + title + '" /></div>');
//         $('input', header).on('keyup change', function () {
//           if (column.search() !== this.value) {
//             column.search(this.value).draw();
//           }
//         });
//       }
//     });
//   }
// });

let table = new DataTable('#dbContact', {
  autoWidth: true,
  responsive: true,
  initComplete: function () {
    this.api().columns().every(function () {
      let column = this;
      let header = $(column.header());
      let title = header.text().trim();
      
      if (title !== 'Estatus') {
        header.append('<div class="filter"><input type="text" class="form-control" placeholder=" Filtro ' + title + '" /></div>');
        $('input', header).on('keyup change', function () {
          if (column.search() !== this.value) {
            column.search(this.value).draw();
          }
        });
      }
    });
  }
});


function ajustarColumnasSegunPantalla() {
  const width = window.innerWidth;

  if (width >= 1024 && width <= 1439) {
    // Entre 1024px y 1439px: ocultar solo columna 3
    table.column(3).visible(false);
    // table.column(4).visible(true);
  } else if (width >= 768 && width <= 1023) {
    // Entre 768px y 1023px: ocultar columna 3 y columna 4
    table.column(3).visible(false);
    table.column(4).visible(false);
    table.column(5).visible(false);
  } 
    // Otros tamaños: mostrar ambas columnas
  // else {
  //   table.column(3).visible(true);
  //   table.column(4).visible(true);
  // }
}

// Ejecutar una vez al cargar
ajustarColumnasSegunPantalla();

// Y además ajustar si cambia el tamaño de la ventana
window.addEventListener('resize', function() {
  ajustarColumnasSegunPantalla();
});