@ -1,7 +1,18 @@
@{
ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.text-3 {
font-size: 1rem !important;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="~/vendor/jquery/jquery.min.js"></script>
</head>
<!-- Profile Completeness -->
<div class="bg-white rounded p-4 mb-4">
@ -115,10 +126,10 @@
<div class="row g-0">
<div class="col-sm-5 d-flex justify-content-center bg-primary rounded-start py-4">
<div class="my-auto text-center">
<div class="text-17 text-white my-3"><i class="fas fa-building"></i></div>
<h3 class="text-4 text-white fw-400 my-3">Global IME Bank Ltd </h3>
<div class="text-8 fw-500 text-white my-4">$557.20 </div>
<p class="text-white">15 March 2021 </p>
<div class="text-17 text-white my-3" id="hpBankName" ><i class="fas fa-building"></i></div>
<h3 class="text-4 text-white fw-400 my-3" id="hpAmt"> </h3>
<div class="text-8 fw-500 text-white my-4" id="hDate" ></div>
<p class="text-white"></p>
</div>
</div>
<div class="col-sm-7">
@ -129,33 +140,33 @@
<hr>
<div class="px-3">
<ul class="list-unstyled">
<li class="mb-2">Payment Amount <span class="float-end text-3">$562.00 </span></li>
<li class="mb-2">Fee <span class="float-end text-3">-$4.80 </span></li>
<li class="mb-2" id="payAmt" >Payment Amount <span class="float-end text-3"></span></li>
<li class="mb-2" id="serviceCharge" >Fee <span class="float-end text-3"></span></li>
</ul>
<hr class="mb-2">
<p class="d-flex align-items-center fw-500 mb-0">Total Amount <span class="text-3 ms-auto">$557.20 </span></p>
<p class="d-flex align-items-center fw-500 mb-0" id="tAmt" >Total Amount <span class="text-3 ms-auto"></span></p>
<hr class="mb-2">
<p class="d-flex align-items-center fw-500 mb-0">Total Amount NPR <span class="text-3 ms-auto">Rs. 70000 </span></p>
<p class="d-flex align-items-center fw-500 mb-0" id="tAmtNpr" >Total Amount NPR <span class="text-3 ms-auto"></span></p>
<hr class="mb-4 mt-2">
<ul class="list-unstyled">
<li class="fw-500">Paid By:</li>
<li class="text-muted">Global IME Bank Ltd </li>
<li class="fw-500" id="pBankName" >Paid By:</li>
<li class="text-muted"></li>
</ul>
<ul class="list-unstyled">
<li class="fw-500">Country:</li>
<li class="text-muted">Nepal </li>
<li class="fw-500" id="pCountry" >Country:</li>
<li class="text-muted"></li>
</ul>
<ul class="list-unstyled">
<li class="fw-500">Transaction ID:</li>
<li class="text-muted">26566689645685976589 </li>
<li class="fw-500" id="tranId" >Transaction ID:</li>
<li class="text-muted"></li>
</ul>
<ul class="list-unstyled">
<li class="fw-500">Description:</li>
<li class="text-muted">GBIME March 2021 Member Payment </li>
<li class="fw-500" id="paymentMethod" >Description:</li>
<li class="text-muted"></li>
</ul>
<ul class="list-unstyled">
<li class="fw-500">Status:</li>
<li class="text-muted">Completed <span class="text-success text-3 ms-1"><i class="fas fa-check-circle"></i ></span></li>
<li class="text-muted" id="status" ><span class="text-success text-3 ms-1"></span></li>
</ul>
</div>
</div>
@ -209,6 +220,59 @@
</div>
</div>
<!-- My Receiver List End -->
<!-- Receiver Details Modal
=========================================== -->
<div id="receiver-detail" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered receiver-details" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row g-0">
<div class="col-sm-5 d-flex justify-content-center bg-primary rounded-start py-4">
<div class="my-auto text-center">
<div class="text-17 text-white my-3" id="tranStatus"><i class="fas fa-building"></i></div>
<h3 class="text-4 text-white fw-400 my-3" id="nprAMt"></h3>
<div class="text-8 fw-500 text-white my-4">Send to</div>
<div class="text-17 fw-500 text-white my-4" id="receiverName"></div>
<div class="text-8 fw-500 text-white my-4">IME Control No.</div>
<div class="text-17 fw-500 text-white my-4" id="txnId"></div>
<p class="text-white"></p>
</div>
</div>
<div class="col-sm-7">
<h5 class="text-5 fw-400 m-3">
Transaction Details
<button type="button" class="btn-close text-2 float-end" data-bs-dismiss="modal" aria-label="Close"></button>
</h5>
<hr>
<div class="px-3">
<ul class="list-unstyled">
<li class="mb-2" id="recName">Receiver <span class="float-end text-3"></span></li>
<li class="mb-2" id="recAddress">Address <span class="float-end text-3"></span></li>
<li class="mb-2" id="recMobile">Mobile <span class="float-end text-3"></span></li>
</ul>
<hr class="mb-2">
<ul class="list-unstyled">
<li class="mb-2" id="collAmt">Collected Amount <span class="float-end text-3"></span></li>
<li class="mb-2" id="serviceFee">Service Fee <span class="float-end text-3"></span></li>
<li class="mb-2" id="rewardsPoints">Reward Amount Used <span class="float-end text-3"></span></li>
</ul>
<hr class="mb-2">
<p class="d-flex align-items-center fw-500 mb-0" id="tAmt">Total Sent Amount <span class="text-3 ms-auto"></span></p>
<hr class="mb-2">
<p class="d-flex align-items-center fw-500 mb-0" id="exRate">Exchange Rate <span class="text-3 ms-auto"></span></p>
<hr class="mb-2">
<p class="d-flex align-items-center fw-500 mb-0" id="nprPayAmt">Total Payout Amount <span class="text-3 ms-auto"></span></p>
<hr class="mb-2">
<p class="d-flex align-items-center fw-500 mb-0" id="payoutAgent">Payout Agent/Bank <span class="text-3 ms-auto"></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Receiver Details Modal End -->
<!-- View all Link
=============================== -->
<div class="text-center mt-4">
@ -274,12 +338,11 @@
}
function PopulateReceiverData(response) {
debugger
var result = response.receiverModel;
if (response.responseCode == 0) {
let row = '';
$.each(result, function (i, d) {
row += '<div class="px-4 py-3">';
row += '<div class="transaction-item px-4 py-3" data-bs-toggle="modal" data-bs-target="#receiver-detail" onclick="getReceiverDetails(' + d['id'] + ') ">';
row += '<div class="row align-items-center flex-row">';
row += '<div class="col-1 col-sm-4"><span class="d-block text-1">' + d['name'] + '</span> <span class="text-muted">' + d['mobile'] + '</span></div>';
row += '<div class="col-2 col-sm-2"><span class="d-block text-1"><a href="/Transaction/SendMoney">Send Transaction</a></span></div>';
@ -295,12 +358,12 @@
}
function PopulateTransactionData(response) {
debugger
var result = response.customerTransaction;
var Id = response.customerTransaction.Id;
if (response.responseCode == 0) {
let row = '';
$.each(result, function (i, d) {
row += '<div class="transaction-item px-4 py-3" data-bs-toggle="modal" data-bs-target="#transaction-detail">';
row += '<div class="transaction-item px-4 py-3" data-bs-toggle="modal" data-bs-target="#transaction-detail" onclick="getData(' + d['id'] + ')" >';
row += '<div class="row align-items-center flex-row">';
row += '<div class="col-2 col-sm-2 text-center"> <span class="d-block text-1 fw-300">' + d['transactionDay'] + '</span> <span class="d-block text-1 fw-300 text-uppercase">' + d['transactionMonth'] + '</span> </div>';
row += '<div class="col-3 col-sm-4"> <span class="d-block text-1">' + d['pBankName'] + '</span> <span class="text-muted">' + d['paymentMethod'] + '</span> </div>';
@ -323,5 +386,80 @@
$('#transactionListDiv').hide();
}
}
function getData(id) {
debugger;
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: '/Home/GetTranDetail/' + id,
success: function (response) {
debugger;
var data = response.customerTransaction[0];
$('#hpBankName').text(data.pBankName);
$('#hpAmt').text(data.acAmt);
$('#hDate').text(data.transactionDay);
$('#payAmt').find('span').text(data.cAmt);
$('#serviceCharge').find('span').text(data.serviceCharge);
$('#tAmt').find('span').text(data.acAmt);
$('#tAmtNpr').find('span').text(data.amount);
$('#pBankName').next().text(data.pBankName);
$('#pCountry').next().text(data.pCountry);
$('#tranId').next().text(data.id);
$('#paymentMethod').next().text(data.paymentMethod);
$('#status').next().text(data.status);
// var statusIcon = '<i class="fas fa-check-circle"></i>';
// if (data.Status.toLowerCase() === 'cancel') {
// statusIcon = '<i class="fas fa-times-circle"></i>';
// } else if (data.Status.toLowerCase() === 'processing') {
// statusIcon = '<i class="fas fa-ellipsis-h"></i>';
// }
// $('#status').html(statusIcon + ' ' + data.Status);
},
error: function (error) {
console.error(error);
}
});
}
function getReceiverDetails(id) {
debugger
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: '/Home/GetReceiverDetail/' + id,
success: function (response) {
debugger
if (response.receiverModel && response.receiverModel.length > 0) {
var data = response.receiverModel[0];
$('#tranStatus').text(data.tranStatus);
$('#nprAMt').text(data.nprAmt);
$('#receiverName').text(data.name);
$('#txnId').find('span').text(data.Id);
$('#recName').find('span').text(data.name);
$('#recAddress').find('span').text(data.address);
$('#recMobile').find('span').text(data.mobile);
$('#collAmt').find('span').text(data.collAmt);
$('#serviceFee').find('span').text(data.serviceCharge);
$('#rewardsPoints').find('span').text(data.customerPremium);
$('#tAmt').find('span').text(data.sentAmt);
$('#exRate').find('span').text(data.exRate);
$('#nprPayAmt').find('span').text(data.payoutAmt);
$('#payoutAgent').find('span').text(data.pAgent);
}
},
error: function (error) {
console.error(error);
}
});
}
</script>
}
