509 lines
18 KiB
PHP
509 lines
18 KiB
PHP
<style>
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 8px;
|
||
}
|
||
|
||
table.dataTable tbody td {
|
||
padding: 4px 4px !important;
|
||
}
|
||
|
||
.col-12 {
|
||
|
||
max-width: 98% !important;
|
||
}
|
||
|
||
.dataTables_filter {
|
||
position: absolute;
|
||
}
|
||
|
||
.right-align-input {
|
||
text-align: right;
|
||
}
|
||
|
||
.badge-container {
|
||
background: #F0F0F0;
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.summary-box {
|
||
background: #e3f2fd;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
margin-bottom: 20px;
|
||
border-left: 4px solid #2196F3;
|
||
}
|
||
|
||
</style>
|
||
|
||
<style>
|
||
|
||
.summary-box {
|
||
padding: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.summary-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.summary-row:last-child {
|
||
margin-bottom: 0;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
padding-top: 4px;
|
||
border-top: 1px solid #2196F3;
|
||
}
|
||
|
||
.summary-row {
|
||
padding: 0px 0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.summary-row span:last-child {
|
||
font-weight: bold;
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
.utr-section {
|
||
margin-top: 15px;
|
||
padding-top: 15px;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.utr-heading {
|
||
margin-bottom: 10px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.utr-form-group {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.utr-label {
|
||
font-size: 13px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.utr-small-text {
|
||
color: #666;
|
||
display: block;
|
||
margin-top: 3px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.utr-submit-wrapper {
|
||
margin-bottom: 10px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.utr-list {
|
||
margin-top: 15px;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.utr-table {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.utr-table thead tr {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.utr-table tbody {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.utr-dropdown-item {
|
||
font-size: 13px;
|
||
padding: 5px 15px;
|
||
}
|
||
|
||
.utr-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
#payout_modal .modal-body {
|
||
max-height: 550px; /* adjust as needed */
|
||
overflow-y: auto;
|
||
}
|
||
|
||
</style>
|
||
|
||
<style>
|
||
.utr-table td,
|
||
.utr-table th {
|
||
padding: 3px 8px !important;
|
||
vertical-align: middle;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.utr-table tbody tr {
|
||
height: 30px;
|
||
}
|
||
|
||
.utr-table thead th {
|
||
padding: 5px 8px !important;
|
||
}
|
||
|
||
.utr-table .btn-sm {
|
||
padding: 1px 6px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.utr-table .mdi {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.utr-table .dropdown-menu {
|
||
min-width: 110px;
|
||
}
|
||
|
||
.utr-dropdown-item {
|
||
padding: 7px 10px !important;
|
||
}
|
||
|
||
table[data-custom-table-css="table"] tbody tr td {
|
||
padding: 1px 10px !important;
|
||
line-height: 12px;
|
||
min-height: 40px;
|
||
vertical-align: middle;
|
||
}
|
||
.dataTables_length label {height: 21px !important;}
|
||
|
||
</style>
|
||
|
||
<style>
|
||
|
||
.invoice-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
#invoiceModal .modal-body {
|
||
max-height: 520px; /* adjust as needed */
|
||
overflow-y: auto;
|
||
}
|
||
|
||
</style>
|
||
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="font-weight-medium">S.No.</th>
|
||
<th class="font-weight-medium">Inovice No</th>
|
||
<th class="font-weight-medium">Invoice Date</th>
|
||
<th class="font-weight-medium">Invoice Amount</th>
|
||
<th class="font-weight-medium">UTR Total Amount</th>
|
||
<th class="font-weight-medium">Balance</th>
|
||
<th class="font-weight-medium">Status</th>
|
||
<!-- <th class="font-weight-medium">Agent</th> -->
|
||
<th class="font-weight-medium">POS</th>
|
||
<th class="font-weight-medium">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php if (isset($payout_list_data) && !empty($payout_list_data)) { ?>
|
||
<?php foreach($payout_list_data as $index => $row){ ?>
|
||
<tr>
|
||
<td> <?= $index + 1 ?> </td>
|
||
<td> <?= $row['invoice_no'] ?> </td>
|
||
<td> <?= change_date_format($row['invoice_date'], null, 'd-M-Y') ?? "" ?> </td>
|
||
<td> <?= format_indian_number($row['invoice_amount']) ?> </td>
|
||
<td> <?= format_indian_number($row['total_utr_amount']) ?> </td>
|
||
<td> <?= format_indian_number($row['balance_amount']) ?> </td>
|
||
<td> <?= $row['status_text'] ?> </td>
|
||
<!-- <td> <?= $row['agent_name'] ?? " - " ?> </td> -->
|
||
<td> <?= $row['pos_name'] ?? " - " ?> </td>
|
||
<td>
|
||
<div class="btn-group dropdown">
|
||
<a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" onclick="fetchUtrDetails(<?= $row['id'] ?>, '<?= $row['invoice_no'] ?>')"><i class="mdi mdi-bank-transfer mr-2 text-muted font-18 vertical-middle"></i>UTR</a>
|
||
<!-- <a href="<?= base_url('payout/invoices?type=edit&id=' . $row['id']) ?>" class="dropdown-item"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a> -->
|
||
<a href="<?= base_url('payout/invoices?type=view&id=' . $row['id']) ?>" class="dropdown-item"><i class="mdi mdi-eye mr-2 text-muted font-18 vertical-middle"></i>View</a>
|
||
<a href="<?= base_url('payout/invoices?type=adjustment&id=' . $row['id']) ?>" class="dropdown-item"><i class="mdi mdi-tune mr-2 text-muted font-18 vertical-middle"></i>Adjustment</a>
|
||
<a onclick="fetchPreviewInvoiceDetails(<?= $row['id'] ?>, '<?= $row['invoice_no'] ?>')" class="dropdown-item"><i class="mdi mdi-file mr-2 text-muted font-18 vertical-middle"></i>Preview Invoice</a>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<?php } ?>
|
||
<?php } ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="payout_modal" tabindex="-1" role="dialog" aria-hidden="true" aria-modal="true" data-bs-backdrop="static">
|
||
<div class="modal-dialog modal-lg" style="max-width: 800px;">
|
||
<div class="modal-content">
|
||
<div class="modal-header" style="background-color: gainsboro;">
|
||
<h5 class="modal-title" id="myCenterModalLabel">UTR <span id="heading"></span></h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body" id="modal_body">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Invoice Preview Modal -->
|
||
<div class="modal fade" id="invoiceModal" tabindex="-1" role="dialog" aria-hidden="true" aria-modal="true" data-bs-backdrop="static">
|
||
<div class="modal-dialog modal-full-width">
|
||
<div class="modal-content">
|
||
<div class="modal-header" style="background-color: gainsboro;">
|
||
<h5 class="modal-title" id="invoiceModalLabel">
|
||
Invoice Preview <span id="invoice_heading"></span>
|
||
</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body" id="invoice_modal_body">
|
||
|
||
<input type="hidden" id="row_invoice_id">
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="invoice-actions">
|
||
<button class="btn btn-success btn-sm" onclick="downloadInvoicePdf()"><i class="mdi mdi-download"></i> Download PDF</button>
|
||
<!-- <button class="btn btn-info btn-sm" onclick="printInvoice()"><i class="mdi mdi-printer"></i> Print </button> -->
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- Invoice Preview Container -->
|
||
<div id="invoicePreview"></div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-------------------------------------------------------------------------------------------------->
|
||
|
||
<script>
|
||
|
||
// Datatable document ready
|
||
$(document).ready(function() {
|
||
|
||
var tableEl = $('#scroll-horizontal-datatable');
|
||
if (tableEl.length) {
|
||
|
||
var ticketsTable = tableEl.DataTable({
|
||
scrollX: true,
|
||
// dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
|
||
// "<'row'<'col-sm-12'tr>>" +
|
||
// "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
|
||
dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
|
||
"<'row'<'col-sm-12'tr>>" +
|
||
"<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
|
||
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
|
||
buttons: [
|
||
{
|
||
text: '<i class="mdi mdi-filter" ></i><span class=" btn-custom"> Filter </span>',
|
||
className: 'btn app-btn-primary mr-2',
|
||
action: function(e, dt, node, config) {
|
||
openPayoutFilterNav();
|
||
}
|
||
},
|
||
// {
|
||
// text: 'Add',
|
||
// className: 'btn app-btn-primary mr-2',
|
||
// action: function (e, dt, node, config) {
|
||
// window.location.href = "<?= base_url('payout/invoices?type=add') ?>";
|
||
// }
|
||
// },
|
||
{
|
||
extend: 'collection',
|
||
text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
|
||
className: 'btn app-btn-secondary ',
|
||
buttons: [
|
||
{
|
||
extend: 'csv',
|
||
title: getExportFileName(),
|
||
text: '<i class="mdi mdi-file-delimited " ></i><span class=" btn-custom"> CSV </span>',
|
||
exportOptions: {
|
||
columns: ':not(:last-child)'
|
||
},
|
||
},
|
||
{
|
||
extend: 'excel',
|
||
title: getExportFileName(),
|
||
sheetName: getExportFileName(),
|
||
text: '<i class="mdi mdi-file-excel " ></i><span class=" btn-custom"> EXCEL </span>',
|
||
className: 'app-btn-primary ',
|
||
exportOptions: {
|
||
columns: ':not(:last-child)'
|
||
},
|
||
}
|
||
]
|
||
}
|
||
],
|
||
language: {
|
||
search: `
|
||
<div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
|
||
_INPUT_
|
||
<i class="mdi mdi-magnify datatable-search-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
|
||
<i class="mdi mdi-close-circle datatable-clear-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
|
||
</div>`,
|
||
searchPlaceholder: "Search",
|
||
emptyTable: '<div class="text-center text-muted">No Data found</div>'
|
||
},
|
||
paging: true, // Enable pagination
|
||
pageLength: 10, // Set default number of rows per page (optional)
|
||
ordering: false
|
||
});
|
||
|
||
// IMPORTANT — DataTables draw event REF: TTS
|
||
ticketsTable.on('draw.dt', function () {
|
||
|
||
let rowCount = $('#scroll-horizontal-datatable').DataTable().rows({ filter: 'applied' }).count();
|
||
|
||
if (rowCount <= 2) {
|
||
$('.dataTables_scrollBody').css('overflow', 'inherit');
|
||
} else {
|
||
$('.dataTables_scrollBody').css('overflow', 'auto');
|
||
}
|
||
});
|
||
} else {
|
||
console.error("Table atet found.");
|
||
}
|
||
});
|
||
|
||
function fetchUtrDetails(invoice_id, invoice_no){
|
||
if (!invoice_id) {
|
||
toastr.warning("Invoice Id not found!", "Warning");
|
||
return false;
|
||
}
|
||
|
||
let heading_text = ' - ( Invoice No : ' + invoice_no + ' )';
|
||
|
||
$('#modal_body').empty();
|
||
$('#heading').text(heading_text);
|
||
$('#modal_body').append('<div class="text-center p-5"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>');
|
||
|
||
var myModal = new bootstrap.Modal(document.getElementById('payout_modal'));
|
||
myModal.show();
|
||
|
||
let url = '<?= base_url('payout/fetchUtrDetails') ?>';
|
||
|
||
// Data to send in the AJAX request
|
||
let requestData = {
|
||
invoice_id: invoice_id,
|
||
};
|
||
|
||
$('.loader').fadeIn();
|
||
$('.loader-mask').fadeIn();
|
||
// Send AJAX request
|
||
sendAjaxRequestForGlobal(url, 'POST', requestData, function(response) {
|
||
|
||
console.log('Data fetched successfully:', response);
|
||
|
||
$('#modal_body').empty();
|
||
$('#heading').text(heading_text);
|
||
$('#modal_body').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');
|
||
console.error('Error fetching data:', error);
|
||
console.error(xhr.responseText);
|
||
toastr.error('An error occurred while fetching the data.', 'Error');
|
||
});
|
||
}
|
||
|
||
function fetchPreviewInvoiceDetails(invoice_id, invoice_no){
|
||
|
||
if (!invoice_id) {
|
||
toastr.warning("Invoice Id not found!", "Warning");
|
||
return false;
|
||
}
|
||
|
||
let heading_text = ' - ( ' + invoice_no + ' )';
|
||
|
||
$('#invoicePreview').empty();
|
||
$('#invoice_heading').text(heading_text);
|
||
$('#invoicePreview').append('<div class="text-center p-5"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>');
|
||
|
||
var myModal = new bootstrap.Modal(document.getElementById('invoiceModal'));
|
||
myModal.show();
|
||
|
||
let url = '<?= base_url('payout/invoices/preview') ?>';
|
||
|
||
// Data to send in the AJAX request
|
||
let requestData = {
|
||
invoice_id: invoice_id,
|
||
};
|
||
|
||
|
||
// Send AJAX request
|
||
sendAjaxRequestForGlobal(url, 'GET', requestData, function(response) {
|
||
|
||
console.log('Data fetched successfully:', response);
|
||
|
||
$('#invoicePreview').empty();
|
||
$('#invoice_heading').text(heading_text);
|
||
|
||
if (response.status == true) {
|
||
$('#invoicePreview').append(response.data);
|
||
$('#row_invoice_id').val(invoice_id);
|
||
}else{
|
||
$('#invoicePreview').append('<div class="text-center p-5 text-muted">No data found</div>');
|
||
}
|
||
|
||
}, function(xhr, status, error) {
|
||
console.error('Error fetching data:', error);
|
||
console.error(xhr.responseText);
|
||
// toastr.error('An error occurred while fetching the data.', 'Error');
|
||
$('#invoicePreview').empty();
|
||
$('#invoicePreview').append('<div class="text-center p-5 text-muted">No data found</div>');
|
||
});
|
||
}
|
||
|
||
function addInvoiceButton(){
|
||
window.location.href='<?= base_url('payout/invoices?type=add') ?>'
|
||
}
|
||
|
||
function getExportFileName() {
|
||
let d = new Date();
|
||
let day = String(d.getDate()).padStart(2, '0');
|
||
let month = String(d.getMonth() + 1).padStart(2, '0');
|
||
let year = d.getFullYear();
|
||
return `Invoices (${day}-${month}-${year})`;
|
||
}
|
||
|
||
function downloadInvoicePdf(){
|
||
|
||
let invoice_id = $('#row_invoice_id').val();
|
||
window.location.href = '<?= base_url('payout/invoices/downloadPdf/') ?>' + invoice_id
|
||
}
|
||
|
||
$('#invoiceModal').on('hidden.bs.modal', function () {
|
||
$('#row_invoice_id').val("");
|
||
console.log('value reseted...')
|
||
});
|
||
|
||
</script>
|