<div class="modal fade bd-example-modal-lg" id="addNewInvoice" 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
                </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">
                    <from>
                        <!-- Invoice Form -->
                        <div class="row">


                            <div class="col-md-12">
                                <!-- <div class="row mb-4 w-100">
                                        <div class="col-6 col-lg-3 small">
                                            <span class="bold"> Created At :</span><br> 30 Jan 2020 05:50:00
                                        </div>
                                        <div class="col-6 col-lg-3 small">
                                            <span class="bold"> Created By :</span><br> May Chan
                                        </div>
                                        <div class="col-6 col-lg-3 small">
                                            <span class="bold"> Last Update At :</span><br> 30 Jan 2020 05:50:00
                                        </div>
                                        <div class="col-6 col-lg-3 small">
                                            <span class="bold"> Last Update By :</span><br> May Chan
                                        </div>
                                    </div> -->
                                <p>
                                    Invoice Code#<span class="small text-muted"> (Auto
                                        Generate)</span>: <span class="text-danger h3">INV-200001</span>
                                </p>

                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Customer Name </label>
                                    <input type="text" class="form-control mainSearchInput normalSearch"
                                        aria-describedby="search" placeholder="" autocomplete="nope">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="Quotation">Quotation Code </label>
                                    <select class="form-control" id="Quotation">

                                        <option value=""></option>
                                        <option value="QUO12300">QUO12300</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="ServiceType">Service Type </label>
                                    <select class="form-control" id="ServiceType">
                                        <option value="" Selected></option>
                                        <option value="REC12300">REC12300</option>
                                    </select>

                                </div>

                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="Salesman">Salesman</label>
                                    <select class="form-control" id="Salesman">
                                        <option value="" Selected></option>
                                        <option value="Jacket">Jacket</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=""></option>
                                        <option value="HKD">HKD</option>
                                        <option value="1USD">USD</option>


                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="InvoiceDate">Invoice Date</label>
                                    <input type="text" class="form-control date" id="InvoiceDate" value="">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="DueDate">Due Date</label>
                                    <input type="text" class="form-control dueDate" id="DueDate" value="">
                                </div>
                            </div>



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

                                <div class="boxShadow whiteBg mt-3 mb-4">

                                    <!-- bill Form -->
                                    <?php include 'component/billaddress.php'; ?>

                                    <!-- bill Form END -->

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

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

                                    <!-- ship Form END -->
                                </div>
                            </div>
                            <!-- Invoice Table Editor -->
                            <div class="col-md-12">
                                <div id="AddInvoiceGrid" class="newGrid"></div>

                            </div>

                            <!-- Invoice Total -->
                            <div class="col-md-12">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <p class="small">Subtotal
                                    </p>
                                    <p class="text-secondary">$0,00 </p>
                                </div>
                                <div class="d-flex justify-content-between mb-4">
                                    <p class="small w-100">Order Discount
                                    </p>
                                    <input type="text" class="form-control col-6 col-md-3 col-lg-2 text-right"
                                        aria-describedby="Discount" placeholder="" autocomplete="nope">
                                </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</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>
                    </from>
                    <!-- Invoice 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() {

    // $("#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;



    $("#AddInvoiceGrid").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 = $("#AddInvoiceGrid .jsgrid-grid-body tbody");


            $("#AddInvoiceGrid .jsgrid-cancel-insert-button").click(function() {

                $("#AddInvoiceGrid .jsgrid-insert-row").hide();

            });

            $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>