249 lines
8.7 KiB
PHP
249 lines
8.7 KiB
PHP
<style>
|
|
.filter-sidebar {
|
|
height: 100%;
|
|
width: 0;
|
|
position: fixed;
|
|
z-index: 1001;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #f8f9fa;
|
|
overflow-x: hidden;
|
|
transition: 0.5s;
|
|
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-sidebar-header {
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #dee2e6;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.filter-sidebar-header .closebtn {
|
|
font-size: 28px;
|
|
text-decoration: none;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.filter-sidebar .closebtn:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.filter-sidebar-content {
|
|
padding: 20px;
|
|
flex-grow: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.filter-sidebar-footer {
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
border-top: 1px solid #dee2e6;
|
|
flex-shrink: 0;
|
|
gap: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div id="payout-filter-sidebar" class="filter-sidebar">
|
|
<div class="filter-sidebar-header">
|
|
<h4 class="m-0">Filter</h4>
|
|
<a href="javascript:void(0)" class="closebtn" onclick="closePayoutFilterNav()">×</a>
|
|
</div>
|
|
<div class="filter-sidebar-content">
|
|
<div class="form-group">
|
|
<div class="form-row">
|
|
<div class="form-group col-md-12">
|
|
<label for="pos_id">POS<span class="text-danger"></span></label>
|
|
<select class="form-control" id="pos_id" name="pos_id">
|
|
<option value="">Select POS (Manager)</option>
|
|
<?php if (isset($pos_list) && !empty($pos_list)) : ?>
|
|
<?php foreach ($pos_list as $pos) : ?>
|
|
<option value="<?= $pos['id']; ?>"><?= htmlspecialchars($pos['name'] . ' (' . $pos['manager_name'] . ')'); ?></option>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group col-md-12">
|
|
<label for="client_branch_id">Status<span class="text-danger"></span></label>
|
|
<select class="form-control" id="status_id" name="status_id">
|
|
<option value="">Select status</option>
|
|
<?php if (isset($payout_status) && !empty($payout_status)) : ?>
|
|
<?php foreach ($payout_status as $id => $status) : ?>
|
|
<option value="<?= $id; ?>"><?= $status; ?></option>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group col-md-12" style="display: true;" id="date_div">
|
|
<label>Date<span class="text-danger"></span></label>
|
|
<div class="input-icon">
|
|
<input type="text" id="reportrange" class="form-control" readonly style="caret-color: transparent;">
|
|
<i class="mdi mdi-calendar-blank-outline additional-icon"></i>
|
|
</div>
|
|
<input type="hidden" id="startDate">
|
|
<input type="hidden" id="endDate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="filter-sidebar-footer">
|
|
<a href="#" class="btn btn-secondary" id="clear-filters">Clear</a>
|
|
<a class="btn btn-primary" id="get-emp-list" onclick="fetchPayoutList(this); closePayoutFilterNav();">Submit</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid-min">
|
|
<!-- end page title -->
|
|
<div id="payout_list">
|
|
<?php if(isset($payout_list) && !empty($payout_list)) { echo $payout_list; }else{ } ?>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openPayoutFilterNav() {
|
|
document.getElementById("payout-filter-sidebar").style.width = "350px";
|
|
}
|
|
|
|
function closePayoutFilterNav() {
|
|
document.getElementById("payout-filter-sidebar").style.width = "0";
|
|
}
|
|
|
|
let utrHasBeenChanged = false;
|
|
|
|
$(document).ready(function(){
|
|
// $('#agent_id').select2(); because dropdown hided
|
|
$('#pos_id').select2();
|
|
$('#startDate').val('');
|
|
$('#endDate').val('');
|
|
$('#reportrange').val('');
|
|
})
|
|
|
|
$(function() {
|
|
|
|
const url = new URL(window.location.href);
|
|
const params = new URLSearchParams(url.search);
|
|
|
|
// Get start and end dates from URL parameters, or use default values
|
|
const startDateParam = params.get('start_date') || moment().subtract(60, 'days').format('DD-MM-YYYY');
|
|
const endDateParam = params.get('end_date') || moment().format('DD-MM-YYYY');
|
|
|
|
// Parse the dates to moment objects
|
|
var start = moment(startDateParam, 'DD-MM-YYYY');
|
|
var end = moment(endDateParam, 'DD-MM-YYYY');
|
|
|
|
function cb(start, end) {
|
|
$('#reportrange').val(start.format('D-MM-YYYY') + ' - ' + end.format('D-MM-YYYY'));
|
|
$('#startDate').val(start.format('DD-MM-YYYY'));
|
|
$('#endDate').val(end.format('DD-MM-YYYY'));
|
|
}
|
|
|
|
$('#reportrange').daterangepicker({
|
|
startDate: start,
|
|
endDate: end,
|
|
locale: {
|
|
format: 'DD-MM-YYYY'
|
|
},
|
|
ranges: {
|
|
'Today': [moment(), moment()],
|
|
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
|
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
|
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
|
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
|
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
|
},
|
|
autoUpdateInput: false
|
|
}, cb);
|
|
|
|
// Only update inputs when user selects a date range
|
|
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
|
|
cb(picker.startDate, picker.endDate);
|
|
});
|
|
|
|
$('#clear-filters').on('click', function() {
|
|
// Reset all select dropdowns to the first option
|
|
// $('#agent_id').val('').change(); because dropdown hided
|
|
$('#pos_id').val('').change();
|
|
$('#status_id').val('').change();
|
|
|
|
// Clear the date range inputs
|
|
$('#reportrange').val('');
|
|
$('#startDate').val('');
|
|
$('#endDate').val('');
|
|
window.location.reload(true);
|
|
});
|
|
|
|
});
|
|
|
|
function fetchPayoutList(internalCall = false)
|
|
{
|
|
// let agent_id = $('#agent_id').val(); because dropdown hided
|
|
let pos_id = $('#pos_id').val();
|
|
let status_id = $('#status_id').val();
|
|
let start_date = $('#startDate').val();
|
|
let end_date = $('#endDate').val();
|
|
console.log({pos_id, status_id, start_date, end_date, internalCall, utrHasBeenChanged});
|
|
|
|
if(!internalCall){
|
|
if (!pos_id && !status_id && !start_date && !end_date) {
|
|
toastr.warning("Please select any one filter!", "Warning");
|
|
return false;
|
|
}
|
|
}
|
|
|
|
let url = '<?= base_url('payout/list') ?>';
|
|
|
|
// Data to send in the AJAX request
|
|
let requestData = {
|
|
// agent_id: agent_id, because dropdown hided
|
|
pos_id: pos_id,
|
|
status_id: status_id,
|
|
start_date: start_date,
|
|
end_date: end_date,
|
|
};
|
|
|
|
$('.loader').fadeIn();
|
|
$('.loader-mask').fadeIn();
|
|
// Send AJAX request
|
|
sendAjaxRequestForGlobal(url, 'POST', requestData, function(response) {
|
|
|
|
console.log('Data fetched successfully:', response);
|
|
|
|
$('#payout_list').empty();
|
|
$('#payout_list').append(response.data);
|
|
|
|
if (response.status == false) {
|
|
toastr.warning(response.message || 'Unable to fetch data', 'Warning');
|
|
}
|
|
|
|
$('.loader').fadeOut();
|
|
$('.loader-mask').delay(350).fadeOut('slow');
|
|
|
|
}, function(xhr, status, error) {
|
|
$('.loader').fadeOut();
|
|
$('.loader-mask').delay(350).fadeOut('slow');
|
|
$('#payout_list').empty();
|
|
$('#payout_list').append(response.data);
|
|
console.error('Error fetching data:', error);
|
|
console.error(xhr.responseText);
|
|
toastr.error('An error occurred while fetching the data.', 'Error');
|
|
});
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
$('#payout_modal').on('hidden.bs.modal', function () {
|
|
console.log("Payout Modal closed");
|
|
console.log('utrHasBeenChanged', utrHasBeenChanged);
|
|
if(utrHasBeenChanged == true){
|
|
fetchPayoutList(true);
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|