<div class="modal fade bd-example-modal-lg" id="Edit" tabindex="-1" role="dialog" aria-labelledby="addNew" aria-disabled="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Add New
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-disabled="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="card-body boxShadow whiteBg mb-3">
                    <div class="row">
                        <div class="col-md-12 d-flex justify-content-between">
                            <div class="row w-100 mr-4">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="EditDate">Adjustment Date</label>
                                        <input type="text" class="form-control" id="EditDate" value="30 Jan 2020" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="EditReference">Reference#</label>
                                        <input type="text" class="form-control" id="EditReference" value="RF-12357123" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="EditWarehouse">Warehouse</label>
                                        <input type="text" class="form-control" id="EditWarehouse" value="1" disabled placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="custom-dropdown">
                                <select class="statusSelect">
                                    <option value="" hidden>Status</option>
                                    <option value="Received">Received</option>
                                    <option value="Cancel">Cancel</option>

                                </select>
                            </div>


                        </div>


                    </div>

                </div>
                <div class="card-body boxShadow whiteBg mb-3">
                    <div id="gridEditadjustment" class="newGrid mb-4"></div>

                    <div class="form-group">
                        <label for="EditRemark">Remark (for internal use) : </label>
                        <textarea class="form-control" id="EditRemark" rows="2"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary saveDate shadow_blue">Create</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {
        $('#EditDate').datepicker({
            format: 'dd M, yyyy'
        });

        var NewData = [{
            'Product#': "PD-12467",
            'Product_Name_en': "Apple",
            'Product_Name_cn': "電話",
            'QTY': "10",
            'Action': "Subtraction"
        }, {
            'Product#': "PD-12467",
            'Product_Name_en': "Apple",
            'Product_Name_cn': "電話",
            'QTY': "10",
            'Action': "Subtraction"
        }, {
            'Product#': "PD-12467",
            'Product_Name_en': "Apple",
            'Product_Name_cn': "電話",
            'QTY': "10",
            'Action': "Subtraction"
        }];
        var IconField = function(config) {
            jsGrid.Field.call(this, config);
        };
        IconField.prototype = new jsGrid.Field({


            itemTemplate: function(value) {
                var insertValue = this._insertValue = $(
                    `<i class="mdi mdi-select-all"></i>`);
                return insertValue;
            },
            insertTemplate: function(value) {

                return this._insertInput = $(
                    `<i class="mdi mdi-select-all"></i>`
                );
            },
            editTemplate: function(value) {

                return this._editInput = $(
                    `<i class="mdi mdi-select-all"></i>`
                );

            },
            insertValue: function() {
                return this._insertInput.val();
            },

            editValue: function() {


                return this._editInput.val();
            }
        });
        jsGrid.fields.iconField = IconField;

        var RemarkField = function(config) {
            jsGrid.Field.call(this, config);
        };
        RemarkField.prototype = new jsGrid.Field({


            itemTemplate: function(value) {
                var insertValue = this._insertValue = $(
                    `<span class="textareaText" >${value}</span>`);
                return insertValue;
            },
            insertTemplate: function(value) {

                return this._insertInput = $(
                    `<textarea class="textareaRow" rows="1"></textarea>`
                );
            },
            editTemplate: function(value) {

                return this._editInput = $(
                    `<textarea class="textareaRow" rows="1">${value}</textarea>`
                );

            },
            insertValue: function() {
                return this._insertInput.val();
            },

            editValue: function() {


                return this._editInput.val();
            }
        });

        jsGrid.fields.remarkField = RemarkField;

        const SelectField = jsGrid.SelectField;

        function Select2Field(config) {
            SelectField.call(this, config);
        }

        Select2Field.prototype = new SelectField({
            itemTemplate: function(value) {
                var insertValue = this._insertValue = value;
                return insertValue;
            },
            insertValue: function() {
                return this._insertInput.val();
            },

            _createSelect() {
                const el = SelectField.prototype._createSelect.call(this);
                setTimeout(() => el.select2({
                    placeholder: ''
                }), 100);
                return el;
            }
        });

        jsGrid.fields.select2 = jsGrid.Select2Field = Select2Field;



        $("#gridEditadjustment").jsGrid({
            height: "auto",
            width: "100%",
            inserting: true,
            editing: true,
            sorting: true,
            paging: true,
            data: NewData,
            rowClass: function(item, itemIndex) {
                return "client-" + itemIndex;
            },

            controller: {
                loadData: function() {
                    return NewData.slice(0, 15);
                }
            },

            fields: [{
                    name: "Product#",
                    type: "text",
                    width: 100,
                    align: "left"
                },
                {
                    name: "Product_Name_en",
                    type: "text",
                    width: 100,
                    align: "left"
                },
                {
                    name: "Product_Name_cn",
                    type: "text",
                    width: 100,
                    align: "left"
                },
                {
                    name: "Action",
                    type: "select",

                    items: [{
                        value: '1',
                        text: 'Subtraction'
                    }, {
                        value: '2',
                        text: 'Addition'
                    }],

                    textField: 'text',
                    valueField: 'value',
                    width: 80,
                    align: "left"
                },
                {
                    name: "QTY",
                    type: "number",
                    width: 80,
                    align: "left"
                },
                {
                    type: "control",
                    width: 50,
                    editButton: false
                }
            ],
            onRefreshed: function() {
                var $gridData = $("#gridEditadjustment .jsgrid-grid-body tbody");

                $gridData.sortable({
                    update: function(e, ui) {
                        // array of indexes
                        var clientIndexRegExp = /\s*client-(\d+)\s*/;
                        var indexes = $.map($gridData.sortable("toArray", {
                            attribute: "class"
                        }), function(classes) {
                            return clientIndexRegExp.exec(classes)[1];
                        });
                        alert("Reordered indexes: " + indexes.join(", "));

                        // arrays of items
                        var items = $.map($gridData.find("tr"), function(row) {
                            return $(row).data("JSGridItem");
                        });
                        console && console.log("Reordered items", items);
                    }
                });
            },
            rowClick: function(args) {

                var $row = $(args.event.target).closest("tr");
                var $cell = $(args.event.target).closest(".jsgrid-cell");
                cellIndex = $($row.find("td")).index($cell);
                if (this._editingRow) {
                    this.updateItem();
                }
                if (this.editing) {
                    this.editItem($row);
                }
            }


        });
    });
</script>