@php
	$categories = getCategoriesForDD();
@endphp
<div class="row mb-1">
    <div class="col-md-10 col-12 d-flex flex-wrap pr-0 mb-3">
        <label for="category_id">{{__('obs.category')}}</label>
        <select class="form-control select2_tag" style="width: 100%" name="category_id[]" id="category_id" multiple>
            <option value="0">{{__('obs.all')}}</option>
            @forelse ($categories as $cat)
                <option value="{{$cat->id}}" code={{ $cat->code }}> {{$cat->name_eng .' ('. $cat->code.')'}} </option>
                @forelse ($cat->child as $sub_cat)
                    <option value="{{$sub_cat->id}}" code={{ $sub_cat->code }}>&nbsp;&nbsp; {{$sub_cat->name_eng}}</option>
                    @forelse ($sub_cat->child as $sub_sub_cat)
                        <option value="{{$sub_sub_cat->id}}" code={{ $sub_sub_cat->code }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{$sub_sub_cat->name_eng}}</option>
                    @empty
                    @endforelse
                @empty
                @endforelse
            @empty
            @endforelse
        </select>
    </div>
    <div class="col-md-2 col-12 d-flex flex-wrap pr-0 mb-3 text-left">
        <div class="col-12 px-0"> <br>
            <a class="btn btn-sm btn-outline-info font-weight-bold" name="filter1" onclick="installByCategory()" id="filter1">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filter" viewBox="0 0 16 16">
                <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
            </svg>&nbsp;Filter</a>
        </div>
    </div>
</div>

<script>
    const all_cat_ids = @json($categories->whereNull('parent_id')->pluck('id')->toArray());
    const all_cat_codes = @json($categories->whereNull('parent_id')->pluck('code')->toArray());
    const cat_names = @json($categories->pluck('name_eng', 'code'));
    console.log(cat_names);
    $(document).ready(()=> {
        $(".select2_tag").select2({
            tags: true,
            data: [],
            tokenSeparators: [','],
            closeOnSelect: false
        });
    });
</script>