@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-4 claswic_center">
          <ul class="nav nav-tabs nav-bordered nav-justified">
            <li class="nav-item">
              <a href="#home-b1" class="tb_links nav-link active">
                <span class="d-none d-sm-inline-block">Overview</span>
              </a>
            </li>
            <li class="nav-item">
              <a href="#home-b2" class="tb_links nav-link">
                <span class="d-none d-sm-inline-block">History</span>
              </a>
            </li>
            <li class="nav-item">
              <a href="#home-b3" 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="m-t-20">
          <div class="card-block">
            @can('view-dashboard', 'MSS-IOT')
              <div class="tab-pane @if($service == 'MSS-IOT') active @endif" id="pill1">
                <div style="text-align: right; height: 100%">
                  @include('dashboards.ecsm.incl_report_button',['report_name'=>'MSS-IOT'])
                  @include('dashboards.ecsm.incl_docs_button', ['docs'=>\App\Models\SplunkDashboards::getDocuments('MSS-IOT')])
                  <div style="clear: both; width: 100%;"></div>
                </div>
                @if($service == 'MSS-IOT') @include('dashboards.services.mss_iot') @endif
              </div>
            @else
              <h1>Information is unavailable!</h1>
            @endcan
          </div>
        </div>
      </div>
    </section>
  </div>

@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