{{define "datatable_code"}}
    <!-- jQuery (required for DataTables) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
    <!-- Buttons JS libraries -->
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    
    <!-- DataTables Init & Shared Actions -->
    <script>
    //  DataTable Initialization
    if ($('#table_theme').length) {
      const isNewsPage = window.location.pathname.includes('main_news');
      const isPromoPage = window.location.pathname.includes('main_promotion');
      const isReviewPage = window.location.pathname.includes('main_product_review');
      const columnCount = $('#table_theme thead th').length;

      // Dynamic column settings
      let orderCol = 0;
      let nonOrderable = [0];

      if (isNewsPage) {
        if (columnCount > 6) orderCol = 6; // Date column
        nonOrderable = [0, 1, 2, columnCount - 1]; // ลำดับ, สถานะ, รายละเอียด, จัดการ
      } else if (isPromoPage) {
        if (columnCount > 5) orderCol = 5; // Date column
        nonOrderable = [0, 1, 2, 3, columnCount - 1]; // ลำดับ, เลือกทั้งหมด, สถานะ, รูปภาพ, จัดการ
      } else if (isReviewPage) {
        if (columnCount > 5) orderCol = 5; // Date column
        nonOrderable = [0, 1, 2, columnCount - 1]; // ลำดับ, สถานะ, รายละเอียด, จัดการ
      }

      const table = $('#table_theme').DataTable({
        scrollY: '660px',
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        autoWidth: false,
        dom: '<"row mb-3"<"col-md-6"B><"col-md-6 text-end"f>>rt',
        buttons: [
          { extend: 'copy', className: 'btn btn-secondary btn-sm', text: '<i class="bi bi-copy"></i> คัดลอก' },
          { extend: 'csv', className: 'btn btn-warning btn-sm', text: '<i class="bi bi-file-earmark-csv"></i> CSV' },
          { extend: 'excel', className: 'btn btn-success btn-sm', text: '<i class="bi bi-file-earmark-excel"></i> Excel' },
          { extend: 'pdf', className: 'btn btn-danger btn-sm', text: '<i class="bi bi-file-earmark-pdf"></i> PDF' },
          { extend: 'print', className: 'btn btn-info btn-sm', text: '<i class="bi bi-printer"></i> พิมพ์' }
        ],
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/th.json' },
        order: [[orderCol, 'desc']],
        columnDefs: [
          { orderable: false, targets: nonOrderable } 
        ]
      });

      // Special handling for row numbering in column 0
      table.on('order.dt search.dt', function () {
          table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
              cell.innerHTML = (i + 1) + ".";
          } );
      }).draw();

      // Recalculate column widths when sidebar is toggled
      $(document).on('click', '[data-lte-toggle="sidebar"]', function() {
        setTimeout(() => {
          table.columns.adjust().draw();
        }, 300); // Wait for transition to complete
      });
      
      // Also adjust on window resize
      $(window).on('resize', function() {
        table.columns.adjust();
      });
    }
    </script>
{{end}}