@extends('master')

@section('styles')
<style>
  .table-wrapper-scroll-y {
  display: block;
  max-height: 200px;
  overflow-y: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
</style>
@endsection

@section('content')

<div class="container-fluid">
  @if($monitor->uptime_check_times_failed_in_a_row > 3)
  <div class="row col-md-12">
    <div class="alert alert-danger">{{ __('uum.checksfailedinrow', ['count' => $monitor->uptime_check_times_failed_in_a_row, 'url' => $monitor->url]) }}</div>
  </div>
  @endif
  <div class="row">
    <div class="col-md-12">
      <h4>{{ __('uum.statsfor') }} <span class="text-info">{{ $monitor->url }}</span></h4>
      <div class="card">
        <div class="card-footer">
          <ul>
            <li data-toggle="tooltip" title="{{ __('uum.uptimestatus') }}: {{ $monitor->title }}">
              <span class="text-{{ $monitor->cssclass }}"><i class="fa {{ $monitor->statusicon }} fa-3x"></i></span>
              <div class="text-{{ $monitor->cssclass }}">{{ $monitor->title }}</div>
            </li>
            <li data-toggle="tooltip" title="{{ __('uum.averageuptime') }}: {{ $monitor->avguptime }}%">
              <span class="text-{{ $monitor->uptimeavgclass }}"><i class="fa fa-battery-{{ $monitor->uptimeavgbattery }} fa-3x"></i></span>
              <div class="text-{{ $monitor->uptimeavgclass }} truncate">{{ $monitor->avguptime }}%</div>
            </li>
            <li data-toggle="tooltip" title="{{ __('uum.sslstatus') }}: {{ $monitor->certstatus->title }}">
              <span class="text-{{ $monitor->certstatus->class }}"><i class="fa fa-lock fa-3x"></i></span>
              <div class="text-{{ $monitor->certstatus->class }} truncate">{{ $monitor->certstatus->title }}</div>
            </li>
            <li data-toggle="tooltip" title="{{ $monitor->lastchecked }}">
              <span class="text-primary"><i class="fa fa-clock-o fa-3x"></i></span>
              <div class="text-info truncate">{{ str_replace('Checked ', '', $monitor->lastchecked) }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  @include('monitors.info')
</div>
@endsection
<!-- /.conainer-fluid -->

@section('myscript')
<script type="text/javascript">
  $(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
</script>
<script>
  function append_notifs(txt) {
    $('#notifsul').append('<li>'+txt+'</li>');
  }
  jQuery(function($) {
    $('.pre-scrollable').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
          var nextpage = $('#nextpage').val();
          if(nextpage) {
            $('#msg').html('{{ __('uum.loading') }}');
            $.get(nextpage, function(data) {
              $('#msg').html('');
              $('#nextpage').val(data.next_page_url);
              for(var i = 0; i < data.data.length; i++) {
                var info = data.data[i]['data'];
                var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
                var created_at = new Date(data.data[i]['created_at']);
                created_at = created_at.toLocaleDateString('en-US', options);
                var msg = '<i class="fa '+info['icon']+'"></i> '+ info['message'] +' - <i class="text-muted" style="font-size:10px;">'+created_at+'</i>';
                append_notifs(msg);
              }
            });
          } else {
            $('#msg').html('{{ __('uum.nomorenotifs') }}');
          }
        }
    })
});
</script>
@endsection