@php use App\Models\Cases; @endphp
@inject('splunk_searches', '\App\Models\SplunkSearches')

@include('flash::message')

<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>

<div class="clearfix"></div>

<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">
  <div class="col-md-12 col-xs-12 m-t-15 mb-3">
    <div class="portlet" id="portlet675">
      <div class="portlet-heading">
        <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(675) }}</h3>
        <div class="clearfix"></div>
      </div>

      <div class="panel-collapse collapse show">
        <div class="portlet-body">
          <div id="element675" class="ct-chart ct-golden-section">
            <div>{!! $splunk_searches::getCodeArray([675],$from,$to) !!}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12 m-t-15 mb-3">
    <div class="portlet" id="portlet672">
      <div class="portlet-heading">
        <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(672) }}</h3>
        <div class="clearfix"></div>
      </div>

      <div class="panel-collapse collapse show">
        <div class="portlet-body">
          <div id="element672" class="ct-chart ct-golden-section">
            <div>{!! $splunk_searches::getCodeArray([672],$from,$to) !!}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6 m-t-15 mb-3">
    <div class="portlet" id="portlet673">
      <div class="portlet-heading">
        <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(673) }}</h3>
        <div class="clearfix"></div>
      </div>

      <div class="panel-collapse collapse show">
        <div class="portlet-body">
          <div id="element673" class="ct-chart ct-golden-section">
            <div>{!! $splunk_searches::getCodeArray([673],$from,$to) !!}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 m-t-15 mb-3">
    <div class="portlet" id="portlet674">
      <div class="portlet-heading">
        <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(674) }}</h3>
        <div class="clearfix"></div>
      </div>

      <div class="panel-collapse collapse show">
        <div class="portlet-body">
          <div id="element674" class="ct-chart ct-golden-section">
            <div>{!! $splunk_searches::getCodeArray([674],$from,$to) !!}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12 col-xs-12 m-t-15 mb-3">
    <div class="portlet" id="portlet468">
      <div class="portlet-heading">
        <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(468) }}</h3>
        <div class="clearfix"></div>
      </div>

      <div class="panel-collapse collapse show">
        <div class="portlet-body">
          <div id="element468" class="ct-chart ct-golden-section">
            <div>{!! $splunk_searches::getCodeArray([468],$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 class="row">
  <div class="col-md-12 m-t-3">
    <div class="portlet">
      <div class="portlet-heading">
        <h3 class="portlet-title text-dark"> {{ $splunk_searches::getNameForId(679) }}</h3>
        <div class="clearfix"></div>
      </div>
      <div id="portlet679" class="panel-collapse collapse show">
        <div class="portlet-body">
          <div id="element679" class="ct-chart ct-golden-section">
            <div>{!! $splunk_searches::getCodeArray([679], $from, $to) !!}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@include('widgets.bottom_time_information')

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

<link rel="stylesheet" href="/plugins/apex-chart/apexcharts.css" type="text/css">

<script src="/plugins/apex-chart/apexcharts.min.js"></script>
<script type="text/javascript">
  $(document).on('click', '.tb_links', function (e) {
    e.preventDefault();
    $('.tab-pane,.tb_links').removeClass('active');
    $(this).addClass('active');
    $($(this).attr('href')).addClass('active');
    window.dispatchEvent(new Event('resize'));
  });
</script>