308 lines
12 KiB
PHP
308 lines
12 KiB
PHP
<div class="container-fluid-min">
|
||
<div class="col-12" id="bds_filter">
|
||
<div class="card-body">
|
||
<div id="accordion" class="mb-3">
|
||
<div class="card mb-1">
|
||
<h4 class="m-1">
|
||
<span>Filter</span>
|
||
<a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
|
||
aria-expanded="true">
|
||
<i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
|
||
</a>
|
||
</h4>
|
||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<div class="form-row">
|
||
<div class="form-group col-md-3">
|
||
<label for="client_branch">Agents<span class="text-danger"></span></label>
|
||
<select class="form-control" id="agent_id" name="agent_id">
|
||
<option value="">Select Agent</option>
|
||
<?php if (isset($agent_list) && !empty($agent_list)) : ?>
|
||
<?php foreach ($agent_list as $agent) : ?>
|
||
<option value="<?= $agent['id']; ?>"><?= $agent['name']; ?></option>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group col-md-3">
|
||
<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-3" 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 class="form-group col-md-12 text-right m-b-0" style="margin-top: 29px;">
|
||
<a class="btn btn-secondary" id="clear-filters">Clear</a>
|
||
<a class="btn btn-primary" id="get-emp-list" onclick="fetchPayoutList(this);">Submit</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end page title -->
|
||
<div id="payout_list">
|
||
<?php if(isset($payout_list) && !empty($payout_list)) { echo $payout_list; }else{ } ?>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
$(document).ready(function(){
|
||
$('#agent_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();
|
||
$('#status_id').val('').change();
|
||
|
||
// Clear the date range inputs
|
||
$('#reportrange').val('');
|
||
$('#startDate').val('');
|
||
$('#endDate').val('');
|
||
});
|
||
|
||
});
|
||
|
||
function fetchPayoutList()
|
||
{
|
||
let agent_id = $('#agent_id').val();
|
||
let status_id = $('#status_id').val();
|
||
let start_date = $('#startDate').val();
|
||
let end_date = $('#endDate').val();
|
||
|
||
if (!agent_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,
|
||
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');
|
||
});
|
||
}
|
||
|
||
function showUtrModal(){
|
||
var myModal = new bootstrap.Modal(document.getElementById('payout_modal'));
|
||
myModal.show();
|
||
}
|
||
|
||
function updateUTRSummary() {
|
||
|
||
const totalUTR = currentInvoice.utrs.reduce((sum, utr) => sum + utr.amount, 0);
|
||
const remaining = currentInvoice.currentAmount - totalUTR;
|
||
|
||
document.getElementById('utrInvoiceAmount').textContent = '₹' + currentInvoice.currentAmount.toFixed(2);
|
||
document.getElementById('utrTotalPaid').textContent = '₹' + totalUTR.toFixed(2);
|
||
document.getElementById('utrRemaining').textContent = '₹' + remaining.toFixed(2);
|
||
document.getElementById('maxUtrAmount').textContent = '₹' + remaining.toFixed(2);
|
||
|
||
// Color code remaining amount
|
||
const remainingSpan = document.getElementById('utrRemaining');
|
||
if (remaining === 0) {
|
||
remainingSpan.style.color = '#4CAF50';
|
||
} else if (remaining < 0) {
|
||
remainingSpan.style.color = '#f44336';
|
||
} else {
|
||
remainingSpan.style.color = '#ff9800';
|
||
}
|
||
}
|
||
|
||
function renderUTRList() {
|
||
const list = document.getElementById('utrList');
|
||
|
||
if (currentInvoice.utrs.length === 0) {
|
||
list.innerHTML = '<div class="no-data">No UTR records found</div>';
|
||
return;
|
||
}
|
||
|
||
let html = '<h3 style="margin-bottom: 15px;">Existing UTRs</h3>';
|
||
currentInvoice.utrs.forEach((utr, idx) => {
|
||
html += `
|
||
<div class="utr-item">
|
||
<div class="utr-info">
|
||
<div class="utr-number">${idx + 1}. ${utr.utrNo}</div>
|
||
<div class="utr-date">${utr.date}</div>
|
||
</div>
|
||
<div class="utr-amount">₹${utr.amount.toFixed(2)}</div>
|
||
<button class="delete-btn" onclick="deleteUTR(${idx})" title="Delete">×</button>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
list.innerHTML = html;
|
||
}
|
||
|
||
function addUTR() {
|
||
const utrNo = document.getElementById('utrNumber').value.trim();
|
||
const amount = parseFloat(document.getElementById('utrAmount').value);
|
||
const date = document.getElementById('utrDate').value;
|
||
|
||
if (!utrNo || !amount || !date) {
|
||
alert('Please fill in all fields');
|
||
return;
|
||
}
|
||
|
||
if (amount <= 0) {
|
||
alert('Amount must be greater than 0');
|
||
return;
|
||
}
|
||
|
||
const totalUTR = currentInvoice.utrs.reduce((sum, utr) => sum + utr.amount, 0);
|
||
const remaining = currentInvoice.currentAmount - totalUTR;
|
||
|
||
if (amount > remaining) {
|
||
alert(`Amount exceeds remaining balance. Maximum allowed: ₹${remaining.toFixed(2)}`);
|
||
return;
|
||
}
|
||
|
||
// Add to current invoice
|
||
currentInvoice.utrs.push({
|
||
utrNo: utrNo,
|
||
amount: amount,
|
||
date: date
|
||
});
|
||
|
||
// Check if invoice is fully paid
|
||
const newTotalUTR = currentInvoice.utrs.reduce((sum, utr) => sum + utr.amount, 0);
|
||
if (newTotalUTR >= currentInvoice.currentAmount) {
|
||
currentInvoice.status = 'completed';
|
||
}
|
||
|
||
// Clear form
|
||
document.getElementById('utrNumber').value = '';
|
||
document.getElementById('utrAmount').value = '';
|
||
|
||
// Refresh displays
|
||
updateUTRSummary();
|
||
renderUTRList();
|
||
renderInvoices();
|
||
|
||
alert('UTR added successfully!');
|
||
}
|
||
|
||
function deleteUTR(index) {
|
||
if (!confirm('Are you sure you want to delete this UTR?')) {
|
||
return;
|
||
}
|
||
|
||
currentInvoice.utrs.splice(index, 1);
|
||
|
||
// Update status
|
||
const totalUTR = currentInvoice.utrs.reduce((sum, utr) => sum + utr.amount, 0);
|
||
if (totalUTR >= currentInvoice.currentAmount) {
|
||
currentInvoice.status = 'completed';
|
||
} else {
|
||
currentInvoice.status = 'pending';
|
||
}
|
||
|
||
updateUTRSummary();
|
||
renderUTRList();
|
||
renderInvoices();
|
||
}
|
||
|
||
function closeModal(modalId) {
|
||
document.getElementById(modalId).classList.remove('active');
|
||
currentInvoice = null;
|
||
}
|
||
|
||
</script>
|