FIX_INVOICE FORM, FEAT_TOTAL IN REPORT
This commit is contained in:
Srinivas-Saravanan
parent
1c3e47b623
commit
9cbf6ac3fa
@ -483,13 +483,13 @@ if (isset($invoice_item_details[0]['to_subscription']) && !empty($invoice_item_d
|
||||
<div class="form-group col-md-6">
|
||||
<span style="<?= $shippingChargesStyle ?>">
|
||||
<label for="shippingChargesLabel">Charge Name </label>
|
||||
<input type="text" class="form-control" id="shippingChargesLabel" name="shippingChargesLabel" placeholder="Shipping Charges Label" value="<?= isset($invoice_details['shipping_label']) ? $invoice_details['shipping_label'] : 'Shipping Charge' ?>" oninput="calculateOverallTotals()" <?= $shippingChargesHidden ?>>
|
||||
<input type="text" class="form-control" id="shippingChargesLabel" name="shippingChargesLabel" placeholder="Shipping Charges Label" value="<?= isset($invoice_details['shipping_label']) ? $invoice_details['shipping_label'] : 'Shipping Charge' ?>" <?= $shippingChargesHidden ?>>
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<span style="<?= $shippingChargesStyle ?>">
|
||||
<label for="shippingCharges">Charge Amount </label>
|
||||
<input type="number" class="form-control" id="shippingCharges" name="shippingCharges" placeholder="Charges Amount" value="<?= isset($invoice_details['shipping_charge']) ? $invoice_details['shipping_charge'] : 0 ?>" oninput="calculateOverallTotals()" <?= $shippingChargesHidden ?> step="0.001" >
|
||||
<input type="number" class="form-control" id="shippingCharges" name="shippingCharges" placeholder="Charges Amount" value="<?= isset($invoice_details['shipping_charge']) ? $invoice_details['shipping_charge'] : 0 ?>" oninput="if(this.value) calculateOverallTotals()" <?= $shippingChargesHidden ?> step="0.001" >
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -1197,7 +1197,7 @@ if (isset($invoice_item_details[0]['to_subscription']) && !empty($invoice_item_d
|
||||
|
||||
// Calculate the total using the formula: subtotal - tax + shipping - discount
|
||||
var total = overallAmount - overallTax + shippingCharges - overallDiscount;
|
||||
console.log(total);
|
||||
// console.log(total);
|
||||
|
||||
// Update the subtotal, tax, shipping charges, discount, and total in the calculation card
|
||||
var subtotalElement = parseFloat(overallAmount.toFixed(2));
|
||||
@ -2551,111 +2551,112 @@ $('#saveButton').click(function() {
|
||||
function hideBillingShippingModel(params) {
|
||||
$('#editAddressesCheckbox').click();
|
||||
}
|
||||
// When discount is entered (keyup event)
|
||||
$('#discount').keyup(function() {
|
||||
// Ensure the discount type is set (percentage or fixed amount)
|
||||
if ($('#discount-type').css('display') == 'none') {
|
||||
$('#discount-type').val('%');
|
||||
}
|
||||
$('#discount-type').show();
|
||||
$('#discount-type').attr('name', 'dis_type');
|
||||
|
||||
// Clear individual item discount fields
|
||||
$('.item-discount-amount').val('');
|
||||
|
||||
$('#discount').keyup(function() {
|
||||
if($('#discount-type').css('display') == 'none'){
|
||||
$('#discount-type').val('%');
|
||||
}
|
||||
$('#discount-type').show();
|
||||
$('#discount-type').attr('name', 'dis_type');
|
||||
var discountValue = $(this).val();
|
||||
var discountType = $('#discount-type').val();
|
||||
|
||||
$('.item-discount-amount').val('');
|
||||
|
||||
var discountValue = $(this).val();
|
||||
var discountType = $('#discount-type').val();
|
||||
|
||||
var totalAmount = 0 ;
|
||||
var discountLastValue = 0;
|
||||
$('.item-amount').each(function() {
|
||||
totalAmount += parseInt($(this).val());
|
||||
});
|
||||
|
||||
if (discountType == '%') {
|
||||
discountLastValue = totalAmount - (totalAmount * discountValue / 100 );
|
||||
}else{
|
||||
discountLastValue = totalAmount - discountValue;
|
||||
}
|
||||
|
||||
var shippingCharges = $('#shippingCharges').val();
|
||||
|
||||
if (isNaN(shippingCharges)) {
|
||||
shippingCharges =0;
|
||||
}
|
||||
discountLastValue += parseInt(shippingCharges);
|
||||
|
||||
$('#exacttotal').val(discountLastValue);
|
||||
$('#grandtotal').val(parseInt(discountLastValue));
|
||||
$('#balanceAmount').val(parseInt(discountLastValue));
|
||||
|
||||
|
||||
|
||||
|
||||
// var discountedPrice = calculateDiscountedPrice(discountValue);
|
||||
// $('#discounted-price').text(discountedPrice);
|
||||
// Calculate the total amount of items (subtotal)
|
||||
var totalAmount = 0;
|
||||
$('.item-amount').each(function() {
|
||||
totalAmount += parseFloat($(this).val()) || 0; // Ensure it's a number
|
||||
});
|
||||
|
||||
function discountTypeKeyup(params) {
|
||||
if($('#discount-type').css('display') == 'none'){
|
||||
$('#discount-type').val('%');
|
||||
}
|
||||
$('#discount-type').show();
|
||||
|
||||
$('.item-discount-amount').val('');
|
||||
|
||||
var discountValue = $('#discount').val();
|
||||
var discountType = $('#discount-type').val();
|
||||
|
||||
var totalAmount = 0 ;
|
||||
var discountLastValue = 0;
|
||||
$('.item-amount').each(function() {
|
||||
totalAmount += parseInt($(this).val());
|
||||
});
|
||||
|
||||
if (discountType == '%') {
|
||||
discountLastValue = totalAmount - (totalAmount * discountValue / 100 );
|
||||
}else{
|
||||
discountLastValue = totalAmount - discountValue;
|
||||
}
|
||||
|
||||
var shippingCharges = $('#shippingCharges').val();
|
||||
if (isNaN(shippingCharges)) {
|
||||
shippingCharges =0;
|
||||
}
|
||||
discountLastValue += parseInt(shippingCharges);
|
||||
$('#exacttotal').val(discountLastValue );
|
||||
$('#grandtotal').val(parseInt(discountLastValue));
|
||||
$('#balanceAmount').val(parseInt(discountLastValue));
|
||||
|
||||
// Apply the discount based on the discount type
|
||||
var discountedAmount = 0;
|
||||
if (discountType == '%') {
|
||||
discountedAmount = totalAmount - (totalAmount * discountValue / 100);
|
||||
} else {
|
||||
discountedAmount = totalAmount - discountValue;
|
||||
}
|
||||
|
||||
$('#discount-type').change(function () {
|
||||
|
||||
var discountValue = $('#discount').val();
|
||||
var discountType = $(this).val();
|
||||
// Get the shipping charges and ensure it's a valid number
|
||||
var shippingCharges = parseFloat($('#shippingCharges').val()) || 0;
|
||||
|
||||
var totalAmount = 0 ;
|
||||
var discountLastValue = 0;
|
||||
$('.item-amount').each(function() {
|
||||
totalAmount += parseInt( $(this).val());
|
||||
});
|
||||
// Final total after adding shipping charges
|
||||
var finalTotal = discountedAmount + shippingCharges;
|
||||
|
||||
if (discountType == '%') {
|
||||
discountLastValue = totalAmount - (totalAmount * discountValue / 100 );
|
||||
}else{
|
||||
discountLastValue = totalAmount - discountValue;
|
||||
}
|
||||
// Update the fields with the calculated values
|
||||
$('#subtotal').val(totalAmount.toFixed(2)); // Subtotal remains as the sum of item amounts
|
||||
$('#exacttotal').val(finalTotal.toFixed(2)); // Final total after discount and shipping
|
||||
$('#grandtotal').val(finalTotal.toFixed(2)); // Grand total
|
||||
$('#balanceAmount').val(finalTotal.toFixed(2)); // Balance amount (same as final total)
|
||||
});
|
||||
|
||||
var shippingCharges = $('#shippingCharges').val();
|
||||
if (isNaN(shippingCharges)) {
|
||||
shippingCharges =0;
|
||||
}
|
||||
discountLastValue += parseInt(shippingCharges);
|
||||
// When the discount type is changed (percentage or fixed)
|
||||
$('#discount-type').change(function() {
|
||||
var discountValue = $('#discount').val();
|
||||
var discountType = $(this).val();
|
||||
|
||||
// Calculate the total amount of items (subtotal)
|
||||
var totalAmount = 0;
|
||||
$('.item-amount').each(function() {
|
||||
totalAmount += parseFloat($(this).val()) || 0; // Ensure it's a number
|
||||
});
|
||||
|
||||
// Apply the discount based on the discount type
|
||||
var discountedAmount = 0;
|
||||
if (discountType == '%') {
|
||||
discountedAmount = totalAmount - (totalAmount * discountValue / 100);
|
||||
} else {
|
||||
discountedAmount = totalAmount - discountValue;
|
||||
}
|
||||
|
||||
// Get the shipping charges and ensure it's a valid number
|
||||
var shippingCharges = parseFloat($('#shippingCharges').val()) || 0;
|
||||
|
||||
// Final total after adding shipping charges
|
||||
var finalTotal = discountedAmount + shippingCharges;
|
||||
|
||||
// Update the fields with the calculated values
|
||||
$('#subtotal').val(totalAmount.toFixed(2)); // Subtotal remains as the sum of item amounts
|
||||
$('#exacttotal').val(finalTotal.toFixed(2)); // Final total after discount and shipping
|
||||
$('#grandtotal').val(finalTotal.toFixed(2)); // Grand total
|
||||
$('#balanceAmount').val(finalTotal.toFixed(2)); // Balance amount (same as final total)
|
||||
});
|
||||
|
||||
// When shipping charge is updated
|
||||
$('#shippingCharges').keyup(function() {
|
||||
// Recalculate the final total with shipping charge
|
||||
var shippingCharges = parseFloat($(this).val()) || 0;
|
||||
|
||||
// Recalculate the discount and apply shipping
|
||||
var discountValue = $('#discount').val();
|
||||
var discountType = $('#discount-type').val();
|
||||
|
||||
// Calculate the total amount of items (subtotal)
|
||||
var totalAmount = 0;
|
||||
$('.item-amount').each(function() {
|
||||
totalAmount += parseFloat($(this).val()) || 0; // Ensure it's a number
|
||||
});
|
||||
|
||||
// Apply the discount based on the discount type
|
||||
var discountedAmount = 0;
|
||||
if (discountType == '%') {
|
||||
discountedAmount = totalAmount - (totalAmount * discountValue / 100);
|
||||
} else {
|
||||
discountedAmount = totalAmount - discountValue;
|
||||
}
|
||||
|
||||
// Final total after adding shipping charges
|
||||
var finalTotal = discountedAmount + shippingCharges;
|
||||
|
||||
// Update the fields with the recalculated values
|
||||
$('#exacttotal').val(finalTotal.toFixed(2)); // Final total after discount and shipping
|
||||
$('#grandtotal').val(finalTotal.toFixed(2)); // Grand total
|
||||
$('#balanceAmount').val(finalTotal.toFixed(2)); // Balance amount (same as final total)
|
||||
});
|
||||
|
||||
$('#exacttotal').val(discountLastValue);
|
||||
$('#grandtotal').val(parseInt(discountLastValue));
|
||||
$('#balanceAmount').val(parseInt(discountLastValue));
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
@ -24,40 +24,45 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Table Section -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table style="width: 100;" id="datatable-buttons" class="table table-striped nowrap w-100">
|
||||
<table style="width: 100%;" id="datatable-buttons" class="table table-striped nowrap w-100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><b>Publisher Code</b></th>
|
||||
<th><b>Publisher Item Count</b></th>
|
||||
<th><b>Publisher Total Cost</b></th>
|
||||
<th style="width: 10%;"><b>Book Name</b></th>
|
||||
<th><b>Item Count</b></th>
|
||||
<th><b>Payment method</b></th>
|
||||
<th style="text-align: center;"><b>Total Cost</b></th>
|
||||
<th><b>Publisher Code</b></th>
|
||||
<th><b>Publisher Item Count</b></th>
|
||||
<th><b>Publisher Total Cost</b></th>
|
||||
<th style="width: 10%;"><b>Book Name</b></th>
|
||||
<th><b>Item Count</b></th>
|
||||
<th><b>Payment method</b></th>
|
||||
<th style="text-align: center;"><b>Total Cost</b></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($report_data as $row): ?>
|
||||
<?php foreach ($row->books as $book): ?>
|
||||
<tr>
|
||||
<td style="text-align: center;"><?= isset($row->publisher_code) ? $row->publisher_code : '-' ?></td>
|
||||
<td style="text-align: center;"><?= $row->publisher_item_count ?></td>
|
||||
<td style="text-align: right;"><?= number_format($row->publisher_total_cost, 2) ?></td>
|
||||
<td style="text-align: left;"><?= $book->book_name ?></td>
|
||||
<td style="text-align: center;"><?= $book->item_count ?></td>
|
||||
<td style="text-align: left;"><?= strtoupper($row->payment_method) ?></td>
|
||||
<td style="text-align: right;"><?= number_format($book->total_cost, 2) ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php foreach ($report_data as $row): ?>
|
||||
<?php foreach ($row->books as $book): ?>
|
||||
<tr>
|
||||
<td style="text-align: center;"><?= isset($row->publisher_code) ? $row->publisher_code : '-' ?></td>
|
||||
<td style="text-align: center;"><?= $row->publisher_item_count ?></td>
|
||||
<td style="text-align: right;"><?= number_format($row->publisher_total_cost, 2) ?></td>
|
||||
<td style="text-align: left;"><?= $book->book_name ?></td>
|
||||
<td style="text-align: center;"><?= $book->item_count ?></td>
|
||||
<td style="text-align: left;"><?= strtoupper($row->payment_method) ?></td>
|
||||
<td style="text-align: right;"><?= number_format($book->total_cost, 2) ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="total-row">
|
||||
<td colspan="6" style="text-align: right; font-weight: bold;">Total</td>
|
||||
<td class="total" style="text-align: right;"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- end card body-->
|
||||
@ -66,43 +71,64 @@
|
||||
</div>
|
||||
<!-- end row-->
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$(document).ready(function () {
|
||||
var table = $('#datatable-buttons').DataTable({
|
||||
"order": [
|
||||
[0, 'desc']
|
||||
],
|
||||
"dom": '<"row mb-3"<"col-md-6 d-flex align-items-center"B><"col-md-6 d-flex justify-content-end"f>>rtip',
|
||||
|
||||
buttons: [{
|
||||
dom: '<"row mb-3"<"col-md-6 d-flex align-items-center"B><"col-md-6 d-flex justify-content-end"f>>rtip',
|
||||
buttons: [
|
||||
{
|
||||
extend: 'print',
|
||||
title: '<?= $page_name.' ' .$selected_data ?>',
|
||||
title: '<?= $page_name . " " . $selected_data ?>',
|
||||
text: 'Print',
|
||||
customize: function(win) {
|
||||
// Exclude the first and last columns
|
||||
$(win.document.body).find('table').find('th:first-child, td:first-child').remove();
|
||||
customize: function (win) {
|
||||
var total = calculateTotal();
|
||||
$(win.document.body)
|
||||
.append(`<div style="text-align: right; font-weight: bold; margin-top: 20px;">Total Amount: ₹${total}</div>`);
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'csv',
|
||||
text: 'CSV',
|
||||
title: '<?= $page_name.' ' .$selected_data ?>',
|
||||
exportOptions: {
|
||||
columns: ':not(:first-child)'
|
||||
title: '<?= $page_name . " " . $selected_data ?>',
|
||||
customize: function (csv) {
|
||||
var total = calculateTotal();
|
||||
var csvRows = csv.split("\n");
|
||||
|
||||
var columnCount = csvRows[0].split(",").length;
|
||||
var emptyCells = Array(columnCount - 2).fill("").join(","); // Adjust the number of empty cells
|
||||
var totalRow = `${emptyCells},Total,₹${total}`;
|
||||
|
||||
csvRows.push(totalRow);
|
||||
|
||||
return csvRows.join("\n");
|
||||
}
|
||||
}
|
||||
],
|
||||
columnDefs: [{
|
||||
type: 'date',
|
||||
targets: [1, 2, 3, 4, 5, 6],
|
||||
orderable: false
|
||||
}
|
||||
// Specify the column index for date sorting and disable sorting
|
||||
]
|
||||
});
|
||||
|
||||
// Add date range filter and dropdowns
|
||||
// Function to calculate the total for print/CSV export
|
||||
function calculateTotal() {
|
||||
var total = table.rows({ filter: 'applied' }).data().pluck(6).reduce(function (a, b) {
|
||||
return a + parseFloat(b) || 0; // Sum the 7th column (index 6) which represents the total cost
|
||||
}, 0);
|
||||
return total.toFixed(2);
|
||||
}
|
||||
|
||||
// Add total row to the table footer (this will display the total in the table)
|
||||
table.on('draw', function () {
|
||||
updateTotal();
|
||||
});
|
||||
|
||||
// Function to update the total in the footer
|
||||
function updateTotal() {
|
||||
var total = table.rows({ filter: 'applied' }).data().pluck(6).reduce(function (a, b) {
|
||||
return a + parseFloat(b) || 0;
|
||||
}, 0);
|
||||
|
||||
$('#datatable-buttons tfoot .total').html(`₹${total.toFixed(2)}`);
|
||||
}
|
||||
|
||||
// Add date range filter and dropdowns for the table columns
|
||||
$('#datatable-buttons thead tr').clone(true).appendTo('#datatable-buttons thead');
|
||||
$('#datatable-buttons thead tr:eq(1) th').each(function(i) {
|
||||
var title = $(this).text();
|
||||
@ -122,65 +148,54 @@
|
||||
select.append('<option value="' + d + '">' + d + '</option>');
|
||||
});
|
||||
|
||||
|
||||
// Handle column search using the input
|
||||
$('input', this).on('keyup change', function() {
|
||||
if (table.column(i).search() !== this.value) {
|
||||
table
|
||||
.column(i)
|
||||
.search(this.value)
|
||||
.draw();
|
||||
table.column(i).search(this.value).draw();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add date range filter for "Invoice Date" column
|
||||
moment.updateLocale('en', {
|
||||
longDateFormat: {
|
||||
L: 'DD/MM/YYYY',
|
||||
// LTS: 'h:mm:ss A',
|
||||
// LTS: 'h:mm A',
|
||||
}
|
||||
});
|
||||
// Date range picker initialization
|
||||
var $select_data = '<?php echo $selected_data; ?>';
|
||||
|
||||
$(document).ready(function() {
|
||||
var $select_data = '<?php echo $selected_data; ?>';
|
||||
|
||||
var dateRangeFilter = $('input.input-daterange-datepicker')
|
||||
.daterangepicker({
|
||||
locale: {
|
||||
format: 'DD/MM/YYYY',
|
||||
cancelLabel: 'Clear'
|
||||
},
|
||||
startDate: $select_data ? moment($select_data.split(' - ')[0], 'DD/MM/YYYY') : moment(),
|
||||
endDate: $select_data ? moment($select_data.split(' - ')[1], 'DD/MM/YYYY') : moment(),
|
||||
ranges: {
|
||||
'Today': [moment(), moment()],
|
||||
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')]
|
||||
}
|
||||
})
|
||||
.on('apply.daterangepicker', function(ev, picker) {
|
||||
var formattedStartDate = picker.startDate.format('DD/MM/YYYY');
|
||||
var formattedEndDate = picker.endDate.format('DD/MM/YYYY');
|
||||
var selectedDateRange = formattedStartDate + ' - ' + formattedEndDate;
|
||||
$(this).val(selectedDateRange);
|
||||
})
|
||||
.on('cancel.daterangepicker', function() {
|
||||
$(this).val('');
|
||||
});
|
||||
|
||||
$('.today-btn').on('click', function() {
|
||||
var today = moment();
|
||||
dateRangeFilter.data('daterangepicker').setStartDate(today);
|
||||
dateRangeFilter.data('daterangepicker').setEndDate(today);
|
||||
dateRangeFilter.val(today.format('DD/MM/YYYY') + ' - ' + today.format('DD/MM/YYYY'));
|
||||
dateRangeFilter.trigger('apply.daterangepicker');
|
||||
var dateRangeFilter = $('input.input-daterange-datepicker')
|
||||
.daterangepicker({
|
||||
locale: {
|
||||
format: 'DD/MM/YYYY',
|
||||
cancelLabel: 'Clear'
|
||||
},
|
||||
startDate: $select_data ? moment($select_data.split(' - ')[0], 'DD/MM/YYYY') : moment(),
|
||||
endDate: $select_data ? moment($select_data.split(' - ')[1], 'DD/MM/YYYY') : moment(),
|
||||
ranges: {
|
||||
'Today': [moment(), moment()],
|
||||
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')]
|
||||
}
|
||||
})
|
||||
.on('apply.daterangepicker', function(ev, picker) {
|
||||
var formattedStartDate = picker.startDate.format('DD/MM/YYYY');
|
||||
var formattedEndDate = picker.endDate.format('DD/MM/YYYY');
|
||||
var selectedDateRange = formattedStartDate + ' - ' + formattedEndDate;
|
||||
$(this).val(selectedDateRange);
|
||||
table.draw(); // Redraw table when date range changes
|
||||
})
|
||||
.on('cancel.daterangepicker', function() {
|
||||
$(this).val('');
|
||||
table.draw(); // Redraw table when date range is cleared
|
||||
});
|
||||
|
||||
// Trigger "Today" button click to set it as default if $select_data is empty
|
||||
if ($select_data === '') {
|
||||
$('.today-btn').trigger('click');
|
||||
}
|
||||
$('.today-btn').on('click', function() {
|
||||
var today = moment();
|
||||
dateRangeFilter.data('daterangepicker').setStartDate(today);
|
||||
dateRangeFilter.data('daterangepicker').setEndDate(today);
|
||||
dateRangeFilter.val(today.format('DD/MM/YYYY') + ' - ' + today.format('DD/MM/YYYY'));
|
||||
dateRangeFilter.trigger('apply.daterangepicker');
|
||||
});
|
||||
|
||||
// Trigger "Today" button click to set it as default if $select_data is empty
|
||||
if ($select_data === '') {
|
||||
$('.today-btn').trigger('click');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,46 +1,45 @@
|
||||
<style>
|
||||
.payment-button {
|
||||
background-color: #f9f9f9;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.payment-button {
|
||||
background-color: #f9f9f9; /* Light background color matching the card */
|
||||
color: #333; /* Dark text for readability */
|
||||
border: 1px solid #ddd; /* Subtle border for the button */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
padding: 8px; /* Inner padding for compactness */
|
||||
font-size: 0.9rem; /* Font size for button text */
|
||||
cursor: pointer; /* Pointer cursor on hover */
|
||||
text-align: center; /* Center-align text */
|
||||
line-height: 1.3; /* Adjust line height for multiline text */
|
||||
width: 100%; /* Button fills card width */
|
||||
height: 100%; /* Button fills card height */
|
||||
box-shadow: none; /* Remove extra shadow for a flat look */
|
||||
}
|
||||
.payment-button:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.payment-button:hover {
|
||||
background-color: #f0f0f0; /* Slightly darker background on hover */
|
||||
box-shadow: none; /* Keep flat design on hover */
|
||||
}
|
||||
.card-summary {
|
||||
flex: 0 1 auto;
|
||||
text-align: center;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
width: 170px;
|
||||
height: 70px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.card-summary {
|
||||
flex: 0 1 auto; /* Prevent layout disruptions */
|
||||
text-align: center; /* Center-align content */
|
||||
border: none; /* No border for container */
|
||||
background-color: transparent; /* Transparent container */
|
||||
width: 170px; /* Card width */
|
||||
height: 70px; /* Card height */
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex; /* Keep existing layout */
|
||||
flex-wrap: wrap; /* Allow wrapping */
|
||||
gap: 10px; /* Spacing between cards */
|
||||
list-style: none; /* Remove list style */
|
||||
padding: 5px; /* Padding for layout */
|
||||
margin-bottom: 10px; /* Margin below */
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
list-style: none;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<!-- start page title -->
|
||||
<div class="row d-flex align-items-center">
|
||||
|
||||
<!-- start page title -->
|
||||
<div class="row d-flex align-items-center">
|
||||
<!-- Title Section -->
|
||||
<div class="col-md-4">
|
||||
<div class="page-title-box page-title-box-alt">
|
||||
@ -65,49 +64,47 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div>
|
||||
<ul class="nav">
|
||||
<?php
|
||||
// Initialize an empty array to combine amounts
|
||||
$combinedPayments = [];
|
||||
<ul class="nav">
|
||||
<?php
|
||||
// Initialize an empty array to combine amounts
|
||||
$combinedPayments = [];
|
||||
|
||||
foreach ($payment_data['result2'] as $key => $amount) {
|
||||
if ($key != '' && $key != null) {
|
||||
// Simplify and group payment method names
|
||||
$key = strtoupper($key);
|
||||
if (stripos($key, 'PAYTM') !== false) {
|
||||
$key = 'PAYTM';
|
||||
} elseif (stripos($key, 'BANKTRANSFER') !== false) {
|
||||
$key = 'BANK TRANSFER';
|
||||
} elseif (stripos($key, 'CASH ON DELIVERY') !== false) {
|
||||
$key = 'COD';
|
||||
}
|
||||
foreach ($payment_data['result2'] as $key => $amount) {
|
||||
if ($key != '' && $key != null) {
|
||||
// Simplify and group payment method names
|
||||
$key = strtoupper($key);
|
||||
if (stripos($key, 'PAYTM') !== false) {
|
||||
$key = 'PAYTM';
|
||||
} elseif (stripos($key, 'BANKTRANSFER') !== false) {
|
||||
$key = 'BANK TRANSFER';
|
||||
} elseif (stripos($key, 'CASH ON DELIVERY') !== false) {
|
||||
$key = 'COD';
|
||||
}
|
||||
|
||||
// Combine amounts for the same payment method
|
||||
if (!isset($combinedPayments[$key])) {
|
||||
$combinedPayments[$key] = 0;
|
||||
// Combine amounts for the same payment method
|
||||
if (!isset($combinedPayments[$key])) {
|
||||
$combinedPayments[$key] = 0;
|
||||
}
|
||||
$combinedPayments[$key] += $amount;
|
||||
}
|
||||
$combinedPayments[$key] += $amount;
|
||||
}
|
||||
}
|
||||
|
||||
// Display the combined results
|
||||
foreach ($combinedPayments as $paymentMethod => $totalAmount) { ?>
|
||||
<li>
|
||||
<div class="card-summary">
|
||||
<button id='payment_method_button' class="payment-button" style="font-weight: 401;">
|
||||
<?= $paymentMethod ?> <br> ₹<?= $totalAmount ?>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
|
||||
// Display the combined results
|
||||
foreach ($combinedPayments as $paymentMethod => $totalAmount) { ?>
|
||||
<li>
|
||||
<div class="card-summary">
|
||||
<button id='payment_method_button' class="payment-button" style="font-weight: 401;">
|
||||
<?= $paymentMethod ?> <br> ₹<?= $totalAmount ?>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
@ -125,7 +122,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php $total = 0; // Initialize total variable ?>
|
||||
<?php $total = 0; ?>
|
||||
<?php foreach ($payment_data['result1'] as $row) { ?>
|
||||
<tr>
|
||||
<td style="text-align: left;"><?php echo $row["invoice_number"]; ?></td>
|
||||
@ -137,24 +134,17 @@
|
||||
<td style="text-align: center;"><?= $row['payment_status'] ?></td>
|
||||
<td style="text-align:right;padding-right: 67px;"><?= $row['total_amount'] ?></td>
|
||||
<?php
|
||||
$total += $row['total_amount']; // Add each row's total_amount to $total
|
||||
$total += $row['total_amount'];
|
||||
?>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<!-- Total row -->
|
||||
|
||||
</tbody>
|
||||
<!-- <tr>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="5" style="text-align: right; font-weight: bold;">Total Amount</td>
|
||||
<td class="total-row" style="text-align: right;"></td>
|
||||
</tr> -->
|
||||
<?php //<?= isset($total) ? $total : "" ?>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="5" style="text-align: right; font-weight: bold;">Total Amount</td>
|
||||
<td class="total-row" style="text-align: right;"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<td class="total-row" style="text-align: right;"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- end card body-->
|
||||
@ -166,23 +156,40 @@
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var table = $('#datatable-buttons').DataTable({
|
||||
"dom": '<"row mb-3"<"col-md-6 d-flex align-items-center"B><"col-md-6 d-flex justify-content-end"f>>rtip',
|
||||
dom: '<"row mb-3"<"col-md-6 d-flex align-items-center"B><"col-md-6 d-flex justify-content-end"f>>rtip',
|
||||
buttons: [
|
||||
{
|
||||
extend: 'print',
|
||||
title: '<?= $page_name.' ' .$selected_data ?>',
|
||||
title: '<?= $page_name . " " . $selected_data ?>',
|
||||
text: 'Print',
|
||||
customize: function (win) { }
|
||||
customize: function (win) {
|
||||
var total = calculateTotal();
|
||||
$(win.document.body)
|
||||
.append(`<div style="text-align: right; font-weight: bold; margin-top: 20px;">Total Amount: ₹${total}</div>`);
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'csv',
|
||||
text: 'CSV',
|
||||
title: '<?= $page_name.' ' .$selected_data ?>',
|
||||
exportOptions: {}
|
||||
title: '<?= $page_name . " " . $selected_data ?>',
|
||||
customize: function (csv) {
|
||||
var total = calculateTotal();
|
||||
var csvRows = csv.split("\n");
|
||||
|
||||
var columnCount = csvRows[0].split(",").length;
|
||||
|
||||
var emptyCells = Array(columnCount - 2).fill("").join(",");
|
||||
var totalRow = `${emptyCells},Total,₹${total}`;
|
||||
|
||||
csvRows.push(totalRow);
|
||||
|
||||
return csvRows.join("\n");
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Function to calculate the total of the filtered rows
|
||||
function updateTotal() {
|
||||
var total = table.rows({ filter: 'applied' }).data().pluck(5).reduce(function (a, b) {
|
||||
return a + parseFloat(b) || 0;
|
||||
@ -191,9 +198,16 @@
|
||||
$('#datatable-buttons tfoot .total-row').html(total.toFixed(2));
|
||||
}
|
||||
|
||||
// Function to calculate the total for print/CSV export
|
||||
function calculateTotal() {
|
||||
var total = table.rows({ filter: 'applied' }).data().pluck(5).reduce(function (a, b) {
|
||||
return a + parseFloat(b) || 0;
|
||||
}, 0);
|
||||
return total.toFixed(2);
|
||||
}
|
||||
|
||||
$(document).on('click', '.payment-button', function () {
|
||||
var paymentMethod = $(this).contents().first().text().trim().toUpperCase().split(" ").join("");
|
||||
console.log(paymentMethod);
|
||||
if (!paymentMethod) {
|
||||
return;
|
||||
}
|
||||
@ -201,76 +215,54 @@
|
||||
paymentMethod = 'Cash on delivery';
|
||||
}
|
||||
table.column(3)
|
||||
.search('^' + paymentMethod + '$', true, false) // Use regex for exact match
|
||||
.search('^' + paymentMethod + '$', true, false)
|
||||
.draw();
|
||||
|
||||
updateTotal();
|
||||
});
|
||||
|
||||
updateTotal();
|
||||
updateTotal();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// $(document).ready(function () {
|
||||
// // Initially hide all nested tables
|
||||
// $('.nested-table-data').hide();
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var $select_data = '<?php echo $selected_data; ?>';
|
||||
|
||||
// // Toggle nested table visibility on parent row click
|
||||
// $('.custom-tbody tr').click(function () {
|
||||
// var nestedTable = $(this).next().find('.nested-table-data');
|
||||
|
||||
// // Toggle visibility
|
||||
// nestedTable.slideToggle();
|
||||
|
||||
// // You can add additional styling or animation here if needed
|
||||
|
||||
// // Prevent the parent row from triggering the toggle when nested table row is clicked
|
||||
// return false;
|
||||
// });
|
||||
// });
|
||||
// </script>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var $select_data = '<?php echo $selected_data; ?>';
|
||||
|
||||
var dateRangeFilter = $('input.input-daterange-datepicker')
|
||||
.daterangepicker({
|
||||
locale: {
|
||||
format: 'DD/MM/YYYY',
|
||||
cancelLabel: 'Clear'
|
||||
},
|
||||
startDate: $select_data ? moment($select_data.split(' - ')[0], 'DD/MM/YYYY') : moment(),
|
||||
endDate: $select_data ? moment($select_data.split(' - ')[1], 'DD/MM/YYYY') : moment(),
|
||||
ranges: {
|
||||
'Today': [moment(), moment()],
|
||||
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')]
|
||||
}
|
||||
})
|
||||
.on('apply.daterangepicker', function(ev, picker) {
|
||||
var formattedStartDate = picker.startDate.format('DD/MM/YYYY');
|
||||
var formattedEndDate = picker.endDate.format('DD/MM/YYYY');
|
||||
var selectedDateRange = formattedStartDate + ' - ' + formattedEndDate;
|
||||
$(this).val(selectedDateRange);
|
||||
})
|
||||
.on('cancel.daterangepicker', function() {
|
||||
$(this).val('');
|
||||
});
|
||||
|
||||
$('.today-btn').on('click', function() {
|
||||
var today = moment();
|
||||
dateRangeFilter.data('daterangepicker').setStartDate(today);
|
||||
dateRangeFilter.data('daterangepicker').setEndDate(today);
|
||||
dateRangeFilter.val(today.format('DD/MM/YYYY') + ' - ' + today.format('DD/MM/YYYY'));
|
||||
dateRangeFilter.trigger('apply.daterangepicker');
|
||||
});
|
||||
|
||||
// Trigger "Today" button click to set it as default if $select_data is empty
|
||||
if ($select_data === '') {
|
||||
$('.today-btn').trigger('click');
|
||||
var dateRangeFilter = $('input.input-daterange-datepicker')
|
||||
.daterangepicker({
|
||||
locale: {
|
||||
format: 'DD/MM/YYYY',
|
||||
cancelLabel: 'Clear'
|
||||
},
|
||||
startDate: $select_data ? moment($select_data.split(' - ')[0], 'DD/MM/YYYY') : moment(),
|
||||
endDate: $select_data ? moment($select_data.split(' - ')[1], 'DD/MM/YYYY') : moment(),
|
||||
ranges: {
|
||||
'Today': [moment(), moment()],
|
||||
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')]
|
||||
}
|
||||
})
|
||||
.on('apply.daterangepicker', function(ev, picker) {
|
||||
var formattedStartDate = picker.startDate.format('DD/MM/YYYY');
|
||||
var formattedEndDate = picker.endDate.format('DD/MM/YYYY');
|
||||
var selectedDateRange = formattedStartDate + ' - ' + formattedEndDate;
|
||||
$(this).val(selectedDateRange);
|
||||
})
|
||||
.on('cancel.daterangepicker', function() {
|
||||
$(this).val('');
|
||||
});
|
||||
</script>
|
||||
|
||||
$('.today-btn').on('click', function() {
|
||||
var today = moment();
|
||||
dateRangeFilter.data('daterangepicker').setStartDate(today);
|
||||
dateRangeFilter.data('daterangepicker').setEndDate(today);
|
||||
dateRangeFilter.val(today.format('DD/MM/YYYY') + ' - ' + today.format('DD/MM/YYYY'));
|
||||
dateRangeFilter.trigger('apply.daterangepicker');
|
||||
});
|
||||
|
||||
if ($select_data === '') {
|
||||
$('.today-btn').trigger('click');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user