'use strict';

document.addEventListener('DOMContentLoaded', () => {
  const table = document.querySelector('.datatables-customer-serenatas');
  if (!table) return;

  new DataTable(table, {
    order: [[1, 'desc']],
    pageLength: 10,
    layout: {
      topStart: {
        rowClass: 'row m-3 my-0 justify-content-between',
        features: [{ pageLength: { menu: [10, 25, 50, 100], text: 'Mostrar _MENU_' } }]
      },
      topEnd: {
        features: [{ search: { placeholder: 'Buscar serenata', text: '_INPUT_' } }]
      },
      bottomStart: {
        rowClass: 'row mx-3 justify-content-between',
        features: ['info']
      },
      bottomEnd: 'paging'
    },
    language: {
      paginate: {
        next: '<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>',
        previous: '<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>',
        first: '<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>',
        last: '<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>'
      }
    },
    columnDefs: [
      { targets: [5], orderable: false, searchable: false }
    ]
  });

  setTimeout(() => {
    const mappings = [
      { selector: '.dt-search .form-control', remove: 'form-control-sm' },
      { selector: '.dt-length .form-select', remove: 'form-select-sm', add: 'ms-0' },
      { selector: '.dt-length', add: 'mb-md-6 mb-0' },
      { selector: '.dt-layout-end', remove: 'justify-content-between', add: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap' },
      { selector: '.dt-layout-table', remove: 'row mt-2' },
      { selector: '.dt-layout-full', remove: 'col-md col-12', add: 'table-responsive' }
    ];

    mappings.forEach(({ selector, remove, add }) => {
      document.querySelectorAll(selector).forEach(element => {
        if (remove) remove.split(' ').forEach(className => element.classList.remove(className));
        if (add) add.split(' ').forEach(className => element.classList.add(className));
      });
    });
  }, 120);
});
