@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 active">
                        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>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active" 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>

                {{-- Operational Tab --}}
                <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>{{ \App\Models\Cases::countByStatus([\App\Models\Cases::STATUS_OPEN]) }}</td>
                                            </tr>
                                            <tr>
                                                <td>Answered</td>
                                                <td>{{ \App\Models\Cases::countByStatus([\App\Models\Cases::STATUS_INFORMATIVE, \App\Models\Cases::STATUS_SUSPENDED]) }}</td>
                                            </tr>
                                            <tr>
                                                <td>Closed</td>
                                                <td>{{ \App\Models\Cases::countByStatus([\App\Models\Cases::STATUS_CLOSED]) }}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </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">  <!--  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">
                                    @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-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>

                    {{-- весь блок скрыть #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>
        </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 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>
    <style>
        .widget-box ul {
            flex-direction: row !important;
        }
    </style>
@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') }}">
@endsection