{{-- search row --}}
<div wire:ignore class="row rtl--direction align-items-center mb-4 pb-3" data-aos="fade" data-aos-duration="800"
    data-aos-once="true">




    {{-- 1: clients --}}
    <div class="col-3">
        <div class="select--single-wrapper scheme scheme--4 scale--3">
            <select class="form-select form--select2 init--select" data-placeholder="{{__('Search for Client')}}"
                data-searchType='searchClients'>
                <option value="" selected=""></option>

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

            </select><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                viewBox="0 0 16 16" class="bi bi-search">
                <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
                </path>
            </svg>
        </div>
    </div>






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






    {{-- 2: files --}}
    <div class="col-3">
        <div class="select--single-wrapper scheme scheme--3 scale--3">
            <select class="form-select form--select2 init--select" data-placeholder="{{__('Search for File')}}"
                data-searchType='searchFiles'>
                <option value="" selected=""></option>

                @foreach ($files as $file)
                <option value="{{$file->id}}">{{$file->serial}}</option>
                @endforeach


            </select><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                viewBox="0 0 16 16" class="bi bi-search">
                <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
                </path>
            </svg>
        </div>
    </div>










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







    {{-- 3: cases --}}
    <div class="col-3">
        <div class="select--single-wrapper scheme scheme--2 scale--3">
            <select class="form-select form--select2 init--select" data-placeholder="{{__('Search for Case')}}"
                data-searchType='searchCases'>
                <option value="" selected=""></option>

                @foreach ($cases as $case)
                <option value="{{$case->id}}">{{$case->serial}}</option>
                @endforeach

            </select><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                viewBox="0 0 16 16" class="bi bi-search">
                <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
                </path>
            </svg>
        </div>
    </div>











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






    {{-- 4: document --}}
    <div class="col-3">
        <div class="select--single-wrapper scheme scheme--1 scale--3">
            <select class="form-select form--select2 init--select" data-placeholder="{{__('Search for Docx')}}"
                data-searchType='searchDocuments'>
                <option value="" selected=""></option>

                @foreach ($documents ?? [] as $document)
                <option value="{{$document->id}}">{{$document->documentNumber}}</option>
                @endforeach


            </select><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                viewBox="0 0 16 16" class="bi bi-search">
                <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
                </path>
            </svg>
        </div>
    </div>











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







    <script>
        // 1: select2 changeEvent
        $(".init--select").on("change", function (event) {


            // 1.1: getValue - formDataItem
            selectValue = event.target.value;
            searchMethod = $(this).attr('data-searchType');


            if (searchMethod == 'searchClients')
                @this.searchClients(selectValue)

            if (searchMethod == 'searchFiles')
                @this.searchFiles(selectValue)

            if (searchMethod == 'searchCases')
                @this.searchCases(selectValue)

            if (searchMethod == 'searchDocuments')
                @this.searchDocuments(selectValue)

        }); //end function

    </script>




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







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