@php
  $tooltips = [];

  if (
      isset($widget->tableHeadingDescriptions)
      &&
      $widget->tableHeadingDescriptions->count() > 0
  ) {
      foreach ($widget->tableHeadingDescriptions as $description) {
          $tooltips[] = [
              'columnName' => $description->column_name,
              'columnTooltip' => $description->column_tooltip
          ];
      }
  }
@endphp

<script type="text/javascript">
  var tooltips{!! $widget->id !!} = {!! json_encode($tooltips) !!};

  function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }
</script>

<!--<script type="text/lazyload">-->
@if ($widget->id == 335)
  <script>
    $(document).ready(function () {
      $("#element{{$widget->id}}").html('<div class="splunk-message-container"><div class="alert alert-info"><i class="icon-alert"></i>loading...</div></div>');

      $.ajax({
        url: '/get-widget-data',
        data: {
          '_token': tk,
          'id': {{$widget->id}},
          'from': "{{ $from }}",
          'to': "{{ $to }}"
        },
        type: "post",
        dataType: "json",
        success: function (resp) {
          $("#element{{$widget->id}} .splunk-message-container").remove();

          if (resp.data) {
            const hasLocation = true

            $.post("{{ route('calculateVulnerabilitesAndAssetsCorrelationPriority') }}", {
              '_token': $('meta[name="csrf-token"]').attr('content'),
              'names': JSON.stringify(resp.data_labels),
              'rows': JSON.stringify(resp.data),
            }).done(function (preparedRows) {
              $('#element{{$widget->id}}').addClass('splunk-view splunk-table');

              var thead = $('<thead>', {
                html: $('<tr>', {
                  html: $('<th>')
                })
              });

              $.each(hasLocation ? resp.data_labels : [...resp.data_labels, 'Location'], function (i, label) {
                var tooltipContent = getTableHeadColumnTooltip(tooltips{!! $widget->id !!}, label);

                thead.find('tr').eq(0).append($('<th>', {
                  html: $('<span>', {
                    html: [
                      label,
                      '&nbsp;',
                      tooltipContent
                    ]
                  })
                }));
              });

              thead.find('tr').eq(0).append($('<th>', {
                html: 'Action'
              }));

              var tbody = $('<tbody>');

              $.each(preparedRows, function (i, rows) {
                var elements = [];
                var vulnerability = {};
                var tr = $('<tr>', {
                  class: 'odd',
                  html: $('<td>', {
                    html: ''//(i + 1)
                  })
                });

                $.each(rows, function (j, value) {
                  var singleValue = value;

                  if (
                    $.isArray(value)
                    &&
                    typeof value[0] !== typeof undefined
                  ) {
                    singleValue = value[0];
                  }

                  if (j === 0) {
                    tr.append($('<td>', {
                      html: `
                                          <span style="display: none;">
                                            ${
                        {'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3}[singleValue] ?? 0
                      }
                                          </span> ${singleValue}
                                          `
                    }));
                  } else {
                    tr.append($('<td>', {
                      html: singleValue
                    }));
                  }

                  elements.push($('<input>', {
                    type: 'hidden',
                    name: resp.data_labels[j],
                    value: singleValue
                  }));
                  vulnerability[resp.data_labels[j]] = singleValue;
                });

                if (!hasLocation) {
                  tr.append($('<td>', {
                    html: ''
                  }))
                }

                elements = elements.concat([
                  $('<input>', {
                    type: 'hidden',
                    name: 'vulnerability_id',
                    value: rows[5]
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: 'custom_form[0]',
                    value: 1
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: 'custom_form_hidden[0][0]',
                    value: 1
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: 'custom_form_text[0][0]',
                    value: 'Vulnerability'
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: 'custom_form_hidden[0][6]',
                    value: 7
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: 'custom_form_text[0][6]',
                    value: rows[0]
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: 'custom_form_hidden[0][7]',
                    value: 8
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: 'custom_form_text[0][7]',
                    value: rows[2]
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: 'name',
                    value: rows[5] + ' - ' + rows[4]
                  }),
                  $('<input>', {
                    type: 'hidden',
                    name: '_token',
                    value: $('meta[name="csrf-token"]').attr('content')
                  }),
                  $('<div>', {
                    class: 'dropdown',
                    html: [
                      $('<button>', {
                        type: 'button',
                        class: 'btn-sm btn-primary dropdown-toggle',
                        'data-toggle': 'dropdown',
                        'aria-expanded': false,
                        html: [
                          'Action',
                          '&nbsp;',
                          $('<span>', {
                            class: 'caret'
                          })
                        ]
                      }),
                      $('<ul>', {
                        class: 'dropdown-menu',
                        html: [
                          $('<li>', {
                            html: $('<a>', {
                              class: 'createCaseBtn',
                              href: 'javascript: void(0);',
                              text: 'Create Case'
                            }),
                          }),
                          $('<li>', {
                            html: $('<a>', {
                              class: 'addToWhitelistBtn',
                              href: 'javascript: void(0);',
                              text: 'WHITELIST',
                              'data-vulnerability': JSON.stringify(vulnerability)
                            }),
                          })
                        ]
                      })
                    ]
                  })
                ]);

                tr.append($('<td>', {
                  html: $('<form>', {
                    action: 'case-auto',
                    class: 'create_vul_case',
                    method: 'POST',
                    html: elements
                  })
                }));

                tbody.append(tr);
              });

              $('#element{{$widget->id}}').html($('<div>', {
                class: 'shared-resultstable-resultstablemaster results-table',
                html: $('<table>', {
                  id: 'splunkResponseRepresentTable{!! $widget->id !!}',
                  class: 'table table-chrome table-striped not-wrapped-results',
                  html: [thead, tbody]
                })
              }));

              var dataTable = new DataTable(document.getElementById('splunkResponseRepresentTable{{ $widget->id }}'), {perPageSelect: [5, 15, 25, 50, 100],perPage: 15,});

              dataTable.columns().sort(1, 'desc')

              /* line numbers in table  */
              dataTable.on('datatable.init', lineNumber);
              dataTable.on('datatable.refresh', lineNumber);
              dataTable.on('datatable.update', lineNumber);
              dataTable.on('datatable.page', lineNumber);
              dataTable.on('datatable.sort', lineNumber);
              dataTable.on('datatable.perpage', lineNumber);
              //dataTable.on('datatable.search', lineNumber);

              function lineNumber() {
                console.log(dataTable)
                let page = dataTable.currentPage;
                let tableTrs = $('#splunkResponseRepresentTable{{ $widget->id }} > tbody > tr');
                let iRow = 1;
                $.each(tableTrs, function (i, tr) {
                  tr.firstChild.innerHTML = iRow+((page-1)*dataTable.options.perPage);
                  iRow++;
                })
              }
              /* EOF line numbers in table  */

              $('#splunkResponseRepresentTable{{ $widget->id }}').on('draw draw.dt sort.dt sort', function () {
                alert('Table redrawn');
              });

              var queryParams = getQueryStringParams();

              if (queryParams.hasOwnProperty('ip')) {
                var tableSearchField = $('#element{{ $widget->id }}').find('.dataTable-input').eq(0);

                if (typeof tableSearchField !== typeof undefined) {
                  tableSearchField.val(queryParams.ip);
                  dataTable.search(queryParams.ip);
                }
              }

              $('[data-toggle="tooltip"]').tooltip();
            });
          } else {
            displayWidgetNoDataText(
              "#element{{ $widget->id }}",
              {{ $widget->use_no_data_text }},
              "{{ $widget->no_data_text }}"
            );
          }
        }
      });
    });

    $(document).on('click', '.createCaseBtn', function () {
      $(this).closest('form').trigger('submit');
    });

    $(document).on('click', '.addToWhitelistBtn', function () {
      var vulnerability = $(this).attr('data-vulnerability');

      $.post("{{ route('addVulnerabilityToWhitelist') }}", {
        'vulnerability': vulnerability,
        '_token': $('meta[name="csrf-token"]').attr('content')
      }).done(function (data) {
        if (data.message !== null) {
          alert(data.message);
        }
      }).fail(function () {
        alert('Something went wrong. Please try again.');
      });
    });
  </script>
@elseif ($widget->id == 381)
  <script>
    $(document).ready(function () {
      $("#element{{$widget->id}}").html('<div class="splunk-message-container "><div class="alert alert-info"><i class="icon-alert"></i>loading...</div></div>');
      $.ajax({
        url: '/get-widget-data',
        data: {
          '_token': tk,
          'id': {{$widget->id}},
          'from': "{{ $from }}",
          @if(request()->has('timerange_new'))
          'timerange': "{{ request()->input('timerange_new') }}",
          @endif
          'to': "{{ $to }}"
        },
        type: "post",
        dataType: "json",
        success: function (resp) {
          $("#element{{$widget->id}} .splunk-message-container").remove();

          if (resp.data) {
            $('#element{{$widget->id}}').addClass('splunk-view splunk-table');

            var thead = $('<thead>', {
              html: $('<tr>', {
                html: $('<th>', {
                  html: $('<a>', {
                    href: '#'
                  })
                })
              })
            });

            const hasLocation = resp.data_labels.findIndex(el => el === 'Location') > -1
            const hasHostname = resp.data_labels.findIndex(el => el === 'Hostname') > -1
            const hasApt = resp.data_labels.findIndex(el => el === 'APT') > -1

            $.each(resp.data_labels, function (i, label) {
              var tooltipContent = getTableHeadColumnTooltip(tooltips{!! $widget->id !!}, label);

              thead.find('tr').eq(0).append($('<th>', {
                html: $('<a>', {
                  href: '#',
                  html: [
                    capitalizeFirstLetter(label),
                    '&nbsp;',
                    tooltipContent
                  ]
                })
              }));

              if (i === 2) {
                thead.find('tr').eq(0).append([
                  /*$('<th>', {
                    html: $('<a>', {
                      href: '#',
                      html: 'MSS-SIEM'
                    })
                  }),*/
                  $('<th>', {
                    html: $('<a>', {
                      href: '#',
                      html: 'MSS-WAF'
                    })
                  })
                ]);
              }
            });

            if (!hasLocation) thead.find('tr').eq(0).append($('<th>', {html: 'Location'}))
            if (!hasHostname) thead.find('tr').eq(0).append($('<th>', {html: 'Hostname'}))
            if (!hasApt) thead.find('tr').eq(0).append($('<th>', {html: 'APT'}))

            thead.find('tr').eq(0).append($('<th>', {
              html: 'Action'
            }));

            var tbody = $('<tbody>');

            $.each(resp.data, function (i, rows) {
              var hiddenFormInputs = [];

              var tr = $('<tr>', {
                class: 'odd',
                html: $('<td>', {
                  html: (i + 1)
                })
              });

              $.each(rows, function (j, value) {
                var singleValue = value;

                if (
                  $.isArray(value)
                  &&
                  typeof value[0] !== typeof undefined
                ) {
                  singleValue = value[0];
                }

                tr.append($('<td>', {
                  html: singleValue
                }));

                if (j === 2) {
                  tr.append([
/*                    $('<td>', {
                      html: 'n/a'
                    }),*/
                    $('<td>', {
                      html: 'n/a'
                    })
                  ]);
                }

                hiddenFormInputs.push($('<input>', {
                  type: 'hidden',
                  name: 'splunk_results[' + j + '][0]',
                  value: resp.data_labels[j]
                }));
                hiddenFormInputs.push($('<input>', {
                  type: 'hidden',
                  name: 'splunk_results[' + j + '][1]',
                  value: singleValue
                }));
              });

              if (!hasLocation) tr.append($('<th>', {html: ''}))
              if (!hasHostname) tr.append($('<th>', {html: ''}))
              if (!hasApt) tr.append($('<th>', {html: ''}))

              hiddenFormInputs = hiddenFormInputs.concat([
               /* $('<input>', {
                  type: 'hidden',
                  name: 'splunk_results[' + resp.data_labels.length + '][0]',
                  value: 'MSS-SIEM'
                }),*/
                $('<input>', {
                  type: 'hidden',
                  name: 'splunk_results[' + resp.data_labels.length + '][1]',
                  value: 'n/a'
                }),
                $('<input>', {
                  type: 'hidden',
                  name: 'splunk_results[' + (resp.data_labels.length + 1) + '][0]',
                  value: 'MSS-WAF'
                }),
                $('<input>', {
                  type: 'hidden',
                  name: 'splunk_results[' + (resp.data_labels.length + 1) + '][1]',
                  value: 'n/a'
                }),
                $('<input>', {
                  type: 'hidden',
                  name: 'case_config_type',
                  value: '{!! \App\Models\CasesInfo\CasesConfig::THREATS_ANALYTICS !!}'
                }),
                $('<input>', {
                  type: 'hidden',
                  name: '_token',
                  value: '{!! csrf_token() !!}'
                }),
                $('<button>', {
                  type: 'submit',
                  class: 'btn-sm btn-primary',
                  html: [
                    $('<i>', {
                      class: 'ti-briefcase'
                    }),
                    '&nbsp;',
                    'Create Case'
                  ]
                })
              ]);

              tr.append($('<td>', {
                html: $('<form>', {
                  action: '{!! route("cases.showAutomaticPredefinedCaseForm") !!}',
                  method: 'POST',
                  html: hiddenFormInputs
                })
              }));

              tbody.append(tr);
            });

            $('#element{{$widget->id}}').html($('<table>', {
              id: 'splunk-table-{{ $widget->id }}',
              class: 'table table-chrome table-striped result-table',
              html: [thead, tbody]
            }));

            var dataTable = new DataTable(document.getElementById('splunk-table-{{ $widget->id }}'), {perPageSelect: [5, 15, 25, 50, 100],perPage: 15,});
            var queryParams = getQueryStringParams();

            if (queryParams.hasOwnProperty('ip')) {
              var tableSearchField = $('#element{{ $widget->id }}').find('.dataTable-input').eq(0);

              if (typeof tableSearchField !== typeof undefined) {
                tableSearchField.val(queryParams.ip);
                dataTable.search(queryParams.ip);
              }
            }

            $('[data-toggle="tooltip"]').tooltip();
          } else {
            displayWidgetNoDataText(
              "#element{{ $widget->id }}",
              {{ $widget->use_no_data_text }},
              "{{ $widget->no_data_text }}"
            );
          }
        }
      });
    });
  </script>
@else
  <script>
    $(document).ready(function () {
      $("#element{{$widget->id}}").html('<div class="splunk-message-container "><div class="alert alert-info"><i class="icon-alert"></i>loading...</div></div>');
      $.ajax({
        url: '/get-widget-data',
        data: {
          '_token': tk,
          'id': {{$widget->id}},
          'from': "{{ $from }}",
          @if(request()->has('timerange_new'))
          'timerange': "{{ request()->input('timerange_new') }}",
          @endif
          'to': "{{ $to }}"
        },
        type: "post",
        dataType: "json",
        success: function (resp) {
          $("#element{{$widget->id}} .splunk-message-container").remove();

          if (resp.data) {
            $('#element{{$widget->id}}').addClass('splunk-view splunk-table');

            var thead = $('<thead>', {
              html: $('<tr>', {
                html: $('<th>', {
                  html: $('<a>', {
                    href: 'javascript: void(0);'
                  })
                })
              })
            });

            $.each(resp.data_labels, function (i, label) {
              var tooltipContent = getTableHeadColumnTooltip(tooltips{!! $widget->id !!}, label);

              thead.find('tr').eq(0).append($('<th>', {
                html: $('<a>', {
                  href: 'javascript: void(0);',
                  html: [
                    capitalizeFirstLetter(label),
                    '&nbsp;',
                    tooltipContent
                  ]
                })
              }));
            });

            var tbody = $('<tbody>');
            @if($widget->id == 341)
            if (
              typeof resp.data[0] !== typeof undefined
              &&
              resp.data[0].length > 0
            ) {
              var maxIndex = 0;

              $.each(resp.data[0], function (i, arr) {
                var length = arr.length;

                if (maxIndex < length) {
                  maxIndex = length;
                }
              });

              if (maxIndex > 0) {
                for (var i = 0; i < maxIndex; i++) {
                  var tr = $('<tr>', {
                    class: 'odd',
                    html: $('<td>', {
                      html: (i + 1)
                    })
                  });

                  $.each(resp.data[0], function (index, rows) {
                    let row = rows;
                    if ($.isArray(rows) && typeof rows[i] !== typeof undefined) {
                      row = rows[i];
                    }
                    tr.append($('<td>', {
                      html: row
                    }));
                  });

                  tbody.append(tr);
                }
              } else {
                displayWidgetNoDataText(
                  "#element{{ $widget->id }}",
                  {{ $widget->use_no_data_text }},
                  "{{ $widget->no_data_text }}"
                );
              }
            } else {
              displayWidgetNoDataText(
                "#element{{ $widget->id }}",
                {{ $widget->use_no_data_text }},
                "{{ $widget->no_data_text }}"
              );
            }
            @else
            $.each(resp.data, function (i, rows) {
              var tr = $('<tr>', {
                class: 'odd',
                html: $('<td>', {
                  html: (i + 1)
                })
              });

              $.each(rows, function (j, value) {
                var singleValue = value;

                if (
                  $.isArray(value)
                  &&
                  typeof value[0] !== typeof undefined
                ) {
                  singleValue = value[0];
                }

                tr.append($('<td>', {
                  html: singleValue
                }));
              });

              tbody.append(tr);
            });
            @endif

            $('#element{{$widget->id}}').html($('<table>', {
              id: 'splunk-table-{{ $widget->id }}',
              class: 'table table-chrome table-striped result-table',
              html: [thead, tbody]
            }));

            $('[data-toggle="tooltip"]').tooltip();
          } else {
            displayWidgetNoDataText(
              "#element{{ $widget->id }}",
              {{ $widget->use_no_data_text }},
              "{{ $widget->no_data_text }}"
            );
          }
        }
      });
    });
  </script>
  @endif
  </script>
  <style>
    .dataTable-container {
      overflow: auto !important;
      width: 100% !important;
      margin-bottom: 15px;
    }

    .dataTable-container::-webkit-scrollbar {
      width: 12px;
    }

    .dataTable-container::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      margin-left: 14px;
    }

    .dataTable-container::-webkit-scrollbar-thumb {
      border: 1px solid #003138;
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
      background-color: #101b22;
    }
  </style>