<div class="page-title">
    <h1><?php echo $this->user->lang("Product Custom Fields"); ?></h1>
    <span><?php echo $this->user->lang("Manage any additional custom fields to be viewed in client's products."); ?></span>
</div>

<div class="cm-holder dt-info">
    <div class="head padding-bottom">
        <div class="dt-header">
            <div class="dt-header-left">
                <button class="action-buttons blue" id="add-button">
                    <i class="icon-ic-21"></i>
                    <?php echo $this->user->lang('Add Custom Field'); ?>
                </button>

                <div class="dt-filters">
                </div>
            </div>

            <div class="dt-header-right">
                <div class="filter-group dt-length"></div>
            </div>
        </div>
    </div>

    <div class="dt-wrapper pull-top">
        <div class="table-responsive">
            <table id="table-list" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th></th>
                        <th class="text-center"><input type="checkbox" id="checkAll"></th>
                        <th class=""></th>
                        <th class=""><?php echo $this->user->lang('Name'); ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($this->fields as $field) { ?>
                    <tr id="<?php echo $field['id']; ?>">
                        <td><?php echo $field['fieldOrder']; ?></td>
                        <td></td>
                        <td></td>
                        <td><a class='edit-link' data-id='<?php echo $field['id']; ?>'><?php echo $field['text']; ?></a></td>
                    </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
        <div class="table-actions">
            <button
                class="pill danger"
                type="button"
                id="delete-button"
                disabled="disabled"
            >
                <i class="fas fa-trash"></i>
                <?php echo $this->user->lang('Delete'); ?>
            </button>
        </div>

    </div>
</div>

<script data-cfasync="false">
    $(document).ready(function () {
        var addEditWindow = new RichHTML.window({
            url: 'index.php?fuse=admin&view=productcustomfield&controller=settings&settings=support',
            actionUrl: 'index.php?fuse=admin&action=savecustomfield',
            showSubmit: true,
            title: clientexec.lang("Add/Edit Custom Field"),
            onSubmit: function (data) {
                jsonData = clientexec.parseResponse(data);
                if (jsonData.success == true) {
                    window.location.reload();
                }
            }
        });

        var table = $('#table-list').DataTable({
            order: [
                [0, 'asc']
            ],
            searching: false,
            select: {
                style: 'multi',
                selector: 'td:first-child'
            },
           rowReorder: {
                dataSrc: 0,
                selector: '.reorder-handle'
            },
            columnDefs: [
                { targets: 0, visible: false },
                {
                    targets: 1,
                    "orderable": false,
                    className: 'select-checkbox',
                    checkboxes: { selectRow: true },
                    width: '1%'
                },
                {
                    targets: 2,
                    width: '5%',
                    className: 'reorder-handle text-center',
                    orderable: false,
                    render: function () {
                        return '<i class="bi bi-grip-vertical"></i>';
                    }
                },
                {
                    targets: 3,
                    width: '65%'
                },
            ]
        });

        table.on('row-reorder', function (e, diff, edit) {
            table.one('draw', function () {
                var newOrder = table.rows().ids().toArray().join(',');
                $.ajax({
                    url: 'index.php?fuse=admin&action=reordercustomfields',
                    method: 'POST',
                    data: { 'fields': newOrder, type: 'package' },
                    traditional: true,
                });
            });
        });

        $('#add-button').on('click', function() {
            addEditWindow.show();
        });

        $('#table-list').on('click', '.edit-link', function(e) {
            e.preventDefault();
            addEditWindow.show({
                params: {
                    id: $(this).data('id'),
                }
            });
        });

        $('#delete-button').click(function () {
            RichHTML.msgBox(clientexec.lang('Are you sure you want to delete the selected custom field(s)?'),
            {
                type:"confirm"
            }, function(result) {
                if ( result.btn === clientexec.lang("Yes") ) {
                    var rowIds = [];
                    var selectedRows = table.rows({ selected: true }).data();
                    selectedRows.each(function(value, index) {
                        rowIds.push(value.DT_RowId);
                    });

                    $.post("index.php?fuse=admin&action=deletecustomfield", { ids: rowIds, type: 'package' }, function(data) {
                        jsonData = clientexec.parseResponse(data);
                        if (jsonData.success == true) {
                            window.location.reload();
                        }
                    });
                }
            });
        });

        table.on('select.dt deselect.dt', function () {
            $('#delete-button').prop(
                'disabled',
                table.rows({ selected: true }).count() === 0
            );
        });


        $('#checkAll').on('click', function () {
            if (this.checked) {
                table.rows({page: 'current'}).every(function () {
                    var rowNode = this.node();
                    if ($(rowNode).find('td.select-checkbox').length) {
                        this.select();
                    }
                });
            } else {
                table.rows().deselect();
            }
        });
    });
</script>