@include('vendor.backpack.crud.fields.email_campaign.ckeditor')
@include('vendor.backpack.crud.fields.email_campaign.button.add_content',[
    'id' => 'add_content_education_resource',
    'label' => '新增教學資源',
])

@push('crud_fields_styles')
    <link href="{{ asset('packages/select2/dist/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
@endpush
@push('crud_fields_scripts')
    <script src="{{ asset('packages/select2/dist/js/select2.full.min.js') }}"></script>
    @if (app()->getLocale() !== 'en')
        <script src="{{ asset('packages/select2/dist/js/i18n/' . app()->getLocale() . '.js') }}"></script>
    @endif

    <script>
        $(document).ready(function () {
            var content_education_resource = {
                'name': "{{$field['name']}}",
                'ready': function () {
                    let add_button = $('#add_content_education_resource');
                    add_button.click(function () {
                        content_education_resource.addEducationResourcePopup();
                    });
                },
                'addEducationResourcePopup': function () {
                    let education_resource_selector_id = content_education_resource.name + '_selector'
                    let message = "";
                    message += "<select id='" + education_resource_selector_id + "' class='' style='width: 100%'>";
                    message += "</select>";

                    let popup = bootbox.dialog({
                        title: "選擇教學資源",
                        message: message,
                        size: 'large',
                        onEscape: true,
                        backdrop: true,
                        cache: true,
                        onShown: function (e) {
                            popup.removeAttr("tabindex");

                            popup.find('#' + education_resource_selector_id).select2({
                                theme: "bootstrap",
                                dataType: 'json',
                                quietMillis: 250,
                                multiple: true,
                                ajax: {
                                    url: "{{route("admin.email_campaign.educationResourceSelect2AjaxSearch")}}",
                                    type: 'get',
                                    delay: 200,
                                    data: function (params) {
                                        return {
                                            q: params.term, // search term
                                            page: params.page || 1, // pagination
                                        };
                                    },
                                    processResults: function (data, params) {
                                        params.page = params.page || 1;
                                        return {
                                            results: $.map(data.data, function (item) {
                                                return {
                                                    text: item['crudDisplay'],
                                                    id: item['id']
                                                }
                                            }),
                                            pagination: {
                                                more: data.from < data.to
                                            }
                                        };
                                    }
                                },
                            });
                        },
                        buttons: {
                            'yes': {
                                'label': '新增',
                                'className': 'btn btn-normal-add',
                                'callback': function () {
                                    let education_resource_ids = popup.find('#' + education_resource_selector_id).val();
                                    $.ajax({
                                        url: "{{route("admin.email_campaign.getEducationResourceContents")}}",
                                        type: 'post',
                                        data: {
                                            'education_resource_ids': education_resource_ids
                                        },
                                        success: function (content_education_resource_html) {
                                            content_education_resource.addEducationResource(content_education_resource_html);
                                            bootbox.hideAll();
                                        }
                                    });
                                }
                            }
                        }
                    });
                },
                'addEducationResource': function (event_html) {
                    let editor = content_education_resource.getCkeditor();
                    let data = editor.getData();

                    data += event_html;
                    editor.setData(data);
                },
                'getCkeditor': function () {
                    let editor = CKEDITOR.instances[content_education_resource.name]

                    return editor;
                }
            };

            content_education_resource.ready();
        });
    </script>
@endpush