{{-- <form id="dt-search-form" onsubmit="return false;"> --}}
<form id="filter-form" action="{{route('machineries.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">
            <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]">{{__('forms.lbl_all')}}</button>
                    <button class="tabs-btn-box activeStatus min-w-[94px]" data-val="1">{{__('forms.lbl_active')}}</button>
                    <button class="tabs-btn-box activeStatus min-w-[94px]" data-val="0">{{__('forms.lbl_inactive')}}</button>
                </div>
            </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')}} ..."
                />
                <x-svg-icon icon="icon-search" />
            </div>

            <div class="w-full lg:w-[280px]">
                <div class="multi-select-dropdown">
                    <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_categories')}}</div>
                    <div class="multi-select-options-content !z-[200]" data-name="category_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 ($categories as $key => $value)
                            <div class="multi-select-option" >
                                <div class="flex gap-2">
                                    <input class="category_id"
                                        {{ $category && $category->id == $value->id ? 'checked' : '' }}
                                        name="category_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-[220px] relative">
                <select class="w-full form-input form-input-select search-inpurt pd-dropdown"
                    name="status" id="status">
                    <option value="">{{__('forms.lbl_all')}}</option>
                    <option value="in_use">{{__('forms.lbl_in_use')}}</option>
                    <option value="under_maintenance">{{__('forms.lbl_under_maintenance')}}</option>
                    <option value="faulty_defective">{{__('forms.lbl_faulty_defective')}}</option>
                    <option value="not_in_use">{{__('forms.lbl_not_in_use')}}</option>
                </select>
            </div>


            @if($locations->count() > 1)
                <div class="w-full lg:w-[280px]">
                    <div class="multi-select-dropdown with-depended">
                        <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_location')}}</div>
                        <div class="multi-select-options-content !z-[200]" data-name="location_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 ($locations as $key => $value)
                                <div class="multi-select-option" >
                                    <div class="flex gap-2">
                                        <input class="location_id" name="location_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>
            @endif
            <div class="w-full lg:w-[280px]">
                <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 $workstationMap)
                            @foreach ($workstationMap['workstations'] as $workstation)
                                <div class="multi-select-option" >
                                    <div class="flex gap-2">
                                        <input class="workstation_id" name="workstation_id[]" type="checkbox" value="{{$workstation['id']}}">
                                        <span>{{$workstation['name']}}</span>
                                    </div>
                                </div>
                            @endforeach
                        @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>
    </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>
@push('component-scripts')
    <script>
        var workstations = @json($workstations);
        $('body').on('change', '.with-depended input[name="location_id[]"]', function () {
            getWorkstationsByLocationSelection(workstations);
        });

    </script>
@endpush