@extends('panel.layout.master',['title' => __('panel.exams'),'is_active'=>'exams'])

@section('content')
    <!--begin::Container-->
    <div class="container">

        <!--begin::Card-->
        <div class="card card-custom">
            <div class="card-header">
                <div class="card-title">
                    <h3 class="card-label">{{__('panel.exams')}}
                    </h3>
                </div>
                <div class="card-toolbar">


                    <a href="{{route('panel.exams.create')}}"
                       class="btn btn-primary font-weight-bolder">
											<span>
                                                <i class="ki ki-plus icon-sm"></i>
											</span>
                        {{__('constants.add')}}</a>
                    <!--end::Button-->
                </div>
            </div>
            <div class="card-body">
                <!--begin: Search Form-->
                <div class="mb-7">
                    <div class="row align-items-center">
                        <div class="col-12">
                            <div class="row align-items-center">
                                <div class="col-md-3 my-2 my-md-0">
                                    <div class="input-icon">
                                        <input type="text" class="form-control" placeholder="{{__('panel.search')}}"
                                               id="kt_datatable_search_query">
                                        <span><i class="flaticon2-search-1 text-muted"></i></span>
                                    </div>
                                </div>

                                <div class="col-md-3 my-2 my-md-0">
                                    <select class="form-control selectpicker" name="category_id"
                                            title="@lang('panel.category')" data-size="5"
                                            data-live-search="true">
                                        @foreach($categories as $category)
                                            <option
                                                value="{{$category->id}}" {{ isset($item) && @$item->category_id == $category->id ? 'selected' :'' }} >{{$category->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3 my-2 my-md-0">
                                    <select class="form-control selectpicker" name="sub_category_id"
                                            title="@lang('panel.sub_category')" data-size="5"
                                            data-live-search="true">
                                    </select>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>

                <!--end: Search Form-->
                <!--begin: Datatable-->
                <div class="datatable datatable-bordered datatable-head-custom" id="kt_datatable"></div>
                <!--end: Datatable-->
            </div>
        </div>
        <!--end::Card-->
    </div>
    <!--end::Container-->
@stop

@push('panel_js')

    <script src="{{ asset('panelAssets/js/data-ajax.js') }}"></script>
    <script>

        window.data_url = '{{route('panel.exams.datatable')}}';
        window.columns = [
            {
                field: ' ',
                title: "#",
                width: 120,
                textAlign: "center",
                template: function (data, index, datatable) {
                    return ((datatable.getCurrentPage() - 1) * datatable.getPageSize()) + index + 1;
                },
            },
            {
                field: 'name',
                title: '{{trans('panel.name')}}',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'category',
                title: '{{trans('panel.category')}}',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'subcategory',
                title: '{{trans('panel.sub_category')}}',
                selector: false,
                textAlign: 'center',
            }, {
                field: 'active',
                title: '{{trans('constants.status')}}',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'options',
                title: '{{trans('constants.actions')}}',
                sortable: false,
                width: 100,
                overflow: 'visible',
                autoHide: false,
            }
        ];


        let categories = @json($categories);
        $(document).on('change', 'select[name=category_id]', function () {
            let selected_category = categories.find(i => i.id == $(this).val());
            let sub_categories = selected_category?.sub_categories || [];

            let options = '';
            sub_categories.forEach((i) => {
                options += `<option value="${i.id}">${i.name}</option>`
            });


            $('select[name=sub_category_id]').html(options).selectpicker('refresh');
            filter();
        })
        $(document).on('change', 'select[name=sub_category_id]', function () {
            filter();
        });


        function filter() {
            console.log(datatable)
            datatable.setDataSourceParam('generalSearch', $('#kt_datatable_search_query').val().toLowerCase())
                .setDataSourceParam('category_id', $('select[name=category_id]').val())
                .setDataSourceParam('sub_category_id', $('select[name=sub_category_id]').val())
                .reload(); // reloads with new filters


            // datatable.search($('#kt_datatable_search_query').val().toLowerCase(), 'generalSearch');
            // datatable.search($('select[name=category_id]').val(), 'category_id');
            // datatable.search($('select[name=sub_category_id]').val(), 'sub_category_id');
        }


    </script>

@endpush