<style>
:root {
--contra: #cfbdec;
--payment: #6f42c1;
--receipt: #e83e8c;
--journal: #dc3545;
--sales: #fd7e14;
--creditnote: #ffc107;
--purchase: #28a745;
--debitnote: #20c997;
--reversing: #17a2b8;
.border0 {
border: 0;
}
}
table {
margin-bottom: 0 !important;
}
.card-body.p-0 .table tbody>tr>td:first-of-type,
.card-body.p-0 .table tbody>tr>th:first-of-type,
.card-body.p-0 .table tfoot>tr>td:first-of-type,
.card-body.p-0 .table tfoot>tr>th:first-of-type,
.card-body.p-0 .table thead>tr>td:first-of-type,
.card-body.p-0 .table thead>tr>th:first-of-type {
padding-left: .5rem;
}
.tables td {
border: 0px;
}
#addButton {
/* position: absolute; */
top: 0;
right: 0;
background-color: #f0f0f0;
border: none;
cursor: pointer;
padding: 5px;
font-size: 16px;
line-height: 16px;
}
#mySelect {
padding: 5px;
font-size: 16px;
line-height: 16px;
}
.custom-select1 {
position: relative;
display: inline-block;
width: 100%;
}
.select2-container {
width: 94% !important;
}
button.addplus {
position: absolute;
right: 0;
top: 0;
height: 100%;
padding: 10px;
background-color: #ddd;
border: none;
border-left: 1px solid #ccc;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 12px;
}
button:hover {
background-color: #ccc;
}
</style>
<div class="content-wrapper">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card card-primary card-outline">
<!-- <div class="card-header" style="background-color: <?php echo $VoucherType->voucher_color; ?>;">
<h5 class="m-0">
<?php //echo $pageTitle;
?>
<a href="<?php //echo site_url("accounts/vouchers/listvouchers");
?>" class="btn btn-sm btn-warning float-right"><i class="nav-icon fas fa-times"></i> Cancel <?php //echo $pageTitle;
?></a></h5>
</div> -->
<div class="card-body" style="background-color: <?php echo $VoucherType->voucher_color; ?>;">
<form method=POST action="" enctype="multipart/form-data" name="tbl_accounts">
<div class="row mb-2">
<div class="col-2">
<fieldset>
<legend>Transaction Date <span class="text-danger">*</span></legend>
<input type="text" class="form-control2 nepaliDatePicker" id="voucher_date" value="<?php echo NepaliDate(); ?>" name="voucher_date" required>
</fieldset>
</div>
<div class="col-8">
<h1 class="text-center"><?php echo $pageTitle; ?> Voucher</h1>
<!-- <fieldset>
<legend><span id="selectedAccountName"></span> Balance</legend><span id="selectedAccountBalance" style="padding: 6px 0px; display: inline-block; text-align: right; width: 100%;">Choose A/C First</span>
</fieldset> -->
</div>
<div class="col-2 ">
<fieldset>
<legend><?php echo $pageTitle; ?> Voucher #</legend><input type="text" readonly class="form-control2" id="voucher_no" value="<?php echo generateVoucherNo($VoucherType->vouchertype_id); ?>" name="voucher_no">
</fieldset>
</div>
</div>
<div class="row">
<div class="col">
<fieldset>
<legend>Enter Transaction</legend>
<table id="EntryTable" class="table tables table-sm">
<thead>
<tr>
<td class="col-1"></td>
<td class="col-6 ">
<div class="row">
<div class="col-auto"><b>Account</b> <span class="text-danger">*</span></div>
<div class="col text-right">
</div>
</div>
</td>
<td class="col-1 text-bold">Current Balance</td>
<td class="col-1 text-right"><b>Amount</b><span class="text-danger">*</span></td>
<td class="col-1"></td>
</tr>
</thead>
<tbody>
<tr>
<td> <select name="posting_side_selector" id="posting_side_selector" class="form-control form-select">
<option value="debit">Dr</option>
<option value="credit">Cr</option>
</select> </td>
<td>
<?php
if ($VoucherType->default_debits != null)
$VoucherType->default_debits = explode(",", $VoucherType->default_debits);
if ($VoucherType->default_credits != null)
$VoucherType->default_credits = explode(",", $VoucherType->default_credits);;
?>
<span id="dr_box" class="custom-select1">
<?php $this->myaccounts->showAccountsComboForVoucher("account_id", "", "account_id_dr", "status=1", $default = "", $CSSclass = "", $VoucherType->default_debits) ?>
</span>
<span id="cr_box" style="display: none;" class="custom-select1">
<?php $this->myaccounts->showAccountsComboForVoucher("account_id", "", "account_id_cr", "status=1", $default = "", $CSSclass = "", $VoucherType->default_credits) ?>
</span>
</td>
<td class="text-center"> <span id="balance_display" class="d-inline-block text-bold fs-20"></span></td>
<td> <input type="text" name="amount" id="amount" value="0" class="form-control text-right" /> </td>
<td> <input type="button" class="btn btn-primary btn-block btn-sm " id="addrow" value="Add" /> </td>
</tr>
</tbody>
</table>
</fieldset>
<div class="card card-success card-outline mt-3">
<div class="card-header"><b>Transaction List</b> </div>
<div class="card-body p-0">
<table id="myTable" class=" table order-list table-striped table-bordered">
<thead>
<tr>
<td width="60%" colspan="2"><b>Account</b></td>
<!-- <td>Narration</td> -->
<td class="text-right" width="15%"><b>Debit Amount</b></td>
<td class="text-right" width="15%"><b>Credit Amount</b></td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th colspan="2" class="text-right">Total</th>
<td>
<div id="debitTotal" class="text-right text-bold"></div>
</td>
<td>
<div id="creditTotal" class="text-right text-bold"></div>
</td>
<td>
<!-- <div id="balance" class="text-right text-bold"></div> -->
</td>
</tr>
<tr>
<th colspan="2" class="text-right"></th>
<td>
<div id="balance_dr" class="text-right text-danger text-bold"></div>
</td>
<td>
<div id="balance_cr" class="text-right text-danger text-bold"></div>
</td>
<td>
<!-- <div id="balance" class="text-right text-bold"></div> -->
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<!--COL START-->
<div class="col">
<textarea class="form-control" rows="30" style="height: 60px!important;" name="narration" id="narration" placeholder="Narration:"></textarea>
<!-- <input type="text" name="narration" id="narration" class="form-control" /> -->
</div>
</div>
<div class="row">
<!--COL START-->
<div class="col">
<div id="errorBox" class="alert alert-secondary hidden" role="alert">
<h5></h5>
</div>
</div>
</div>
<!--COL END-->
<button class="btn btn-primary btn-sm float-right mt-2" type="submit" id="saveButton" name="submit">Save Voucher</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create Ledger</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method=POST action="" enctype="multipart/form-data" name="tbl_accounts">
<div class="modal-body">
<div class="row">
<!--COL START-->
<div class="col-8">
<div class="form-group"> <label for="account_name">Account Name</label><input type="text" class="form-control" id="account_name" value="" name="account_name" required> </div>
</div>
<div class="col-4">
<div class="form-group">
<label for="exampleInputFile">Upload Image</label>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="exampleInputFile">
<label class="custom-file-label" for="exampleInputFile">Choose file</label>
</div>
</div>
</div>
<!-- <div class="text-center">
<img class="profile-user-img img-fluid " src="../../dist/img/user4-128x128.jpg" alt="User profile picture">
</div> -->
</div>
<!--COL END-->
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<?php
$this->myaccounts->showAccountsCategoriesWithParentsCombo($fieldName = "accategory_id", $displayName = "Under", $fieldID = "accategory_id", $condition = "status=1", $default = "", $CSSclass = "select2", "required");
?>
</div>
</div>
<div class="col-4">
<div class="form-group"> <label for="opening_balance">Opening Balance</label><input type="text" class="form-control" id="opening_balance" value="" name="opening_balance"> </div>
</div>
<div class="col-2">
<div class="form-group"> <label for="opening_balance_drcr">Dr/Cr</label>
<select class="form-control" id="opening_balance_drcr" name="opening_balance_drcr" required>
<option value="DR" class="text-left">Dr</option>
<option value="CR" class="text-left">Cr</option>
</select>
</div>
</div>
</div>
<div class="row">
<!--COL START-->
<div class="col">
<div class="form-group"> <label for="remarks">Remarks</label> <textarea class="form-control" id="remarks" name="remarks"></textarea> </div>
</div>
<!--COL END-->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
<button class="btn btn-primary btn-sm" type="submit" name="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function addOption() {
var newOption = prompt("Enter new option:");
if (newOption != null) {
var select = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = newOption;
option.value = newOption.toLowerCase().replace(/\s+/g, '');
select.add(option);
}
}
</script>
<script>
$(document).ready(function() {
$("#posting_side_selector").change(function(e) {
var posting_side = $("#posting_side_selector").val();
if (posting_side == "debit") {
$("#dr_box").show();
$("#cr_box").hide();
} else {
{
$("#dr_box").hide();
$("#cr_box").show();
}
}
});
$("#posting_side_selector").change();
$("#account_id_dr").change(function(e) {
var account_id = this.value;
$.ajax({
url: "<?php echo site_url("accounts/Ledger/getaccountbalance/"); ?>" + account_id,
async: true,
dataType: "json",
success: function(data) {
// alert("COW");
// console.log(data.BalanceRaw);
$("#balance_display").html(" " + data.BalanceRaw).css("white-space text-center", "nowrap");
setTimeout(function() {
$("#amount").val('').focus();
}, 100); // Delay focus by 100 milliseconds
}
});
});
$("#account_id_cr").change(function(e) {
var account_id = this.value;
$.ajax({
url: "<?php echo site_url("accounts/Ledger/getaccountbalance/"); ?>" + account_id,
async: true,
dataType: "json",
success: function(data) {
// alert("COW");
// console.log(data.BalanceRaw);
$("#balance_display").html("Current Balance: " + data.BalanceRaw).css("white-space text-center", "nowrap");
setTimeout(function() {
$("#amount").val('').focus();
}, 100); // Delay focus by 100 milliseconds
}
});
});
var counter = 0;
$("#addrow").on("click", function() {
var msg = "Transaction Row Added !!";
if ($("#account_id").val() != "") {
if (!isAccountAdded($("#account_id").val())) {
var posting_side = $("#posting_side_selector").val();
if (posting_side == "debit") {
var account_id = $("#account_id_dr").val();
var account_name = $("#account_id_dr option:selected").text();
} else {
var account_id = $("#account_id_cr").val();
var account_name = $("#account_id_cr option:selected").text();
}
var amount = ($.isNumeric($("#amount").val()) ? $("#amount").val() : 0);
if ($.isNumeric(amount)) {
debit = (posting_side == "debit") ? amount : 0;
credit = (posting_side == "credit") ? amount : 0;
if (debit > 0 || credit > 0) {
addRow(account_id, account_name, debit, credit);
$("#amount").val('');
} else {
msg = "Either debit side or credit side must contain some value";
}
} else {
msg = "Non numberic value entered in debit side or credit side. ";
}
} else {
msg = "Account already added in transactions";
}
} else {
msg = "Account Head Not Selected!";
}
$("#account_id_cr").val() = 0;
$("#account_id_dr").val() = 0;
$("#errorBox h5").html(msg);
$("#errorBox").fadeTo(2000, 500).slideUp(500, function() {
$("#errorBox").slideUp(500);
});
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
calculateTotals();
});
});
function isAccountAdded(account_id) {
var arr = $('input[name="account_ids[]"]').map(function() {
return this.value;
}).get();
// console.log(arr);
if ($.inArray(account_id, arr) >= 0) return true;
else return false;
}
function addRow(account_id, account_name, debit, credit) {
var newRow = $("<tr>");
var cols = "";
cols += (debit == 0) ? '<td class="text-center">Cr</td>' : '<td class="text-center ">Dr</td>';
cols += '<td class="text-left col-7"><input type="hidden" class="form-control1 boarder0 " name="account_ids[]" value="' + account_id + '"/><input type="hidden" class="form-control1 p-0 border0 float-left " name="account_name[]" value="' + account_name + '"/>' + account_name + '</td>';
// cols += '<td><input type="text" readonly class="form-control" name="narration[]" value="' + $("#narration").val() + '"/></td>';
cols += '<td class="col-2 text-right"><input type="hidden" readonly class="form-control1 border0 text-right" name="debit[]" value="' + debit + '"/>' + debit + '</td>';
cols += '<td class="col-2 text-right"><input type="hidden" readonly class="form-control1 border0 text-right" name="credit[]" value="' + credit + '"/>' + credit + '</td>';
cols += '<td class="col-1 "><input type="button" class="ibtnDel btn btn-xs btn-danger float-right " value="Delete"></td>';
newRow.append(cols);
$("#myTable.order-list").append(newRow);
calculateTotals();
}
function calculateTotals() {
var debitTotal = 0;
var creditTotal = 0;
var balance = 0;
$("table.order-list").find('input[name^="debit[]"]').each(function() {
debitTotal += +$(this).val();
});
$("table.order-list").find('input[name^="credit[]"]').each(function() {
creditTotal += +$(this).val();
});
balance = Number(debitTotal) - Number(creditTotal);
roundbalance = balance.toFixed(2);
$("#debit").val(0);
$("#credit").val(0);
$("#debitTotal").text(debitTotal.toFixed(2));
$("#creditTotal").text(creditTotal.toFixed(2));
if (balance > 0) {
$("#balance_cr").text(balance.toFixed(2));
$("#balance_dr").text("");
} else {
$("#balance_cr").text("");
$("#balance_dr").text(balance.toFixed(2));
}
if (roundbalance != 0) {
$("#saveButton").prop("disabled", true);
} else {
$("#saveButton").prop("disabled", false);
}
}
$("#saveButton").prop("disabled", true);
</script>