{{-- wrapper --}}
<div>
   <div class="row pt-2 align-items-center mb-4">





      {{-- newButton --}}
      <div class="col-3">
         <button
            class="btn btn--scheme btn--scheme-theme px-3 scalemix--3 py-2 d-inline-flex align-items-center {{ boolval($case->isOpen) === false ? 'disabled' : '' }}"
            type="button" data-bs-target="#new-document" data-bs-toggle="modal">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"
               class="bi bi-plus-circle-dotted fs-5 me-2">
               <path
                  d="M8 0c-.176 0-.35.006-.523.017l.064.998a7.117 7.117 0 0 1 .918 0l.064-.998A8.113 8.113 0 0 0 8 0zM6.44.152c-.346.069-.684.16-1.012.27l.321.948c.287-.098.582-.177.884-.237L6.44.153zm4.132.271a7.946 7.946 0 0 0-1.011-.27l-.194.98c.302.06.597.14.884.237l.321-.947zm1.873.925a8 8 0 0 0-.906-.524l-.443.896c.275.136.54.29.793.459l.556-.831zM4.46.824c-.314.155-.616.33-.905.524l.556.83a7.07 7.07 0 0 1 .793-.458L4.46.824zM2.725 1.985c-.262.23-.51.478-.74.74l.752.66c.202-.23.418-.446.648-.648l-.66-.752zm11.29.74a8.058 8.058 0 0 0-.74-.74l-.66.752c.23.202.447.418.648.648l.752-.66zm1.161 1.735a7.98 7.98 0 0 0-.524-.905l-.83.556c.169.253.322.518.458.793l.896-.443zM1.348 3.555c-.194.289-.37.591-.524.906l.896.443c.136-.275.29-.54.459-.793l-.831-.556zM.423 5.428a7.945 7.945 0 0 0-.27 1.011l.98.194c.06-.302.14-.597.237-.884l-.947-.321zM15.848 6.44a7.943 7.943 0 0 0-.27-1.012l-.948.321c.098.287.177.582.237.884l.98-.194zM.017 7.477a8.113 8.113 0 0 0 0 1.046l.998-.064a7.117 7.117 0 0 1 0-.918l-.998-.064zM16 8a8.1 8.1 0 0 0-.017-.523l-.998.064a7.11 7.11 0 0 1 0 .918l.998.064A8.1 8.1 0 0 0 16 8zM.152 9.56c.069.346.16.684.27 1.012l.948-.321a6.944 6.944 0 0 1-.237-.884l-.98.194zm15.425 1.012c.112-.328.202-.666.27-1.011l-.98-.194c-.06.302-.14.597-.237.884l.947.321zM.824 11.54a8 8 0 0 0 .524.905l.83-.556a6.999 6.999 0 0 1-.458-.793l-.896.443zm13.828.905c.194-.289.37-.591.524-.906l-.896-.443c-.136.275-.29.54-.459.793l.831.556zm-12.667.83c.23.262.478.51.74.74l.66-.752a7.047 7.047 0 0 1-.648-.648l-.752.66zm11.29.74c.262-.23.51-.478.74-.74l-.752-.66c-.201.23-.418.447-.648.648l.66.752zm-1.735 1.161c.314-.155.616-.33.905-.524l-.556-.83a7.07 7.07 0 0 1-.793.458l.443.896zm-7.985-.524c.289.194.591.37.906.524l.443-.896a6.998 6.998 0 0 1-.793-.459l-.556.831zm1.873.925c.328.112.666.202 1.011.27l.194-.98a6.953 6.953 0 0 1-.884-.237l-.321.947zm4.132.271a7.944 7.944 0 0 0 1.012-.27l-.321-.948a6.954 6.954 0 0 1-.884.237l.194.98zm-2.083.135a8.1 8.1 0 0 0 1.046 0l-.064-.998a7.11 7.11 0 0 1-.918 0l-.064.998zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z">
               </path>
            </svg>{{__('New Document')}}
         </button>
      </div>







      {{-- search --}}
      <div class="col-6 text-center">
         <input class="form-control form--input main-version mx-auto readonly" type="search"
            placeholder="{{__('Search by Document')}}" readonly />
      </div>






      {{-- count --}}
      <div class="col-3 text-end">
         <h3 data-bs-toggle="tooltip" data-bss-tooltip=""
            class="fw-bold rounded-0 border-bottom text-theme scale--self-05 d-inline-block pb-1 mb-0 border-theme"
            title="{{__('Number of Documents')}}">{{ $documents?->count() ?? 0 }}</h3>
      </div>




   </div>
   {{-- endRow --}}








   {{-- ---------------------------------------------------------------- --}}
   {{-- ---------------------------------------------------------------- --}}










   {{-- row --}}
   <div class="row pt-2 row align-items-center mb-5">





      {{-- loop - documentTypes --}}
      @foreach ($documentTypes as $documentType)

      <div class="col-2 col-lg-3 col-xl-2 text-center position-relative"
         key='single-document-file-{{ $documentType->id }}'>


         {{-- loadingSpinner --}}
         <span wire:loading wire:target='viewDocuments({{ $documentType->id }})'
            class="spinner-border spinner-border-sm text-success spinner--float-right-top" role="status"></span>




         {{-- :: holder --}}
         <a wire:click="viewDocuments('{{ $documentType->id }}')" wire:ignore.self
            class="init-link d-block folders--link" href="javascript:void(0);">
            <div class="document--holder mb-3 w-100 scale--self-05">
               <img class="my-2" src="{{ url('assets/img/helpers/folder-solid.png') }}" />
               <h6 class="fs-13 fw-semibold mb-1 truncate-text-1l">{{ $documentType?->{__('name')} }}</h6>
               <h4 class="mb-0 fw-bold text-scheme-3 mb-0">
                  {{ $documentType?->documents?->where('caseId', $case->id)?->count() ?? 0 }}
               </h4>
            </div>
         </a>
      </div>



      @endforeach
      {{-- end loop --}}


   </div>
   {{-- endRow --}}









   {{-- ----------------------------------------------------------- --}}
   {{-- ----------------------------------------------------------- --}}







   {{-- :: exists --}}
   @if ($documents)




   {{-- row --}}
   <div class="row pt-2 row align-items-center mb-4">




      {{-- subHeading --}}
      <div class="col-12">
         <h5 class="fw-bold mb-3">{{__('Documents')}}</h5>
      </div>







      {{-- loop - documents --}}
      @foreach ($documents ?? [] as $document)






      {{-- explodeMultiple --}}
      @php $multiFiles = explode('||', $document?->documentFile ?? []); @endphp



      {{-- loop - multiFiles --}}
      @foreach ($multiFiles ?? [] as $key => $multiFile)



      <div class="col-2 col-lg-3 col-xl-2 text-center position-relative"
         key='single-document-{{ $document->id }}-{{ $multiFile }}'>


         {{-- remove --}}
         <a href="javascript:void(0);" wire:click="remove('{{ $document->id }}', '{{ $multiFile }}')"
            class='document--remove' wire:ignore>
            <i class="bi bi-trash3-fill"></i>
         </a>



         <div class="simple--wrapper position-relative" wire:ignore>

            {{-- download --}}
            <livewire:components.download-link path='/files/documents/' link='{{ $multiFile }}'
               key='case-docuemnt-link-{{ $document->id }}' />


            {{-- holder --}}
            <div class="document--holder mb-3 w-100 scale--self-05">

               <img class="mb-2" src="{{ url('assets/img/helpers/document.png') }}" />
               <h6 class="fs-12 fw-semibold mb-1 truncate-text-1l">{{ $document->{__('name')} }}</h6>

            </div>
         </div>
      </div>


      @endforeach
      {{-- end loop --}}






      @endforeach
      {{-- end loop --}}





   </div>
   {{-- endRow --}}



   @endif
   {{-- end if --}}




</div>
{{-- endWrapper --}}