$("#employee_devices-table").DataTable().clear().destroy();

let table_table = $("#employee_devices-table").DataTable({
  initComplete: function () {
    this.api()
      .columns([0])
      .every(function () {
        var column = this;
        var select = $('<select><option value=""></option></select> ')
          .appendTo($(column.footer()).empty())
          .on("change", function () {
            var val = $.fn.dataTable.util.escapeRegex($(this).val());

            column.search(val ? "^" + val + "$" : "", true, false).draw();
          });

        column
          .data()
          .unique()
          .sort()
          .each(function (d, j) {
            select.append('<option value="' + d + '">' + d + "</option>");
            $("select").selectpicker("refresh");
          });
      });

  },
  responsive: true,
  fixedHeader: {
    header: true,
    footer: true,
  },
  processing: true,
  serverSide: true,
  ajax: {
    url: "{{ route('employee_devices.index', $employee->id) }}",
  },
  columns: [
    {
      data: "ip",
      name: "ip",
    },
    {
      data: "sn",
      name: "sn",
    },
    {
      data: "type",
      name: "type",
    },
    {
      data: "name",
      name: "name",
    },
    {
      data: "company",
      name: "company",
    },{
      data: "department",
      name: "department",
    },
    {
      data: "is_active",
      name: "is_active",
      render: function (data) {
        if (data == "1") {
          return "<div class='text-center'><div class = 'text-nowrap  vc border border-success rounded-pill d-inline px-3 py-1 fw-semibold text-success'> <span>•</span> {{ trans('file.Active') }}</div></div>";
        } else {
          return "<div class='text-center'><div class = 'text-nowrap  vc border border-danger rounded-pill d-inline px-3 py-1 fw-semibold text-danger'> <span>•</span> {{ trans('file.Inactive') }}</div></div>";
        }
      },
    },
    {
      data: "action",
      name: "action",
      orderable: false,
    },
  ],

  order: [],
  language: {
    select: {
      rows: {
        _: "{{ __('file.Selected %d rows') }}",
        0: "{{ __('file.Click a row to select it') }}",
        1: "{{ __('file.Selected 1 row') }}",
      },
    },
    zeroRecords: '{{ __("No data available in table ") }}',
    infoEmpty: '{{ trans("file.Showing") }} 0 - 0 (0)',
    infoFiltered: "",
    lengthMenu: '_MENU_ {{ __("records per page") }}',
    info: '{{ trans("file.Showing") }} _START_ - _END_ (_TOTAL_)',
    search: '{{ trans("file.Search") }}',
    paginate: {
      previous: '{{ trans("file.Previous") }}',
      next: '{{ trans("file.Next") }}',
    },
  },
  columnDefs: [
    {
      orderable: false,
      targets: [0, 4],
    },
  ],

  select: {
    style: "multi",
    selector: "td:first-child",
  },
  lengthMenu: [
    [10, 25, 50, -1],
    [10, 25, 50, "All"],
  ],
});
new $.fn.dataTable.FixedHeader(table_table);

$("#add_to_device_submit").on("click", function (event) {
  event.preventDefault();
  let device = $('select[name="device"]').val();
  let employee = "{{$employee->id}}";

  $.ajax({
    url: "{{ route('employee_devices.add_to_device') }}",
    method: "POST",
    data: {
      device: device,
      employee: employee,
    },
    success: function (data) {
      var html = "";
      if (data.error) {
        displayErrorMessage(data.error);
      }

      if (data.errors) {
        $("#add_device_form .form-control").removeClass("is-invalid");
        html += '<ul class="mb-0">';
        $.each(data.errors, function (field, message) {
          // $('#add_device_form #' + field).addClass('is-invalid');
          $(".selectpicker").selectpicker("refresh");

          html += "<li>" + message + "</li>";
        });
        html += "</ul>";

        displayErrorMessage(html);
      }

      if (data.success) {
        $(".selectpicker").selectpicker("refresh");
        html = '<div class="">' + data.success + "</div>";
        displaySuccessMessage(html);
        $("#add_device_form")[0].reset();
        $("#employee_devices-table").DataTable().ajax.reload();
      }
    },
  });
});

{{-- Restart --}}
$(document).on("click", ".restart_device", function () {
    let device_id = $(this).attr("id");
    {{-- let employee = "{{$employee->id}}"; --}}
    if (confirm('{{__("Are you sure you want to restart the device?")}}')) {
      $.ajax({
        url: "{{ route('devices.restartDevice') }}",
        method: "POST",
        data: {
          {{-- employee: employee, --}}
          device_id: device_id,
        },
        success: function (data) {
          var html = "";
          html = '<div class="">' + data.success + "</div>";
          displaySuccessMessage(html);
          $("#employee_devices-table").DataTable().ajax.reload();
        },
      });
    }
  });

$(document).on("click", ".device_delete", function () {
  let delete_id = $(this).attr("id");
  let employee = "{{$employee->id}}";
  if (confirm('{{__("Are You Sure you want to delete this data")}}')) {
    $.ajax({
      url: "{{ route('employee_devices.delete_from_device') }}",
      method: "POST",
      data: {
        employee: employee,
        device: delete_id,
      },
      success: function (data) {
        var html = "";
        html = '<div class="">' + data.success + "</div>";
        displaySuccessMessage(html);
        $("#employee_devices-table").DataTable().ajax.reload();
      },
    });
  }
});

$(document).on("click", ".add_fingerprint", function () {
  let device_id = $(this).attr("id");
  let employee = "{{$employee->id}}";
  $("#employee_fingerprint_modal").modal("show");
  $("#employee_fingerprint_modal svg .finger.index").removeClass(
    "activeFinger"
  );

  let submitFingerButton = $(".submit-finger-button");

  let fingerIndex;

  $("#employee_fingerprint_modal svg .finger.index").on("click", function () {
    let index = $(this).attr("data-index");

    // Check if corresponding .finger-icon already has activeFinger from DB
    let isTaken = $('.finger-icon[data-index="' + index + '"]').hasClass(
      "activeFinger"
    );

    if (isTaken) {
      // Block interaction
      console.log("This finger is already registered.");
      return;
    }

    // Deselect any previously selected
    $("#employee_fingerprint_modal svg .finger.index").removeClass(
      "activeFinger"
    );

    // Add active class to the selected one
    $(this).addClass("activeFinger");

    // Update selected index
    fingerIndex = index;

    submitFingerButton.prop("disabled", false);
  });

  // First AJAX call to fetch the current finger indexes
  $.ajax({
    url: "{{ route('employee_devices.get_finger_index') }}",
    method: "POST",
    data: {
      employee: employee,
      device: device_id,
      fingerIndex: fingerIndex,
    },
    success: function (data) {
      if (data.fingerindexes && Array.isArray(data.fingerindexes)) {
        // Remove all current highlights
        $(".finger-icon").removeClass("activeFinger");

        // Highlight received finger indexes
        data.fingerindexes.forEach(function (index) {
          $('.finger-icon[data-index="' + index + '"]').addClass(
            "activeFinger"
          );
        });
      }
    },
  });

  submitFingerButton.on("click", function () {
    var fingerscanLoader = $("#employee_fingerprint_modal .loading-fingerscan");
    fingerscanLoader.addClass("activated");
    $.ajax({
      url: "{{ route('employee_devices.add_finger_index') }}",
      method: "POST",
      data: {
        employee: employee,
        device: device_id,
        fingerIndex: fingerIndex,
      },
      success: function (data) {
        var html = "";
        if (data.error) {
          displayErrorMessage(data.error);
        }

        if (data.errors) {
          html += '<ul class="mb-0">';
          $.each(data.errors, function (message) {
            // $('#add_device_form #' + field).addClass('is-invalid');
            $(".selectpicker").selectpicker("refresh");
            html += "<li>" + message + "</li>";
          });
          html += "</ul>";
        }

        if (data.success) {
          // Start checking the finger index status every 10 seconds
          let checkInterval = setInterval(function () {
            $.ajax({
              url: "{{ route('employee_devices.check_finger_index') }}",
              method: "POST",
              data: {
                employee: employee,
                device: device_id,
                fingerIndex: fingerIndex,
              },
              success: function (data) {
                // If the finger index is successfully added, add the activeFinger class
                if (data.status === "success") {
                  // Clear the interval to stop checking
                  clearInterval(checkInterval);
                  // Add the active class to the selected finger icon
                  $('.finger-icon[data-index="' + fingerIndex + '"]').addClass(
                    "activeFinger"
                  );
                  fingerscanLoader.removeClass("activated");
                  $(
                    '#employee_fingerprint_modal svg .finger.index[data-index="' +
                      fingerIndex +
                      '"]'
                  ).removeClass("activeFinger");

                  displaySuccessMessage(data.message);
                  submitFingerButton.prop("disabled", true);
                  fingerIndex = "";
                }
                if (data.status === "error") {
                  // Clear the interval to stop checking
                  clearInterval(checkInterval);

                  fingerscanLoader.removeClass("activated");
                  $(
                    '#employee_fingerprint_modal svg .finger.index[data-index="' +
                      fingerIndex +
                      '"]'
                  ).removeClass("activeFinger");
                  displayErrorMessage(data.message);
                  submitFingerButton.prop("disabled", true);
                  fingerIndex = "";
                }
              },
            });
          }, 5000); // Every 5 seconds
        }
      },
    });
  });
});