@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   or $widget->id == 648)
        @include('code_generator.includes.w335')
    @elseif ($widget->id == 516 or $widget->id == 517)
        @include('code_generator.includes.w516-517')
    @elseif ($widget->id == 381 )
        @include('code_generator.includes.w381')
    @elseif ($widget->id == 520 or $widget->id == 523 or $widget->id == 525 or $widget->id == 529  or $widget->id == 532  or $widget->id == 535)
        @include('code_generator.includes.w520')
    @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>