Ref No

Ref Date

Party

Place

</div>
                    </div>

<div class="form-group row ">
                        <label class="control-label col-md-4 col-sm-4 required">Paid Amount</label>
                        <div class="col-md-8 col-sm-8 input-group text control-width-50">
                            <input type="number" class="form-control" maxlength="10" id="txtPaidAmount" v-model="PaidAmount" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" v-bind:style="{border:PaidAmountValid}" v-on:keydown="PaidAmountValid='1px solid #e2e2e2'">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-4 col-sm-4">Payment Through</label>
                        <div class="col-md-8 col-sm-8 input-group text control-width-50">
                            <input type="text" class="form-control" id="txtPaymentMethod" v-model="PaymentMethod">
                        </div>
                    </div>

<div class="form-group row">
                        <label class="control-label col-md-4 col-sm-4">Remarks</label>
                        <div class="col-md-8 col-sm-8 input-group text control-width-50">
                            <input type="text" class="form-control" id="txtRemarks" v-model="Remarks">
                        </div>
                    </div>

</div>
                <div class="col-md-6 col-sm-6 pl-0">
                    <div class="form-group row" style="width:100%;">

<div class="file-upload" style="width:100%;">
                            <div class="file-select">
                                <div class="file-select-button" id="fileName">Choose File</div>
                                <div class="file-select-name" id="noFile">No file chosen...</div>

</div>
                        </div>

</div>
                    <div class="form-group row">
                        <div class="col-md-12 col-sm-12 input-group">
                            <input type="button" v-on:click="submitFile()" class="btn btn-primary" value="UpLoad">
                        </div>
                    </div>

</div>

</form>

</div>

<div class="form-group">
                <div class="col-md-12 col-sm-12 text-center">
                    <button :disabled="isDisabled" type="button" class="btn btn-primary" id="btnSaveBtn" v-on:click="SaveClick($event,'Add')" v-if="HeaderId==0">Save</button>
                    <button :disabled="isDisabled" type="button" class="btn btn-primary" id="btnSaveBtn" v-on:click="SaveClick($event,'Edit')" v-if="HeaderId!=0">Update</button>
                    <button type="reset" class="btn btn-secondary" id="btnResetBtn" v-on:click="AddClick($event)">Clear</button>
                    <button type="reset" class="btn btn-success" id="btnShowSearch">View</button>
                </div>
            </div>
        </div>

<table id="GridSearch" class="mobgrid table table-striped table-border table-responsive mb-0">
                        <thead class="color-theadSearchGrid">
                            <tr class="mobgrid">
                                <th class="mobgrid" width="8%">Ref No</th>
                                <th class="mobgrid" width="8%">Ref Date</th>
                                <th class="mobgrid">Party</th>
                                <th class="mobgrid text-right" width="10%">Paid Amount</th>
                                <th class="mobgrid" width="8%">Payment Type</th>
                                <th class="mobgrid" width="10%">Remarks</th>
                                <th class="mobgrid text-center" width="4%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(outward,index) in StoreChars">

<td data-label="Ref No :" class="mobgrid text-left"><span>{{outward.Vchnum}}</span></td>
                                <td data-label="Ref Date :" class="mobgrid text-left"><span>{{customDate(outward.VchDate.split('T')[0])}}</span></td>
                                <td data-label="Party :" class="mobgrid text-left"><span>{{outward.Party}}</span></td>
                                <td data-label="Paid Amount :" class="mobgrid text-left"><span>{{outward.PaidAmount}}</span></td>
                                <td data-label="Payment Type :" class="mobgrid text-left"><span>{{outward.PaymentMethod}} </span></td>
                                <td data-label="Remarks :" class="mobgrid text-left"><span>{{outward.Remarks}} </span></td>
                                <td class="mobgrid text-right">
                                    <i class="glyphicon glyphicon-pencil fa-icon pl-6" title="Edit" v-on:click="EditClick(outward)"></i>
                                    <i class="glyphicon glyphicon-trash fa-icon pl-6" title="Delete" v-on:click="DeleteClick($event,outward.HeaderId,0)"></i>

</td>
                            </tr>
                        </tbody>
                    </table>

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

</div>
</div>

</script>
<script src="js/pages/Payment.js" type="text/javascript"></script>