| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/billingsystem/dashboard_bk/ |
Upload File : |
<!DOCTYPE html>
<html lang="en-HK" prefix="og: http://ogp.me/ns#">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Receipt Edit</title>
<!-- css -->
<?php include 'inc/headlinks.php'; ?>
<?php include 'inc/link-js.php'; ?>
<!-- End layout styles -->
</head>
<body>
<div class="container-scroller">
<!-- partial:partials/_sidebar.html -->
<?php include 'inc/sidebar.php'; ?>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:partials/_navbar.html -->
<?php include 'inc/navbar.php'; ?>
<!-- partial -->
<div class="main-panel">
<!-- breadcrumb -->
<div class="page-title-box d-flex align-items-center justify-content-between">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item"><a href="receipt.php">Receipt</a></li>
<li class="breadcrumb-item active">Receipt Edit</li>
</ol>
</div>
<!-- breadcrumb end -->
<div class="content-wrapper pb-0">
<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="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 <span class="text-muted small">(includes a
discount)</span>
</h4>
<h4 class="col-6 col-lg-3 text-right">$51.00 </h4>
</div>
</div>
</div>
</div>
<div class="card-body boxShadow whiteBg mb-3">
<h4 class="text-right">Accumulated Balance: $405.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">$-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 class="text-right">
<hr>
<button type="button" class="btn btn-secondary" onclick="location.href='receipt_detail.php';">Back</button>
<button type="button" class="btn btn-primary submitDate shadow_blue">update</button>
</div>
</div>
</form>
<!-- form END-->
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<?php include 'inc/footer.php'; ?>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- Modal Customer-->
<?php include 'component/add_customer.php'; ?>
<script src="../assets/datatables/buttons/1.1.2/js/dataTables.buttons.min.js?<?= rand(1, 10000) / 7; ?>"></script>
<script src="../assets/datatables/select/1.1.2/js/dataTables.select.min.js?<?= rand(1, 10000) / 7; ?>"></script>
<script src="../assets/js/bootstrap-datepicker.js?<?= rand(1, 10000) / 7; ?>"></script>
<script src="../assets/js/jsgrid.js?<?= rand(1, 10000) / 7; ?>"></script>
<script>
$(function() {
//sidebar active
$('.nav .nav-item:nth-child(9)').addClass('active');
$('.nav .nav-item .collapse .nav-item').removeClass('active');
$('#Date').datepicker({
format: 'dd M, yyyy'
});
//customer Search
ajaxSearchDetail();
function ajaxSearchDetail() {
$.ajax({
url: "../assets/json/mainsearch.json",
type: "get",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function(data) {
var recent = data.recentSearch;
$('.mainSearchInput').wrap(`<div class="mainSearchWrap">`);
$(`<div class="mainSearchDetail noborder shadow"><ul class="mainSearchGroup"></ul><button type="button" class="small sbtn btn-inverse-primary btn-fw mt-2" data-toggle="modal" data-target="#addNew">Add New</button></div>`)
.appendTo(".mainSearchWrap");
$.each(recent, function(index, item) {
//$("<option >").append(item.eng_desc).appendTo("#loanPurpose");
$('<li class="mainSearchItems"><div class="mainSearchItem"><input class="form-check-input radioSearch" type="radio" name="mainSearch" value="' +
item.val + '" id="mainSearchItem' + item.id +
'"><label class="form-check-label fullWidth" for="mainSearchItem' +
item
.id + '">' + item.val +
'</label></div></li>'
).appendTo(".mainSearchGroup");
});
function checkMainSearch(val) {
$(".mainSearchItems").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(
val) >
-1)
console.log($(this).val);
});
};
$(".mainSearchInput").on("keyup change", function() {
let val = $(this).val().toLowerCase();
checkMainSearch(val);
});
},
error: function(xhr, status, errorThrown) {
console.log(errorThrown + "\n" + status + "\n" + xhr.statusTex);
},
});
};
$(document).on("click", "input[type='radio'][name='mainSearch']:checked", function() {
$(this).closest(".mainSearchWrap").find(".mainSearchInput").val($(
this)
.val());
$(this).closest(".mainSearchWrap").removeClass('active');
});
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;
$("#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 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"
}];
$("#grid02").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>
</body>
</html>