<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 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#<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" 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="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group borderSelect2">
                                    <label for="Reference">Reference Code</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <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-4">
                                <div class="form-group">
                                    <label for="Payment">Payment Method
                                    </label>
                                    <select class="form-control" id="Payment">
                                        <option value=""></option>
                                        <option value="Paypal">Paypal</option>
                                        <option value="Cash">Cash</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="Amount">Amount</label>
                                    <input type="text" class="form-control" id="Amount" 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 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">$0.00</h4>

                                </div>

                            </div>



                        </div>

                    </form>

                </div>


                <div class="card-body boxShadow whiteBg mb-3">


                    <h4 class="text-right">Accumulated Balance: $0.00
                    </h4>



                    <div id="grid02" 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">$0.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">$0.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">Create</button>


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



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




        var NewData = [{
            Invoice_code: "",
            Description: "",
            Qty: "",
            'Unit_Price': "",
            Amount: "",
            Disc: "",
            'Invoice_Amount': "",
            'Balance': "",
            'Paid_amount': ""
        }, {
            Invoice_code: "",
            Description: "",
            Qty: "",
            'Unit_Price': "",
            Amount: "",
            Disc: "",
            'Invoice_Amount': "",
            'Balance': "",
            Paid_amount: ""
        }, {
            Invoice_code: "",
            Description: "",
            Qty: "",
            'Unit_Price': "",
            Amount: "",
            Disc: "",
            'Invoice_Amount': "",
            'Balance': "",
            'Paid_amount': ""
        }, {
            Invoice_code: "",
            Description: "",
            Qty: "",
            'Unit_Price': "",
            Amount: "",
            Disc: "",
            'Invoice_Amount': "",
            'Balance': "",
            'Paid_amount': ""
        }, {
            Invoice_code: "",
            Description: "",
            Qty: "",
            'Unit_Price': "",
            Amount: "",
            Disc: "",
            'Invoice_Amount': "",
            'Balance': "",
            'Paid_amount': ""
        }];


        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;

        $("#grid").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 NewCustomData = [{
            Date: "",
            Credit_code: "",
            Credit_amount: "",
            Amount_to_Credit: "",
            Balance_Amount: ""
        }, {
            Date: "",
            Credit_code: "",
            Credit_amount: "",
            Amount_to_Credit: "",
            Balance_Amount: ""
        }, {
            Date: "",
            Credit_code: "",
            Credit_amount: "",
            Amount_to_Credit: "",
            Balance_Amount: ""
        }, {
            Date: "",
            Credit_code: "",
            Credit_amount: "",
            Amount_to_Credit: "",
            Balance_Amount: ""
        }, {
            Date: "",
            Credit_code: "",
            Credit_amount: "",
            Amount_to_Credit: "",
            Balance_Amount: ""
        }];




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

            editing: true,
            sorting: true,
            paging: true,
            data: NewCustomData,
            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>