{{-- wrapper --}}
<div>






    {{-- 1: searchRow --}}
    <div class="row pt-2 align-items-center" style="margin-bottom: 80px;">




        {{-- newButton --}}
        <div class="col-2">
            <button class="btn btn--scheme btn--scheme-theme w-100 scalemix--3 py-2 d-inline-flex align-items-center"
                type="button" data-bs-target="#new-report-file" 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 File')}}
            </button>
        </div>







        {{-- importFile - empty --}}
        <div class='col-2'></div>










        {{-- counter --}}
        <div class="col-8 text-end">
            <h3 data-bs-toggle="tooltip" data-bss-tooltip=""
                class="fw-bold scale--self-05 d-inline-block text-theme px-3 rounded-1 mb-0 py-1"
                title="{{__('Number of Files')}}">{{ $reportFiles?->total() }}</h3>

        </div>







        {{-- empty --}}
        <div class="col-12 mb-2"></div>







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




        {{-- search --}}
        <div class="col-2 position-relative text-center">
            <input wire:model.live.debounce.50ms='searchNumber'
                class="form-control form--input main-version mx-auto w-100" type="text"
                placeholder="{{__('Search by Number')}}">
        </div>





        {{-- users --}}
        <div class="col-2" wire:ignore>
            <div class="select--single-wrapper">
                <select class="form-select form--select2 init--select init--report-files-select"
                    data-instance='searchUser' data-clear='true' data-placeholder="{{ __('Search by User') }}">
                    <option value=""></option>

                    @foreach ($users ?? [] as $user)
                    <option value="{{ $user->id }}">{{ $user->{__('name')} }}</option>
                    @endforeach

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






        {{-- client --}}
        <div class="col-2" wire:ignore>
            <div class="select--single-wrapper">
                <select class="form-select form--select2 init--select init--report-files-select"
                    data-instance='searchClient' data-clear='true' data-placeholder="{{ __('Search by Client') }}">
                    <option value=""></option>

                    @foreach ($clients ?? [] as $client)
                    <option value="{{ $client->id }}">{{ $client->{__('name')} }}</option>
                    @endforeach

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





        {{-- bank --}}
        <div class="col-2" wire:ignore>
            <div class="select--single-wrapper">
                <select class="form-select form--select2 init--select init--report-files-select"
                    data-instance='searchBank' data-clear='true' data-placeholder="{{ __('Search by Bank') }}">
                    <option value=""></option>

                    @foreach ($banks ?? [] as $bank)
                    <option value="{{ $bank->id }}">{{ $bank->{__('name')} }}</option>
                    @endforeach

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







        {{-- court --}}
        <div class="col-2" wire:ignore>
            <div class="select--single-wrapper">
                <select class="form-select form--select2 init--select init--report-files-select"
                    data-instance='searchCourt' data-clear='true' data-placeholder="{{ __('Search by Court') }}">
                    <option value=""></option>

                    @foreach ($courts ?? [] as $court)
                    <option value="{{ $court->id }}">{{ $court->{__('name')} }}</option>
                    @endforeach

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





        {{-- defendant --}}
        <div class="col-2" wire:ignore>
            <div class="select--single-wrapper">
                <select class="form-select form--select2 init--select init--report-files-select"
                    data-instance='searchDefendant' data-clear='true'
                    data-placeholder="{{ __('Search by Defendant') }}">
                    <option value=""></option>

                    @foreach ($defendants ?? [] as $defendant)
                    <option value="{{ $defendant->id }}">{{ $defendant->{__('name')} }}</option>
                    @endforeach

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




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








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





    {{-- contentRow --}}
    <div class="row">





        {{-- loop - reportFiles --}}
        @foreach ($reportFiles ?? [] as $reportFile)




        <div class="col-6 col-xl-4" key='single-client-report-file-{{$reportFile->id}}'>
            <div class="overview--card case-version mb-4 scale--self-05">





                {{-- wrapper --}}
                <div class="row">


                    {{-- client --}}
                    <div class="col-12">
                        <h1 class="fs-13 d-block fw-semibold badge text-theme px-3 pointer rounded-0 pb-2"
                            style="border-bottom: 1px dashed #faf6f4" data-bs-toggle="tooltip" data-bss-tooltip=""
                            data-bs-placement="right" title="{{ __('Client') }}">
                            {{ $reportFile?->client?->{__('name')} }}
                        </h1>
                    </div>




                    {{-- 1: defendant --}}
                    <div class="col-12">
                        <h1 class="fs-12 d-block fw-semibold badge badge-light text-theme px-3 pointer border-dashed"
                            data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="top"
                            title="{{ __('Defendant') }}">{{ $reportFile->defendant->{__('name')} }}</h1>
                    </div>



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







                {{-- wrapper --}}
                <div class="d-flex align-items-center justify-content-between mb-2">



                    {{-- 1: serials --}}
                    <div>

                        {{-- 1.1: reportDate --}}
                        <h1 class="fs-12 d-block fw-semibold badge badge-light text-theme px-3 pointer"
                            data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="top"
                            title="{{ __('Report Date') }}" dir='ltr'>{{
                            date('d / m / Y', strtotime($reportFile->reportDate)) }}
                        </h1>




                        {{-- 1.2: client - reportNumber --}}
                        <h1 data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="top"
                            title="{{ __('Report Number') }} / {{ __('Cheque Number') }}" dir='ltr'
                            class="fs-12 d-block fw-semibold badge badge-light text-theme px-3 pointer mb-0">
                            {{ $reportFile?->chequeNumber }} / {{ $reportFile?->reportNumber }}
                        </h1>



                    </div>








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






                    {{-- 2: chequeAmount --}}
                    <div class="badge badge-light pointer  px-3 ">

                        {{-- subtitle --}}
                        <h1 class="fs-12 d-block fw-semibold text-theme mb-1">
                            {{__('Amount')}}
                        </h1>

                        {{-- amount --}}
                        <span class="fs-12 mb-1 fw-semibold d-block text-theme">{{ $reportFile?->chequeAmount }}<small
                                class='fs-10 fw-bold ms-1 text-theme'>({{__('AED')}})</small></span>
                    </div>



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













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







                {{-- information --}}
                <div class="d-block mb-3">

                    {{-- operation --}}
                    <input type="text" class='form-control form--input input--bg readonly fs-12 mb-2' readonly
                        value="{{ $reportFile?->latestOperation()?->operationInformation?->{__('name')} }}"
                        data-bs-toggle="tooltip" data-bss-tooltip="" title="{{__('Latest Operation')}}">


                    <textarea class="form-control form--input form--textarea small fs-12 mb-0 input--bg readonly"
                        readonly>{{ $reportFile?->{__('information')} }}</textarea>
                </div>






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








                {{-- actionsWrap --}}
                <div class="d-flex align-items-center justify-content-between mb-1">


                    {{-- 1: view --}}
                    <a wire:navigate href="{{ route('dashboard.singleReportFile', [$reportFile->id]) }}"
                        class="btn btn--scheme btn--scheme-4 fs-12 px-1 mx-1 w-100 scale--self-05"
                        type="button">{{__('View')}}</a>


                    {{-- 2: operation --}}
                    <a wire:navigate href="{{ route('dashboard.singleReportFile', [$reportFile->id]) }}#tab-2"
                        class="btn btn--scheme btn--scheme-3 fs-12 px-1 mx-1 w-100 scale--self-05"
                        type="button">{{__('Operation')}}</a>


                    {{-- 3: tasks --}}
                    <a wire:navigate href="{{ route('dashboard.singleReportFile', [$reportFile->id]) }}#tab-3"
                        class="btn btn--scheme btn--scheme-1 fs-12 px-1 mx-1 w-100 scale--self-05"
                        type="button">{{__('Tasks')}}</a>



                    {{-- 4: documents --}}
                    <a wire:navigate href="{{ route('dashboard.singleReportFile', [$reportFile->id]) }}#tab-4"
                        class="btn btn--scheme btn--scheme-theme fs-12 px-1 mx-1 w-100 scale--self-05"
                        type="button">{{__('Docs')}}</a>



                    {{-- 5: remove --}}
                    <button wire:loading.attr='disabled' wire:click='remove({{ $reportFile->id }})'
                        class="btn btn--scheme btn--remove fs-12 px-1 mx-1 w-100 scale--self-05"
                        type="button">{{__('Remove')}}</button>
                </div>
                {{-- endWrap --}}




            </div>
        </div>
        {{-- endCard --}}





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









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








        {{-- pagination --}}
        <div class="col-12 mt-3">{{ $reportFiles?->links() }}</div>







    </div>
    {{-- endContainer --}}
















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







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


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

            @this.set(instance, selectValue);

        }); //end function

    </script>








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








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