Proyectos de Subversion LeadersLinked - Backend

<?php
$acl            = $this->viewModel()->getRoot()->getVariable('acl');
$currentUser    = $this->currentUserHelper();

$roleName = $currentUser->getUserTypeId();

$routeAdd       = $this->url('microlearning/content/topics/add');
$routeDatatable = $this->url('microlearning/content/topics');

$allowAdd               = $acl->isAllowed($roleName, 'microlearning/content/topics/add') ? 1 : 0;
$allowEdit              = $acl->isAllowed($roleName, 'microlearning/content/topics/edit') ? 1 : 0;
$allowDelete            = $acl->isAllowed($roleName, 'microlearning/content/topics/delete') ? 1 : 0;
$allowUsers             = $acl->isAllowed($roleName, 'microlearning/content/topics/users') ? 1 : 0;

// NProgress
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/nprogress/nprogress.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/nprogress/nprogress.js'));

// CKEditor
$this->inlineScript()->appendFile($this->basePath('assets/vendors/ckeditor/ckeditor.js'));

// File Input
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap-fileinput/css/fileinput.min.css'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap-fileinput/themes/explorer-fas/theme.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/plugins/piexif.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/plugins/sortable.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/fileinput.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/locales/es.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/themes/fas/theme.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/themes/explorer-fas/theme.js'));

// Datatables
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.css'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/datatables.net-bs5-responsive/responsive.bootstrap5.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net/jquery.dataTables.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5-responsive/dataTables.responsive.min.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5-responsive/responsive.bootstrap5.min.js'));

// Select2
$this->inlineScript()->appendFile($this->basePath('assets/vendors/select2/js/select2.js'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/select2/js/i18n/es.js'));
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/select2/css/select2.css'));

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/select2-bootstrap5-theme/select2-bootstrap-5-theme.css'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/jsrender/jsrender.min.js'));

// Toggle
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap4-toggle/css/bootstrap4-toggle.min.css'));
$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap4-toggle/js/bootstrap4-toggle.min.js'));

// Input Number Format
$this->inlineScript()->appendFile($this->basePath('assets/vendors/jquery-input-number/input-number-format.jquery.js'));

$this->inlineScript()->captureStart();
echo <<<JS
    jQuery(document).ready(function ($) {
        $.validator.setDefaults({
            debug: true,
            highlight: function (element) {
                $(element).addClass('is-invalid')
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid')
            },
            errorElement: 'span',
            errorClass: 'error invalid-feedback',
            errorPlacement: function (error, element) {
                if (element.parent('.btn-file').length) {
                    error.insertAfter(element.parent().parent())
                } else if (element.parent('.toggle').length) {
                    error.insertAfter(element.parent().parent())
                } else {
                    error.insertAfter(element.parent())
                }
            }
        })

        var allowAdd = $allowAdd
        var allowEdit = $allowEdit
        var allowDelete = $allowDelete

        // Datatables
        var gridTable = $('#gridTable').dataTable({
            processing: true,
            serverSide: true,
            searching: true,
            order: [[0, 'asc']],
            ordering: true,
            ordenable: true,
            responsive: true,
            select: false,
            paging: true,
            pagingType: 'simple_numbers',
            ajax: {
                url: '$routeDatatable',
                type: 'get',
                beforeSend: function (request) {
                    NProgress.start()
                },
                dataFilter: function (response) {
                    var response = jQuery.parseJSON(response)

                    var json = {}
                    json.recordsTotal = 0
                    json.recordsFiltered = 0
                    json.data = []

                    if (response.success) {
                        json.recordsTotal = response.data.total
                        json.recordsFiltered = response.data.total
                        json.data = response.data.items
                    } else {
                        $.fn.showError(response.data)
                    }

                    return JSON.stringify(json)
                }
            },
            language: {
                sProcessing: 'LABEL_DATATABLE_SPROCESSING',
                sLengthMenu: 'LABEL_DATATABLE_SLENGTHMENU',
                sZeroRecords: 'LABEL_DATATABLE_SZERORECORDS',
                sEmptyTable: 'LABEL_DATATABLE_SEMPTYTABLE',
                sInfo: 'LABEL_DATATABLE_SINFO',
                sInfoEmpty: 'LABEL_DATATABLE_SINFOEMPTY',
                sInfoFiltered: 'LABEL_DATATABLE_SINFOFILTERED',
                sInfoPostFix: '',
                sSearch: 'LABEL_DATATABLE_SSEARCH',
                sUrl: '',
                sInfoThousands: ',',
                sLoadingRecords: 'LABEL_DATATABLE_SLOADINGRECORDS',
                oPaginate: {
                    sFirst: 'LABEL_DATATABLE_SFIRST',
                    sLast: 'LABEL_DATATABLE_SLAST',
                    sNext: 'LABEL_DATATABLE_SNEXT',
                    sPrevious: 'LABEL_DATATABLE_SPREVIOUS'
                },
                oAria: {
                    sSortAscending: ': LABEL_DATATABLE_SSORTASCENDING',
                    sSortDescending: ':LABEL_DATATABLE_SSORTDESCENDING'
                }
            },
            drawCallback: function (settings) {
                NProgress.done()
            },
            aoColumns: [
                { mDataProp: 'name' },
                { mDataProp: 'details' },
                { mDataProp: 'image' },
                { mDataProp: 'actions' }
            ],
            columnDefs: [
                {
                    targets: 0,
                    className: 'text-vertical-middle'
                },
                {
                    targets: -3,
                    orderable: false,
                    render: function (data, type, row) {
                        var s = ''
                        s += 'LABEL_STATUS: ' + data['status'] + '<br/>'

                        if (allowUsers && row['actions']['link_total_users']) {
                            s +=
                                'LABEL_TOTAL_USERS: ' +
                                data['total_users'] +
                                ' <button class="btn btn-view-total-users" data-href="' +
                                row['actions']['link_total_users'] +
                                '" data-toggle="tooltip" title="LABEL_VIEW"><i class="fa fa-external-link-alt"></i></button> <br>'
                        } else {
                            s += 'LABEL_TOTAL_USERS: ' + data['total_users'] + '<br/>'
                        }
                        if (allowUsers && row['actions']['link_total_users_actives']) {
                            s +=
                                'LABEL_TOTAL_USERS_ACTIVE: ' +
                                data['total_users_active'] +
                                ' <button class="btn btn-view-total-users" data-href="' +
                                row['actions']['link_total_users_actives'] +
                                '" data-toggle="tooltip" title="LABEL_VIEW"><i class="fa fa-external-link-alt"></i></button> <br>'
                        } else {
                            s +=
                                'LABEL_TOTAL_USERS_ACTIVE: ' + data['total_users_active'] + '<br/>'
                        }

                        return s
                    }
                },
                {
                    targets: -2,
                    orderable: false,
                    render: function (data, type, row) {
                        s = ''

                        if (data['marketplace']) {
                            s =
                                s +
                                '&nbsp; <img class="btn-view-image-marketplace" data-href="' +
                                data['marketplace'] +
                                '" data-toggle="tooltip" src="' +
                                data['marketplace'] +
                                '" title="LABEL_VIEW" style="width: 40px; object-fit: cover; height: 40px;" /> '
                        } else {
                            s = s + ''
                        }

                        if (data['image']) {
                            s =
                                s +
                                '&nbsp; <img class="btn-view-image-app" data-href="' +
                                data['image'] +
                                '" data-toggle="tooltip" src="' +
                                data['image'] +
                                '" title="LABEL_VIEW" style="width: 40px; object-fit: cover; height: 40px;" /> '
                        } else {
                            s = s + ''
                        }

                        return s
                    }
                },
                {
                    targets: -1,
                    orderable: false,
                    render: function (data, type, row) {
                        s = ''

                        if (allowEdit && data['link_edit']) {
                            s =
                                s +
                                '<button class="btn btn-info btn-sm btn-edit" data-href="' +
                                data['link_edit'] +
                                '" data-toggle="tooltip" title="LABEL_EDIT"><i class="fa fa-pen"></i> LABEL_EDIT </button>&nbsp;'
                        }
                        if (allowDelete && data['link_delete']) {
                            s =
                                s +
                                '<button class="btn btn-danger btn-sm btn-delete" data-href="' +
                                data['link_delete'] +
                                '" data-toggle="tooltip" title="LABEL_DELETE"><i class="fa fa-trash"></i> LABEL_DELETE </button>&nbsp;'
                        }
                        return s
                    }
                }
            ]
        })

        // Validación de formulario de creación
        var validatorAdd = $('#form-add').validate({
            debug: true,
            onclick: false,
            onkeyup: false,
            ignore: [],
            rules: {
                name: {
                    required: true,
                    maxlength: 128
                },
                description: {
                    updateCkeditor: function () {
                        CKEDITOR.instances.description_add.updateElement()
                    },
                    required: true
                },
                file: {
                    required: true,
                    extension: 'jpg|jpeg|png',
                    accept: 'image/jpg,image/jpeg,image/png'
                },
                order: {
                    required: true,
                    digits: true,
                    min: 1,
                    max: 250
                },
                marketplace: {
                    required: false,
                    extension: 'jpg|jpeg|png',
                    accept: 'image/jpg,image/jpeg,image/png'
                },
                status: {
                    required: true
                },
                privacy: {
                    required: true
                },
                type: {
                    required: true
                },
                cost: {
                    required: function () {
                        return $('#form-add #type').val() == 's'
                    },
                    number: true,
                    min: 0
                }
            },
            submitHandler: function (form) {
                var formdata = false
                if (window.FormData) {
                    formdata = new FormData(form)
                }

                $('.info_noticia').prop('disabled', true)
                NProgress.start()
                $.ajax({
                    dataType: 'json',
                    accept: 'application/json',
                    method: 'post',
                    url: $('#form-add').attr('action'),
                    data: formdata,
                    processData: false,
                    contentType: false
                })
                    .done(function (response) {
                        console.log(response)
                        if (response['success']) {
                            $.fn.showSuccess(response['data'])

                            $('#row-add').hide()
                            $('#row-edit').hide()
                            $('#row-listing').show()

                            gridTable.api().ajax.reload(null, false)
                        } else {
                            validatorAdd.resetForm()
                            if (jQuery.type(response['data']) == 'string') {
                                $.fn.showError(response['data'])
                            } else {
                                $.each(response['data'], function (fieldname, errors) {
                                    $.fn.showFormErrorValidator('#form-add #' + fieldname, errors)
                                })
                            }
                        }
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        $.fn.showError(textStatus)
                    })
                    .always(function () {
                        NProgress.done()
                    })
                return false
            },
            invalidHandler: function (form, validator) { }
        })

        // Validación de formulario de edición
        var validatorEdit = $('#form-edit').validate({
            debug: true,
            onclick: false,
            onkeyup: false,
            ignore: [],
            rules: {
                name: {
                    required: true,
                    maxlength: 128
                },
                description: {
                    updateCkeditor: function () {
                        CKEDITOR.instances.description_edit.updateElement()
                    },
                    required: true
                },
                file: {
                    required: false,
                    extension: 'jpg|jpeg|png',
                    accept: 'image/jpg,image/jpeg,image/png'
                },
                order: {
                    required: true,
                    digits: true,
                    min: 1,
                    max: 250
                },
                marketplace: {
                    required: false,
                    extension: 'jpg|jpeg|png',
                    accept: 'image/jpg,image/jpeg,image/png'
                },
                status: {
                    required: true
                },
                privacy: {
                    required: true
                },
                type: {
                    required: true
                },
                cost: {
                    required: function () {
                        return $('#form-edit #type').val() == 's'
                    },
                    number: true,
                    min: 0
                }
            },
            submitHandler: function (form) {
                var formdata = false
                if (window.FormData) {
                    formdata = new FormData(form)
                }

                NProgress.start()
                $.ajax({
                    dataType: 'json',
                    accept: 'application/json',
                    method: 'post',
                    url: $('#form-edit').attr('action'),
                    data: formdata,
                    processData: false,
                    contentType: false
                })
                    .done(function (response) {
                        if (response['success']) {
                            $.fn.showSuccess(response['data'])

                            gridTable.api().ajax.reload(null, false)

                            $('#row-add').hide()
                            $('#row-edit').hide()
                            $('#row-listing').show()
                        } else {
                            validatorEdit.resetForm()
                            if (jQuery.type(response['data']) == 'string') {
                                $.fn.showError(response['data'])
                            } else {
                                $.each(response['data'], function (fieldname, errors) {
                                    $.fn.showFormErrorValidator('#form-edit #' + fieldname, errors)
                                })
                            }
                        }
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        $.fn.showError(textStatus)
                    })
                    .always(function () {
                        NProgress.done()
                    })
                return false
            },
            invalidHandler: function (form, validator) { }
        })

        // Evento de botón de vista de imagen de la aplicación
        $('body').on('click', '.btn-view-image-app', function (e) {
            e.preventDefault()

            $('#image-app').attr('src', $(this).data('href'))
            $('#modalPreviewImage').modal('show')
            return false
        })

        // Evento de botón de vista de imagen del marketplace
        $('body').on('click', '.btn-view-image-marketplace', function (e) {
            e.preventDefault()

            $('#image-marketplace').attr('src', $(this).data('href'))
            $('#modalPreviewMarketPlace').modal('show')
            return false
        })

        // Evento de botón de añadir
        $('body').on('click', 'button.btn-add', function (e) {
            e.preventDefault()
            NProgress.start()

            $.ajax({
                dataType: 'json',
                method: 'get',
                url: '$routeAdd'
            })
                .done(function (response) {
                    if (response['success']) {
                        $('#table-capsules tbody').empty()

                        $('#capsule_uuid').children().not(':first').remove()
                        $.each(response['data']['capsules'], function (index, element) {
                            $('#capsule_uuid').append(
                                $('<option>', {
                                    value: element.id,
                                    text: element.name
                                })
                            )
                        })

                        $('#form-add #name').val('')
                        $('#form-add #privacy').val('')
                        $('#form-add #status').val('')
                        $('#form-add #cost').val('')
                        $('#form-add #form-row-cost').hide()
                        $('#form-add #file').fileinput('reset')
                        $('#form-add #file').val('')
                        $('#form-add #marketplace').fileinput('reset')
                        $('#form-add #marketplace').val('')
                        $('#form-add #order').val('1')

                        CKEDITOR.instances.description_add.setData('')
                        validatorAdd.resetForm()

                        $('#row-edit').hide()
                        $('#row-listing').hide()
                        $('#row-add').show()
                    } else {
                        $.fn.showError(response['data'])
                    }
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    $.fn.showError(textStatus)
                })
                .always(function () {
                    NProgress.done()
                })

            return false
        })

        // Evento de botón de editar
        $('body').on('click', 'button.btn-edit', function (e) {
            e.preventDefault()
            var url = $(this).data('href')

            NProgress.start()
            $.ajax({
                dataType: 'json',
                accept: 'application/json',
                method: 'get',
                url: url
            })
                .done(function (response) {
                    if (response['success']) {
                        $('#form-edit').attr('action', url)

                        $('#form-edit #capsule_uuid').children().not(':first').remove()

                        $.each(response['data']['capsules'], function (index, element) {
                            $('#form-edit #capsule_uuid').append(
                                $('<option>', {
                                    value: element.id,
                                    text: element.name
                                })
                            )

                            if (element.checked) {
                                let data = {
                                    id: element.id,
                                    name: element.name
                                }

                                $('#table-capsules tbody').append(
                                    $('#trCapsuleTemplate').render(data)
                                )
                            }
                        })

                        $('#form-edit').attr('action', url)
                        $('#form-edit #name').val(response['data']['name'])
                        $('#form-edit #privacy').val(response['data']['privacy'])
                        $('#form-edit #type').val(response['data']['type'])
                        $('#form-edit #order').val(response['data']['order'])
                        $('#form-edit #status').val(response['data']['status'])

                        if ('s' == response['data']['type']) {
                            $('#form-edit #form-row-cost').show()
                            $('#form-edit #cost').val(response['data']['cost'])
                        } else {
                            $('#form-edit #form-row-cost').hide()
                            $('#form-edit #cost').val('')
                        }

                        $('#form-edit #file').fileinput('reset')
                        $('#form-edit #file').val(response['data']['image'])

                        $('#form-edit #marketplace').fileinput('reset')
                        $('#form-edit #marketplace').val(response['data']['marketplace'])

                        CKEDITOR.instances.description_edit.setData(
                            response['data']['description']
                        )
                        validatorEdit.resetForm()

                        $('#row-add').hide()
                        $('#row-listing').hide()
                        $('#row-edit').show()
                    } else {
                        validatorEdit.resetForm()
                        if (jQuery.type(response['data']) == 'string') {
                            $.fn.showError(response['data'])
                        } else {
                            $.each(response['data'], function (fieldname, errors) {
                                $.fn.showFormErrorValidator('#form-edit #' + fieldname, errors)
                            })
                        }
                    }
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    $.fn.showError(textStatus)
                })
                .always(function () {
                    NProgress.done()
                })
        })

        // Evento de botón de eliminar
        $('body').on('click', 'button.btn-delete', function (e) {
            e.preventDefault()
            var action = $(this).data('href')

            swal
                .fire({
                    title: 'LABEL_ARE_YOU_SURE',
                    icon: 'question',
                    cancelButtonText: 'LABEL_NO',
                    showCancelButton: true,
                    confirmButtonText: 'LABEL_YES'
                })
                .then((result) => {
                    if (result.isConfirmed) {
                        NProgress.start()
                        $.ajax({
                            dataType: 'json',
                            accept: 'application/json',
                            method: 'post',
                            url: action
                        })
                            .done(function (response) {
                                if (response['success']) {
                                    $.fn.showSuccess(response['data'])
                                    gridTable.api().ajax.reload(null, false)
                                } else {
                                    $.fn.showError(response['data'])
                                }
                            })
                            .fail(function (jqXHR, textStatus, errorThrown) {
                                $.fn.showError(textStatus)
                            })
                            .always(function () {
                                NProgress.done()
                            })
                    }
                })
        })

        // Evento de botón de cancelar
        $('body').on('click', 'button.btn-cancel', function (e) {
            e.preventDefault()
            $('#row-add').hide()
            $('#row-edit').hide()
            $('#row-listing').show()
        })

        // Evento de botón de refrescar
        $('body').on('click', 'button.btn-refresh', function (e) {
            e.preventDefault()
            gridTable.api().ajax.reload(null, false)
        })

        // Evento de botón de vista de usuarios
        $('body').on('click', 'button.btn-view-total-users', function (e) {
            e.preventDefault()

            var href = $(this).data('href')
            NProgress.start()
            $.ajax({
            dataType: 'json',
            accept: 'application/json',
            method: 'get',
            url: href
            })
            .done(function (response) {
                if (response['success']) {
                $('#table-users-capsule').val(response['data']['capsule'])

                $('#gridTableUsers tbody').empty()

                $.each(response['data']['items'], function (index, item) {
                    var s = '<tr>'
                    s = s + '<td>' + item['first_name'] + '</td>'
                    s = s + '<td>' + item['last_name'] + '</td>'
                    s = s + '<td>' + item['email'] + '</td>'

                    s = s + '<td>'
                    if (item['details']['access']) {
                    s = s + 'LABEL_ACCESS : ' + item['details']['access'] + '<br>'
                    }
                    if (item['details']['paid_from']) {
                    s =
                        s + 'LABEL_PAID_FROM : ' + item['details']['paid_from'] + '<br>'
                    }
                    if (item['details']['paid_to']) {
                    s = s + 'LABEL_PAID_TO : ' + item['details']['paid_to'] + '<br>'
                    }

                    s = s + '</td>'
                    s = s + '</tr>'

                    $('#gridTableUsers tbody').append(s)
                })

                $('#notificationUsersModal').modal('show')
                } else {
                $.fn.showError(response['data'])
                }
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                $.fn.showError(textStatus)
            })
            .always(function () {
                NProgress.done()
            })
            return false
        })

        // Evento de cambio de tipo de formulario de creación
        $('#form-add #type').change(function (e) {
            e.preventDefault()

            if ('s' == $(this).val()) {
            $('#form-add #form-row-cost').show()
            } else {
            $('#form-add #cost').val(0)
            $('#form-add #form-row-cost').hide()
            }
        })

        // Evento de cambio de tipo de formulario de edición
        $('#form-edit #type').change(function (e) {
            e.preventDefault()

            if ('s' == $(this).val()) {
            $('#form-edit #form-row-cost').show()
            } else {
            $('#form-edit #cost').val(0)
            $('#form-edit #form-row-cost').hide()
            }
        })

        // Formato de número de formulario de creación
        $('#form-add #cost').inputNumberFormat({ decimal: 2 })

        // Formato de número de formulario de edición
        $('#form-edit #cost').inputNumberFormat({ decimal: 2 })

        // Formato de número de formulario de creación
        $('#form-add #order').inputNumberFormat({ decimal: 0 })

        // Formato de número de formulario de edición
        $('#form-edit #order').inputNumberFormat({ decimal: 0 })

        // Configuración del formulario de creación
        $('#form-add #file').fileinput({
            theme: 'fa',
            language: 'es',
            showUpload: false,
            dropZoneEnabled: false,
            maxFileCount: 1,
            msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $image_size',
            allowedFileExtensions: ['jpeg', 'jpg', 'png']
        })

        // Configuración del formulario de edición
        $('#form-edit #file').fileinput({
            theme: 'fa',
            language: 'es',
            showUpload: false,
            dropZoneEnabled: false,
            maxFileCount: 1,
            msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $image_size',
            allowedFileExtensions: ['jpeg', 'jpg', 'png']
        })

        // Configuración del formulario de creación
        $('#form-add #marketplace').fileinput({
            theme: 'fa',
            language: 'es',
            showUpload: false,
            dropZoneEnabled: false,
            maxFileCount: 1,
            msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $marketplace_size',
            allowedFileExtensions: ['jpeg', 'jpg', 'png']
        })

        // Configuración del formulario de edición
        $('#form-edit #marketplace').fileinput({
            theme: 'fa',
            language: 'es',
            showUpload: false,
            dropZoneEnabled: false,
            maxFileCount: 1,
            msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $marketplace_size',
            allowedFileExtensions: ['jpeg', 'jpg', 'png']
        })

        // Evento de botón de seleccionar capsule
        $('#btn-select-capsule').click(function (e) {
            e.preventDefault()

            var id = $('#capsule_uuid option:selected').val()

            if (!id) return false

            var name = $('#capsule_uuid option:selected').text()
            var key = '#tr_capsule_id_' + id
            var element = $(key)

            if (element.length > 0) return false

            if (name.length > 50) name = name.substr(0, 50) + '...'

            let data = { id, name }

            $('#table-capsules tbody').append($('#trCapsuleTemplate').render(data))

            return false
        })

        // Configuración del formulario de creación
        $('#capsule_uuid').select2({
            theme: 'bootstrap-5',
            width: '100%'
        })

        // Configuración del editor de CKEditor para el formulario de creación
        CKEDITOR.replace('description_add', {
            toolbar: [
                { name: 'editing', items: ['Scayt'] },
                { name: 'links', items: ['Link', 'Unlink'] },
                {
                    name: 'paragraph',
                    items: [
                        'NumberedList',
                        'BulletedList',
                        '-',
                        'Outdent',
                        'Indent',
                        'Blockquote'
                    ]
                },
                {
                    name: 'basicstyles',
                    items: ['Bold', 'Italic', 'Strike', 'RemoveFormat']
                },
                '/',
                {
                    name: 'insert',
                    items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar']
                },
                { name: 'styles', items: ['Styles', 'Format'] },
                { name: 'tools', items: ['Maximize'] }
            ],
            removePlugins: 'elementspath,Anchor',
            heigth: 100
        })

        // Configuración del editor de CKEditor para el formulario de edición
        CKEDITOR.replace('description_edit', {
            toolbar: [
                { name: 'editing', items: ['Scayt'] },
                { name: 'links', items: ['Link', 'Unlink'] },
                {
                    name: 'paragraph',
                    items: [
                        'NumberedList',
                        'BulletedList',
                        '-',
                        'Outdent',
                        'Indent',
                        'Blockquote'
                    ]
                },
                {
                    name: 'basicstyles',
                    items: ['Bold', 'Italic', 'Strike', 'RemoveFormat']
                },
                '/',
                {
                    name: 'insert',
                    items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar']
                },
                { name: 'styles', items: ['Styles', 'Format'] },
                { name: 'tools', items: ['Maximize'] }
            ],
            removePlugins: 'elementspath,Anchor',
            heigth: 100
        })
    })
JS;
$this->inlineScript()->captureEnd();
?>

<div class="container">
        <div class="card" id="row-listing">
                <div class="card-header">
                        <h6 class="card-title">LABEL_TOPICS</h6>
                </div>

                <div class="card-body">
                    <div class="row">
                         <div class="col-12 mt-3">
                    <table id="gridTable" class="table   table-bordered">
                        <thead>
                            <tr>
                                <th>LABEL_NAME</th>
                                <th>LABEL_DETAILS</th>
                                <th>LABEL_IMAGES</th>
                                <th>LABEL_ACTIONS</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                         </div>
                    </div>
                </div>

                <div class="card-footer text-right">
                        <button type="button" class="btn btn-info btn-refresh"><i class="fa fa-sync"></i> LABEL_REFRESH </button>
                        <?php if ($allowAdd) : ?>
                        <button type="button" class="btn btn-primary btn-add"><i class="fa fa-plus"></i> LABEL_ADD </button>
                        <?php endif; ?>
                </div>
        </div>
        
        <div class="card" id="row-add" style="display:none">
                <div class="card-header">
                        <h6 class="card-title">LABEL_ADD_TOPIC</h6>
                </div>

                <?php
                $form = $this->formAdd;
                $form->setAttributes([
                        'method'  => 'post',
                        'action'  => $routeAdd,
                        'name'    => 'form-add',
                        'id'      => 'form-add',
                ]);

                $form->prepare();
                echo $this->form()->openTag($form);
                ?>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('name');
            
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_NAME']);
                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('description');
                        $element->setAttributes(['id' => 'description_add', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_DESCRIPTION']);
                        echo $this->formLabel($element);
                        echo $this->formTextArea($element);
                        ?>
                    </div>
                </div>
        
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('order');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_ORDER']);
                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>
        
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('status');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_STATUS']);
                        echo $this->formLabel($element);
                        echo $this->formSelect($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('privacy');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_PRIVACY']);
                        echo $this->formLabel($element);
                        echo $this->formSelect($element);
                        ?>
                    </div>
                </div>  

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('type');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_TYPE']);
                        echo $this->formLabel($element);
                        echo $this->formSelect($element);
                        ?>
                    </div>
                </div>

                <div class="row"  id="form-row-cost">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('cost');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_COST']);
                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>
        
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('file');
                        $element->setOptions(['label' => 'LABEL_IMAGE']);
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
                        echo $this->formLabel($element);
                        echo $this->formFile($element);
                        ?>
                    </div>
                </div> 

                <div class="row">
                    <div class="col-8 mt-3">
                        <select name="capsule_uuid" id="capsule_uuid">
                            <option value="">LABEL_SELECT</option>
                        </select>
                    </div>
                    <div class="col-4 mt-3">
                        <button type="button" class="btn btn-primary" id="btn-select-capsule" data-toggle="tooltip" title="LABEL_ADD LABEL_CAPSULE">LABEL_ADD LABEL_CAPSULE</button>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12 mt-3">
                        <table id="table-capsules" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>LABEL_NAME</th>
                                    <th>LABEL_ACTIONS</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="card-footer text-right">
                <button type="submit" class="btn btn-primary">LABEL_SAVE</button>
                <button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>
            </div>
                <?php echo $this->form()->closeTag($form); ?>
        </div>
        
        
        <div class="card" id="row-edit" style="display:none">
                <div class="card-header">
                        <h6 class="card-title">LABEL_EDIT_TOPIC</h6>
                </div>

                <?php
                $form = $this->formEdit;
                $form->setAttributes([
                        'method'    => 'post',
                        'name'      => 'form-edit',
                        'id'        => 'form-edit'
                ]);

                $form->prepare();
                echo $this->form()->openTag($form);
                ?>
                
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('name');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_NAME']);
                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('description');
                        $element->setAttributes(['id' => 'description_edit', 'rows' => '2', 'class' => 'form-control',   'class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_DESCRIPTION']);
                        echo $this->formLabel($element);
                        echo $this->formTextArea($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('order');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_ORDER']);
                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('status');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_STATUS']);
                        echo $this->formLabel($element);
                        echo $this->formSelect($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('privacy');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_PRIVACY']);
                        echo $this->formLabel($element);
                        echo $this->formSelect($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('type');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_TYPE']);
                        echo $this->formLabel($element);
                        echo $this->formSelect($element);
                        ?>
                    </div>
                </div>

                <div class="row"  id="form-row-cost">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('cost');
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setOptions(['label' => 'LABEL_COST']);
                        echo $this->formLabel($element);
                        echo $this->formText($element);
                        ?>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('file');
                        $element->setOptions(['label' => 'LABEL_IMAGE']);
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
                        echo $this->formLabel($element);
                        echo $this->formFile($element);
                        ?>
                    </div>
                </div>  
                
                <div class="row">
                    <div class="col-12 mt-3">
                        <?php
                        $element = $form->get('marketplace');
                        $element->setOptions(['label' => 'LABEL_MARKETPLACE']);
                        $element->setAttributes(['class' => 'form-control']);
                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
                        echo $this->formLabel($element);
                        echo $this->formFile($element);
                        ?>
                    </div>
                </div> 
            </div>
                
            <div class="card-footer text-right">
                <button type="submit" class="btn btn-primary">LABEL_SAVE</button>
                <button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>
            </div>
                <?php echo $this->form()->closeTag($form); ?>
        </div>
</div>

<!-- The Modal -->
<div class="modal" id="modalPreviewImage">
        <div class="modal-dialog ">
                <div class="modal-content">

                        <!-- Modal Header -->
                        <div class="modal-header">
                                <h6 class="modal-title">LABEL_IMAGE</h6>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
                        </div>

                        <!-- Modal body -->
                        <div class="modal-body text-center">
                                <img src="" class="img img-responsive" style="width: 300px; height: auto" id="image-app" />
                        </div>

                        <!-- Modal footer -->
                        <div class="modal-footer text-right">
                                 <button type="button" class="btn btn-light" data-bs-dismiss="modal">LABEL_CLOSE</button>
                        </div>
                </div>
        </div>
</div>

<!-- The Modal -->
<div class="modal" id="modalPreviewMarketPlace">
        <div class="modal-dialog">
                <div class="modal-content">
                        <!-- Modal Header -->
                        <div class="modal-header">
                                <h6 class="modal-title">LABEL_IMAGE_MARKETPLACE</h6>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
                        </div>

                        <!-- Modal body -->
                        <div class="modal-body text-center">
                                <img src="" class="img img-responsive" style="width: 300px; height: auto" id="image-marketplace" />
                        </div>

                        <!-- Modal footer -->
                        <div class="modal-footer text-right">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">LABEL_CLOSE</button>
                        </div>
                </div>
        </div>
</div>

<!-- The Modal -->
<div class="modal" id="notificationUsersModal">
        <div class="modal-dialog modal-xl">
                <div class="modal-content">

                        <!-- Modal Header -->
                        <div class="modal-header">
                                <h6 class="modal-title">LABEL_USERS</h6>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
                        </div>

                        <!-- Modal body -->
                        <div class="modal-body">
                                <form>
                                        <div class="row">
                                                <div class="col-12 mt-3">
                                                <label>LABEL_CAPSULE</label>
                                                <input type="text" readonly="readonly" id="table-users-capsule" class="form-control">
                                                </div>
                                        </div>  
                                </form>
                                <div class="row">
                                        <div class="col-12 mt-3">
                                        <div style="height: 300px;overflow: scroll;">
                                                <table id="gridTableUsers" style="width: 100%" class="table table-bordered">
                                                        <thead>
                                                                <tr>
                                                                        <th>LABEL_FIRST_NAME</th>
                                                                        <th>LABEL_LAST_NAME</th>
                                                                        <th>LABEL_EMAIL</th>
                                                                        <th>LABEL_DETAILS</th>
                                                                </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                </table>
                                        </div>
                                </div>
                        </div>  
                        </div>

                        <!-- Modal footer -->
                        <div class="modal-footer text-right">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">LABEL_CLOSE</button>
                        </div>

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

<script id="trCapsuleTemplate" type="text/x-jsrender">
    <tr id="tr_capsule_id_{{:id}}">
       <td class="text-left">
            <input type="hidden" class="capsule_id" name="capsule_id[]" value="{{:id}}" />      
            <span class="d-none d-md-inline">{{:name}}</span>
       </td>   
       <td>
            <button class="btn btn-default btn-remove-capsule" data-id="{{:id}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE">
                <i class="fa fa-ban" aria-hidden="true"></i>
                <span class="d-none d-md-inline">LABEL_DELETE</span>
            </button>   
       </td>
   </tr>
</script>