@extends('layouts.main')
@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">Cases</h4>
        <div class="buttons">
          <a href="{!! route('cases.kanban-board') !!}" class="btn">
            <span>Kanban</span>
            <img src="/theme/assets/images/case-kanban-board/kanban-purple.svg" alt="icon">
          </a>
        </div>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Cases</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  <div class="clearfix"></div>
  @include('flash::message')
  <div class="clearfix"></div>

  <div class="quick-reports">
    <div class="quick-reports_title quick-reports-toggle">
      <h5>Quick Reports</h5>
      <span class="toggle-arrow"></span>
    </div>
    <div class="quick-reports_body row">
      @php
        $caseTypeRemediation = \App\Models\SubTypeOfCase::where('name', 'REMEDIATION')->where('gmp_visibility',1)->first();
        $caseTypeRemediation=$caseTypeRemediation?$caseTypeRemediation->id:null;
        $total=[];
        $divisions=\App\Models\CAD\AssetDivision::getForAccount();
      @endphp
      <div class="col-md-12 widget-box splunk-table" style="overflow-x: auto">
        <div class="widget-title">
          <h6>Total Remediation Cases By Stage</h6>
        </div>
        <div class="widget-table">
          <table>
            <thead>
            <tr>
              <th></th>
              @foreach($divisions as $division)
                <th>{{$division->name}}</th>
              @endforeach
            </tr>
            </thead>
            <tbody>
            @foreach(\App\Models\CasesInfo\Stage::getRemediationStage() as $stage)
              <tr>
                <td>{{$stage->name}}</td>
                @foreach($divisions as $division)
                  <td>{{$s=$division->getCases($caseTypeRemediation)->where('stage_id',$stage->id)->count()}}</td>
                  @php
                    $total[$loop->index]=(isset($total[$loop->index])?$total[$loop->index]:0)+$s;
                  @endphp
                @endforeach
              </tr>
            @endforeach
            <tr>
              <td>Total</td>
              @foreach($divisions as $division)
                <td>{{$total[$loop->index]}}</td>
              @endforeach
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="card-box">
    <div class="box-header with-border">
      <h4 class="box-title">Filters</h4>
    </div>
    <div class="box-body" style="">
      {!! Form::open(['route' => ['cases.index'], 'method' => 'get']) !!}
      @include('cases.filters')
      {!! Form::close() !!}
    </div>
  </div>
  <div class="card-box">
    @if(\App\Models\GmpRoles::canSeeLink([\App\Models\GmpRoles::CASES,\App\Models\GmpRoles::CASES_CONTROL]))
      <section class="content-header">
        <h1 class="pull-right">
          <a class="btn btn-primary pull-right" style="margin-top: -10px;margin-bottom: 5px"
             href="{!! route('cases.create') !!}">Add New</a>
        </h1>
      </section>
    @endif
    <div class="clearfix"></div>
    <!-- Main table -->
    <div class="row">
      <div class="col-md-12 data-table-padding">
        @include('cases.table')
      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <style scoped>
    .page-title-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .page-title-box .buttons {
      margin-left: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
    }
    .page-title-box .buttons .btn {
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: inset 0px 0px 30px #00A0FF80;
      border: 1px solid #316D96;
      border-radius: 0;
    }
    .page-title-box .buttons .btn:first-child {
      box-shadow: inset 0px 0px 30px #955BE780;
      border: 1px solid #955BE7;
    }
    .page-title-box .buttons .btn img {
      filter: brightness(200%) invert(0) grayscale(1);
    }
    .page-title-box .buttons .btn:first-child img {
      filter: none;
    }

    .quick-reports {
      width: 100%;
      background: #0A1321;
      border: 1px solid #0B342C;
      padding: 16px 20px 20px;
    }

    .quick-reports h5 {
      cursor: pointer;
    }

    .quick-reports_title {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      transition: all 0.3s;
    }

    h5 {
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
      color: #38A0C6;
      transition: all 0.3s;
      margin: 0;
      padding: 0;
    }

    .toggle-arrow {
      transition: transform .15s, -webkit-transform .15s;
      position: absolute;
      right: 40px;
      display: inline-block;
      font-family: "Material Design Icons";
      text-rendering: auto;
      line-height: 24px;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      transition: all 0.3s;
      transform: rotate(90deg);
    }

    .toggle-arrow::before {
      content: "\F142";
      color: #0B342C;
      transition: all 0.3s;
    }

    .quick-reports_title:hover h5 {
      color: #5CECE2;
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
    }

    .quick-reports_title:hover .toggle-arrow::before {
      content: "\F142";
      color: #5CECE2;
    }

    .quick-reports_title.active {
      padding-bottom: 18px;
      border-bottom: 1px solid #0B342C;
    }

    .quick-reports_title.active h5 {
      color: #5CECE2
    }

    .quick-reports_title.active .toggle-arrow {
      transform: rotate(270deg);
    }

    .quick-reports_title.active .toggle-arrow::before {
      content: "\F142";
      color: #5CECE2;
    }

    .quick-reports_body {
      height: 0;
      opacity: 0;
      visibility: hidden;
      padding-left: 10px;
      padding-right: 10px;
    }

    .quick-reports_body.show {
      height: auto;
      opacity: 1;
      visibility: visible;
    }

    .widget-box {
      background: none;
      padding: unset;
      margin-top: unset;
    }

    .widget-title {
      width: 100%;
      padding: 12px 0 15px;
    }

    .widget-title h6 {
      color: #FFFFFF;
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
      margin: 0;
      padding: 0;
    }

    .widget-table {
      width: 100%;
    }

    .widget-box table {
      background: #0A1321;
      border: 1px solid #0B342C;
      border-collapse: collapse;
      position: relative;
    }

    .widget-box table tr:nth-child(even) {
      background: #0A1321;
    }

    .widget-box table tr:nth-child(odd) {
      background: #020C18;
    }

    .widget-box table tr:last-child {
      background: linear-gradient(90deg, #061A2A 0%, #203B4A 100%);
    }

    .widget-box table thead tr:last-child {
      background: #0A1321;
    }

    .widget-box table tr td {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      text-align: center;
      color: #FFFFFF;
      padding: 5px 0 7px;
      min-width: 70px;
    }

    .widget-box table tr td:first-child {
      /*  font-weight: 700;*/
      text-align: start;
    }

    .widget-box table tr th {
      text-align: center;
      color: #3EB0D8;
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
      padding: 15px 5px;
    }

    .widget-box table tr:last-child td:first-child {
      color: #5CECE2;
    }

    .widget-box table tr:last-child td {
      font-weight: 700;
    }

    .widget-box table tr th:first-child,
    .widget-box table tr td:first-child {
      padding-left: 20px;
    }

    .widget-box table tr th:last-child,
    .widget-box table tr td:last-child {
      padding-right: 13px;
    }
  </style>
  <script>
    $(".quick-reports-toggle").click(function () {
      $(this).toggleClass('active');
      $(".quick-reports_body").toggleClass('show');
    });
  </script>
  <script type="text/javascript">
    var dataTable = new DataTable(document.querySelector('#cases-table'), {
      perPageSelect: [5, 15, 25, 50, 100],
      perPage: 15,
    });
    dataTable.columns().sort(6, 'asc')

    $(function () {
      $(document).on('click', '.btn-toggle-suspend-status', function () {
        var btn = $(this);
        var caseId = btn.closest('tr').attr('data-key');
        var isSuspended = btn.attr('data-suspended');

        if (caseId.length > 0 && isSuspended.length > 0) {
          isSuspended *= 1;

          var message = 'Are you sure you want to suspend the case? It means all tracking activity for this case (e.g. escalation, average time for resolution, etc.) will be paused.';

          if (isSuspended) {
            message = 'Are you sure you want to unsuspend the case? It means all tracking activity for this case (e.g. escalation, average time for resolution, etc.) will be started.';
          }

          if (confirm(message)) {
            $.post("{!! route('cases.toggleSuspendStatus') !!}", {
              caseId: caseId,
              isSuspended: isSuspended,
              _token: $('meta[name="csrf-token"]').attr('content')
            }).done(function (data) {
              if (data.status) {
                var btnTitle = btnClass = btnColor = '';

                if (!isSuspended) {
                  var btnTitle = 'Unsuspend the case';
                  var btnClass = 'fa-play-circle-o';
                  var btnColor = 'color: #2F9A7F !important;';
                } else {
                  var btnTitle = 'Suspend the case';
                  var btnClass = 'fa-pause-circle-o';
                  var btnColor = 'color: #f1556c !important;';
                }

                btn.attr({
                  title: btnTitle,
                  style: btnColor,
                  'data-suspended': isSuspended ? 0 : 1
                });

                btn.children(0).attr('class', 'fa ' + btnClass);
              } else {
                alert('Can\'t update case record. Please try again.');
              }
            }).fail(function () {
              alert('Internal server error. Please try again.');
            });
          }
        }
      });
    });
  </script>
@endsection