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

@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.courses')}}
                    </h3>
                </div>
                <div class="card-toolbar">


                    <a href="{{route('panel.courses.create')}}"
                       class="btn btn-primary font-weight-bolder">
                        <span>
                            <i class="ki ki-plus icon-sm"></i>
                        </span>
                        {{__('constants.add')}}
                    </a>
                </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">
                                        <option value=" ">@lang('constants.all')</option>
                                        @foreach($categories as $category)
                                            <option
                                                value="{{$category->id}}" {{ isset($item) && @$item->category_id==$category->id ? 'selected' :'' }} >{{$category->name}}</option>
                                        @endforeach
                                    </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.courses.datatable')}}';
        window.columns = [
            {
                field: ' ',
                title: "#",
                width: 120,
                textAlign: "center",
                template: function (data, index, datatable) {
                    return ((datatable.getCurrentPage() - 1) * datatable.getPageSize()) + index + 1;
                },
            },
            {
                field: 'title',
                title: '{{trans('panel.title')}}',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'category',
                title: '{{trans('panel.category')}}',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'price',
                title: '{{trans('vendors.price')}}',
                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,
                template: function (data) {
                    return data.options;
                },
            }
        ];
        //
        $(document).on('change', 'select[name=category_id]', function () {
            datatable.search($(this).val().toLowerCase(), 'category_id');
        });
    </script>

@endpush