{{-- Common Filters for both Item Company and Master --}}

<!--  Filter by Category -->
<div class="ml-4">
    <div class="dropdown inline-block">
        <button
            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <span class="mr-1">Category</span>
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20">
                <path
                    d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
            </svg>
        </button>

        <ul class="dropdown-menu absolute hidden text-gray-700 pt-1 overflow-y-auto h-52">
            @foreach ($categories as $category)
                <li class=""><a
                        class="rounded-t bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap"
                        href="?category={{ $category['Category'] }}&{{ http_build_query(request()->except('category', 'page')) }}"
                        value="{{ $category['Category'] }}">{{ $category['Category'] }}</a></li>
            @endforeach
        </ul>
    </div>
</div>

<!--  Filter by brand -->
<div class="ml-4">
    <div class="dropdown inline-block">
        <button
            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <span class="mr-1">Brand</span>
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20">
                <path
                    d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
            </svg>
        </button>

        <ul class="dropdown-menu absolute hidden text-gray-700 pt-1 overflow-y-auto h-52">
            @foreach ($brands as $brand)
                <li class=""><a
                        class="rounded-t bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap"
                        href="?brand={{ $brand['Brand'] }}&{{ http_build_query(request()->except('brand', 'page')) }}"
                        value="{{ $brand['Brand'] }}">{{ $brand['Brand'] }}</a></li>
            @endforeach
        </ul>
    </div>
</div>

<!--  Filter by Status -->
<div class="ml-4">
    <div class="dropdown inline-block">
        <button
            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <span class="mr-1">Status</span>
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20">
                <path
                    d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
            </svg>
        </button>

        <ul class="dropdown-menu absolute hidden text-gray-700 pt-1 overflow-y-auto h-52">
            @foreach ($statuses as $status)
                <li class=""><a
                        class="rounded-t bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap"
                        href="?status={{ $status['Status'] }}&{{ http_build_query(request()->except('status', 'page')) }}"
                        value="{{ $status['Status'] }}">{{ $status['Status'] }}</a></li>
            @endforeach
        </ul>
    </div>
</div>