@{
    ViewBag.Title = "Index";
}
<script type="text/javascript" src="../Projectscript/VoucherEntry.js"></script>
<script src="~/Scripts/Autocomplete/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/tables/jsgrid/jsgrid-theme.min.css">
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/tables/jsgrid/jsgrid.min.css">

<style>
    #customView {
        border: 1px solid #CCD6E6;
    }
</style>

<div id="Entry" style="margin-top:-20px;">
    <section class="grid-row-label" id="grid-row-label">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                        <div class="card-header" style="border-bottom:1px solid #e6e6e6">
                            <h3 class="card-title mb-0" style="float:left">Voucher Entry</h3>
                            
                            <div class="text-right">    
                                <h6 style="float:left;margin-left:-35px;" class="col-md-9"><b>Difference</b></h6>                            
                                <input class="col-md-2" id="Differencetxt" readonly="readonly" style="font-size:18px;color:crimson;font-weight:700;margin-right:10px;border:none">
                            </div>                   
                        </div>

                    <div class="card-content collapse show">
                        <div class="card-body" style="margin-top:-75px">        
                            <form action="#">
                                <div class="form-body">
                                    <hr style="margin-top:75px" />
                                    <div class="row" style="background-color:#F0F6F6;margin-left:3px;width:1777px;margin-top:-20px;height:120px;">
                                        <div class="col-md-12" style="margin-top:-5px;">
                                            <br />
                                            <div class="form-group">
                                                <div class="row" style="margin-left:1px;">
                                                    <label class="text-lg-right">Voucher Type<span class="danger">*</span></label>
                                                    <div class="col-md-2">
                                                        <input type="hidden" id="txtacctype" />
                                                        <select id="VoucherType" class="form-control" onchange="serialnoload()"></select>
                                                    </div>
                                                    <label class="text-lg-right col-md-3">Voucher Date</label>
                                                    <div class="col-md-2">
                                                        <input type="text" id="VoucherDate" class="form-control">
                                                    </div>
                                                    <h6 class="text-lg-right col-md-2"><b>Credit</b></h6>
                                                    <div class="col-md-1">
                                                        <input type="text" id="Credittxt" class="form-control" style="color:darkturquoise;background-color:#f0f6f6;border:none;margin-top:-8px" readonly="readonly">
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-left:1px;margin-top:8px">
                                                    <label class="text-lg-right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Voucher No</label>
                                                    <div class="col-md-2">
                                                        <input type="text" class="form-control" id="VoucherNo" readonly="readonly">
                                                    </div>
                                                    <label class="text-lg-right col-md-3">Transfer No</label>
                                                    <div class="col-md-2">
                                                        <fieldset>
                                                            <div class="input-group">
                                                                <input type="text" id="TransferVoucherNo" class="form-control">
                                                                <div class="input-group-append" id="Transfer">
                                                                    <button class="btn btn-outline-primary" type="button">⇆</button>
                                                                </div>
                                                            </div>
                                                        </fieldset>
                                                    </div>
                                                    <h6 class="text-lg-right col-md-2"><b>Debit</b></h6>
                                                    <div class="col-md-1">
                                                        <input type="text" id="Debittxt" class="form-control" style="color:darkturquoise;background-color:#f0f6f6;border:none;margin-top:-8px" readonly="readonly">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr style="margin-top:5px;" />
                                    <div class="row col-md-12" style="margin-top:-10px;">
                                        <div class="col-md-12">
                                            <div class="row" style="height:26px;">
                                                <div class="col-md-1">
                                                    <div class="form-group">
                                                        <label>Type</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label>Account Name</label><span class="danger">*</span>
                                                    </div>
                                                </div>

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

                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label>Amount</label><span class="danger">*</span>
                                                    </div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="form-group">
                                                        <label>Reference No</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-1">
                                                    <div class="form-group">
                                                        <select id="VType" class="form-control">
                                                            <option>Debit</option>
                                                            <option>Credit</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-2 input-group">
                                                    <input type="text" id="AccountName" class="form-control" style="height:66%;">
                                                    <input type="text" style="display:none" id="supplierId0" />
                                                    <input type="text" style="display:none" id="AccCode" />
                                                    <div class="input-group-append" id="addVisa">
                                                        <button class="btn btn-outline-primary" id="AccountName" type="button" style="height:66%">+</button>
                                                    </div>
                                                </div>

                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <input type="text" id="VoucherEntryDescription" class="form-control">
                                                    </div>
                                                </div>

                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <input type="text" id="Amount" onkeypress="isNumber(event, this)" onkeyup="CalcFCAmount()" class="form-control">
                                                    </div>
                                                </div>

                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <input type="text" id="ReferenceNo" class="form-control" readonly="readonly">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <button type="button" id="btnadd" class="btn btn-primary">+</button>
                                                </div>
                                                <div class="form-group" style="margin-left:15px;">
                                                    <button type="button" id="JobandFC" class="btn btn-primary" onclick="Addpopupwindow(2)">Job&FC</button>
                                                </div>
                                                <div class="form-group" style="margin-left:15px;">
                                                    <button type="button" id="InvoiceSettlement" class="btn btn-outline-primary" onclick="GetList(0),Addpopupwindow(1)">Pending Invoice</button>
                                                </div>                                                
                                            </div>

                                        </div>

                                    </div>
                               
                                <div id="customView" class="jsgrid dataTables_scrollBody" style="overflow:auto;height: 310px; width: 99%; margin-left:9px;margin-top:-15px;">
                                    
                                        <table class="jsgrid-table" id="tblvoucherentry">
                                            <tr class="jsgrid-header-row">
                                                <th class="jsgrid-header-cell jsgrid-align-right jsgrid-header-sortable" style="width:50px;border-bottom:1px solid #CCD6E6">No</th>
                                                <th class="jsgrid-header-cell jsgrid-align-right jsgrid-header-sortable" style="width:50px;display:none">BillSNo</th> 
                                                <th class="jsgrid-header-cell jsgrid-align-center jsgrid-header-sortable" style="width:150px;border-bottom:1px solid #CCD6E6">Type</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center jsgrid-header-sortable" style="width:300px;border-bottom:1px solid #CCD6E6">Account Name</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="width:400px;border-bottom:1px solid #CCD6E6">Description</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="width:200px;border-bottom:1px solid #CCD6E6">InvDate</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="width:200px;border-bottom:1px solid #CCD6E6">Amount</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="width:300px;border-bottom:1px solid #CCD6E6">Reference No</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thJobCode">Job Code</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thCostCode">Cost Code</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thFC">FC</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thBank">Rate</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thFCAmount">FC Amount</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thBank">Bank</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thBank">ChequeNo</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thBank">Cheque Date</th>
                                                <th class="jsgrid-header-cell jsgrid-align-center" style="display:none;width:150px;border-bottom:1px solid #CCD6E6" id="thPDCAc">PDC Ac</th>
                                                <th class="jsgrid-header-cell jsgrid-control-field jsgrid-align-center" style="width:100px;border-bottom:1px solid #CCD6E6">Delete</th>
                                            </tr>
                                        </table>
                                                                       
                                </div>                                    
                                <div class="form-actions">
                                    <div class="text-right">
                                        <input type="text" id="slnotxt" class="form-control" value="1" style="display:none;border:none">
                                        <input type="hidden" id="hiddenrow" />
                                        @*<input type="text" id="VoNo" class="form-control">*@
                                        <button type="button" style="width:100px" id="btnsubmit" class="btn btn-primary btn-min-width mr-1 mb-1"><u>S</u>ave <i class="fa fa-check-square-o"></i></button>
                                        <button type="button" style="width:100px" id="btnlist" onclick="GetRows(0)" class="btn btn-primary btn-min-width mr-1 mb-1">List <i class="ft-align-justify"></i></button>
                                        <button type="button" style="width:100px" id="btnnew" onclick="formrefresh()" class="btn btn-primary btn-min-width mr-1 mb-1">Clear <i class="ft-refresh-cw position-right"></i></button>
                                        <button style="display:none" type="button" id="btndelete" class="btn btn-primary btn-min-width mr-1 mb-1">Delete <i class="fa fa-times"></i></button>
                                    </div>
                                </div>
                                </div>
                            </form>
                                </div>
                            
                    </div>
                </div>
            </div>
    
            </div>
            </section>
</div>


<div style="display:none"><input type="text" value="0" id="VoucherEntryId" /></div>


<div class="modal fade text-left show" id="Popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" style="padding-right: 17px;display: none;background:rgba(0,0,0,0.5);">
    <div class="modal-dialog" role="document" style="top:10%">
        <div class="modal-content" style="width:200%; margin-left:-200px">
            <div class="modal-header bg-primary white">
                <h4 class="modal-title" id="MyHeader"></h4>
                <button type="button" class="close" data-dismiss="modal" onclick="($('#Popup').hide())" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>


            <form id="PendingInv" style="display:none">
                <div class="modal-body">
                    <div class="table-responsive">
                        <div class="overflow-auto" style="height:400px; ">
                            <table id="PendingInvoicelist" class="table table-striped table-bordered zero-configuration dataTable"></table>
                        </div>
                    </div>
                    <input type="hidden" id="RowGet" />
                </div>
                <div class="modal-footer">                                      
                    <input type="text" id="Sum"/>
                    <input type="button" id="btnaddtogridInv" class="btn btn-outline-secondary" onclick="AddtoGrid()" value="Add">
                    <input type="button" id="btnclosegrid" class="btn btn-outline-secondary " onclick="($('#Popup').hide())" value="Close">
                </div>
            </form>

            <form id="JobAndFC" style="display:none">
                <div class="modal-body">
                    <div class="row" style="margin-left:2px;">
                        <label class="text-md-right" id="JobCodelb">Job Code</label>
                        <div class="col-md-3">
                            <select id="JobCode" class="form-control"></select>
                        </div>
                        <label class="text-md-right" id="CostCodelb">Cost Code</label>
                        <div class="col-md-3">
                            <select id="CostCenterName" class="form-control"></select>
                        </div>
                        <label class="text-md-right" id="PDClb">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PDC Acc</label>
                        <div class="col-md-3">
                            <select id="PDCAccount" name="priority" class="form-control">
                                <option value="0">Select</option>
                                <option value="1">Acc1</option>
                                <option value="2">Acc2</option>
                            </select>
                        </div>
                    </div>
                    <div class="row" style="margin-left:2px;margin-top:10px;">
                        <label class="text-md-right" id="FClb">Currency</label>
                        <div class="col-md-3">
                            <select id="Currency" onchange="CurrencyChange(this.id)" class="form-control" style="margin-left:2px;"></select>
                        </div>
                        <label class="col-md-1 text-md-right" id="Ratelb">Rate</label>
                        <div class="col-md-3">
                            <input type="text" style="margin-left:-2px;" name="inputnumberfloat" id="Rate" class="form-control">
                        </div>
                        <label id="FCAmountlb">FC Amount</label>
                        <div class="col-md-3">
                            <input type="text" name="inputnumberfloat" onkeyup="CalAmount()" id="FCAmount" class="form-control">
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px;">
                        <label class="col-md-1 text-md-right" id="Banklb">Bank</label>
                        <div class="col-md-3">
                            <select id="Bank" name="priority" class="form-control"></select>
                        </div>
                        <label class="text-md-right" id="ChequeNolb">ChequeNo</label>
                        <div class="col-md-3">
                            <input type="text" id="ChequeNo" name="inputnumberfloat" class="form-control" style="margin-left:-3px;">
                        </div>
                        <label id="ChequeDatelb">ChequeDt</label>
                        <div class="col-md-3">
                            <input type="text" id="ChequeDate" class="form-control" style="margin-left:5px;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="text" id="AmountFC">
                    <input type="text" id="AmountCon">
                    <input type="button" id="btnaddtogrid" class="btn btn-outline-secondary " onclick="GetJob(),($('#Popup').hide())" value="Add">
                    <input type="button" id="btnclosegrid" class="btn btn-outline-secondary " onclick="($('#Popup').hide())" value="Close">
                </div>
            </form>


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


<script>

    $("#AccountName").autocomplete({
        source: function (request, response) {
            var data = {};
            data.CustName = $("#AccountName").val();
            data.CustType = 'A';

            $.ajax({
                url: '../Master/CustomerOrSupplierSearch',
                type: "POST",
                data: data,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    response($.map(data, function (item) {
                        return ({
                            ColCount: '3',
                            label1: item.CustAccount,
                            label: item.CustName,
                            label2: item.CustType,
                            CustId:item.CustId
                        })
                    }));
                }

            })

        },
        autoFocus: true,
        select: function (event, ui) {
            $('#AccountName').val(ui.item.label1)
            $('#AccCode').val(ui.item.label1)
            $('#supplierId0').val(ui.item.CustId)
            $('#VoucherEntryDescription').focus();
        },

    });


    $("#TransferVoucherNo").autocomplete({        
        source: function (request, response) {
            var data = {};
            data.TransferVoucherNo = $("#TransferVoucherNo").val();
            $.ajax({
                url: '../AccountsErp/VoucherNoSearch',
                type: "POST",
                data: data,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    response($.map(data, function (item) {
                        return ({
                            ColCount: '2',
                            label: item.VoucherNo,
                            //label1: item.VTypePrefix,
                            TransferVoucherNo: item.VoucherNo,
                            //VTypePrefix: item.VTypePrefix,
                        })
                    }));
                }

            })

        },
        autoFocus: true,
        select: function (event, ui) {
            $('#TransferVoucherNo').val(ui.item.VoucherNo);
           // $('#VTypePrefix').val(ui.item.VTypePrefix);
        },

    });


    $('#tblvoucherentry').jqGrid({
        shrinkToFit: false
    });
</script>