@extends('layouts.main')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">Reports</h4>
        <div class="col-md-6 claswic_center">
          <ul class="nav nav-tabs nav-bordered nav-justified">
            <li class="nav-item">
              <a href="#tab-cases" class="tb_links nav-link @if (!Request::has('users_tab')) active @endif">
                <span class="d-none d-sm-inline-block">Cases</span>
              </a>
            </li>
            <li class="nav-item">
              <a href="#tab-users" class="tb_links nav-link @if (Request::has('users_tab')) active @endif">
                <span class="d-none d-sm-inline-block">Users</span>
              </a>
            </li>
          </ul>
        </div>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item">C&RU</li>
          <li class="breadcrumb-item active">Reports</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  <div class="tab-content">
    <div class="tab-pane @if (!Request::has('users_tab')) active @endif" id="tab-cases">
      @include('case-average-time-report.cases')
    </div>
    <div class="tab-pane @if (Request::has('users_tab')) active @endif" id="tab-users">
      @include('case-average-time-report.users')
    </div>
  </div>
@endsection

@section('scripts')
  <link href="/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css"/>
  <script src="/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
  <script src="/plugins/paginationjs/pagination.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $(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'));
      });

      $('.dateFrom').datepicker({
        format: 'mm/dd/yyyy',
        orientation: 'auto',
        autoclose: true,
        minViewMode: 'days',
        maxViewMode: 'years'
      });
      $('.dateTo').datepicker({
        format: 'mm/dd/yyyy',
        orientation: 'auto',
        autoclose: true,
        endDate: '0d',
        minViewMode: 'days',
        maxViewMode: 'years'
      });

      new DataTable(document.querySelector('#avg-time-report-table'))
      new DataTable(document.querySelector('#avg-time-users-table'))

      new Chartist.Line('#averageTimeToRespondResolveCases', {
        labels: {!! json_encode($chartLabels) !!},
        series: {!! json_encode($chartData) !!}
      }, {
        chartPadding: {
          top: 60,
          right: 0,
          bottom: 30,
          left: 50
        },
        plugins: [
          Chartist.plugins.tooltip(),
          Chartist.plugins.legend(),
          Chartist.plugins.ctAxisTitle({
            axisX: {
              axisTitle: 'Months',
              axisClass: 'ct-axis-title',
              offset: {
                x: 0,
                y: 50
              },
              textAnchor: 'middle'
            },
            axisY: {
              onlyInteger: false,
              axisTitle: 'Hours',
              axisClass: 'ct-axis-title',
              offset: {
                x: 0,
                y: 0
              },
              textAnchor: 'middle',
              flipTitle: false
            }
          })
        ]
      });

      new Chartist.Line('#averageTimeToRespondResolveUsers', {
        labels: {!! json_encode($chartLabels) !!},
        series: {!! json_encode($chartUsersData) !!}
      }, {
        chartPadding: {
          top: 60,
          right: 0,
          bottom: 30,
          left: 50
        },
        plugins: [
          Chartist.plugins.tooltip(),
          Chartist.plugins.legend(),
          Chartist.plugins.ctAxisTitle({
            axisX: {
              axisTitle: 'Months',
              axisClass: 'ct-axis-title',
              offset: {
                x: 0,
                y: 50
              },
              textAnchor: 'middle'
            },
            axisY: {
              onlyInteger: false,
              axisTitle: 'Hours',
              axisClass: 'ct-axis-title',
              offset: {
                x: 0,
                y: 0
              },
              textAnchor: 'middle',
              flipTitle: false
            }
          })
        ]
      });

    });
  </script>
  <style type="text/css">
    .datepicker table tr td.day:hover,
    .datepicker table tr td.day.focused,
    .datepicker table tr td.range,
    .datepicker table tr td.range:hover,
    .datepicker table tr td.range.disabled,
    .datepicker table tr td.range.disabled:hover {
      background: #323b44 !important;
    }

    .datepicker thead tr:first-child th:hover,
    .datepicker tfoot tr th:hover {
      background: #323b44 !important;
    }

    .col-md-12.m-t-30 .dataTable-wrapper::before, .col-md-12.m-t-30 .dataTable-wrapper::after {
      background: transparent;
      margin-bottom: 0;
      padding: 0;
    }

    .col-md-12.m-t-30 .dataTable-wrapper .dataTable-info {
      padding-left: 50px;
    }

    .paginationjs-custom {
      min-height: 50px;
      display: flex;
      justify-content: end;
      padding-right: 10px;
      padding-bottom: 10px;
      align-items: end;
    }

    .cases-data-tbody {
    }

    .ct-legend li {
      max-width: unset !important;
    }
    .dataTable-wrapper{
      background: unset !important;
    }
    .dataTable-bottom{
      bottom: unset !important;
    }
  </style>
@endsection