<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 Credit Note
                </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">
                        <!--   form-->
                        <form>
                            <div class="row">

                                <div class="col-md-12">

                                    <p>
                                        Credit Note# <span class="small text-muted">(Auto
                                            Generate)</span>: <span class="text-danger h3"> CN-1232455</span>
                                    </p>

                                </div>
                                <div class="col-md-3">
                                    <div class="form-group borderSelect2">
                                        <p class="mb-0 small">Customer Name </P>
                                        <input type="text" class="form-control mainSearchInput normalSearch" aria-describedby="search" placeholder="" autocomplete="nope">
                                    </div>
                                </div>

                                <div class="col-md-3">

                                    <div class="form-group">
                                        <label for="Invoice">Invoice Code </label>
                                        <select class="form-control" id="Invoice">

                                            <option value=""></option>
                                            <option value="INV12300">INV12300</option>
                                        </select>
                                    </div>

                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">

                                        <label for="Currency">Currency </label>
                                        <select class="form-control" id="Currency">
                                            <option value="HKD">HKD</option>
                                            <option value="USD">USD</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="Date">Date</label>
                                        <input type="text" class="form-control date" id="Date" value="">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="boxShadow whiteBg mt-3 mb-4">
                                        <!-- bill Form -->
                                        <?php include 'component/billaddress.php'; ?>

                                        <!-- bill Form END -->
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div id="grid" class="newGrid"></div>

                                </div>
                                <div class="col-md-12">
                                    <hr>
                                    <!-- <div class="d-flex justify-content-between">
                                        <p class="small">Subtotal <span class="text-muted">(Discount Included)</span>
                                        </p>
                                        <p class="text-secondary">$0.00 </p>
                                    </div> -->

                                    <div class="d-flex justify-content-between double_border_bottom mb-4">
                                        <p class="h1">Total Amount </p>
                                        <p class="h1">$0.00 </p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="RemarksCreditNote">Credit Note Remarks</label>
                                        <textarea class="form-control" id="RemarksCreditNote" rows="2"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="Remark">Remarks <span class="text-muted">(For Internal
                                                Use)</span> </label>
                                        <textarea class="form-control" id="Remark" rows="2"></textarea>
                                    </div>
                                </div>
       
                            </div>
                        </form>
                        <!--   form END-->
                    </div>
            </div>
            <div class="modal-footer">


                <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Back</button>
                <button type="button" class="btn btn-success submitDate shadow_green">Approve</button>
                <!-- <button type="button" class="btn btn-danger submitDate shadow_red">Reject</button> -->
                <button type="button" class="btn btn-primary submitDate shadow_blue">Create</button>


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

<script>
            $(function() {


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



                var NewData = [{
             
                    Description: "",
                    Qty: "",

                    Unit_Price: "",
                    Amount: ""
                }, {
                 
                    Description: "",
                    Qty: "",

                    Unit_Price: "",
                    Amount: ""
                }, {
                 
                    Description: "",
                    Qty: "",

                    Unit_Price: "",
                    Amount: ""
                }, {
               
                    Description: "",
                    Qty: "",

                    Unit_Price: "",
                    Amount: ""
                }, {
                 
                    Description: "",
                    Qty: "",

                    Unit_Price: "",
                    Amount: ""
                }];
                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;

                $("#grid").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: "#",
                            type: "iconField",
                            width: 30,
                            align: "left"
                        }, {
                            name: "Description",
                            type: "remarkField",
                            width: 150,
                            sorting: false
                        },
                        {
                            name: "Qty",
                            type: "number",
                            width: 80,
                            align: "left"
                        },


                        {
                            name: "Unit_Price",
                            type: "text",
                            width: 80
                        }, {
                            name: "Amount",
                            type: "text",
                            width: 80
                        },

                        {
                            type: "control",
                            width: 50,
                            editButton: false
                        }
                    ],
                    onRefreshed: function() {
                        var $gridData = $("#grid .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>