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


    {{-- filtersRow --}}
    <div class="row" wire:ignore>




        {{-- 1: caseType --}}
        <div class="col" wire:loading.class='no-events-loading'>
            <label class="form-label form--label">{{__('Case Type')}}</label>
            <div class="select--single-wrapper mb-4">
                <select
                    class="form-select form--select2 init--select init--client-cases-select level--select level--one"
                    data-level-type='one' data-level-child='CaseStage' data-level-group='search-client-cases'
                    data-instance='searchCaseType' data-clear='true'>
                    <option value=""></option>

                    @foreach ($caseTypes ?? [] as $caseType)

                    <option value="{{$caseType->id}}">{{ $caseType?->{__('name')} }}</option>

                    @endforeach
                </select>
            </div>
        </div>






        {{-- 2: caseStage --}}
        <div class="col" wire:loading.class='no-events-loading'>
            <label class="form-label form--label">{{__('Case Stage')}}</label>
            <div class="select--single-wrapper mb-4">
                <select
                    class="form-select form--select2 init--select init--client-cases-select level--select level--two"
                    data-level-type='one' data-level-group='search-client-cases' data-instance='searchCaseStage'
                    data-clear='true'>
                    <option value=""></option>
                </select>
            </div>
        </div>




        {{-- 3: client --}}
        <div class="col">
            <label class="form-label form--label">{{__('Client')}}</label>
            <div class="select--single-wrapper mb-4">
                <select class="form-select form--select2 init--select init--client-cases-select"
                    data-instance='searchClient' data-clear='true'>
                    <option value=""></option>

                    @foreach ($clients ?? [] as $client)

                    <option value="{{$client->id}}">{{ $client?->{__('name')} }}</option>

                    @endforeach
                </select>
            </div>
        </div>




        {{-- 4: FromDate --}}
        <div class="col">
            <label class="form-label form--label">{{__('From Date')}}</label>
            <input wire:model.live='searchFromDate' class="form-control form--input mb-4" type="date" />
        </div>







        {{-- 5: untilDate --}}
        <div class="col">
            <label class="form-label form--label">{{__('Until Date')}}</label>
            <input wire:model.live='searchUntilDate' class="form-control form--input mb-4" type="date" />
        </div>




    </div>
    {{-- endFilters --}}









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










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



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



        {{-- title --}}
        <div class="col-6 text-center">
            <h4 class="mb-0 fw-bold text-solid-black">{{__("Client's Cases")}}</h4>
        </div>




        {{-- counter --}}
        <div class="col-3 text-end">
            <h3 data-bs-toggle="tooltip" data-bss-tooltip="" class="fw-bold scale--self-05 counter--badge"
                title="{{ __('Number of Cases') }}">{{ $fileCases?->total() }}</h3>
        </div>







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








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




                    {{-- headers --}}
                    <thead>
                        <tr>
                            <th class="th--md">{{__('Client')}}</th>
                            <th class="th--sm">{{__('File / Case')}}</th>
                            <th class="th--md">{{__('Type / Stage')}}</th>
                            <th class="th--md">{{__('Date of Filing')}}</th>
                            <th class="th--md">{{__('Claim Amount')}}</th>
                            <th class="th--sm">{{__('Status')}}</th>
                            <th class="th--md">{{__('Next Hearing')}}</th>
                        </tr>
                    </thead>
                    {{-- endHeaders --}}






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






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


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

                        <tr key='client-cases-tr-{{ $fileCase->id }}'>




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


                            {{-- 1.2: caseNumber --}}
                            <td class="fw-bold">
                                {{ $fileCase?->file?->fileNumber ?? "—" }} / {{ $fileCase?->caseNumber ?? "—"}}
                            </td>



                            {{-- 1.3: caseType - caseStage --}}
                            <td>
                                {{ $fileCase?->caseType?->{__('name')} ?? '—' }} / {{
                                $fileCase?->caseStage?->{__('name')} ?? '—' }}
                            </td>






                            {{-- 1.4: claimAmount - creationDate --}}
                            <td>{{ date('d / m / Y', strtotime($fileCase?->registerDate)) }}</td>
                            <td>{{ number_format($fileCase?->claimAmount ?? 0, 2) }}</td>






                            {{-- 1.5: status - nextHearing --}}
                            <td>{{ $fileCase->isOpen ? __("Active") : __("Closed") }}</td>
                            <td>{{ $fileCase?->nextHearing() ? date('d / m / Y',
                                strtotime($fileCase?->nextHearing()?->hearingDate)) : '—' }}</td>


                        </tr>

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



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



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

















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










    {{-- selectHandle --}}
    <script>
        $(".init--client-cases-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>






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








    {{-- levelSelectHandle --}}
    <script>
        $(".init--client-cases-select.level--select").on("change", function(event) {



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

            levelType = $(this).attr('data-level-type');
            levelChild = $(this).attr('data-level-child');
            levelGroup = $(this).attr('data-level-group');


            @this.set(instance, selectValue);
            @this.levelSelect(levelType, levelChild, selectValue, levelGroup);


    }); //end function
    </script>









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












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