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

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


                    <a href="{{route('panel.batches.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-4 my-2 ">
                                    <div class="input-icon">
                                        <input type="text" class="form-control" placeholder="{{__('vendors.batch_no')}}"
                                               id="kt_datatable_search_query">
                                        <span><i class="flaticon2-search-1 text-muted"></i></span>
                                    </div>
                                </div>

                                <div class="col-md-4 my-2 ">
                                    <select class="form-control selectpicker" name="course_id"
                                            title="@lang('panel.course')" data-size="5" data-live-search="true">
                                        <option value=" ">@lang('constants.all')</option>
                                        @foreach($courses as $course)
                                            <option value="{{$course->id}}" {{ request('course_id') == $course->id ? 'selected' : '' }}>{{$course->title}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4 my-2 ">
                                    <select class="form-control selectpicker" name="instructor_id"
                                            title="@lang('panel.instructor')" data-size="5" data-live-search="true">
                                        <option value=" ">@lang('constants.all')</option>
                                        @foreach($instructors as $instructor)
                                            <option value="{{$instructor->id}}">{{$instructor->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 my-2 ">
                                    <input type="text" class="form-control" id="kt_datepicker_3"
                                           name="from_date" placeholder="@lang('constants.from_date')"/>
                                </div>

                                <div class="col-md-4 my-2 ">
                                    <input type="text" class="form-control" id="kt_datepicker_3"
                                           name="to_date" placeholder="@lang('constants.to_date')"/>
                                </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 src="{{ asset('panelAssets/js/date-picker.js') }}"></script>
    <script>
        $(document).ready(function (){
            @if(!empty(request('course_id')))
            $('select[name=course_id]').trigger('change');
            @endif
        })

        window.data_url = '{{route('panel.batches.datatable')}}';
        window.columns = [
            {
                field: ' ',
                title: "#",
                width: 120,
                textAlign: "center",
                template: function (data, index, datatable) {
                    return ((datatable.getCurrentPage() - 1) * datatable.getPageSize()) + index + 1;
                },
            },
            {
                field: 'no',
                title: '{{trans('vendors.batch_no')}}',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'course',
                title: '{{trans('panel.course')}}',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'instructor',
                title: '{{trans('panel.instructor')}}',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'students_count',
                title: '{{trans('panel.students_count')}}',
                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,
            }
        ];

        $(document).on('change', 'select[name=course_id]', function () {
            datatable.search($(this).val().toLowerCase(), 'course_id')
        })
        $(document).on('change', 'select[name=instructor_id]', function () {
            datatable.search($(this).val().toLowerCase(), 'instructor_id')
        })
        $(document).on('change', 'input[name=from_date]', function () {
            datatable.search($(this).val(), 'from_date')
        })
        $(document).on('change', 'input[name=to_date]', function () {
            datatable.search($(this).val(), 'to_date')
        })


    </script>

@endpush