@inject('splunk_searches', '\App\Models\SplunkSearches')
<div class="tab-pane active" id="tab-main">
  <div class="row">
    <div class="col-md-6 col-xs-12">
      <div class="portlet">
        <div class="portlet-heading">
          <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(58) }}</h3>
          <div class="clearfix"></div>
        </div>
        <div id="portlet58" class="panel-collapse collapse show">
          <div class="portlet-body">
            <div id="element58">
              <div>{!! $splunk_searches::getCodeArray([58],$from,$to) !!}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xs-12">
      <div class="portlet">
        <div class="portlet-heading">
          <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(59) }}</h3>
          <div class="clearfix"></div>
        </div>
        <div id="portlet59" class="panel-collapse collapse show">
          <div class="portlet-body">
            <div id="element59">
              <div>{!! $splunk_searches::getCodeArray([59],$from,$to) !!}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-xs-12 m-t-15">
      <div class="portlet">
        <div class="portlet-heading">
          <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(60) }}</h3>
          <div class="clearfix"></div>
        </div>
        <div id="portlet60" class="panel-collapse collapse show">
          <div class="portlet-body">
            <div id="element60" class="ct-chart ct-golden-section">
              <div>{!! $splunk_searches::getCodeArray([60],$from,$to) !!}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xs-12 m-t-15">
      <div class="portlet">
        <div class="portlet-heading">
          <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(61) }}</h3>
          <div class="clearfix"></div>
        </div>
        <div id="portlet61" class="panel-collapse collapse show">
          <div class="portlet-body">
            <div id="element61" class="ct-chart ct-golden-section">
              <div>{!! $splunk_searches::getCodeArray([61],$from,$to) !!}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xs-12 m-t-15">
      <div class="portlet">
        <div class="portlet-heading">
          <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(62) }}</h3>
          <div class="clearfix"></div>
        </div>
        <div id="portlet62" class="panel-collapse collapse show">
          <div class="portlet-body">
            <div id="element62" class="ct-chart ct-golden-section nowrapped">
              <div>{!! $splunk_searches::getCodeArray([62],$from,$to) !!}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xs-12 m-t-15">
      <div class="portlet">
        <div class="portlet-heading">
          <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(63) }}</h3>
          <div class="clearfix"></div>
        </div>
        <div id="portlet63" class="panel-collapse collapse show">
          <div class="portlet-body">
            <div id="element63" class="ct-chart ct-golden-section">
              <div>{!! $splunk_searches::getCodeArray([63],$from,$to) !!}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12 col-xs-12 m-t-15">
      <div class="portlet">
        <div class="portlet-heading">
          <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(64) }}</h3>
          <div class="clearfix"></div>
        </div>
        <div id="portlet64" class="panel-collapse collapse show">
          <div class="portlet-body">
            <div id="element64" class="ct-chart ct-golden-section">
              <div>{!! $splunk_searches::getCodeArray([64],$from,$to) !!}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  @include('widgets.bottom_time_information')
</div>

<div class="tab-pane" id="tab-radar">
  <div class="row">
    @include('dashboards.ecsm.radar')
  </div>
</div>

<div class="tab-pane" id="tab-map">
  <div class="row">
    {{--@if(Gate::check('view-service','MSS-DDOS') ||Gate::check('view-service','MSS-SIEM'))--}}
    @php
      $widget65=\App\Models\SplunkSearches::find(65);
    @endphp
    @if(Gate::check('view-widget',[$widget65->getServicesIdArray()]))
      @include('dashboards.ecsm.map')
    @else
      @include('dashboards.fake_services.map_only')
    @endcan
  </div>
</div>

<div class="tab-pane" id="tab-heat-map">
  <div class="row">
    <div class="col-md-12 col-xs-12 m-t-15 styling-table-big">
      <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>

<div class="tab-pane" id="tab-analytics">
  <div class="row">
    <div class="col-md-12 col-xs-12 m-t-15 styling-table-big">
      <div class="portlet" id="portlet381">
        <div class="portlet-heading">
          <h3 class="portlet-title text-dark">{{ $splunk_searches::getNameForId(381) }}</h3>
          <div class="clearfix"></div>
        </div>
        <div>@include('dashboards.services.division_location_filter')</div>
        <div class="panel-collapse collapse show">
          <div class="portlet-body">
            <div id="element381" class="ct-chart ct-golden-section" style="max-height: 100%; min-height: 500px;">
              <div>{!! $splunk_searches::getCodeArray([381],$from,$to) !!}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* tmp fix */
  .diagrams-block {
    margin: 40px 0 40px;
  }

  .radar-portlet-left .ct-chart {
    margin-bottom: 10px;
  }

  .control-panel-box .row:last-child .col-md-3 .widget-box {
    margin-top: 0;
  }

  .content_scroll_radar::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .content_scroll_radar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
  }

  .widget-box.widget-table .tbl-head + ul {
    overflow: auto;
  }

  .widget-box.widget-table .tbl-head + ul::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .widget-box.widget-table .tbl-head + ul {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
  }
</style>
@section('splunk')
  {{--  @if(Gate::check('view-service','MSS-DLP')|| Gate::check('view-service','MSS-DDOS') ||Gate::check('view-service','MSS-SIEM') ||Gate::check('view-service','MSS-EDR') ||Gate::check('view-service','MSS-WAF') ||Gate::check('view-service','MSS-UTM'))--}}
  @if(true)
    @if(!$splunkip)
      <!--      <script type="text/javascript">
        $('.portlet-body>div').html('<span class="info_big">N/A</span>');
      </script>-->
    @endif
  @else
    <script type="text/javascript">
      $('.portlet-body>div:not(.ovl_data,.map,#tbl)').html('<span class="info_big">N/A</span>');
      var lrmap = L.map('map', {
        minZoom: 2,
      }).setView([0, 0], 2);
      lrmap.scrollWheelZoom.disable();
      L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYXJ0ZW16aGVsaW5za3l5IiwiYSI6ImNqeG9oNGNkbjAydHEzbmwzMHFqcTU3NnEifQ.KCoAhSpQG1yatEamZpSVFw')
        .addTo(lrmap);
      var data = [];

      var migrationLayer = new L.migrationLayer({
        map: lrmap,
        data: data,
        pulseRadius: 30,
        pulseBorderWidth: 3,
        arcWidth: 1,

        arcLabel: true,
        arcLabelFont: '10px sans-serif',
        maxWidth: 5
      });
    </script>
    @include('dashboards.fake_services.map')
  @endif
@endsection
@section('bottom_css')
  <script>
    $(document).ready(function () {
      get_browser_style();
    });

    function get_name_browser() {
      var ua = navigator.userAgent;
      if (ua.search(/Chrome/) > 0) return 'Chrome';
      if (ua.search(/Firefox/) > 0) return 'Firefox';
      if (ua.search(/Opera/) > 0) return 'Opera';
      if (ua.search(/Safari/) > 0) return 'Safari';
      if (ua.search(/MSIE/) > 0) return 'IE';
      return false;
    }

    const newstyle = document.getElementsByTagName('body')[0].appendChild(document.createElement('div'));

    function get_browser_style() {
      if (get_name_browser() == "Safari") {
        newstyle.innerHTML = `
      <style>
      #tab-radar .ct-label.ct-horizontal {
    height: 10px !important;
    width: 70px !important;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start;
    padding-top: 25px !important;
    margin-left: -36px !important;
    position: relative !important;
    top: unset !important;
    left: unset !important;
    transform: rotate(-60deg) translateX(-50%);
    display: flex;
    box-sizing: border-box;
    outline: none;
}

#overall-risk-histogram {
    margin-right: 70px;
}
</style>
`;
      } else {
        newstyle.innerHTML =
          `
        <style>
        #tab-radar .ct-label.ct-horizontal {
    height: 20px !important;
    width: 20px !important;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start;
    padding-top: 25px !important;
    margin-left: -36px !important;
    position: relative !important;
    top: unset !important;
    left: unset !important;
    transform: rotate(-60deg) translateX(-50%);
    display: flex;
    box-sizing: border-box;
    outline: none;
    margin-top: 0;
}

#overall-risk-histogram {
    margin-right: 70px;
}
</style>
        `
        ;
      }
    }
  </script>
@endsection