@extends('layouts.main')

@section('title', 'GLESEC Member Portal')

@section('breadcrumb')
  <div class="row">
      <div class="col-sm-12">
          <div class="page-title-box">
              <h4 class="page-title">{{ $service }}</h4>
              <div class="col-md-10 claswic_center">
                <ul class="nav nav-tabs nav-bordered nav-justified">
                    <li class="nav-item">
                        <a href="#tab-main" class="tb_links nav-link active">
                            <span class="d-none d-sm-inline-block">Overview</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#tab-2nd-screen" class="tb_links nav-link">
                            <span class="d-none d-sm-inline-block">History</span>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="#tab-4th-screen" class="tb_links nav-link">
                            <span class="d-none d-sm-inline-block">Vulnerability Database</span>
                        </a>
                    </li>
                </ul>
              </div>
              <ol class="breadcrumb float-right">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                  <li class="breadcrumb-item active">{{ $service }}</li>
              </ol>
              <div class="clearfix"></div>
          </div>
      </div>
  </div>
@endsection

@section('content')

    <div class="content-body">
        <section class="dashboards-skeleton">
            <div class="card">

                <div class="card-body">
                    <div class="card-block">
                            @can('view-dashboard', 'MSS-VM')
                            <div class="tab-pane @if($service == 'MSS-VM') active @endif" id="pill1">
                              <div style="text-align: right; height: 100%">
                                @include('dashboards.ecsm.incl_report_button',['report_name'=>'MSS-VM'])
                                @include('dashboards.ecsm.incl_docs_button', ['docs'=>\App\Models\SplunkDashboards::getDocuments('MSS-VM')])
                                <div style="clear: both; width: 100%;"></div>
                              </div>
                                @if($service == 'MSS-VM') @include('dashboards.services.mss_vm') @endif
                            </div>
                          @else
                            <h1>Information is unavailable!</h1>
                          @endcan
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        var page_name = 'threats';
    </script>
  <style type="text/css">
     #element335 .dataTable-top{
       height: 10px;
     }
  </style>
@endsection
@section('scripts')
  <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>

  <link href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.css">

  <script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.js"></script>
  <style>
    .group {
      background-color: #112939 !important;
    }

    .dataTables_paginate a, .dataTables_paginate span.ellipsis {
      position: relative;
      display: block;
      padding: 0.5rem 0.75rem;
      padding-left: 0px;
      padding-right: 0px;
      line-height: 1.25;
      color: #dee2e6;
      min-width: 36px;
      text-align: center;
      transition: all, .5s;
      margin: 0 3px;
      border: none;
      background: url(/theme/assets/images/image-background/pagination.png) no-repeat top/99% 100%;
      float: left;
    }

    .dataTables_paginate {
      float: right;
      padding: 5px;
    }

    .dataTables_filter input {
      display: block;
      width: 300px;
      height: calc(1.5em + 0.9rem + 2px);
      padding: 0.45rem 0.9rem;
      font-size: .9rem;
      font-weight: 400;
      line-height: 1.5;
      color: #a8b5c3;
      background-clip: padding-box;
      border: 1px solid #212d21;
      background-color: #0a1322;
      border-radius: 0;
    }

    .dataTables_length {
      float: left;
    }
    div.dataTables_wrapper div.dataTables_length label{
     /* display: none;*/
    }

    .dataTables_length select {
      height: calc(1.5em + 0.9rem + 2px);
      padding: 0.25rem 0.5rem 0.45rem 0.9rem;
      margin-right: 5px;
      font-size: .9rem;
      font-weight: 400;
      line-height: 1.5;
      color: #fff;
      vertical-align: middle;
      border: 1px solid #212d21;
      background-color: #0a1322;
      border-radius: 0.25rem;
    }

    .sorting span {
      color: #3bafda !important;
    }

    .table.dataTable {
      padding-top: 50px;
    }
    div.dataTables_wrapper div.dataTables_filter {
      position: absolute;
      right: 12px;
      width: 300px;
    }
    .dataTables_length {
      position: absolute;
      width: 100%;
      left: 12px;
    }
    div.dataTables_wrapper div.dataTables_filter label {
      color: transparent;
    }
    .table.dataTable thead>tr>th.sorting {
      color: #3bafda !important;
    }
    .dataTables_info {
      position: absolute;
      bottom: -40px;
      left: 0;
    }
    div.dataTables_wrapper div.dataTables_paginate {
      position: absolute;
      bottom: -55px;
      right: 0;
    }

    .paginate_button.current {
      z-index: 1;
      color: #9ada05;
      background: url(/theme/assets/images/image-background/pagination-active.png) no-repeat top/99% 100%;
    }
    .paginate_button:hover {
      cursor: pointer;
      z-index: 1;
      color: #9ada05;
      background: url(/theme/assets/images/image-background/pagination-active.png) no-repeat top/99% 100%;
    }
    .paginate_button.previous, .paginate_button.next {
      font-size: 1px;
      color: transparent;
      min-height: 35px;
    }
    .paginate_button.previous {
      background: url(theme/assets/images/image-background/arrows-prev.png) no-repeat top/100% 100%;
    }
    .paginate_button.next {
      background: url(theme/assets/images/image-background/arrows-next.png) no-repeat top/100% 100%;
    }
    .paginate_button.previous:hover {
      background: url(theme/assets/images/image-background/arrows-prev-active.png) no-repeat top/100% 100%;
    }
    .paginate_button.next:hover {
      background: url(theme/assets/images/image-background/arrows-next-active.png) no-repeat top/100% 100%;
    }
    .styling-table-big .portlet {
      padding-bottom: 26px;
    }

    .ct-chart::-webkit-scrollbar {
      width: 12px;
    }
    .ct-chart::-webkit-scrollbar-corner {
      background-color: transparent;
    }
    .ct-chart::-webkit-scrollbar-thumb {
      border: 1px solid #003138;
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
      background-color: #101b22;
    }
    .ct-chart::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
      margin-left: 20px;
    }
  </style>
@endsection