{{-- <form id="dt-search-form" onsubmit="return false;"> --}}
<form id="filter-form" class="mt-2" action="{{ route('settings.reviews.index') }}" method="POST" onsubmit="return false;">

    <div class="search-bar mb-4">
        <div class="tabs overflow-x-scroll no-scrollbar">
            <button class="tabs-btn-box active activeStatus min-w-[94px]" data-val="All">{{__('forms.lbl_all')}}</button>
            <button class="tabs-btn-box activeStatus min-w-[94px]" data-val="REQUESTED">{{ __('forms.lbl_pending') }}</button>
            <button class="tabs-btn-box activeStatus min-w-[94px]" data-val="COMPLETED">{{ __('forms.lbl_completed') }}</button>
        </div>
    </div>

    <div class="flex flex-wrap items-center gap-2">
        <div class="w-full lg:w-[250px] search-bar">
            <input type="text" id="query" class="search-input filter-search w-full"
                name="query"
                placeholder="{{__('forms.lbl_search_reports_by_name')}} ..."
            />
            <x-svg-icon icon="icon-search" />
        </div>

        <div class="w-full lg:w-[230px]">
            <div class="multi-select-dropdown">
                <div class="multi-select-box text-sm-regular">{{ __('forms.filter_by_review_subject') }}</div>
                <div class="multi-select-options-content !z-[200]" data-name="subject">
                    <div class="search-bar w-full p-2">
                        <input type="text" data-multisearch="1" class="form-input w-full multisearch"
                            name="query"
                            placeholder="{{ __('forms.lbl_search') }} ..."
                        />
                        <x-svg-icon icon="icon-search" />
                    </div>

                    @foreach ($subjects as $key => $value)
                        <div class="multi-select-option" >
                            <div class="flex gap-2">
                                <input class="subject" name="subject[]" type="checkbox" value="{{$value->id}}">
                                <span>{{$value->name}}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
                    <x-svg-icon icon="icon-chevron-down" width="20" height="20" />
                </div>
            </div>
        </div>

        <div class="w-full lg:w-[270px] relative">
                <input name="range" type="text" class="form-input w-full reportrange"
                    placeholder="{{getDateFormat()}}-{{getDateFormat()}}">

            <x-svg-icon icon="icon-calendar" width="16" height="16" class="search-icon" />
        </div>

        <div class="w-full lg:w-[270px] relative">
            <select name="users[]" id="users" class="w-full form-input-select text-md-regular text-custom-grey-500 pd-dropdown dropdownSelect"
                data-placeholder="{{__('forms.lbl_filter_by_specific_employee')}}"
                multiple
            >
                @foreach ($users as $key => $user)
                    <option value="{{$user->id}}">{{$user->display_name}}</option>
                @endforeach
            </select>
        </div>

    </div>

    <div class="filter-tags-selection hidden flex items-center gap-2 bg-gray-50 rounded-lg p-4 overflow-x-scroll no-scrollbar mt-3">

    </div>
</form>