{{-- <form id="dt-search-form" onsubmit="return false;"> --}}
<form id="filter-form" action="{{route('checklists.index')}}" method="POST" onsubmit="return false;">
    <div class="flex flex-col gap-4">
        <div class="flex flex-col lg:flex-row justify-center lg:justify-between items-center gap-2">
            @if(isset($status_filter) && $status_filter)
                <div class="search-bar mb-4 w-full">
                    <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="pending">{{__('forms.lbl_pending')}}</button>
                        <button class="tabs-btn-box activeStatus min-w-[94px]" data-val="due">{{__('forms.lbl_due')}}</button>
                        <button class="tabs-btn-box activeStatus min-w-[94px]" data-val="completed">{{__('forms.lbl_completed')}}</button>
                    </div>
                </div>
            @else
                <div></div>
            @endif

            @php
                $date = request()->has('date') && request()->get('date') != "" ? parseFromFormat(request()->get('date')) : Carbon\Carbon::today();

                $prevMonth = $date->copy()->subMonth()->format(config('settings.date_format'));
                $nextMonth = $date->copy()->addMonth()->format(config('settings.date_format'));

                $prevWeek = $date->copy()->subWeek()->format(config('settings.date_format'));
                $nextWeek = $date->copy()->addWeek()->format(config('settings.date_format'));

                $prevDay = $date->copy()->subDay()->format(config('settings.date_format'));
                $nextDay = $date->copy()->addDay()->format(config('settings.date_format'));
                $today = Carbon\Carbon::today()->format(config('settings.date_format'));
            @endphp

            <div class="flex gap-2 rounded-[8px] items-center overflow-x-scroll no-scrollbar w-full lg:justify-end">
                <a class="btn-secondary-sm" data-toggle='tooltip' data-placement='top' title="{{trans('menu.prev_month')}}" href="?date={{$prevMonth}}&month=prev" style="letter-spacing: -2px;"><<<</a>
                <a class="btn-tertiary-sm" data-toggle='tooltip' data-placement='top' title="{{trans('menu.prev_week')}}" href="?date={{$prevWeek}}&week=prev"><i class="mdi mdi-chevron-double-left"></i></a>
                <a class="btn-tertiary-sm" data-toggle='tooltip' data-placement='top' title="{{trans('menu.prev_day')}}" href="?date={{$prevDay}}"><i class="mdi mdi-chevron-left"></i></a>
                <a  class="btn-text-sm" data-toggle='tooltip' data-placement='top' title="{{trans('menu.today_title')}}" href="?date={{$today}}"><i class="mdi mdi-checkbox-blank-circle-outline"></i></a>
                <a  class="btn-tertiary-sm" data-toggle='tooltip' data-placement='top' title="{{trans('menu.next_day')}}" href="?date={{$nextDay}}"><i class="mdi mdi-chevron-right"></i></a>
                <a class="btn-tertiary-sm" data-toggle='tooltip' data-placement='top' title="{{trans('menu.next_week')}}" href="?date={{$nextWeek}}&week=next"><i class="mdi mdi-chevron-double-right"></i></a>
                <a class="btn-secondary-sm" data-toggle='tooltip' data-placement='top' title="{{trans('menu.next_month')}}" href="?date={{$nextMonth}}&month=next" style="letter-spacing: -2px;">>>></a>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            <div class="w-full lg:w-[280px] 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-[280px] 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-[280px] assignto-block group-block hidden">
                <div class="multi-select-dropdown">
                    <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_workstation')}}</div>
                    <div class="multi-select-options-content !z-[200]" data-name="workstation_id">
                        <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 ($workstations as $key => $value)
                            <div class="multi-select-option" >
                                <div class="flex gap-2">
                                    <input class="workstation_id" name="workstation_id[]" 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-[280px] relative assignto-block">
                    <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>

    <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>