@if($rows)
  <div class="mt-4" data-whitelist="{{ json_encode($vulnerabilityWhitelist) }}" id="drilldownblock">
    <div class="risk">
      <!-- в цього блока нова шапка -->
      <div class="risk-table__tittle">
        <h2>Risk</h2>
        <div class="risk-table__tittle-info">
          <div class="risk-table__tittle-info__details">
            <p>Severity:</p>
            <p>{{ $rows[4] }}</p>
          </div>
          <div class="risk-table__tittle-info__details">
            @php
              $hostRisk = $riskLevels[strtolower($rows[7])] ?? 0;
              $risk = round($xValue * $hostRisk, 2);
            @endphp
            <p>Weight:</p>
            <p class="weight">{{ $risk }}%</p>
            <span class="description">The Risk Weight is the impact that this Risk condition has on the overall Risk of the organization.</span>
          </div>
        </div>
      </div>
      <!-- Цей блок з двома таблицями можна лишити як було, лиш додати пару класів до попередніх щоб стилізувати по новому -->
      <!-- На блок обгортку з класом "col-12" додався клас "risk-table__wrap" -->
      <div class="col-12 risk-table__wrap">
        <!-- на блок "row" додався клас "risk-table__row" -->
        <div class="row risk-table__row">
          <div class="col-lg-6 panel-collapse collapse show w-100" style="margin-bottom: 20px">
            <h4 style="color: #08a3dd">
              Vulnerabilities
            </h4>
            <!-- на блок "splunk-table" додався клас "risk-table" -->
            <div class="risk-table splunk-table"
                 style="max-height: 500px; overflow-y: auto; overflow-x: hidden; background-color: #0b0e1b; padding: 5px">
              <div class=" dataTable-loading no-footer sortable searchable fixed-columns">

                <div class=" dataTable-loading no-footer sortable searchable fixed-columns">

                  <div class="w-100">
                    <table id="splunk-table-381" class="table table-chrome table-striped result-table"
                           style="background-color: unset; font-size: small;">
                      <thead>
                      <tr>
                        <th style="color: #08a3dd">CVE</th>
                        <th style="color: #08a3dd">Severity</th>
                        <th style="color: #08a3dd">Criticality</th>
                        <th style="color: #08a3dd">Type</th>
                        <th></th>
                      </tr>
                      </thead>
                      <tbody class="js-vulnerability-body">
                      <tr class="odd">
                        <td colspan="6">
                          <div class="text-center">Loading...</div>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <div class="col-lg-6 panel-collapse collapse show w-100">
            <h4 style="color: #9e63ff">Threats</h4>
            <!-- на блок "splunk-table" додався клас "risk-table" і "purple" -->
            <div class="risk-table purple splunk-table"
                 style="max-height: 500px; overflow-y: auto; overflow-x: hidden; background-color: #0b0e1b; padding: 5px">
              <div class="dataTable-loading no-footer sortable searchable fixed-columns">
                <div class="w-100">
                  <table id="splunk-table-381" class="table table-chrome table-striped result-table"
                         style="background-color: unset; font-size: small;">
                    <thead>
                    <tr>
                      <th data-sortable="" style="width: 12.3229%; color: #9e63ff">
                        Service
                      </th>
                      <th data-sortable="" style="width: 12.3229%; color: #9e63ff">
                        Type
                      </th>
                      <th data-sortable="" style="width: 12.3229%; color: #9e63ff">
                        Severity
                      </th>
                      <th data-sortable="" style="width: 12.3229%; color: #9e63ff">
                      </th>
                    </tr>
                    </thead>
                    <tbody class="js-threats-body">
                    <tr class="odd">
                      <td colspan="4">
                        <div class="text-center">Loading...</div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <script>
    $(document).ready(function () {

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

      const modal = document.getElementById('drilldownblock');
      const ip = @php echo json_encode($asset->ip_address); @endphp;
      const hostname = @php echo json_encode($asset->host); @endphp;
      let vulnerabilities;
      let threats;
      let threatsLabel;

      $.ajax({
        url: '/get-vulnerabilites',
        data: {
          '_token': tk,
          'ip': ip,
          'from': "-90d@d",
          'to': "now",
        },
        type: "post",
        dataType: "json",
        success: function (resp) {
          vulnerabilities = resp.data

          $.ajax({
            url: '/get-threats',
            data: {
              '_token': tk,
              'ip': ip,
              'from': "-90d@d",
              'to': "now",
            },
            type: "post",
            dataType: "json",
            success: function (resp) {
              threats = resp.data ?? []
              threatsLabel = resp.data_labels

              if (Array.isArray(vulnerabilities) && Array.isArray(threats)) {
                const whitelist = JSON.parse(modal.dataset.whitelist)

                const currentVulnerabilities = vulnerabilities.filter(el => {
                  const vulId = Number(el[el.length - 1])

                  return !whitelist.find(wEl => {
                    const tempHost = hostname === 'Unknown' ? null : hostname

                    return Number(wEl.vulnerability_id) === vulId && wEl.ip === ip && wEl
                      .host === tempHost
                  })
                })
                const currentThreats = threats

                const infoVul = currentVulnerabilities.length > 0 ? currentVulnerabilities
                  .map(el => createRow([
                    el[0],
                    el[1],
                    el[2],
                    el[4],
                    $('<form>', {
                      action: '/cases/predefined-case',
                      class: 'create_vul_case',
                      method: 'POST',
                      html: [
                        $('<div>', {
                          html: [
                            $('<input>', {
                              type: 'hidden',
                              name: 'vulnerability_id',
                              value: el[6]
                            }),

                            /*  */

                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[0][0]',
                              value: 'IP',
                            }),
                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[0][1]',
                              value: ip,
                            }),

                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[1][0]',
                              value: 'Hostname',
                            }),
                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[1][1]',
                              value: hostname ?? 'Unknown',
                            }),

                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[2][0]',
                              value: 'Netbios',
                            }),
                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[2][1]',
                              value: 'n/a',
                            }),

                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[3][0]',
                              value: 'Vulnerability',
                            }),
                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[3][1]',
                              value: el[3],
                            }),

                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[4][0]',
                              value: 'Severity',
                            }),
                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[4][1]',
                              value: el[1],
                            }),

                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[5][0]',
                              value: 'Priority',
                            }),
                            $('<input>', {
                              type: 'hidden',
                              name: 'splunk_results[5][1]',
                              value: el[2],
                            }),

                            $('<input>', {
                              type: 'hidden',
                              name: 'case_config_type',
                              value: 'risk_analytics',
                            }),

                            /*  */

                            $('<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: [
                                    (() => {
                                      /*const existingCase = caseExists(el[3], ip, hostname, el[1])

                                      if (existingCase) {
                                        return $('<li>', {
                                          html: $('<a>', {
                                            class: 'createCaseBtn',
                                            href: `/cases/${existingCase.id}`,
                                            text: 'View'
                                          })
                                        })
                                      }*/

                                      return $('<li>', {
                                        html: $('<a>', {
                                          class: 'createCaseBtn',
                                          href: 'javascript: void(0);',
                                          html: '<i class="ti-briefcase"></i> Create Case'
                                        }),
                                      })
                                    })(),
                                    $('<li>', {
                                      html: $('<a>', {
                                        class: 'addToWhitelistBtn',
                                        href: 'javascript: void(0);',
                                        html: '<i class="ti-layers"></i> WHITELIST',
                                        'data-vulnerability': JSON
                                          .stringify(el)
                                      }),
                                    })
                                  ]
                                })
                              ]
                            }),
                          ]
                        })
                      ]
                    }).prop('outerHTML'),
                  ], {
                    name: el[3],
                    date: el[5]
                  }))
                  .join('') : `<tr><td colspan="5"><div class="text-center">n/a</div></td></tr>`

                document.querySelector('.js-vulnerability-body').innerHTML = infoVul

                const consolidatedThreat = threats.length > 0 ? threats[0][4] : 'n/a'
                let services
                if (consolidatedThreat !== 'n/a') {
                  services = []
                  currentThreats[0].slice(1, -1).forEach((el, i) => {
                    if (el !== 'N / A') {
                      services.push(threatsLabel[i])
                    }
                  })

                  services = services.join(', ')
                } else {
                  services = 'n/a'
                }

                let tempThreats = ''

                let clientActiveServices = @php echo json_encode(auth()->user()->getAllowServices()); @endphp;
                clientActiveServices = clientActiveServices.map(el => el.toUpperCase())
                /* console.log('clientActiveServices', clientActiveServices);
                 console.log('threats from splunk',threats);*/
                threats = threats.filter(
                  el => clientActiveServices.find(clientService => clientService === el[0].toUpperCase())
                )
                /* console.log('threats filtered by service ',threats);*/
                if (threats.length) {
                  for (const threatItem of threats) {

                    tempThreats += `
                        <tr>
                            <td>${threatItem[0]}</td>
                            <td>${threatItem[1]}</td>
                            <td><span style="color: ${({'critical':'#FF3B2D', 'high':'#FF732D', 'medium':'#e5c510', 'low':'#9ADB5A'})[threatItem[2]] || '#000000'};">${threatItem[2]}</span></td>
                            <td>
                              ${$('<form>', {
                      action: '{!! route("cases.showAutomaticPredefinedCaseForm") !!}',
                      class: 'create_vul_case',
                      method: 'POST',
                      html: [
                        $('<input>', {
                          type: 'hidden',
                          name: '_token',
                          value: $('meta[name="csrf-token"]').attr('content')
                        }),
                        $('<input>', {
                          type: 'hidden',
                          name: 'case_config_type',
                          value: 'threats_risk_matrix'
                        }),

                        $('<input>', {
                          type: 'hidden',
                          name: 'splunk_results[0][0]',
                          value: 'Service',
                        }),
                        $('<input>', {
                          type: 'hidden',
                          name: 'splunk_results[0][1]',
                          value: threatItem[0],
                        }),

                        $('<input>', {
                          type: 'hidden',
                          name: 'splunk_results[1][0]',
                          value: 'Severity',
                        }),
                        $('<input>', {
                          type: 'hidden',
                          name: 'splunk_results[1][1]',
                          value: threatItem[2],
                        }),

                        $('<input>', {
                          type: 'hidden',
                          name: 'splunk_results[2][0]',
                          value: 'Type',
                        }),
                        $('<input>', {
                          type: 'hidden',
                          name: 'splunk_results[2][1]',
                          value: threatItem[1],
                        }),

                        $('<input>', {
                          type: 'hidden',
                          name: 'splunk_results[3][0]',
                          value: 'IP',
                        }),
                        $('<input>', {
                          type: 'hidden',
                          name: 'splunk_results[3][1]',
                          value: ip,
                        }),

                        $('<div>', {
                          class: 'dropdown d-flex',
                          html: [
                            $('<button>', {
                              type: 'button',
                              class: 'btn-sm btn-primary dropdown-toggle ml-auto',
                              'data-toggle': 'dropdown',
                              'aria-expanded': false,
                              html: [
                                'Action',
                                '&nbsp;',
                                $('<span>', {
                                  class: 'caret'
                                })
                              ]
                            }),
                            $('<ul>', {
                              class: 'dropdown-menu',
                              html: [
                                (() => {
                                  /*                                  const existingId = getThreat(ip, threatItem[0], threatItem[1], threatItem[2])

                                                                    if (existingId) {
                                                                      return $('<li>', {
                                                                        html: $('<a>', {
                                                                          class: 'createCaseBtn',
                                                                          href: `/cases/${existingId}`,
                                                                          text: 'View'
                                                                        })
                                                                      })
                                                                    }*/

                                  return $('<li>', {
                                    html: $('<a>', {
                                      class: 'createCaseBtn',
                                      href: 'javascript: void(0);',
                                      html: '<i class="ti-briefcase"></i> Create Case'
                                    }),
                                  })
                                })(),
                              ]
                            })
                          ]
                        })
                      ]
                    }).prop('outerHTML')}
                            </td>
                        </tr>`
                  }
                } else {
                  tempThreats = `
                  <tr>
                    <td colspan="4" class="text-center">n/a</td>
                  </tr>`
                }

                document.querySelector('.js-threats-body').innerHTML = tempThreats
              }

              $(function () {
                $('[data-toggle="tooltip"]').tooltip()
              })

              const addToWhitelistButtons = document.querySelectorAll('.addToWhitelistBtn')
              for (const btn of addToWhitelistButtons) {
                btn.addEventListener('click', (e) => {
                  const vulnerabilityRawData = JSON.parse(e.target.dataset.vulnerability)
                  const vulId = vulnerabilityRawData[vulnerabilityRawData.length - 1]
                  const data = {
                    'Hostname': hostname,
                    'IP': ip,
                    'Vulnerability ID': vulId,
                  }

                  $.post("{{ route('addVulnerabilityToWhitelist') }}", {
                    vulnerability: JSON.stringify(data),
                    _token: $('meta[name="csrf-token"]').attr('content'),
                  }).done((data) => {
                    if (data.message !== null) {
                      alert(data.message)
                    }

                    btn.closest('tr').remove()
                    const oldWhitelist = JSON.parse(modal.dataset.whitelist)
                    oldWhitelist.push({
                      'vulnerability_id': vulId,
                      'host': hostname === 'Unknown' ? null : hostname,
                      'ip': ip,
                    })

                    modal.dataset.whitelist = JSON.stringify(oldWhitelist)
                  }).fail(() => {
                    alert('Something went wrong. Please try again');
                  })
                })
              }
            },
          })
        },
      })

      function createRow(values, tooltipText = null) {
        let tooltip = ''
        if (tooltipText) {
          tooltip = `
                <div class="risk-tooltip">
                    <div class="tooltip-icon">
                        <i class="ti-info-alt"></i>
                    </div>
                    <div class="tooltip-content">
                        <div class="tooltip-content__item">
                            <div class="tooltip-content__item-title">Name:</div>
                            <div class="tooltip-content__item-info">
                                ${tooltipText.name}
                            </div>
                        </div>
                        <div class="tooltip-content__item">
                            <div class="tooltip-content__item-title">last seen:</div>
                            <div class="tooltip-content__item-info">
                                ${tooltipText.date}
                            </div>
                        </div>
                    </div>
                </div>`;
        }

        const columns = values.map((el, i) =>
          `<td style="vertical-align: middle;"><span class="d-flex justify-content-between align-items-center">${i === (values.length - 1) ? tooltip : ''} ${el ?? 'n/a'}</span></td>`
        )

        return `
                <tr>
                ${columns.join('')}
                </tr>
                `;
      }

    });
  </script>
  <style>
    .risk-tooltip {
      position: relative;
    }

    .risk-tooltip .tooltip-content {
      left: -250px;
      top: 70px;
    }
  </style>

@else
  <div class="risk">
    <!-- в цього блока нова шапка -->
    <div class="risk-table__tittle">
      <h2>Risk</h2>
      <div style="text-align: center; width: 100%"> N/A</div>
    </div>
  </div>
@endif