<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 Invoice Recurring
                </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>
                        <div class="row">

                            <div class="col-md-12">
         
                                <p>
                                    Invoice Recurring# <span class="small text-muted">(Auto
                                        Generate)</span>: <span class="text-danger h3">IC-200001</span>
                                </p>

                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="CustomerName">Customer Name </label>

                                    <input type="text" class="form-control mainSearchInput normalSearch" aria-describedby="search" value="" placeholder="" autocomplete="nope">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="QuotationNo">Quotation# </label>

                                    <select class="form-control" id="QuotationNo">
                                        <option value=""></option>
                                        <option value="QU-220428-001">QU-220428-001</option>
                                        <option value="QU-220428-002">QU-220428-002</option>


                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">

                                    <label for="Salesman">Salesman </label>
                                    <select class="form-control" id="Salesman">
                                        <option value=""></option>
                                        <option value="Amy">Amy Wong</option>
                                        <option value="Jackie">Jackie Wong</option>


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

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

                                    <label for="Currency">Currency </label>
                                    <select class="form-control" id="Currency">
                                        <option value=""></option>
                                        <option value="HKD">HKD</option>
                                        <option value="USD">USD</option>


                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">

                                    <label for="Currency">Service Type </label>
                                    <select class="form-control" id="Currency">
                                        <option value=""></option>
                                        <option value="Rental">Rental</option>
                                        <option value="Retail">Retail</option>
                                        <option value="CNY">CNY</option>
                                        <option value="XMAS">XMAS</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="StartDate">Start Date</label>
                                    <input type="text" class="form-control date" id="StartDate" value="">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="EndDate">End Date</label>
                                    <input type="text" class="form-control date" id="EndDate" value="">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Repeat every</label>
                                    <div class="d-flex">
                                        <input type="text" class="form-control" value="">
                                        <select class="form-control" id="QuotationNo">

                                            <option value="Month">Month</option>
                                            <option value="Year">Year</option>


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

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="Cycles">Remaining Cycles</label>
                                    <div class="d-flex">
                                        <input type="text" class="form-control" id="Cycles" value="">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="Neverexpires" id="Neverexpires" value="">
                                            <label class="form-check-label nowrap" for="Neverexpires">
                                                Never expires

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

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

                                <div class="boxShadow whiteBg mt-3 mb-3">
                                    <!-- bill Form -->
                                    <?php include 'component/billaddress.php'; ?>

                                    <!-- bill Form END -->
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div class="boxShadow whiteBg mt-3 mb-3">
                                    <!-- ship Form -->
                                    <?php include 'component/shippingaddress.php'; ?>

                                    <!-- ship Form END -->
                                </div>
                            </div>


                            <div class="col-md-12">
                                <div id="AddInvoicerecurringGrid" 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">
                                    <p class="small">Total Cost
                                    </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 row align-items-center">
                                    <label class="col-sm-4 mb-2" for="Terms">Terms and Conditions :
                                    </label>
                                    <div class="col-sm-8 mb-2">
                                        <select class="form-control">

                                            <option value="Default" Selected>Default</option>
                                            <option value="Template01">Template01</option>
                                            <option value="Template01">Template01</option>
                                            <option value="Template01">Template01</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group mb-4">
                                    <textarea class="form-control" rows="2" id="Terms"></textarea>
                                </div>
                                <div class="form-group row align-items-center">
                                    <label class="col-sm-4 mb-2" for="PaymentTerms">Payment Terms :
                                    </label>
                                    <div class="col-sm-8 mb-2">
                                        <select class="form-control">

                                            <option value="Default" Selected>Default</option>
                                            <option value="Template01">Template01</option>
                                            <option value="Template01">Template01</option>
                                            <option value="Template01">Template01</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control" rows="2" id="PaymentTerms"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="Remarks">Invoice Remarks</label>
                                    <textarea class="form-control" id="Remarks" rows="3"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="Remarks ">Remarks <span class="text-muted">(For Internal
                                            Use)</span></label>
                                    <textarea class="form-control" id="Remarks" rows="3"></textarea>
                                </div>
                            </div>
                          
                        </div>
                    </form>
                </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-danger submitDate shadow_red">Reject</button> -->
                <button type="button" class="btn btn-primary submitDate shadow_blue">Create</button>


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

<script>
    $(function() {

        // $("#Quotation").select2({
        //     placeholder: "",
        //     allowClear: true
        // });

        // $("#Receipt").select2({
        //     placeholder: "",
        //     allowClear: true
        // });
        $("#CreatedBy").select2({
            placeholder: "",
            allowClear: true
        });
        $('#InvoiceDate').datepicker({
            format: 'dd M, yyyy'

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



        var NewData = [{
            'Item#': "",
            Description: "",
            'Order_Qty': "",
            'Delivered_Qty': "",
            Cost: "",
            'Disc%': "",
            Unit_Price: "",
            Amount: ""
        }, {
            'Item#': "",
            Description: "",
            'Order_Qty': "",
            'Delivered_Qty': "",
            Cost: "",
            'Disc%': "",
            Unit_Price: "",
            Amount: ""
        }, {
            'Item#': "",
            Description: "",
            'Order_Qty': "",
            'Delivered_Qty': "",
            Cost: "",
            'Disc%': "",
            Unit_Price: "",
            Amount: ""
        }, {
            'Item#': "",
            Description: "",
            'Order_Qty': "",
            'Delivered_Qty': "",
            Cost: "",
            'Disc%': "",
            Unit_Price: "",
            Amount: ""
        }, {
            'Item#': "",
            Description: "",
            'Order_Qty': "",
            'Delivered_Qty': "",
            Cost: "",
            'Disc%': "",
            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;



        $("#AddInvoicerecurringGrid").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: "Item#",
                    type: "select2",
                    items: [{
                        value: '12323213',
                        text: '12323213'
                    }],

                    textField: 'text',
                    valueField: 'value',
                    width: 100,
                    align: "left"
                }, {
                    name: "Description",
                    type: "remarkField",
                    width: 150,
                    sorting: false
                },
                {
                    name: "Order_Qty",
                    type: "number",
                    width: 80,
                    align: "left"
                },
                {
                    name: "Delivered_Qty",
                    type: "number",
                    width: 80,
                    align: "left"
                },
                {
                    name: "Cost",
                    type: "text",
                    width: 80,
                    align: "right"
                },
                {
                    name: "Unit_Price",
                    type: "text",
                    align: "right",
                    width: 80
                }, {
                    name: "Disc%",
                    type: "text",
                    align: "right",
                    width: 50
                }, {
                    name: "Amount",
                    type: "text",
                    align: "right",
                    width: 80
                },

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