new DataTable('#tblCarousel', {
  responsive: {
    details: {
      type: 'column',
      renderer: function (api, rowIdx, columns) {
        const data = $.map(columns, function (col) {
          // Excluir columnas ocultas con títulos no deseados
          if (
            col.hidden &&
            !(
              col.title.includes("ID") ||
              col.title === 'Acciones'
            )
          ) {
            return `
              <tr data-dt-row="${col.rowIndex}" data-dt-column="${col.columnIndex}">
                <td style="padding-left: 1rem; font-weight: 600; min-width: 120px;">${col.title}:</td>
                <td style="padding-left: 1rem;">${col.data}</td>
              </tr>
            `;
          }
          return '';
        }).join('');

        return data
          ? $('<table style="width:100%"/>').append(`<tbody>${data}</tbody>`)
          : false;
      }
    }
  },

  autoWidth: false,
  dom: '<"top"lf>rt<"bottom"ip>',

  language: {
    search: "Buscar:",
    lengthMenu: "Mostrar _MENU_ registros",
    info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
    infoEmpty: "Mostrando 0 a 0 de 0 registros",
    infoFiltered: "(filtrado de _MAX_ registros totales)",
    paginate: {
      first: "Primero",
      last: "Último",
      next: "Siguiente",
      previous: "Anterior"
    }
  },

  initComplete: function () {
    const api = this.api();

    // Agregar filtros a columnas que lo permiten
    api.columns().every(function () {
      const column = this;
      const header = $(column.header());
      const title = header.text().trim();



      if (
        !(
          title.includes("ID") ||
          title === 'New Tab' ||
          title === 'Acciones'
        )
      ) {
        const input = $('<input type="text" class="form-control form-control-sm" placeholder="Filtrar..."/>')
          .appendTo(header.empty()) // Vaciar el th antes de agregar input
          .on('keyup change', function () {
            if (column.search() !== this.value) {
              column.search(this.value).draw();
            }
          });

        input.css('width', '100%');
      }
    });

    // Ajustes al redimensionar ventana
    $(window).on('resize', function () {
      $('.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table').css('width', '100%');
    });
  },

  drawCallback: function () {
    // Asegurar ancho correcto si hay columnas ocultas
    if (this.api().responsive.hasHidden()) {
      $('.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table').css('width', '100%');
    }
  },

  columnDefs: [
    { responsivePriority: 1, targets: 0 },     // ID
    { responsivePriority: 2, targets: -1 },    // Acciones
    { responsivePriority: 3, targets: 2 },     // Archivo
    { width: '80px', targets: 0 },             // Ancho para ID
    { width: '120px', targets: -1 }            // Ancho para Acciones
  ]
});
