Untitled
unknown
plain_text
a year ago
8.4 kB
1
Indexable
Never
<%- include('../include/header.ejs') %>
<style>
.hide{
display: none !important;
transition: all 0.2s ease-in;
}
.square-up-balance-filter {
display: flex;
gap: 1rem;
padding: 1rem;
background-color: white;
}
.square-up-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;
}
.square-up-balance-filter button:hover {
background-color: #4d71b9;
}
.square-up-balance-filter input[type="text"],.square-up-balance-filter input[type="date"],.square-up-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">Square up Report</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Followup Reports</a></li>
<li class="breadcrumb-item active">Square up Report</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="card square-up-balance-filter">
<div class="row d-flex flex-column flex-lg-row">
<div class="col-auto d-flex">
<label class="rad-label rad-label-background">
<input type="radio" class="rad-input" name="rad" value="1" checked>
<div class="rad-design"></div>
<p class="rad-text">All Clients</p>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="rad" value="2">
<div class="rad-design"></div>
<p class="rad-text">Client</p>
</label>
</div>
<div class="col-auto d-flex flex-column flex-lg-row gap-3">
<div style="display: flex; flex-direction: column;" class="clientCodeTextDiv hide">
<label for="" class="form-label fw-semibold">Select Client code</label>
<input type="text" placeholder="Enter client code" class="clientCodeText" id="client_code" value="" onkeyup="this.value = this.value.toUpperCase();">
<input type="hidden" id="report_name" value="SquareupReport">
</div>
<div style="display: flex; flex-direction: column;">
<label for="" class="form-label fw-semibold">Date</label>
<div class="form-icon right" style="width: 100%;">
<input type="text" class="form-control form-control-icon" id="as_on_date" data-provider="flatpickr" data-date-format="d-m-Y" placeholder="Select dates" width="">
<i class="ri-calendar-2-fill"></i>
</div>
</div>
</div>
<div class="col-auto d-flex justify-content-center">
<button class="custom-primary-btn mt-4" onclick="getSqareupReport()">Submit</button>
</div>
</div>
</div>
<!-- <div class="square-up-balance-filter d-flex flex-column flex-md-row flex-wrap">
<div class="d-flex flex-md-row">
<label class="rad-label rad-label-background">
<input type="radio" class="rad-input" name="rad" value="1" checked>
<div class="rad-design"></div>
<p class="rad-text">All Clients</p>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="rad" value="2">
<div class="rad-design"></div>
<p class="rad-text">Client</p>
</label>
</div>
<div class="d-flex flex-column flex-md-row gap-3 flex-wrap">
<input type="text" placeholder="Enter client code" class="clientCodeText hide" id="client_code" value="" onkeyup="this.value = this.value.toUpperCase();">
<input type="hidden" id="report_name" value="SquareupReport">
<div class="form-icon right" style="width: 170px;">
<input type="text" class="form-control form-control-icon" id="as_on_date" data-provider="flatpickr" data-date-format="d-m-Y" placeholder="Select dates" width="">
<i class="ri-calendar-2-fill"></i>
</div>
<button class="custom-primary-btn" onclick="getSqareupReport()">Submit</button>
</div>
</div> -->
</div>
<div id="trade_listing_report_reponse">
</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>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.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}`;
</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>
<%- include('../include/scripts.ejs') %>