@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 style="margin-top: -60px">
          @if($cases->total() >= $cases->perPage())
            {{ $cases->appends(request()->query())->links() }}
          @endif
        </div>
      </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>
  @include('cases.js.case-table-script')
@endsection