{{-- forme --}}
<form class="tab-pane-like mt-5" style="border: 1px solid var(--color-doc-desc)">
    <div class="row">
        <div class="col-12">
            <div class='rtl--direction'>




                {{-- collapseButton --}}
                <a class="btn fs-5 collapse--btn fw-semibold border-0 text-solid-black" data-bs-toggle="collapse"
                    aria-expanded="false" aria-controls="collapse-1" href="#collapse-1" role="button">
                    {{ __('Related Cases') }}<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                        fill="currentColor" viewBox="0 0 16 16" class="bi bi-chevron-expand">
                        <path fill-rule="evenodd"
                            d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z">
                        </path>
                    </svg>
                </a>





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







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



                        {{-- tableCol --}}
                        <div class="col-12 mt-3">
                            <div class="table-responsive memoir--table">
                                <table class="table table-bordered" id="relatedCases--table">



                                    {{-- headers --}}
                                    <thead>
                                        <tr>
                                            <th>{{__('Case No.')}}</th>
                                            <th>{{__('Case Type')}}</th>
                                            <th>{{__('Case Stage')}}</th>
                                            <th>{{__('Case Date')}}</th>

                                            <th></th>
                                        </tr>
                                    </thead>
                                    {{-- endHeaders --}}






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







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


                                        {{-- loop - fileCases --}}
                                        @foreach ($fileCases ?? [] as $fileCase)

                                        <tr key='related-case-{{ $fileCase->id }}'>




                                            {{-- 1: serial --}}
                                            <td>{{ $fileCase?->serial }}</td>




                                            {{-- 2: type - stage --}}
                                            <td>{{ __(':text',['text' => $fileCase?->caseType?->name , 'textAr' =>
                                                $fileCase?->caseType?->nameAr]) }}</td>


                                            <td>{{ __(':text',['text' => $fileCase?->caseStage?->name , 'textAr' =>
                                                $fileCase?->caseStage?->nameAr]) }}</td>





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



                                            {{-- 4: viewButton --}}
                                            <td>
                                                <a class="init-link badge fs-11 px-3 badge--scheme-outline-3 scale--self-05"
                                                    href="{{ route('dashboard.singleFile', [$fileCase->fileId, $fileCase->id]) }}">{{__('View')}}</a>
                                            </td>



                                        </tr>

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




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



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




            </div>
        </div>
    </div>
</form>
{{-- end tablike --}}