@extends('layouts.walls')
@inject('splunk_searches', '\App\Models\SplunkSearches')
@section('content')
  <div class="logout-float">
    <span class="wall-title">{{ \App\Models\SkywatchWall::$walls[$wall] }}</span>
    <a href="{{ route('wallLogout') }}" class="btn btn-sm btn-outline-secondary">Logout</a>
    <a href="{{ route('wallLogout',['toSkywatch'=>true]) }}" class="btn btn-sm btn-outline-secondary">Logout and Back to Skywatch</a>
  </div>
  <div class="card-box control-panel-box radar_lazy">
    <div class="visual_t">
      {!! \App\Models\RadarSearches::getCodeArray([],'-30d@d','now') !!}
    </div>
    <div class="visual_t">
      <!--      <script type="text/lazyload">-->
      <script>
        function getSvgSizes(element) {
          return {
            width: element.getAttribute('width') || element.getAttribute('viewBox').split(' ')[2],
            height: element.getAttribute('height') || element.getAttribute('viewBox').split(' ')[3]
          }
        }

        //  console.log('sss');
        function setRadarCenterVal(val) {
          var svgns = 'http://www.w3.org/2000/svg',
            text = document.getElementById('center-radar-val') || document.createElementNS(svgns, 'text'),
            radar = document.getElementById('svg-radar'),
            radarWidth = getSvgSizes(radar).width,
            radarHeight = getSvgSizes(radar).height,
            textNode = document.createTextNode(val);
          if (text.textContent.length > 0) text.textContent = val
          else {
            text.setAttributeNS(null, 'font-size', '32');
            text.setAttributeNS(null, 'font-weight', '700');

            text.setAttributeNS(null, 'line-height', '1');
            $(text).attr('class', 'remove_tt');
            text.setAttributeNS(null, 'fill', '#00b1dd');
            text.setAttributeNS(null, 'id', 'center-radar-val');
            text.appendChild(textNode);
            radar.appendChild(text);
          }

          var posX = (radarWidth / 2) - (text.getBBox().width / 2),
            posY = (radarHeight / 2) + (text.getBBox().height / 4);
          text.setAttributeNS(null, "x", posX);
          text.setAttributeNS(null, "y", posY);
        }

        function getRndInteger(min, max) {
          return Math.floor(Math.random() * (max - min)) + min;
        }

        function setNetwork(value, color, cls = '') {
          var network_y = getRndInteger(100, 195);
          var network_x = getRndInteger((180 + (network_y * 0.2)), (370 - (network_y * 0.2)));
          addRadarPoint(value, network_x, network_y, color, cls);
        }


        function setProcess(value, color, cls = '') {
          var network_y = getRndInteger(170, 280);
          var network_x = getRndInteger((370 + (network_y * 0.2)), (410 - (network_y * 0.2)));
          addRadarPoint(value, network_x, network_y, color, cls);
        }

        function setFiles(value, color, cls = '') {
          var network_y = getRndInteger(320, 400);
          var network_x = getRndInteger((315 + (network_y * 0.2)), (400 - (network_y * 0.2)));
          addRadarPoint(value, network_x, network_y, color, cls);
        }

        function setUsers(value, color, cls = '') {
          var network_y = getRndInteger(355, 425);
          var network_x = getRndInteger((180 + (network_y * 0.2)), (250 - (network_y * 0.2)));
          addRadarPoint(value, network_x, network_y, color, cls);
        }

        function setPer(value, color, cls = '') {
          var network_y = getRndInteger(180, 280);
          var network_x = getRndInteger((100 + (network_y * 0.2)), (160 - (network_y * 0.2)));
          addRadarPoint(value, network_x, network_y, color, cls);
        }

        function addRadarPoint(val, x, y, color, cls = 'remove_tt') {
          var svgns = 'http://www.w3.org/2000/svg',
            radar = document.getElementById('svg-radar'),
            text = document.createElementNS(svgns, 'text'),
            circleWrap = document.createElementNS(svgns, 'g'),
            circle = document.createElementNS(svgns, 'circle'),
            textNode = document.createTextNode(val);

          text.setAttributeNS(null, 'font-size', '8');
          text.setAttributeNS(null, 'fill', '#fff');
          circle.setAttributeNS(null, 'stroke', 'white');
          $(text).attr('class', cls + ' opacity');
          text.appendChild(textNode);


          circle.setAttributeNS(null, 'r', '11');
          $(circle).attr('class', cls + ' opacity');
          circle.setAttributeNS(null, 'fill', color);
          circle.setAttributeNS(null, "cx", x);
          circle.setAttributeNS(null, "cy", y);

          radar.appendChild(circleWrap);
          circleWrap.appendChild(circle);
          circleWrap.appendChild(text);

          text.setAttributeNS(null, "x", (x - (text.getBBox().width / 2)));
          text.setAttributeNS(null, "y", (y + (text.getBBox().height / 4)));

        }

        setRadarCenterVal(0);
      </script>
      <!--      </script>-->
    </div>
    <div class="row">

      {{-- VALIDATION OF COUNTERMEASURES --}}
      <div class="col-md-4">

        <div class="portlet radar-portlet-left widget-box" style="height: unset; padding:0 0 10px 0">
          <div class="portlet-heading text-center">
            <p class=" text-dark" style="color: #FFFF; font-size: 12px; margin: 0; text-transform: uppercase">
              {{ $splunk_searches::getNameForId(525) }}</p>
            <div class="clearfix"></div>
          </div>
          <div class="portlet-body" style="font-size: 14px !important; width: 100%" id="portlet525">
            <div id="element525" class="ct-chart ct-golden-section">
              <div class="lz">
                {!! $splunk_searches::getCodeArray([525]) !!}
              </div>
            </div>
          </div>
        </div>
        <style>
          #element525 thead {
            display: none
          }

          #portlet525 .ct-chart.ct-golden-section.splunk-view.splunk-table {
            max-height: 400px;
            min-height: 400px;
          }
        </style>

        <div class="widget-box-data numbers">
          <div class="numbers-wrapper">
            <p class="widget-title">{{ $splunk_searches::getNameForId(500) }}</p>
            <div class="lz">
              {!! $splunk_searches::getCodeArray([500]) !!}
            </div>
            <div class="hidden" data-arr="dc_user_" style="display:none;" id="element500"></div>
            <div class="data-group">
              <div class="widget-data">
                <span class="splunk-message-container dc_user_">n/a</span>
              </div>
            </div>
          </div>
          <div class="numbers-wrapper">
            <p class="widget-title">{{ $splunk_searches::getNameForId(501) }}</p>
            <div class="lz">
              {!! $splunk_searches::getCodeArray([501]) !!}
            </div>
            <div class="hidden" data-arr="count" style="display:none;" id="element501"></div>
            <div class="data-group">
              <div class="widget-data">
                <span class="splunk-message-container count">n/a</span>
              </div>
            </div>
          </div>
        </div>
        <div class="widget-box-data numbers">
          <div class="numbers-wrapper">
            <p class="widget-title">{{ $splunk_searches::getNameForId(526) }}</p>
            <div class="lz">
              {!! $splunk_searches::getCodeArray([526]) !!}
            </div>
            <div class="hidden" data-arr="count" style="display:none;" id="element526"></div>
            <div class="data-group">
              <div class="widget-data">
                <span class="splunk-message-container count">n/a</span>
              </div>
            </div>
          </div>
        </div>

      </div>

      {{-- radar --}}
      <div class="col-md-4">
        <div class="diagrams-block">
          @include('dashboards.ecsm.__radar_svg')
        </div>
        <div id="tbl">
          <div class="top_l_info">
            <ul>
              <li>Client</li>
              <li>Service</li>
              <li>Radar Sector</li>
              <li>Severity</li>
              <li>Risk Level</li>
            </ul>
          </div>
          <div class="content_scroll_radar">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
      {{-- nubmers ... --}}
      <div class="col-md-4">
        <div class="widget-box-data">
          <p class="widget-title">{{ $splunk_searches::getNameForId(497) }}</p>
          <div class="lz">
            {!! $splunk_searches::getCodeArray([497],'-30d@d','now') !!}
          </div>

          <div class="hidden" data-arr="MSS-UTM,MSS-DDOS,MSS-DLP,MSS-EDR,MSS-WAF,MSS-BOT" style="display:none;"
               id="element497"></div>
          <div class="data-group">
            <div class="widget-data">
              <p>MSS-UTM</p>
              <span class="splunk-message-container MSS-UTM">n/a</span>
            </div>
            <div class="widget-data">
              <p>MSS-DDOS</p>
              <span class="splunk-message-container MSS-DDOS">n/a</span>
            </div>
            <div class="widget-data">
              <p>MSS-EDR</p>
              <span class="splunk-message-container MSS-EDR">n/a</span>
            </div>
            <div class="widget-data">
              <p>MSS-DLP</p>
              <span class="splunk-message-container MSS-DLP">n/a</span>
            </div>
            <div class="widget-data">
              <p>MSS-WAF</p>
              <span class="splunk-message-container MSS-WAF">n/a</span>
            </div>
            <div class="widget-data">
              <p>MSS-BOT</p>
              <span class="splunk-message-container MSS-BOT">n/a</span>
            </div>
          </div>
        </div>
        <div class="widget-box-data">
          <p class="widget-title">{{ $splunk_searches::getNameForId(499) }}</p>
          <div class="lz">
            {!! $splunk_searches::getCodeArray([499],'-30d@d','now') !!}
          </div>
          <div class="hidden" data-arr="critical,high,medium,low" style="display:none;" id="element499"></div>

          <div class="data-group column">
            <div class="widget-data">
              <p>Critical</p>
              <span class="splunk-message-container critical">n/a</span>
            </div>
            <div class="widget-data">
              <p>High</p>
              <span class="splunk-message-container high">n/a</span>
            </div>
            <div class="widget-data">
              <p>Medium</p>
              <span class="splunk-message-container medium">n/a</span>
            </div>
            <div class="widget-data">
              <p>Low</p>
              <span class="splunk-message-container low">n/a</span>
            </div>
          </div>
        </div>
        <div class="widget-box-data">
          <p class="widget-title">{{ $splunk_searches::getNameForId(498) }}</p>
          <div class="lz">
            {!! $splunk_searches::getCodeArray([498],'-30d@d','now') !!}
          </div>
          <div class="hidden" data-arr="Vulnerable_Hosts,Total_Hosts_Discovered,Baselined_Hosts" style="display:none;"
               id="element498"></div>

          <div class="data-group solid">
            <div class="widget-data">
              <p>Discovered</p>
              <span class="splunk-message-container Total_Hosts_Discovered">n/a</span>
            </div>
            <div class="widget-data">
              <p>Baselined</p>
              <span class="splunk-message-container Baselined_Hosts">n/a</span>
            </div>
            <div class="widget-data">
              <p>Vulnerable</p>
              <span class="splunk-message-container Vulnerable_Hosts">n/a</span>
            </div>
          </div>
        </div>

        <div class="widget-box-data numbers">
          <div class="numbers-wrapper">
            <p class="widget-title">{{ $splunk_searches::getNameForId(484) }}</p>
            <div class="lz">
              {!! $splunk_searches::getCodeArray([484]) !!}
            </div>
            <div class="hidden" data-arr="count" style="display:none;" id="element484"></div>
            <div class="data-group">
              <div class="widget-data">
                <span class="splunk-message-container count">n/a</span>
              </div>
            </div>
          </div>
          <div class="numbers-wrapper">
            <p class="widget-title">{{ $splunk_searches::getNameForId(485) }}</p>
            <div class="lz">
              {!! $splunk_searches::getCodeArray([485]) !!}
            </div>
            <div class="hidden" data-arr="count" style="display:none;" id="element485"></div>
            <div class="data-group">
              <div class="widget-data">
                <span class="splunk-message-container count">n/a</span>
              </div>
            </div>
          </div>
        </div>
        <div class="widget-box-data numbers">
          <div class="numbers-wrapper" style="margin-left: 50%;">
            <p class="widget-title">{{ $splunk_searches::getNameForId(486) }}</p>
            <div class="lz">
              {!! $splunk_searches::getCodeArray([486]) !!}
            </div>
            <div class="hidden" data-arr="count" style="display:none;" id="element486"></div>
            <div class="data-group">
              <div class="widget-data">
                <span class="splunk-message-container count">n/a</span>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>

  </div>

@endsection