@extends('panel.layout.master',['title' => __('panel.students'),'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.students')}}
                    </h3>
                </div>
                <div class="card-toolbar">


                    <button type="button" data-toggle="modal" data-target="#addStudentModal"
                            class="btn btn-primary font-weight-bolder">
											<span>
                                                <i class="ki ki-plus icon-sm"></i>
											</span>
                        {{__('constants.add')}}
                    </button>
                    <!--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="{{__('constants.search')}}"
                                               id="kt_datatable_search_query">
                                        <span><i class="flaticon2-search-1 text-muted"></i></span>
                                    </div>
                                </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-->


    <div class="modal fade" id="addStudentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">@lang('constants.add')</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <form id="form" method="post" action="{{ route('panel.batches.students.store',$item->id) }}">
                    <div class="modal-body">

                        <div class="form-group row">
                            <label class="col-form-label text-left col-lg-3 col-sm-12">{{ __('panel.student') }}</label>
                            <div class="col-lg-9 col-md-9 col-sm-12">
                                <select class="form-control select2" id="kt_select2_6" name="student_id">
                                    <option label="Label"></option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">
                            @lang('constants.cancel')
                        </button>
                        <button type="submit" class="btn btn-primary font-weight-bold"
                                id="m_login_signin_submit">@lang('constants.save')</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

@stop

@push('panel_js')

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

        window.data_url = '{{route('panel.batches.students.data' , $item->id)}}';
        window.columns = [
            {
                field: ' ',
                title: "#",
                width: 120,
                textAlign: "center",
                template: function (data, index, datatable) {
                    return ((datatable.getCurrentPage() - 1) * datatable.getPageSize()) + index + 1;
                },
            },
            {
                field: 'name',
                title: '@lang('panel.name')',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'email',
                title: '@lang('panel.email')',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'created_at',
                title: '@lang('constants.created_at')',
                selector: false,
                textAlign: 'center',
            },
            {
                field: 'options',
                title: '{{trans('constants.actions')}}',
                sortable: false,
                width: 100,
                overflow: 'visible',
                autoHide: false,
            }
        ];


    </script>

    <script>

        function formatRepo(repo) {
            if (repo.loading) return repo.text;
            var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result-repository__meta'>" +
                "<div class='select2-result-repository__title'>@lang('panel.name') : " + repo.name + "</div>";
            if (repo.email) {
                markup += "<div class='select2-result-repository__description'>@lang('constants.email'):" + repo.email + "</div>";
            }
            return markup;
        }

        function formatRepoSelection(repo) {
            return repo.name || repo.text;
        }


        $('#addStudentModal').on('shown.bs.modal', function () {
            $("#kt_select2_6").select2({
                placeholder: "@lang('panel.student')",
                allowClear: true,
                ajax: {
                    url: "{{ route('panel.batches.students.search' , $item->id) }}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used
                        params.page = params.page || 1;

                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatRepo, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
            });

        });
    </script>
@endpush