@extends('layouts.main')
@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">{!! $case->type_of_case_data !!} #{!! $case->id !!}</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active"><a href="/cases">Cases</a></li>
          <li class="breadcrumb-item active">{!! $case->type_of_case_data !!} #{!! $case->id !!}</li>

        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <style>
    .style_note img, .small-bg-info-comment img {
      max-width: 100% !important;
      height: auto !important;
    }
  </style>
@endsection

@section('content')
  <div class="">
    <div style="text-align: right; margin-bottom: 6px;">
      @if(\App\Models\GmpRoles::canSeeLink([\App\Models\GmpRoles::CASES,\App\Models\GmpRoles::CASES_CONTROL]))
        <a href="{!! route('cases.edit', [$case->id]) !!}" class="btn btn-success"><i class="fa fa-pencil"></i>
          Edit Case</a>
      @endif
    </div>
    @include('cases.show_fields')
  </div>
@endsection

@section('top_scripts')
  <style>
    .case__list {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 10px;
    }

    .navigation {
      padding: 12px 5px 12px 20px;
      background: #0A1321;
      border: 1px solid #0B342C;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      flex: 600px;
    }

    .navigation::after {
      content: "";
      position: absolute;
      background: #0A1321;
      top: 10px;
      left: 20px;
      width: 6px;
      height: 16px;
      z-index: 2;
    }

    .navigation::before {
      content: "";
      position: absolute;
      background: #020C18;
      border: 1px solid #101E34;
      border-radius: 10px;
      width: 3px;
      height: calc(100% - 60px);
      top: 30px;
      left: 22px;
    }

    .navigation a {
      position: relative;
      color: #75A1E8 !important;
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      line-height: 20px;
      padding: 8px 8px 8px 28px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .navigation a::before {
      z-index: 2;
      left: 0;
      top: 47%;
      transform: none;
      position: absolute;
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: unset;
      box-shadow: 0px 0px 15px #75A1E8;
      transition: all 0.3s;
      border: 1px solid transparent;
      background: linear-gradient(#75A1E8, #75A1E8) padding-box, linear-gradient(to bottom, #75A1E8 0%, #293D5C 100%) border-box;
    }

    .navigation a.disable::before {
      background: unset;
      box-shadow: none;
      border: 1px solid transparent;
      background: linear-gradient(#293D5C, #293D5C) padding-box, linear-gradient(to bottom, #293D5C 0%, #0A1321 100%) border-box;
    }

    .navigation a.active::before {
      background: unset;
      box-shadow: 0px 0px 15px #5CECE2;
      border: 1px solid transparent;
      background: linear-gradient(#5CECE2, #5CECE2) padding-box, linear-gradient(to bottom, #5CECE2 0%, #307671 100%) border-box;
    }

    .navigation a.active::after {
      left: 3px;
      bottom: 50%;
      transform: none;
      position: absolute;
      content: "";
      width: 1px;
      height: 100%;
      background: linear-gradient(270deg, #5CECE2 0%, #307671 100%);
      z-index: 1;
    }

    .navigation a.active.disable::before {
      background: unset;
      box-shadow: none;
      border: 1px solid transparent;
      background: linear-gradient(#307671, #307671) padding-box, linear-gradient(to bottom, #5CECE2 0%, #307671 100%) border-box;
    }

    .navigation a.active:first-child::after {
      display: none;
    }

    .navigation a:hover::before {
      border: 1px solid transparent;
      background: linear-gradient(#5CECE2, #5CECE2) padding-box, linear-gradient(to bottom, #5CECE2 0%, #307671 100%) border-box;
      box-shadow: 0px 0px 15px #5CECE2;
    }

    .navigation a.disable {
      pointer-events: none;
      color: #334A6D !important;
    }

    .navigation a.active {
      color: #5CECE2 !important;
    }

    .navigation a.active.disable {
      pointer-events: none;
      color: #307671 !important;
    }

    .navigation a:hover {
      color: #5CECE2 !important;
    }

    .main-case-box {
      padding: 12px 20px;
      background: linear-gradient(180deg, #0A1321 0%, #0A1B21 125%);
      border: 1px solid #307671;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 40px;
    }

    .main-case-box p {

      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      color: #8B8B8B !important;
    }

    .main-case-box__content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .main-case-box__content .box-head {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      padding-bottom: 12px;
    }

    .main-case-box__content .box-head p {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 19px;
    }

    .main-case-box__content .box-head p span {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 19px;
      color: #5CECE2 !important;
    }

    .main-case-box__content .box-head::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      width: 100%;
      background: linear-gradient(0.25turn, #0B1422, #31425B, #0B1422);
    }

    .main-case-box__content .title {
      padding: 10px 0;
      position: relative;
      width: 100%;
    }

    .main-case-box__content .title h2 {
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      line-height: 24px;
      color: #FFFFFF !important;
    }

    .main-case-box__content .title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      width: 100%;
      background: linear-gradient(0.25turn, #0B1422, #31425B, #0B1422);
    }

    .main-case-box__content .info {
      padding: 20px 0 12px;
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 3.906vw;
    }

    .main-case-box__content .info .info__list {
      display: flex;
      flex-direction: column;
    }

    .main-case-box__content .info .info__list .info__list__item {
      width: 100%;
      display: grid;
      grid-template-columns: 120px 1fr;
      padding-bottom: 16px;
    }

    .main-case-box__content .info .info__list .info__list__item p {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: #8B8B8B !important;
    }

    .main-case-box__content .info .info__list .info__list__item .head p {
      color: #FFFFFF !important;
    }

    .main-case-box__content .info .info__list .info__list__item div {
      display: flex;
      flex-direction: column;
    }

    .info__list__item p {
      margin: 0;
    }

    @media (max-width: 1439px) {
      .main-case-box__content .info .info__list .info__list__item {
        grid-template-columns: 1fr;
      }

      .main-case-box__content .info .info__list .info__list__item .head {
        margin-bottom: 6px;
      }
    }

    @media (max-width: 1279px) {
      .main-case-box__content .info .info__list .info__list__item {
        grid-template-columns: 90px 1fr;
      }

      .main-case-box__content .info .info__list .info__list__item .head {
        margin-bottom: 0px;
      }
    }

    @media (max-width: 1279px) {
      .main-case-box__content .info {
        flex-direction: column;
      }
    }

    .main-case-box__content .descriptions {
      width: 100%;
    }

    .main-case-box__content .descriptions .box-title {
      position: relative;
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 10px;

      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 19px;
      color: #FFFFFF !important;
    }

    .main-case-box__content .descriptions .box-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      width: 100%;
      background: linear-gradient(0.25turn, #0B1422, #31425B, #0B1422);
    }

    .main-case-box__content .descriptions p {
      margin-bottom: 18px;

      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      color: #8B8B8B !important;
    }

    .main-case-box__content .descriptions img {
      margin-bottom: 18px;
    }

    .datails-case {
      padding: 12px 20px;
      background: #0A1321;
      border: 1px solid #0B342C;
    }

    .datails-case .box-title {
      position: relative;
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 10px;

      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 19px;
      color: #FFFFFF !important;
    }

    .datails-case .box-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      width: 100%;
      background: linear-gradient(0.25turn, #0B1422, #31425B, #0B1422);
    }

    .datails-case .info {
      padding: 20px 0 12px;
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 3.906vw;
    }

    .datails-case .info .info__list {
      display: flex;
      flex-direction: column;
    }

    .datails-case .info .info__list .info__list__item {
      width: 100%;
      display: grid;
      grid-template-columns: 120px 1fr;
      padding-bottom: 16px;
    }

    .datails-case .info .info__list .info__list__item p {

      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: #8B8B8B !important;
    }

    .datails-case .info .info__list .info__list__item a {

      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      -webkit-text-decoration-line: underline;
      text-decoration-line: underline;
      color: #5CECE2 !important;
      transition: all 0.3s;
      max-width: 100%;
      text-overflow: ellipsis;
    }

    .datails-case .info .info__list .info__list__item a:hover {
      color: #75A1E8 !important;
    }

    .datails-case .info .info__list .info__list__item .head p {
      color: #FFFFFF !important;
    }

    .datails-case .info .info__list .info__list__item div {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    @media (max-width: 1279px) {
      .datails-case .info {
        flex-direction: column;
      }
    }
  </style>
@endsection