@php use App\Models\Cases; @endphp
@extends('layouts.main')

@section('title', 'Tactical  Dashboard')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">CISO Dashboard</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">CISO Dashboard</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  @inject('splunk_searches', '\App\Models\SplunkSearches')
  <div class="row">
    <div class="col-md-12 text-right">
      @include('dashboards.ecsm.incl_report_button',['report_name'=>'CISO Report'])
      @include('dashboards.ecsm.incl_docs_button', ['docs'=>\App\Models\SplunkDashboards::getDocuments('CISO')])
    </div>
  </div>
  <div class="row" id="tactical-dashboard">
    <div class="col-md-12">
      <ul class="custom-nav-tabs nav nav-tabs">
        <li class="nav-item">
          <a href="#risk" data-toggle="tab" aria-expanded="false" class="custom-nav-red nav-link ">
            Risk
          </a>
        </li>
        <li class="nav-item">
          <a href="#vulnerability" data-toggle="tab" aria-expanded="true" class="custom-nav-blue nav-link">
            Vulnerability
          </a>
        </li>
        <li class="nav-item">
          <a href="#threats" data-toggle="tab" aria-expanded="false" class="custom-nav-orange nav-link">
            Threats
          </a>
        </li>
        <li class="nav-item">
          <a href="#operational" data-toggle="tab" aria-expanded="false" class="custom-nav-green-pine nav-link">
            Operational
          </a>
        </li>
        <li class="nav-item">
          <a href="#dailybrief" data-toggle="tab" aria-expanded="false" class="custom-nav-green nav-link active">
            Dailybrief
          </a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade " id="risk">
          <div class="row">

            <div class="col-xxl-2 col-md-3 m-t-15">
              <div class="risk-layout">
                <div class="risk-box">
                  <h3>Actual Risk <i class="fa fa-info-circle" data-toggle="tooltip"
                                     title="Actual Risk: is the real-time risk calculated from the aggregation of conditions whereby threats are targeting client’s assets that also have vulnerabilities"></i>
                  </h3>
                  <span class="risk-counter" style="color: #ED1B36;">
                    {!! \App\Widgets\Dashboard\CurrentActualRiskWidget::renderBody() !!}
                  </span>
                </div>
                <div class="risk-box">
                  <h3>Accepted Risk <i class="fa fa-info-circle" data-toggle="tooltip"
                                       title="Risk Tolerance: is derived from the answers to the questions during Setup under RISK Tolerance. These questions are mapped to threats, vulnerabilities, and assets and therefore to SKYWATCH services"></i>
                  </h3>
                  <span class="risk-counter" style="color: #E85E28;">
                    {!! \App\Widgets\Dashboard\CurrentAcceptedRiskWidget::renderBody() !!}
                  </span>
                </div>
                <div class="risk-box">
                  <h3>Confidence <i class="fa fa-info-circle" data-toggle="tooltip"
                                    title="Risk Confidence: is the adjustment of Actual Risk based on the quantity and quality of cybersecurity information. The more information we have the higher the confidence in the value of Risk"></i>
                  </h3>
                  <span class="risk-counter" style="color: #FFD035;">
                     {!! \App\Models\ServiceGroup::getRiskConfidence() !!}
                  </span>
                </div>
              </div>
            </div>

            <div class="col-xxl-10 col-md-9 m-t-15">
              <div class="top-graph-wrapper mss-risk-graph">
                <div class="graph-wrap">
                  <div class="history-header">
                    <div class="title">{{ \App\Widgets\Dashboard\OverallAcceptedRiskLevelWidget::renderTitle() }}</div>
                    <div class="history-btn-wrap">
                      <a href="#" class="history-btn active" data-info="month"><span class="h-wrap">Months</span></a>
                    </div>
                  </div>
                  {!! \App\Widgets\Dashboard\OverallAcceptedRiskLevelWidget::renderBody() !!}
                </div>
              </div>
            </div>

            <div class="col-xl-6 m-t-15">
              <div class="portlet force-background">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(529) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet529" class="panel-collapse collapse show not-scroll-overflow">
                  <div class="portlet-body">
                    <div id="element529" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([529], $from, $to) !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="tab-pane fade" id="vulnerability">
          <div class="row">

            <div class="col-xl-6 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(179) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet179" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element179" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([179], $from, $to) !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(520) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet520" class="panel-collapse collapse show not-scroll-overflow">
                  <div class="portlet-body">
                    <div id="element520" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([520], $from, $to) !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xl-3 m-t-15">
              <div class="portlet image-bg-blue" style="">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(528) }}</h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet528" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element528">
                      <div>
                        {!! $splunk_searches::getCodeArray([528], $from, $to) !!}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="tab-pane fade" id="threats">
          <div class="row">
            <div class="col-xl-12 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(515) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet515" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element515" style="margin-bottom: 20px;"
                         class="choropleth-map leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom">
                      <div>{!! $splunk_searches::getCodeArray([515], $from, $to) !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(518) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet518" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element518" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([518], $from, $to) !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xl-6 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(523) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet523" class="panel-collapse collapse show not-scroll-overflow">
                  <div class="portlet-body">
                    <div id="element523" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([523], $from, $to) !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xl-6 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(521) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet521" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element521" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([521], '-6mon@mon', 'now') !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(522) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet522" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element522" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([522], '-6mon@mon', 'now') !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xl-6 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(524) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet524" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element524" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([524], $from, $to) !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xl-6 m-t-15">
              <div class="portlet image-bg-blue">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">
                    {{ $splunk_searches::getNameForId(530) }}
                  </h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet530" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element530" class="ct-chart ct-golden-section">
                      <div>{!! $splunk_searches::getCodeArray([530], $from, $to) !!}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="tab-pane fade" id="operational">
          <div class="row">
            <div class="col-md-6">
              <div class="widget-box widget-table mb-20">
                <div class="custom-widget">
                  <h3>Total Number of Cases</h3>
                  <div style="width: 100%; overflow: hidden">
                    <table class="table table-chrome table-striped result-table">
                      <tbody>
                      <tr>
                        <td>Open</td>
                        <td>{{ Cases::countByStatus([Cases::STATUS_OPEN]) }}</td>
                      </tr>
                      <tr>
                        <td>Answered</td>
                        <td>{{ Cases::countByStatus([Cases::STATUS_INFORMATIVE, Cases::STATUS_SUSPENDED]) }}</td>
                      </tr>
                      <tr>
                        <td>Closed</td>
                        <td>{{ Cases::countByStatus([Cases::STATUS_CLOSED]) }}</td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-6">  <!--  Notable events   -->
              <div class="widget-box widget-table mb-20 ">
                <p class="head" style="">Notable Events</p>
                <div class="tbl-head">
                  <p>Notable Event Type</p>
                  <p>How Many #</p>
                </div>
                <ul style="flex-direction: column !important; padding-bottom: 20px">
                  @forelse($notableTypes as $type => $qty)
                    <li>
                      <p title="{{ $type }}">{!! $type !!}</p>
                      <span>{{ $qty }}</span>
                    </li>
                  @empty
                    <li>
                      <p>n/a</p>
                    </li>
                  @endforelse
                </ul>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <div class="widget-box widget-table mb-20">
                @include('dashboards.services.incl_remediation_by_stage')
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="widget-box widget-table mb-20">
                <div class="custom-widget">
                  <h3>Vulnerabilities Resolved Over Time</h3>
                  <div style="width: 100%; overflow: hidden">
                    <div id="vulnerabilitiesResolved" class="ct-chart ct-golden-section"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="widget-box widget-table mb-20">
                <div class="custom-widget">
                  <h3>Vulnerabilities: Average Time to Resolve</h3>
                  <div style="width: 100%; overflow: hidden">
                    <div id="vulnerabilitiesAverageResolve" class="ct-chart ct-golden-section"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="widget-box widget-table mb-20">
                @include('dashboards.services.incl_Operational_Metrics_per_Queue')
              </div>
            </div>

            <div class="col-md-6">
              <div class="widget-box widget-table mb-20">
                <div class="custom-widget">
                  <h3>Monthly Average Time per Department</h3>
                  <div style="width: 100%; overflow: hidden">
                    <div id="averageTimeToRespondResolveCases" class="ct-chart ct-golden-section"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <form class="form form_rage" id="riskFilterForm">
                {{ csrf_field() }}
                <div class="form-body">
                  <div class="row">
                    <div class="col-md-3">
                      <div class="form-group">
                        @php
                          $periods=session('accountId')===2?\App\PeriodFilter::getAcme():\App\PeriodFilter::get();
                        @endphp
                        <select class="standards_id_input form-control" name="timerange">
                          <option value="all_time">All time</option>
                          @foreach($periods as $item)
                            <option value="{{ $item->from }}"
                            >{{ $item->name }}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-group">
                        <select class="standards_id_input form-control" name="case_type_id">
                          @foreach($groupedStages as $stage)
                            <option value="{{ $stage->case_type_id }}"
                            >{{ $stage->group }}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="col-md-40 flex-self-align-bottom">
                      <div class="form-actions">
                        <button type="button" class="btn btn-danger btn-custom waves-effect w-md waves-light m-b-5"
                                href="{{ url('/') }}">
                          <i class="mdi mdi-cancel"></i> Cancel
                        </button>
                        <button type="submit" class="btn btn-success btn-custom waves-effect w-md waves-light m-b-5">
                          <i class=" mdi mdi-check-circle"></i> Apply
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <div class="col-md-6">
              <div class="widget-box widget-table mb-20 ">
                <p class="head" style="">Average Time to Remediate</p>
                <div class="tbl-head">
                  <p>Stages</p>
                  <p>How Many #</p>
                </div>
                <ul style="flex-direction: column !important; padding-bottom: 38px" id="average-time-list">
                  @php
                    $lastStage = $stages->last();
                  @endphp

                  @php
                    function formatSecondsBlade($seconds) {
                        $seconds = (int)$seconds;
                        $d = floor($seconds / 86400);
                        $seconds %= 86400;
                        $h = floor($seconds / 3600);
                        $seconds %= 3600;
                        $m = floor($seconds / 60);
                        $s = $seconds % 60;
                        return "{$d}d {$h}h {$m}m {$s}s";
                    }
                  @endphp
                  @forelse($stages as $stage)
                    <li>
                      @if($stage->id !== $lastStage->id)
                        <p title="{{ $stage->name }}">{!! $stage->name !!}</p>
                        <span>{{ formatSecondsBlade($averageTimeRemediatePerStage->get($stage->id)) }}</span>
                      @endif
                    </li>
                  @empty
                    <li>
                      <p>n/a</p>
                    </li>
                  @endforelse
                </ul>
              </div>
            </div>

            <div class="col-md-6">
              <div class="widget-box widget-table mb-20 ">
                <p class="head" style="">Workload</p>
                <div class="tbl-head">
                  <p>Stages</p>
                  <p>How Many #</p>
                </div>
                <ul style="flex-direction: column !important; padding-bottom: 20px" id="workload-list">
                  @forelse($stages as $stage)
                    <li>
                      <p title="{{ $stage->name }}">{!! $stage->name !!}</p>
                      <span>{{ $countCasesPerStage->get($stage->id) ?? 0 }}</span>
                    </li>
                  @empty
                    <li>
                      <p>n/a</p>
                    </li>
                  @endforelse
                </ul>
              </div>
            </div>
          </div>


          {{-- весь блок скрыть #40417 --}}
          {{--<div class="row">
              <div class="col-md-6">
                  <div class="widget-box widget-table mb-20">
                      @include('dashboards.services.incl_Operational_Metrics_per_Department')
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="widget-box widget-table mb-20">
                      @include('dashboards.services.incl_vulnerabilities_resolved')
                  </div>
              </div>
          </div>--}}


        </div>

        <div class="tab-pane fade show active" id="dailybrief">

          <div class="row custom-widget-block">
            <div class="col-xl-3 m-t-15">
              <div class="portlet force-background">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">Active High-Severity Items</h3>
                  <div class="clearfix"></div>
                </div>
                <div class="panel-collapse collapse show">
                  <div class="portlet-body text-center">
                    @php
                      $openCaseCountStatistic = $caseAccountStatistic->open_cases_count ?? 0;

                        if($countOpenMssIntCases-$openCaseCountStatistic > 0){
                          $class = 'red-color';
                          $arrow = '&uarr;';
                        } elseif ($countOpenMssIntCases-$openCaseCountStatistic < 0) {
                          $class = 'green-color';
                          $arrow = '&darr;';
                        } else {
                          $class = 'grey-color';
                          $arrow = '';
                        }
                    @endphp
                    <a
                      href="{{route('cases.index', ['status' => [Cases::STATUS_INFORMATIVE, Cases::STATUS_OPEN, Cases::STATUS_SUSPENDED], 'priority' => [Cases::PRIORITY_HIGH, Cases::PRIORITY_CRITICAL], 'serviceIds' => [$serviceId]])}}">

                      <div class="value">
                        {{$countOpenMssIntCases}}
                      </div>
                      <div class="trend {{$class}}">
                      <span>
                        {{$arrow}}
                        {{ ($countOpenMssIntCases - $openCaseCountStatistic) > 0 ? '+' : '' }}{{$countOpenMssIntCases - $openCaseCountStatistic}}
                      </span>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 m-t-15">
              <div class="portlet force-background">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">Executive Action Required</h3>
                  <div class="clearfix"></div>
                </div>
                <div class="panel-collapse collapse show">
                  <div class="portlet-body text-center">
                    @if(!empty($executiveActionRequiredCaseIds))
                      <a
                        href="{{route('cases.index', ['case_ids' => implode(', ', $executiveActionRequiredCaseIds)])}}">
                        <div>
                          <span class="text-danger value">&#9650;</span>

                          <div>
                            {{ count($executiveActionRequiredCaseIds) }}
                            {{ count($executiveActionRequiredCaseIds) === 1 ? 'item' : 'items' }}
                            pending executive awareness or decision
                          </div>
                        </div>
                      </a>
                    @else
                      <span class="text-success value">&#10003;</span>
                      <div>
                        No executive action required today
                      </div>
                    @endif
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xl-3 m-t-15">
              <div class="portlet force-background">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(680) }}</h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet680" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element680">
                      <div>
                        {!! $splunk_searches::getCodeArray([680], $from, $to) !!}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 m-t-15">
              <div class="portlet force-background">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(681) }}</h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet681" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element681">
                      <div>
                        {!! $splunk_searches::getCodeArray([681], $from, $to) !!}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row custom-widget-block">
            <div class="col-xl-12 m-t-15">
              <div class="portlet force-background">
                <div class="portlet-heading">
                  <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(682) }}</h3>
                  <div class="clearfix"></div>
                </div>
                <div id="portlet682" class="panel-collapse collapse show">
                  <div class="portlet-body">
                    <div id="element682">
                      <div>
                        {!! $splunk_searches::getCodeArray([682], $from, $to) !!}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-md-12 data-table-padding">
              @include('cases.table')
              @include('cases.js.case-table-script')
            </div>
          </div>

          <div class="card-box bg-card">
            <div class="box-body" style="">
              {!! Form::open(['url' => ['MSS-INT'], 'method' => 'get','autocomplete'=>'off']) !!}
              @include('news.filter')
              {!! Form::close() !!}
            </div>
          </div>
          <div class="row">
            @include('news.table')
          </div>

          <div class="row">
            <div class="col-sm-12">
              @if($news->total() >= $news->perPage())
                {{ $news->links() }}
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  @include('widgets.bottom_time_information')

  <div class="row">
    @include('dashboards.ecsm.news_top')
  </div>
@endsection

@section('scripts')
  <script type="text/javascript">
    $(function () {
      $('#tactical-dashboard .nav-link').click(function (e) {
        e.preventDefault();

        $('#tactical-dashboard').find('.nav-link').removeClass('active');
        $('#tactical-dashboard').find('.tab-pane').removeClass('show active');
        $(this).addClass('active');
        $($(this).attr('href')).addClass('show active');

        window.dispatchEvent(new Event('resize'));
      });
    });
  </script>
  <script type="text/javascript">
    var myTable = document.querySelector('#cases-table');
    var dataTable = new DataTable(myTable, {perPageSelect: [5, 15, 25, 50, 100], perPage: 15,});
  </script>

  <script>
    document.getElementById('riskFilterForm').addEventListener('submit', function (e) {
      e.preventDefault();

      const form = this;
      const formData = new FormData(form);

      fetch('{{ route("tactical-dashboard.filter") }}', {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}',
          'Accept': 'application/json',
        },
        body: formData
      })
        .then(res => res.json())
        .then(data => {
          renderAverageTime(data.stages, data.averageTimeRemediatePerStage);
          renderWorkload(data.stages, data.countCasesPerStage);
        })
        .catch(err => {
          console.error(err);
        });
    });

    function renderAverageTime(stages, avgMap) {
      const ul = document.getElementById('average-time-list');
      ul.innerHTML = '';

      if (!stages.length) {
        ul.innerHTML = '<li><p>n/a</p></li>';
        return;
      }

      const lastStageId = stages[stages.length - 1].id;

      stages.forEach(stage => {
        if (stage.id === lastStageId) return;

        const seconds = avgMap?.[stage.id] ?? 0;

        ul.innerHTML += `
            <li>
                <p title="${stage.name}">${stage.name}</p>
                <span>${formatSeconds(seconds)}</span>
            </li>
        `;
      });
    }

    function formatSeconds(seconds) {
      seconds = Math.round(Number(seconds) || 0);
      const d = Math.floor(seconds / 86400);
      seconds %= 86400;
      const h = Math.floor(seconds / 3600);
      seconds %= 3600;
      const m = Math.floor(seconds / 60);
      const s = seconds % 60;

      return `${d}d ${h}h ${m}m ${s}s`;
    }

    function renderWorkload(stages, countMap) {
      const ul = document.getElementById('workload-list');
      ul.innerHTML = '';

      if (!stages.length) {
        ul.innerHTML = '<li><p>n/a</p></li>';
        return;
      }

      stages.forEach(stage => {
        ul.innerHTML += `
            <li>
                <p title="${stage.name}">${stage.name}</p>
                <span>${countMap[stage.id] ?? 0}</span>
            </li>
        `;
      });
    }


  </script>


  <script type="text/javascript">
    /* Monthly Average Time per Department (Queue) */
    new Chartist.Line('#averageTimeToRespondResolveCases', {
      labels: {!! json_encode($averageTimeToRespondResolveCases['chartLabels']) !!},
      series: {!! json_encode($averageTimeToRespondResolveCases['chartData']) !!}
    }, {
      chartPadding: {
        top: 70,
        right: 0,
        bottom: 20,
        left: 0
      },
      plugins: [
        Chartist.plugins.tooltip(),
        Chartist.plugins.legend(),
        Chartist.plugins.ctAxisTitle({
          axisX: {
            axisTitle: 'Months',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 40
            },
            textAnchor: 'middle'
          },
          axisY: {
            onlyInteger: false,
            axisTitle: 'Hours',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 0
            },
            textAnchor: 'middle',
            flipTitle: false
          }
        })
      ]
    });

    /* Vulnerabilities Resolved Over Time */
    new Chartist.Line('#vulnerabilitiesResolved', {
      labels: {!! json_encode($vulnerabilitiesResolved['chartLabels']) !!},
      series: {!! json_encode($vulnerabilitiesResolved['chartData']) !!}
    }, {
      chartPadding: {
        top: 70,
        right: 0,
        bottom: 20,
        left: 0
      },
      plugins: [
        Chartist.plugins.tooltip(),
        Chartist.plugins.legend(),
        Chartist.plugins.ctAxisTitle({
          axisX: {
            axisTitle: 'Months',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 40
            },
            textAnchor: 'middle'
          },
          axisY: {
            onlyInteger: false,
            axisTitle: 'Cases',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 0
            },
            textAnchor: 'middle',
            flipTitle: false
          }
        })
      ]
    });

    /* Vulnerabilities: Average Time to Resolve */
    new Chartist.Line('#vulnerabilitiesAverageResolve', {
      labels: {!! json_encode($vAvgResolve['chartLabels']) !!},
      series: {!! json_encode($vAvgResolve['chartData']) !!}
    }, {
      chartPadding: {
        top: 70,
        right: 0,
        bottom: 20,
        left: 0
      },
      plugins: [
        Chartist.plugins.tooltip(),
        Chartist.plugins.legend(),
        Chartist.plugins.ctAxisTitle({
          axisX: {
            axisTitle: 'Months',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 40
            },
            textAnchor: 'middle'
          },
          axisY: {
            onlyInteger: false,
            axisTitle: 'Hours',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 0
            },
            textAnchor: 'middle',
            flipTitle: false
          }
        })
      ]
    });
  </script>

@endsection



@section('splunk')
  {{--  @if(!$splunkhostip)
      <script type="text/javascript">
        $('.portlet-body>div').html('<span class="info_big">N/A</span>');
      </script>
    @endif--}}
@endsection
@section('top_scripts')
  <link rel="stylesheet" href="{{ asset('theme/assets/css/risk.css') }}">
  <style>
    .dataTable-wrapper .dataTable-bottom {
      bottom: -40px;
    }

    .widget-box ul {
      flex-direction: row !important;
    }

    .custom-widget-block .value {
      color: white;
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .custom-widget-block .trend {
      font-size: 20px;
    }

    .custom-widget-block .trend span {
      font-size: 20px;
      padding: 2px 20px;
      border: 1px solid;
      border-radius: 10px;
    }

    .custom-widget-block .red-color span {
      color: red;
      border-color: red;
      background-color: rgba(255, 0, 0, 0.2);
    }

    .custom-widget-block .green-color span {
      color: green;
      border-color: green;
      background-color: rgba(0, 128, 0, 0.2);
    }


    .custom-widget-block .grey-color span {
      color: grey;
      border-color: grey;
      background-color: rgba(128, 128, 128, 0.2);
    }
  </style>
@endsection