Invoice Add Edit and Delete Done #17
@@ -1,5 +1,160 @@
|
||||
// Subcontractor autocomplete functionality
|
||||
// $(document).ready(function () {
|
||||
// // ===============================
|
||||
// // FORM / TABLE TOGGLE
|
||||
// // ===============================
|
||||
// if ($('#addForm').length && $('#addTable').length) {
|
||||
// $('#addForm').show();
|
||||
// $('#addTable').hide();
|
||||
|
||||
// $('#addButton').click(function () {
|
||||
// $('#addForm').show();
|
||||
// $('#addTable').hide();
|
||||
// });
|
||||
|
||||
// $('#displayButton').click(function () {
|
||||
// $('#addForm').hide();
|
||||
// $('#addTable').show();
|
||||
// });
|
||||
// }
|
||||
|
||||
// // ===============================
|
||||
// // Subcontractor autocomplete
|
||||
// // ===============================
|
||||
// $("#subcontractor").keyup(function () {
|
||||
// let query = $(this).val();
|
||||
// if (query !== "") {
|
||||
// $.ajax({
|
||||
// url: "/search_subcontractor",
|
||||
// method: "POST",
|
||||
// data: { query: query },
|
||||
// success: function (data) {
|
||||
// $("#subcontractor_list").fadeIn().html(data);
|
||||
// }
|
||||
// });
|
||||
// } else {
|
||||
// $("#subcontractor_list").fadeOut();
|
||||
// }
|
||||
// });
|
||||
|
||||
// $(document).on("click", "li", function () {
|
||||
// $("#subcontractor").val($(this).text());
|
||||
// $("#subcontractor_id").val($(this).attr("data-id"));
|
||||
// $("#subcontractor_list").fadeOut();
|
||||
// });
|
||||
|
||||
// // Focus
|
||||
// if (document.getElementById('subcontractor')) {
|
||||
// document.getElementById('subcontractor').focus();
|
||||
// }
|
||||
|
||||
// // ===============================
|
||||
// // ADD INVOICE
|
||||
// // ===============================
|
||||
// if ($('#invoiceForm').length && window.location.href.includes('add_invoice')) {
|
||||
// $("#invoiceForm").on("submit", function (e) {
|
||||
// e.preventDefault();
|
||||
// let formData = $(this).serialize();
|
||||
|
||||
// $.ajax({
|
||||
// url: '/add_invoice',
|
||||
// method: 'POST',
|
||||
// data: formData,
|
||||
// dataType: 'json',
|
||||
// success: function (response) {
|
||||
// if (response.status === "success") {
|
||||
// alert(response.message || "Invoice added successfully!");
|
||||
// $('#invoiceForm')[0].reset(); // clear form
|
||||
// $('#addForm').hide();
|
||||
// $('#addTable').show(); // switch to table
|
||||
// location.reload(); // optional refresh
|
||||
// } else {
|
||||
// alert(response.message || "Error adding invoice.");
|
||||
// }
|
||||
// },
|
||||
// error: function (xhr) {
|
||||
// alert(xhr.responseJSON?.message || "Submission failed. Please try again.");
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
// // Example AJAX update function
|
||||
// function updateInvoice(invoiceId, formElement) {
|
||||
// const formData = $(formElement).serialize();
|
||||
|
||||
// $.ajax({
|
||||
// url: '/update_invoice/' + invoiceId,
|
||||
// method: 'POST',
|
||||
// data: formData,
|
||||
// dataType: 'json',
|
||||
// success: function(response) {
|
||||
// if(response.status === "success") {
|
||||
// alert(response.message || "Invoice updated successfully!");
|
||||
|
||||
// // ✅ Hide Add Form, Show Table
|
||||
// $('#addForm').hide();
|
||||
// $('#addTable').show();
|
||||
|
||||
// // Optional: reload table or refresh page
|
||||
// location.reload();
|
||||
// } else {
|
||||
// alert(response.message || "Update failed. Please try again.");
|
||||
// }
|
||||
// },
|
||||
// error: function(xhr) {
|
||||
// alert(xhr.responseJSON?.message || "Error updating invoice.");
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// // ===============================
|
||||
// // DELETE INVOICE
|
||||
// // ===============================
|
||||
// function deleteInvoice(invoiceId, element) {
|
||||
// if (!confirm("Are you sure you want to delete this invoice?")) return;
|
||||
|
||||
// $.ajax({
|
||||
// url: '/delete_invoice/' + invoiceId,
|
||||
// method: 'GET',
|
||||
// dataType: 'json',
|
||||
// success: function (response) {
|
||||
// alert(response.message || "Invoice deleted successfully!");
|
||||
// if (element) $(element).closest("tr").remove();
|
||||
// },
|
||||
// error: function (xhr) {
|
||||
// alert(xhr.responseJSON?.message || "Error deleting invoice. Please try again.");
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
$(document).ready(function () {
|
||||
// ===============================
|
||||
// FORM / TABLE TOGGLE
|
||||
// ===============================
|
||||
if ($('#addForm').length && $('#addTable').length) {
|
||||
// Default: show form, hide table
|
||||
$('#addForm').show();
|
||||
$('#addTable').hide();
|
||||
|
||||
// ✅ Check URL hash to show table instead
|
||||
if (window.location.hash === "#addTable") {
|
||||
$('#addForm').hide();
|
||||
$('#addTable').show();
|
||||
}
|
||||
|
||||
$('#addButton').click(function () {
|
||||
$('#addForm').show();
|
||||
$('#addTable').hide();
|
||||
});
|
||||
|
||||
$('#displayButton').click(function () {
|
||||
$('#addForm').hide();
|
||||
$('#addTable').show();
|
||||
});
|
||||
}
|
||||
|
||||
// ===============================
|
||||
// Subcontractor autocomplete
|
||||
// ===============================
|
||||
$("#subcontractor").keyup(function () {
|
||||
let query = $(this).val();
|
||||
if (query !== "") {
|
||||
@@ -21,42 +176,96 @@
|
||||
$("#subcontractor_id").val($(this).attr("data-id"));
|
||||
$("#subcontractor_list").fadeOut();
|
||||
});
|
||||
});
|
||||
|
||||
// Success Alert: show alert and reload after 3 seconds
|
||||
function showSuccessAlert() {
|
||||
const alertBox = document.getElementById("invoiceSuccessAlert");
|
||||
alertBox.classList.add("show");
|
||||
setTimeout(() => {
|
||||
alertBox.classList.remove("show");
|
||||
// Reload page or redirect after alert hides
|
||||
window.location.href = '/add_invoice';
|
||||
}, 3000);
|
||||
// Focus
|
||||
if (document.getElementById('subcontractor')) {
|
||||
document.getElementById('subcontractor').focus();
|
||||
}
|
||||
|
||||
// Submit form via AJAX
|
||||
// ===============================
|
||||
// ADD INVOICE
|
||||
// ===============================
|
||||
if ($('#invoiceForm').length && window.location.href.includes('add_invoice')) {
|
||||
$("#invoiceForm").on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
let formData = $(this).serialize();
|
||||
|
||||
$.ajax({
|
||||
url: '/add_invoice',
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
success: function (response) {
|
||||
if (response.status === "success") {
|
||||
showSuccessAlert();
|
||||
alert(response.message || "Invoice added successfully!");
|
||||
$('#invoiceForm')[0].reset(); // clear form
|
||||
$('#addForm').hide();
|
||||
$('#addTable').show(); // switch to table
|
||||
location.reload(); // optional refresh
|
||||
} else {
|
||||
alert(response.message);
|
||||
alert(response.message || "Error adding invoice.");
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
alert("Submission failed: " + error);
|
||||
error: function (xhr) {
|
||||
let msg = xhr.responseJSON?.message || "Submission failed. Please try again.";
|
||||
alert(msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ===============================
|
||||
// UPDATE INVOICE
|
||||
// ===============================
|
||||
function updateInvoice(invoiceId, formElement) {
|
||||
const formData = $(formElement).serialize();
|
||||
|
||||
$.ajax({
|
||||
url: '/update_invoice/' + invoiceId,
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
if(response.status === "success") {
|
||||
alert(response.message || "Invoice updated successfully!");
|
||||
|
||||
window.onload = function () {
|
||||
document.getElementById('subcontractor').focus();
|
||||
};
|
||||
// Redirect to Add Invoice page's table part
|
||||
window.location.href = "/add_invoice#addTable";
|
||||
} else {
|
||||
alert(response.message || "Update failed. Please try again.");
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
let msg = xhr.responseJSON?.message || "Error updating invoice.";
|
||||
alert(msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
window.updateInvoice = updateInvoice; // make globally accessible
|
||||
|
||||
// ===============================
|
||||
// DELETE INVOICE
|
||||
// ===============================
|
||||
function deleteInvoice(invoiceId, element) {
|
||||
if (!confirm("Are you sure you want to delete this invoice?")) return;
|
||||
|
||||
$.ajax({
|
||||
url: '/delete_invoice/' + invoiceId,
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
success: function (response) {
|
||||
if (response.status === "success") {
|
||||
alert(response.message || "Invoice deleted successfully!");
|
||||
if (element) $(element).closest("tr").remove();
|
||||
} else {
|
||||
alert(response.message || "Error deleting invoice.");
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
let msg = xhr.responseJSON?.message || "Error deleting invoice. Please try again.";
|
||||
alert(msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
window.deleteInvoice = deleteInvoice; // make globally accessible
|
||||
});
|
||||
@@ -1,47 +1,66 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block content %}
|
||||
{% extends 'base.html' %} {% block content %}
|
||||
<head xmlns="http://www.w3.org/1999/html">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Add Invoice</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/invoice.css') }}">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{{ url_for('static', filename='css/invoice.css') }}"
|
||||
/>
|
||||
<script src="{{ url_for('static', filename='js/invoice.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/holdAmount.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/search_on_table.js') }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% if success == 'true' %}
|
||||
<div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
|
||||
<div
|
||||
class="alert alert-success alert-dismissible fade show mt-3"
|
||||
role="alert"
|
||||
>
|
||||
✅ Invoice added successfully!
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="alert"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Flash Messages -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
||||
messages %}
|
||||
<div class="flash-messages">
|
||||
{% for category, message in messages %}
|
||||
<div class="alert {{ category }}">{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endif %} {% endwith %}
|
||||
|
||||
<div class="button-container">
|
||||
<button id="addButton" class="action-button">Add</button>
|
||||
<button id="displayButton" class="action-button">Display</button>
|
||||
</div>
|
||||
|
||||
<div id="addForm" style="display: none;">
|
||||
<div id="addForm" style="display: none">
|
||||
<h2>Add Invoice</h2>
|
||||
|
||||
<form id="invoiceForm" action="{{ url_for('invoice.add_invoice') }}" method="POST">
|
||||
<form
|
||||
id="invoiceForm"
|
||||
action="{{ url_for('invoice.add_invoice') }}"
|
||||
method="POST"
|
||||
>
|
||||
<div class="row1">
|
||||
<div>
|
||||
<label for="subcontractor">Subcontractor Name:</label>
|
||||
<input type="text" id="subcontractor" name="subcontractor" required autocomplete="off"/>
|
||||
<input
|
||||
type="text"
|
||||
id="subcontractor"
|
||||
name="subcontractor"
|
||||
required
|
||||
autocomplete="off"
|
||||
/>
|
||||
<input type="hidden" id="subcontractor_id" name="subcontractor_id" />
|
||||
<div id="subcontractor_list"></div>
|
||||
</div>
|
||||
@@ -53,7 +72,9 @@
|
||||
<select id="village" name="village" required>
|
||||
<option value="">-- Select Village --</option>
|
||||
{% for village in villages %}
|
||||
<option value="{{ village.Village_Name }}">{{ village.Village_Name }}</option>
|
||||
<option value="{{ village.Village_Name }}">
|
||||
{{ village.Village_Name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
@@ -71,7 +92,11 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="invoice_details">Invoice Details:</label>
|
||||
<textarea id="invoice_details" name="invoice_details" required></textarea>
|
||||
<textarea
|
||||
id="invoice_details"
|
||||
name="invoice_details"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,59 +114,161 @@
|
||||
<div class="row3">
|
||||
<div>
|
||||
<label for="basic_amount">Basic Amount:</label>
|
||||
<input type="number" step="0.01" id="basic_amount" name="basic_amount" placeholder="₹ - 00.00" required/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="basic_amount"
|
||||
name="basic_amount"
|
||||
placeholder="₹ - 00.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="debit_amount">Debit Amount:</label>
|
||||
<input type="number" step="0.01" id="debit_amount" name="debit_amount" placeholder="₹ - 00.00" required/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="debit_amount"
|
||||
name="debit_amount"
|
||||
placeholder="₹ - 00.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="after_debit_amount">After Debit Amount:</label>
|
||||
<input type="number" step="0.01" id="after_debit_amount" name="after_debit_amount" placeholder="₹ - 00.00" readonly required/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="after_debit_amount"
|
||||
name="after_debit_amount"
|
||||
placeholder="₹ - 00.00"
|
||||
readonly
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row3">
|
||||
<div class="percentage-field">
|
||||
<label for="gst_percentage">GST %:</label>
|
||||
<input type="number" step="0.01" id="gst_percentage" name="gst_percentage" placeholder="%"/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="gst_percentage"
|
||||
name="gst_percentage"
|
||||
placeholder="%"
|
||||
/>
|
||||
<label for="gst_amount">GST Amount:</label>
|
||||
<input type="number" step="0.01" id="gst_amount" name="gst_amount" placeholder="₹ - 00.00" readonly required/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="gst_amount"
|
||||
name="gst_amount"
|
||||
placeholder="₹ - 00.00"
|
||||
readonly
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="amount">Amount:</label>
|
||||
<input type="number" step="0.01" id="amount" name="amount" placeholder="₹ - 00.00" readonly required/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="amount"
|
||||
name="amount"
|
||||
placeholder="₹ - 00.00"
|
||||
readonly
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="percentage-field">
|
||||
<label for="tds_percentage">TDS %:</label>
|
||||
<input type="number" step="0.01" id="tds_percentage" name="tds_percentage" placeholder="%"/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="tds_percentage"
|
||||
name="tds_percentage"
|
||||
placeholder="%"
|
||||
/>
|
||||
<label for="tds_amount">TDS Amount:</label>
|
||||
<input type="number" step="0.01" id="tds_amount" name="tds_amount" placeholder="₹ - 00.00" readonly required/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="tds_amount"
|
||||
name="tds_amount"
|
||||
placeholder="₹ - 00.00"
|
||||
readonly
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row3">
|
||||
<div class="percentage-field">
|
||||
<label for="sd_percentage">SD %:</label>
|
||||
<input type="number" step="0.01" id="sd_percentage" name="sd_percentage" placeholder="%"/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="sd_percentage"
|
||||
name="sd_percentage"
|
||||
placeholder="%"
|
||||
/>
|
||||
<label for="sd_amount">SD Amount:</label>
|
||||
<input type="number" step="0.01" id="sd_amount" name="sd_amount" placeholder="₹ - 00.00" readonly required>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="sd_amount"
|
||||
name="sd_amount"
|
||||
placeholder="₹ - 00.00"
|
||||
readonly
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="percentage-field">
|
||||
<label for="commission_percentage">On Commission %:</label>
|
||||
<input type="number" step="0.01" id="commission_percentage" name="commission_percentage" placeholder="%"/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="commission_percentage"
|
||||
name="commission_percentage"
|
||||
placeholder="%"
|
||||
/>
|
||||
<label for="on_commission">On Commission:</label>
|
||||
<input type="number" step="0.01" id="on_commission" name="on_commission" placeholder="₹ - 00.00" readonly required>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="on_commission"
|
||||
name="on_commission"
|
||||
placeholder="₹ - 00.00"
|
||||
readonly
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="percentage-field">
|
||||
<label for="hydro_percentage">Hydro Testing %:</label>
|
||||
<input type="number" step="0.01" id="hydro_percentage" name="hydro_percentage" placeholder="%"/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="hydro_percentage"
|
||||
name="hydro_percentage"
|
||||
placeholder="%"
|
||||
/>
|
||||
<label for="hydro_testing">Hydro Testing:</label>
|
||||
<input type="number" step="0.01" id="hydro_testing" name="hydro_testing" placeholder="₹ - 00.00" readonly required>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="hydro_testing"
|
||||
name="hydro_testing"
|
||||
placeholder="₹ - 00.00"
|
||||
readonly
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hold-row">
|
||||
<button type="button" id="add_hold_amount" class="button">+ Add Hold Amount</button>
|
||||
<button type="button" id="add_hold_amount" class="button">
|
||||
+ Add Hold Amount
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dynamically added hold amount fields -->
|
||||
@@ -150,11 +277,25 @@
|
||||
<div class="row2">
|
||||
<div>
|
||||
<label for="gst_sd_amount">GST SD Amount:</label>
|
||||
<input type="number" step="0.01" id="gst_sd_amount" name="gst_sd_amount" placeholder="₹ - 00.00" required/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="gst_sd_amount"
|
||||
name="gst_sd_amount"
|
||||
placeholder="₹ - 00.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="final_amount">Final Amount:</label>
|
||||
<input type="number" step="0.01" id="final_amount" name="final_amount" placeholder="₹ - 00.00" required/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
id="final_amount"
|
||||
name="final_amount"
|
||||
placeholder="₹ - 00.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -162,11 +303,16 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="addTable" style="display: none;">
|
||||
<div id="addTable" style="display: none">
|
||||
<!-- Invoice Table Section -->
|
||||
<div class="search-container">
|
||||
<h2>Invoice List</h2>
|
||||
<input type="text" id="searchBar" placeholder="Searching..." onkeyup="searchTable()">
|
||||
<input
|
||||
type="text"
|
||||
id="searchBar"
|
||||
placeholder="Searching..."
|
||||
onkeyup="searchTable()"
|
||||
/>
|
||||
{% if invoices %}
|
||||
<table class="invoice-table">
|
||||
<thead>
|
||||
@@ -218,14 +364,27 @@
|
||||
<td>{{ invoice.Final_Amount }}</td>
|
||||
<td>
|
||||
<!-- Edit -->
|
||||
<a href="{{ url_for('invoice.edit_invoice', invoice_id=invoice.Invoice_Id) }}">
|
||||
<img src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}" alt="Edit" class="icon">
|
||||
<a
|
||||
href="{{ url_for('invoice.edit_invoice', invoice_id=invoice.Invoice_Id) }}"
|
||||
>
|
||||
<img
|
||||
src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}"
|
||||
alt="Edit"
|
||||
class="icon edit-btn"
|
||||
data-id="{{ invoice.Invoice_Id }}"
|
||||
/>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<!-- Delete -->
|
||||
<a href="{{ url_for('invoice.delete_invoice_route', invoice_id=invoice.Invoice_Id) }}" onclick="return confirm('Are you sure?')">
|
||||
<img src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}" alt="Delete" class="icon">
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
onclick="deleteInvoice({{ invoice.Invoice_Id }}, this)"
|
||||
>
|
||||
<img
|
||||
src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}"
|
||||
alt="Delete"
|
||||
class="icon"
|
||||
/>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -238,26 +397,28 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Get all the input fields
|
||||
const basicAmount = document.getElementById('basic_amount');
|
||||
const debitAmount = document.getElementById('debit_amount');
|
||||
const afterDebitAmount = document.getElementById('after_debit_amount');
|
||||
const amount = document.getElementById('amount');
|
||||
const basicAmount = document.getElementById("basic_amount");
|
||||
const debitAmount = document.getElementById("debit_amount");
|
||||
const afterDebitAmount = document.getElementById("after_debit_amount");
|
||||
const amount = document.getElementById("amount");
|
||||
|
||||
// Percentage fields
|
||||
const gstPercentage = document.getElementById('gst_percentage');
|
||||
const gstAmount = document.getElementById('gst_amount');
|
||||
const tdsPercentage = document.getElementById('tds_percentage');
|
||||
const tdsAmount = document.getElementById('tds_amount');
|
||||
const sdPercentage = document.getElementById('sd_percentage');
|
||||
const sdAmountInput = document.getElementById('sd_amount');
|
||||
const commissionPercentage = document.getElementById('commission_percentage');
|
||||
const onCommission = document.getElementById('on_commission');
|
||||
const hydroPercentage = document.getElementById('hydro_percentage');
|
||||
const hydroTesting = document.getElementById('hydro_testing');
|
||||
const gstSdAmount = document.getElementById('gst_sd_amount');
|
||||
const finalAmount = document.getElementById('final_amount');
|
||||
const gstPercentage = document.getElementById("gst_percentage");
|
||||
const gstAmount = document.getElementById("gst_amount");
|
||||
const tdsPercentage = document.getElementById("tds_percentage");
|
||||
const tdsAmount = document.getElementById("tds_amount");
|
||||
const sdPercentage = document.getElementById("sd_percentage");
|
||||
const sdAmountInput = document.getElementById("sd_amount");
|
||||
const commissionPercentage = document.getElementById(
|
||||
"commission_percentage",
|
||||
);
|
||||
const onCommission = document.getElementById("on_commission");
|
||||
const hydroPercentage = document.getElementById("hydro_percentage");
|
||||
const hydroTesting = document.getElementById("hydro_testing");
|
||||
const gstSdAmount = document.getElementById("gst_sd_amount");
|
||||
const finalAmount = document.getElementById("final_amount");
|
||||
|
||||
// Calculate after debit amount when basic or debit amount changes
|
||||
function calculateAfterDebitAmount() {
|
||||
@@ -333,7 +494,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// Get hold amounts
|
||||
let totalHold = 0;
|
||||
document.querySelectorAll('input[name="hold_amount[]"]').forEach(input => {
|
||||
document
|
||||
.querySelectorAll('input[name="hold_amount[]"]')
|
||||
.forEach((input) => {
|
||||
totalHold += parseFloat(input.value) || 0;
|
||||
});
|
||||
|
||||
@@ -343,27 +506,30 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
|
||||
// Add event listeners
|
||||
basicAmount.addEventListener('input', calculateAfterDebitAmount);
|
||||
debitAmount.addEventListener('input', calculateAfterDebitAmount);
|
||||
basicAmount.addEventListener("input", calculateAfterDebitAmount);
|
||||
debitAmount.addEventListener("input", calculateAfterDebitAmount);
|
||||
|
||||
// Percentage fields
|
||||
gstPercentage.addEventListener('input', calculateGST);
|
||||
tdsPercentage.addEventListener('input', calculateOtherDeductions);
|
||||
sdPercentage.addEventListener('input', calculateOtherDeductions);
|
||||
commissionPercentage.addEventListener('input', calculateOtherDeductions);
|
||||
hydroPercentage.addEventListener('input', calculateOtherDeductions);
|
||||
gstPercentage.addEventListener("input", calculateGST);
|
||||
tdsPercentage.addEventListener("input", calculateOtherDeductions);
|
||||
sdPercentage.addEventListener("input", calculateOtherDeductions);
|
||||
commissionPercentage.addEventListener(
|
||||
"input",
|
||||
calculateOtherDeductions,
|
||||
);
|
||||
hydroPercentage.addEventListener("input", calculateOtherDeductions);
|
||||
|
||||
// Listen for changes in hold amounts
|
||||
document.addEventListener('holdAmountChanged', calculateFinalAmount);
|
||||
document.addEventListener("holdAmountChanged", calculateFinalAmount);
|
||||
});
|
||||
|
||||
// Optional JS for auto-hiding flash
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.alert').forEach(el => el.style.display = 'none');
|
||||
document
|
||||
.querySelectorAll(".alert")
|
||||
.forEach((el) => (el.style.display = "none"));
|
||||
}, 5000);
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user