debit balance
unknown
plain_text
2 years ago
9.8 kB
5
Indexable
<%- include('../include/header.ejs') %>
<style>
.hide{
display: none !important;
transition: all 0.2s ease-in;
}
.debit-balance-filter {
display: flex;
gap: 1rem;
padding: 0.5rem 1rem;
/* background-color: white; */
}
.debit-balance-filter button {
background-color: #6691e7;
padding: 0.8rem 1.5rem !important;
outline: none;
border: none;
border-radius: 8px;
color: white;
transition: all 0.2s ease-in;
}
.debit-balance-filter button:hover {
background-color: #4d71b9;
}
.debit-balance-filter input[type="text"],.debit-balance-filter input[type="date"],.debit-balance-filter select {
padding: 0.8rem 1.5rem !important;
outline: none;
border: none;
border-radius: 8px;
font-size: 15px;
border: 1px solid rgba(0, 0, 0, 0.377);
cursor: pointer;
}
.rad-label {
display: flex;
align-items: center;
border-radius: 100px;
padding: 14px 16px;
margin: 10px 0;
cursor: pointer;
transition: .3s;
border: 1px solid transparent !important;
}
.rad-label p {
margin: 0;
margin-left: 1rem;
}
.rad-label:hover {
background: hsla(0, 0%, 63%, 0.14);
}
.rad-label-background {
background-color: #00000028;
}
.rad-input {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
opacity: 0;
z-index: -1;
}
.rad-design {
width: 22px;
height: 22px;
border-radius: 100px;
background: linear-gradient(to right bottom, #7088d6, #405189);
position: relative;
}
.rad-design::before {
content: '';
display: inline-block;
width: inherit;
height: inherit;
border-radius: inherit;
background: hsl(0, 0%, 90%);
transform: scale(1.1);
transition: .3s;
}
.rad-input:checked+.rad-design::before {
transform: scale(0);
}
.rad-text {
/* color: hsl(0, 0%, 44%); */
margin-left: 14px;
font-size: 15px;
font-weight: 500;
transition: .3s;
}
/* .rad-input:checked~.rad-text {
color: red;
} */
</style>
</head>
<body>
<%- include('../include/navbar.ejs') %>
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0">Debit Balances</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="debit-balance-filter d-flex flex-column flex-md-row flex-wrap card" style="padding-top: 17px;">
<% let type = ""
if(role_name =="CL" || role_name=="GP"){
type="none";
} %>
<div class="d-flex flex-md-row align-items-center" style="display: <%= type%> !important;">
<label class="rad-label rad-label-background" style="max-height: 60px;">
<input type="radio" class="rad-input" name="clientcoderadio" value="1" checked onclick="EnableDisable(1)">
<div class="rad-design"></div>
<p class="rad-text">All Clients</p>
</label>
<label class="rad-label" style="max-height: 60px;">
<input type="radio" class="rad-input" name="clientcoderadio" value="2">
<div class="rad-design"></div>
<p class="rad-text" onclick="EnableDisable(2)">Group</p>
</label>
</div>
<div class="d-flex flex-column flex-md-row gap-3 flex-wrap align-items-center " style="padding-top: 17px;">
<div style="display: <%= type%>;">
<div class="clientCodeTextDiv hide" style=" flex-direction: column;min-height: 100px;">
<label for="" class="form-label fw-semibold"> Group Code</label>
<div style="width: 100%;" class="form-icon right">
<% if(role_name =="CL"){ %>
<input type="text" placeholder="Enter Group Code" class="clientCodeText" value="<%= login_id %>" id="client_code" name="client_code" onkeyup="this.value = this.value.toUpperCase()">
<% }else{%>
<input type="text" placeholder="Enter Group Code" class="clientCodeText" id="client_code" name="client_code" onkeyup="this.value = this.value.toUpperCase()">
<% } %>
<i class="ri-close-circle-fill" onclick="clientCodeClearFn()" style="color: #4572ca;"></i>
<input type="hidden" id="report_name"
value="OutstandingBalance">
</div>
<span class="text-danger" id="group_code_err"></span>
</div>
</div>
<div style="display: flex; flex-direction: column;min-height: 100px;">
<label for="" class="form-label fw-semibold">Date</label>
<div class="form-icon right" style="width: 100%;">
<input type="text" name="date" class="form-control form-control-icon" id="as_on_date" data-provider="flatpickr" data-date-format="d-m-Y" placeholder="Select date" width="">
<i class="ri-calendar-2-fill" onclick="opencalender_as_on_date()"></i>
</div>
<span class="text-danger" id="as_on_date_err"></span>
</div>
<div style="display: flex; flex-direction: column;min-height: 100px;">
<label for="" class="form-label fw-semibold">Select</label>
<div class="form-icon right" style="width: 100%;">
<select name="debit-credit-selector" id="client_type" class="form-select" style="margin-right: 1rem;">
<option value="0">All</option>
<option value="1">Debit</option>
<option value="2">Credit</option>
</select>
</div>
</div>
<button onclick="GetOutstandingBalanceFUP()" style="margin-top: 0.5rem;">Submit</button>
</div>
</div>
</div>
<div id="outstandingbalance">
</div>
<div class="ajax-loader">
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_uwR49r.json" background="transparent" speed="0.7" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
</div>
<div class="fileError">
<h1>Opps.. File not found</h1>
</div>
</div>
<%- include('../include/footer.ejs') %>
</div>
</div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const dateInput = document.getElementById('as_on_date');
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // add leading zero and slice last two characters
const day = ('0' + currentDate.getDate()).slice(-2); // add leading zero and slice last two characters
dateInput.value = `${day}-${month}-${year}`;
function opencalender_as_on_date() {
let input=document.getElementById('as_on_date');
input.focus();
}
</script>
</body>
<script>
const labels = document.querySelectorAll('.rad-label');
labels.forEach(function(item) {
item.addEventListener('click', () => {
labels.forEach(label => {
label.classList.remove('rad-label-background');
});
let radio = item.querySelector('input')
if(radio.value == '2') {
document.querySelector('.clientCodeTextDiv').classList.remove('hide');
}
else{
document.querySelector('.clientCodeText').value=''
document.querySelector('.clientCodeTextDiv').classList.add('hide')
}
radio.checked = true
item.classList.add('rad-label-background')
});
})
</script>
<script>
$(function(){
$("#client_code").autocomplete({
source:function(req,res){
$.ajax({
url: 'search-group-name',
dataType: "jsonp",
type: 'GET',
data:req,
success: function (data){
if(data[0].label != undefined && data[0].label){
res(data)
}else{
$("#client_code").html("")
}
},
error: function (err) {
console.log(err);
}
});
},
minLength:1,
select:function(event,ui){
if(ui.item){
// $("#txt1").text(ui.item.BackOfficeLogin);
$("#client_code").val(ui.item.label)
$("#group_code_err").html("");
}
}
})
})
</script>
<%- include('../include/scripts.ejs') %>
<script>
function clientCodeClearFn(){
document.querySelector('.clientCodeText').value = ''
}
</script>Editor is loading...