<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">Edit Receipt
                </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>
                                    Receipt No <span class="small text-muted">(Auto
                                        Generate)</span>: <span class="text-danger h3 norwarp"> R-300001</span>
                                </p>

                            </div>
                            <div class="col-md-4">
                                <div class="form-group borderSelect2">
                                    <p class="mb-0 small">Customer Name </P>
                                    <input type="text" class="form-control mainSearchInput normalSearch" aria-describedby="search" value="Abc company" placeholder="" autocomplete="nope">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="Date">Receipt Date</label>
                                    <input type="text" class="form-control date" id="Date" value="Dec 2, 2021">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group borderSelect2">
                                    <label for="Reference">Reference No</label>
                                    <input type="text" class="form-control" value="R-123344">
                                </div>
                            </div>

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

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

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="Payment">Payment Method
                                    </label>
                                    <input type="text" class="form-control date" id="Payment" value="Cheque">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="Amount">Receipt Amount</label>
                                    <input type="text" class="form-control" id="Amount" value="40.00">
                                </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="EditReceiptGrid01" class="newGrid receiptGrid"></div>

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

                                <hr>
                                <div class="row justify-content-end">

                                    <h4 class="col-6 col-lg-3">Subtotal
                                    </h4>
                                    <h4 class="col-6 col-lg-3 text-right">$51.00 </h4>

                                </div>

                            </div>


                        </div>

                    </form>
                </div>
                <div class="card-body boxShadow whiteBg mb-3">
                    <h4 class="text-right">Accumulated Balance: $405.00
                    </h4>

                    <div id="EditReceiptGrid02" class="newGrid creditGrid"></div>
                    <hr>

                    <div class="row justify-content-end">

                        <h5 class="col-6 col-lg-3">Credit Subtotal
                        </h5>
                        <h5 class="col-6 col-lg-3 text-right">$-5.00</h5>

                    </div>

                    <!-- <div class="row justify-content-end">

                            <h5 class="col-6 col-lg-3">Credit Balance
                            </h5>
                            <h5 class="col-6 col-lg-3 text-right">$0.00 </h5>

                        </div> -->

                </div>
                <div class="card-body boxShadow whiteBg mb-3">
                    <div class="d-flex justify-content-between double_border_bottom mb-4">
                        <p class="h1">Receipt total </p>
                        <p class="h1">$40.00 </p>
                    </div>



                    <div class="form-group">
                        <label for="Remark">Remark </label>
                        <textarea class="form-control" id="Remark" rows="2"></textarea>
                    </div>


                </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">Save</button>


            </div>
        </div>
    </div>
</div>
<script>
    $(function() {




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


        var NewData = [{
            Invoice_Code: "INV-0001",
            Description: "Item A Desc. line 1",
            Qty: "10",
            'Unit_Price': "$5.00",
            Disc: "$0.00",
            'Invoice_Amount': "$50.00",
            'Balance': "$50.00",
            'Paid_amount': "$10.00"
        }, {
            Invoice_Code: "INV-0002",
            Description: "Item A Desc. line 1",
            Qty: "10",
            'Unit_Price': "$5.00",

            Disc: "$0.00",
            'Invoice_Amount': "$50.00",
            'Balance': "$50.00",
            'Paid_amount': "$20.00"
        }, {
            Invoice_Code: "INV-0004",
            Description: "Item A Desc. line 1",
            Qty: "10",
            'Unit_Price': "$5.00",
            Disc: "$0.00",
            'Invoice_Amount': "$50.00",
            'Balance': "$50.00",
            'Paid_amount': "$30.00"
        }];


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


            itemTemplate: function(value) {

                return value;
            },
            insertTemplate: function(value) {


                this._insertInput = $(
                    `<input type="text" class="payValue"  value="${value}">`
                );

                /*return this._insertInput.prop('outerHTML') +
                    `<a href="javascript:void(0);" class="small payValueBtn">Pay in Full </a>`;*/
                return this._insertInput;
            },
            editTemplate: function(value) {


                this._editInput = $(
                    `<input type="text" class="payValue" value="${value}">`
                );

                return this._editInput;


            },
            insertValue: function() {

                return this._insertInput.val();
            },

            editValue: function() {

                return this._editInput.val();
            }
        });
        jsGrid.fields.payField = PayField;

        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;

        $("#EditReceiptGrid01").jsGrid({
            height: "auto",
            width: "100%",

            editing: true,
            sorting: true,
            paging: true,
            data: NewData,
            rowClass: function(item, itemIndex) {
                return "client-" + itemIndex;
            },



            fields: [{
                    name: "Invoice_Code",


                    width: 100,
                    align: "left"
                }, {
                    name: "Description",

                    width: 150,
                    sorting: false
                },
                {
                    name: "Qty",

                    width: 80,
                    align: "left"
                },
                {
                    name: 'Unit_Price',
                    align: "right",
                    width: 80
                }, {
                    name: 'Invoice_Amount',
                    align: "right",
                    width: 140
                }, {
                    name: 'Paid_amount',
                    type: "payField",
                    align: "right",
                    width: 120
                }, {
                    name: 'Balance',
                    align: "right",
                    width: 80
                }
            ],

            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);

                    $(".payValue").after(
                        `<a href="javascript:void(0);" class="small payValueBtn">Pay in Full </a>`
                    );

                }
            }


        });


        var NewCredit = [{
            Date: "01 Feb 2022",
            Credit_code: "CN-0001",
            Credit_amount: "$500.00",
            Balance_amount: "$400.00",
            Amount_to_Credit: "$0.00"

        }, {
            Date: "01 Feb 2022",
            Credit_code: "CN-0001",
            Credit_amount: "$500.00",
            Balance_amount: "$400.00",
            Amount_to_Credit: "$0.00"
        }, {
            Date: "01 Feb 2022",
            Credit_code: "CN-0001",
            Credit_amount: "$500.00",
            Balance_amount: "$400.00",
            Amount_to_Credit: "$0.00"
        }];





        $("#EditReceiptGrid02").jsGrid({
            height: "auto",
            width: "100%",

            editing: true,
            sorting: true,
            paging: true,
            data: NewCredit,
            rowClass: function(item, itemIndex) {
                return "client-" + itemIndex;
            },


            fields: [{
                    name: "Date",

                    width: 100,
                    align: "left"
                }, {
                    name: "Credit_code",

                    width: 100,
                    sorting: false
                },
                {
                    name: "Credit_amount",

                    width: 140,
                    align: "right"
                }, {
                    name: "Balance_amount",
                    align: "right",
                    width: 150
                }, {
                    name: "Amount_to_Credit",
                    type: "text",
                    align: "right",
                    width: 150
                }
            ],

            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);


                }
            }



        });



        $(document).on("click", "input[type='radio'][name='mainSearch']:checked", function() {

            $(this).closest(".mainSearchWrap").find(".mainSearchInput").val($(
                    this)
                .val());
            $(this).closest(".mainSearchWrap").removeClass('active');
        });

        $(document).on("click", ".payValueBtn", function() {

            var amountValue = $("#Amount").val();
            $(this).parent().find(".payValue").val(amountValue);


        });







    });
</script>