<div class="modal fade bd-example-modal-lg" id="addNew" 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="d-flex justify-content-between">
                            <div class="row w-100 mr-4">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="AddCustomer" class="require">Customer</label>
                                        <select class="form-control" id="AddCustomer">
                                            <option value=""></option>
                                            <option value="May chan">May chan</option>



                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">

                                    <div class="form-group">
                                        <label for="Date">Date</label>
                                        <input type="text" class="form-control dueDate" id="Date" value="">
                                    </div>


                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="AddInvoice" class="require">Delivery#</label>
                                        <select class="form-control" id="AddInvoice">
                                            <option value=""></option>
                                            <option value="INV-220428-001">DN-220428-001</option>

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="custom-dropdown">
                                <select class="statusSelect">
                                    <option value="" hidden>Status</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Completed">Completed</option>
                                    <option value="Confirmed">Confirmed</option>
                                </select>
                            </div>


                        </div>


                
                </div>

                <div class="card-body boxShadow whiteBg mb-3">
                    <div id="gridAddworksheet" class="newGrid"></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() {


        $('#Date').datepicker({
            format: 'dd M, yyyy'
        });


        var NewData = [{
            'Item_Desc': "",
            Qty: "",
            'Use_Qty.': "",
            Size: "",
            Remark: ""
        }, {
            'Item_Desc': "",
            Qty: "",
            'Use_Qty.': "",
            Size: "",
            Remark: ""
        }, {
            'Item_Desc': "",
            Qty: "",
            'Use_Qty.': "",
            Size: "",
            Remark: ""
        }, {
            'Item_Desc': "",
            Qty: "",
            'Use_Qty.': "",
            Size: "",
            Remark: ""
        }, {
            'Item_Desc': "",
            Qty: "",
            'Use_Qty.': "",
            Size: "",
            Remark: ""
        }];
        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;



        $("#gridAddworksheet").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: "Item_Desc",
                    type: "text",
                    width: 100,
                    align: "left"
                },
                {
                    name: "Qty",
                    type: "number",
                    width: 80,
                    align: "left"
                },
                {
                    name: "Size",
                    type: "number",
                    width: 80,
                    align: "left"
                },
                {
                    name: "Use_Qty",
                    type: "number",
                    width: 80,
                    align: "left"
                }, {
                    name: "Remark",
                    type: "remarkField",
                    width: 150,
                    sorting: false
                },
                {
                    type: "control",
                    width: 50,
                    editButton: false
                }
            ],
            onRefreshed: function() {
                var $gridData = $("#gridAddworksheet .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>