/* Attendance Index */

'use strict';

$(function () {
  console.log('Attendance Index');

  // Initialize Flatpickr for date input
  flatpickr('#date', {
    dateFormat: 'Y-m-d',
    defaultDate: $('#date').val() || new Date()
  });

  var dataTable = $('#attendanceTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
      url: '/hrcore/attendance/datatable',
      data: function data(d) {
        d.userId = $('#userId').val();
        d.date = $('#date').val();
      }
    },
    columns: [
      {data: 'id', name: 'id'},
      {data: 'user', name: 'user', orderable: false, searchable: true},
      {data: 'shift', name: 'shift'},
      {data: 'check_in_time', name: 'check_in_time'},
      {data: 'check_out_time', name: 'check_out_time'},
      {data: 'late_indicator', name: 'late_indicator', orderable: false, searchable: false},
      {data: 'early_indicator', name: 'early_indicator', orderable: false, searchable: false},
      {data: 'overtime_indicator', name: 'overtime_indicator', orderable: false, searchable: false},
      {data: 'actions', name: 'actions', orderable: false, searchable: false}
    ],
    order: [[0, 'desc']],
    language: {
      search: '',
      searchPlaceholder: pageData.labels.search || 'Search',
      processing: pageData.labels.processing || 'Processing...',
      lengthMenu: pageData.labels.lengthMenu || 'Show _MENU_ entries',
      info: pageData.labels.info || 'Showing _START_ to _END_ of _TOTAL_ entries',
      infoEmpty: pageData.labels.infoEmpty || 'Showing 0 to 0 of 0 entries',
      infoFiltered: pageData.labels.infoFiltered || '(filtered from _MAX_ total entries)',
      emptyTable: pageData.labels.emptyTable || 'No data available in table',
      zeroRecords: pageData.labels.zeroRecords || 'No matching records found',
      paginate: {
        first: pageData.labels.first || 'First',
        last: pageData.labels.last || 'Last',
        previous: '<i class="bx bx-chevron-left"></i>',
        next: '<i class="bx bx-chevron-right"></i>'
      }
    }
  });

  $('#userId').select2();

  $('#userId').on('change', function () {
    dataTable.draw();
  });

  $('#date').on('change', function () {
    dataTable.draw();
  });
});
