{{-- section --}}
<section id="content--section" class="content--section">
   <div class="container rtl--direction">




      {{-- submenu --}}
      <livewire:dashboard.manage-overview.components.sub-menu />









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








      {{-- topRow --}}
      <div class="row align-items-center rtl--direction" style="margin-bottom: 70px" data-aos="fade"
         data-aos-duration="600" data-aos-delay="600" data-aos-once="true" wire:ignore.self>




         {{-- newButton --}}
         <div class="col-4">
            <button
               class="btn btn--scheme btn--scheme-theme px-4 scalemix--3 py-2 d-inline-flex align-items-center btn--input"
               data-bs-target="#new-memoir" data-bs-toggle="modal" type="button">
               <svg class="bi bi-plus-circle-dotted fs-5 me-2" xmlns="http://www.w3.org/2000/svg" width="1em"
                  height="1em" fill="currentColor" viewBox="0 0 16 16">
                  <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 Memoir') }}
            </button>
         </div>








         {{-- empty --}}
         <div class="col-4"></div>






         {{-- totalCount --}}
         <div class="col-4 text-end">
            <h2 class="fw-bold scale--self-05 counter--badge" data-bs-toggle="tooltip" data-bss-tooltip=""
               title="{{ __('Number of Memoirs') }}">
               {{ $memoirs->count() }}
            </h2>
         </div>






      </div>
      {{-- end topRow --}}









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









      {{-- content --}}
      <div class="row mb-5 rtl--direction" data-aos="fade" data-aos-duration="600" data-aos-delay="600"
         data-aos-once="true" wire:ignore.self>




         {{-- loop - memoirs --}}
         @foreach ($completedMemoirs ?? [] as $memoir)



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


            {{-- 1: downloadLink --}}
            <livewire:components.download-link path='/files/memoirs/' link='{{ $memoir?->documentFile }}'
               key='download-memoir-{{ $memoir->id }}' />





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

               <img class="mb-2" src="{{ url('assets/img/helpers/PDF.png') }}" />

               {{-- 2: name - size --}}
               <h6 class="fs-12 fw-bold mb-1 px-2
                    text-solid-black truncate-text-1l">{{ $memoir?->{__('title')} }}</h6>
               <p class="fs-13 mb-0 text-solid-black">{{ $memoir?->documentFileSize ?? 0 }}</p>

            </div>
         </div>


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











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






         {{-- :: answerMemoir --}}



         {{-- 1: editMemoir --}}
         <div class="col-2 col-lg-3 col-xl-2 text-center">
            <a href='javascript:void(0);' class="init-link d-block" type="button" data-bs-target="#answer-memoir"
               data-bs-toggle="modal">
               <div class="document--holder mb-3 w-100 document--placeholder">
                  <img class="mb-2" src="{{ url('assets/img/helpers/plus.png') }}" style="width: 40%" />
                  <h6 class="fs-12 fw-bold mb-1 invisible">{{__('Add File')}}</h6>
                  <p class="fs-13 mb-0 fw-semibold text-solid-black">{{__('Answer Memoir?')}}</p>
               </div>
            </a>
         </div>









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



















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




            {{-- title --}}
            <div class="col-4">
               <h6 class="fw-bold mb-0 text-solid-black">{{__('Memoir Requests')}}</h6>
            </div>




            {{-- search --}}
            <div class="col-4">
               <input wire:model.live.debounce.50ms='searchMemoir' class="form-control form--input main-version"
                  type="text" placeholder="{{ __('Search by Memoir') }}" />
            </div>






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







            {{-- tableContent --}}
            <div class="col-12 mt-4">
               <div class="table-responsive memoir--table">
                  <table class="table table-bordered" id="memoir--table">

                     {{-- headers --}}
                     <thead>
                        <tr>
                           <th class='th--sm'>{{__('Type')}}</th>
                           <th class='th--lg'>{{__('Title')}}</th>
                           <th class='th--md'>{{__('Issued By')}}</th>
                           <th class='th--md'>{{__('Issue Date')}}</th>
                           <th class='th--lg'>{{__('Advisor')}}</th>
                           <th class='th--md'>{{__('Execution')}}</th>
                           <th class='th--md'>{{__('Completion')}}</th>
                           <th class='th--sm'>{{__('Duration')}}</th>
                           <th class='th--lg'></th>
                        </tr>
                     </thead>
                     {{-- endHeaders --}}






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







                     {{-- body --}}
                     <tbody>


                        {{-- loop - memoirs --}}
                        @foreach ($memoirs ?? [] as $memoir)

                        <tr key='single-memoir-tr-{{ $memoir->id }}'>



                           {{-- 1: memoirType --}}
                           <td>{{ $memoir?->memoirType?->{__('name')} }}</td>




                           {{-- 1.2: title --}}
                           <td>{{ $memoir?->{__('title')} }}</td>



                           {{-- 1.3: creator --}}
                           <td>{{ $memoir?->creator?->{__('name')} }}</td>




                           {{-- 2: memoirDate --}}
                           <td dir='ltr'>{{ $memoir?->memoirDate ? date('d / m / Y',
                              strtotime($memoir?->memoirDate)) : '' }}</td>





                           {{-- 3: advisor --}}
                           <td>{{$memoir?->advisor?->{__('name')} }}</td>






                           {{-- 4: executionDate - completion - completionDays --}}
                           <td dir='ltr'>{{ $memoir?->executionDate ? date('d / m / Y',
                              strtotime($memoir->executionDate)) : '' }}</td>



                           <td dir='ltr'>{{ $memoir?->completionDate ? date('d / m / Y',
                              strtotime($memoir?->completionDate)) : ''}}</td>

                           <td>{{ $memoir?->completionDays ? $memoir?->completionDays : '' }}</td>





                           {{-- 5: edit - status --}}
                           <td>

                              <span data-bs-toggle="modal" data-bs-target='#edit-memoir'
                                 wire:click='edit({{ $memoir->id }})'
                                 class="badge pointer fs-12 badge--scheme-outline-3">{{
                                 __('Edit') }}</span>


                              <span
                                 class="badge ms-1 fs-12 {{ $memoir?->status == 'Pending' ? 'badge--warning' : 'badge--scheme-3' }}">{{
                                 __(ucwords($memoir->status)) }}</span>
                           </td>




                        </tr>

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





                     </tbody>
                  </table>
               </div>
               {{-- endCol --}}



            </div>
         </div>
         {{-- endTable --}}






      </div>
   </div>
   {{-- end container --}}

























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








   {{-- selectHandle --}}
   <script>
      $(".init--select").on("change", function(event) {


            // 1.1: getValue - instanceItem
            selectValue = $(this).select2('val');
            instance = $(this).attr('data-instance');

            @this.set(instance, selectValue);

        }); //end function
   </script>














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








   {{-- :: modals --}}
   @section('modals')





   {{-- 1: createMemoir --}}
   <livewire:dashboard.manage-overview.manage-overview-memoirs.components.manage-overview-memoirs-create
      key='create-file-case-memoir' />





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





   {{-- 2: editMemoir --}}
   <livewire:dashboard.manage-overview.manage-overview-memoirs.components.manage-overview-memoirs-edit
      key='edit-file-case-memoir' />






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





   {{-- 3: answerMemoir --}}
   <livewire:dashboard.manage-overview.manage-overview-memoirs.components.manage-overview-memoirs-answer
      key='answer-file-case-memoir' />





   @endsection
   {{-- endSection --}}






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







</section>
{{-- end section --}}