|
Server IP : 162.214.80.37 / Your IP : 216.73.216.173 Web Server : Apache System : Linux sh013.webhostingservices.com 4.19.286-203.ELK.el7.x86_64 #1 SMP Wed Jun 14 04:33:55 CDT 2023 x86_64 User : imyrqtmy ( 2189) PHP Version : 8.2.18 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON Directory (0755) : /home2/imyrqtmy/public_html/skyispatudyog/sym/Users/0-imyrqtmy/builty/vendor/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<?php
session_start();
$se = $_SESSION["id"];
if (!isset($_SESSION['id'])) {
header("Location: login.php");
}
include("inc/config.php");
?>
<!DOCTYPE html>
<html lang="en">
<?php require "inc/head.php"; ?>
<body>
<!-- header-->
<?php require "inc/header.php"; ?>
<!-- End Main-content Top bar-->
<!-- main-content-->
<div class="wrapper">
<?php require "inc/sidebar.php"; ?>
<div id="content">
<div class="row mb-4">
<div class="col-12 col-sm-12">
<div class="row">
<div class="col-12 col-md-12 mb-4">
<div class="card redial-border-light redial-shadow">
<div class="card-body" style="overflow: visible;">
<h6 class="header-title pl-3 redial-relative">Bilty</h6>
<form action="add_builty.php" method="post" enctype="multipart/form-data">
<?php
$se = $_SESSION["id"];
if (!isset($_SESSION['id'])) {
die("Unauthorized access. Please log in.");
}
$query = "SELECT id FROM employees WHERE id = '$se'";
$result = mysqli_query($conn, $query);
$emp_id = "";
if ($result && mysqli_num_rows($result) > 0) {
$row = mysqli_fetch_assoc($result);
$emp_id = $row['id'];
}
?>
<input type="hidden" name="emp_id" value="<?php echo htmlspecialchars($emp_id); ?>">
<div class="row">
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Consignor</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<select name="consignor" id="consignor" class="form-control">
<option value="">Select Consignor</option>
<!-- Options will be populated via PHP -->
<?php
// Fetch clients from the database
$query = "SELECT client_name FROM clients";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['client_name'] . "'>" . $row['client_name'] . "</option>";
}
?>
</select>
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Origin</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="origin" id="origin" class="form-control" placeholder="Origin">
</div>
</div>
</div>
<input type="hidden" name="consignor_state" value="Uttar Pradesh">
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Origin Address</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="origin_address" id="origin_address" class="form-control" placeholder="Origin Address">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Origin GST No</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="origin_gst" id="origin_gst" class="form-control" placeholder="Origin GST No.">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Origin Phone</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="origin_phone" id="origin_phone" class="form-control" placeholder="Origin Phone.">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Origin E-way Bill No.</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="origin_eway" id="origin_eway" class="form-control" placeholder="Origin E-way Bill No..">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Consignee</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<select name="consignee" id="consignee" class="form-control">
<option value="">Select Consignee</option>
<!-- Options will be populated via PHP -->
<?php
// Fetch clients from the database
$query = "SELECT client_name FROM clients";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['client_name'] . "'>" . $row['client_name'] . "</option>";
}
?>
</select>
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Destination</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="destination" id="destination" class="form-control" placeholder="Destination">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Destination Address</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="destination_address" id="destination_address" class="form-control" placeholder="Destination Address">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Destination GSTIN</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="destination_gst" id="destination_gst" class="form-control" placeholder="Destination GSTIN">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Destination Phone</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="destination_phone" id="destination_phone" class="form-control" placeholder="Destination Phone">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Destination E-way Bill No.</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="destination_eway" id="destination_eway" class="form-control" placeholder="Destination E-way Bill No.">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#consignor').on('change', function() {
var consignor = $(this).val();
if (consignee) {
$.ajax({
url: 'fetch_client_details1.php',
method: 'POST',
data: { consignor: consignor },
success: function(response) {
var data = JSON.parse(response);
if (data) {
$('#origin').val(data.destination);
$('#origin_address').val(data.client_address);
$('#origin_gst').val(data.client_gst);
$('#origin_phone').val(data.phone);
$('#origin_eway').val(data.client_eway);
} else {
alert('No data found for selected consignee');
}
}
});
} else {
$('#origin').val('');
$('#origin_address').val('');
$('#origin_gst').val('');
$('#origin_phone').val('');
$('#origin_eway').val('');
}
});
</script>
<script>
$('#consignee').on('change', function() {
var consignee = $(this).val();
if (consignee) {
$.ajax({
url: 'fetch_client_details.php',
method: 'POST',
data: { consignee: consignee },
success: function(response) {
var data = JSON.parse(response);
if (data) {
$('#destination').val(data.destination);
$('#destination_address').val(data.client_address);
$('#destination_gst').val(data.client_gst);
$('#destination_phone').val(data.phone);
$('#destination_eway').val(data.client_eway);
} else {
alert('No data found for selected consignee');
}
}
});
} else {
$('#destination').val('');
$('#destination_address').val('');
$('#destination_gst').val('');
$('#destination_phone').val('');
$('#destination_eway').val('');
}
});
</script>
<script>
$(document).ready(function () {
function generateInvoiceNo() {
let invoiceNo = "INV_" + Math.floor(100000 + Math.random() * 900000); // Generates a 6-digit random number
$("#invoice_no").val(invoiceNo);
}
generateInvoiceNo(); // Generate invoice number when the page loads
});
</script>
<input type="hidden" name="invoice_no" id="invoice_no">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Function to generate a random GR No.
function generateGRNo() {
const randomNumber = Math.floor(Math.random() * 1000000); // Generates a random number between 0 and 999999
$("#grno").val("GR_" + randomNumber); // Set the value in the G.R. No. input
}
// Generate GR No. when the page loads
$(document).ready(function() {
generateGRNo(); // Generate G.R. No. on page load
// Re-generate GR No. when add-btn or add-box-btn is clicked
$(".add-btn, .add-box-btn").click(function () {
console.log("Add button clicked");
generateGRNo();
});
// Re-generate GR No. when remove-btn or remove-box-btn is clicked
$(document).on("click", ".remove-btn, .remove-box-btn", function () {
console.log("Remove button clicked");
generateGRNo();
});
});
</script>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">G.R. No</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="grno" class="form-control" id="grno" placeholder="G.R. No" readonly>
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">QACL</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="qacl" class="form-control" placeholder="QACL">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Transport Method</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<select name="transport_by" id="transport_by" class="form-control">
<option value="">Select Transport Method</option>
<option value="By Train">By Train</option>
<option value="By Air">By Air</option>
<option value="By Surface">By Surface</option>
<option value="By Express">By Express</option>
</select>
</div>
</div>
</div>
<script>
$(document).ready(function () {
// Define GST rates based on transport mode
const gstRates = {
"By Train": 5,
"By Air": 18,
"By Express": 0,
"By Surface": 0
};
let selectedState = $('select[name="state"]').val();
// Update GST fields when transport mode or state changes
$('#transport_by').on('change', function () {
updateGSTFields();
});
$('select[name="state"]').on('change', function () {
selectedState = $(this).val();
updateGSTFields();
});
// Update GST fields based on selected state and transport mode
function updateGSTFields() {
const transportMode = $('#transport_by').val();
const gstRate = gstRates[transportMode] || 0;
const subtotal = calculateSubtotal();
if (!selectedState || selectedState === "") {
// Clear GST values if no state is selected
$('#gst_rate, #gst_amount, #gst_amount_display').val('');
$('#sgst_rate, #cgst_rate, #sgst_amount, #cgst_amount').val('');
$('#sgst_amount_display, #cgst_amount_display').val('');
return;
}
if (selectedState === "Uttar Pradesh") {
const halfGst = gstRate / 2;
// Reset general GST fields
$('#gst_rate, #gst_amount, #gst_amount_display').val('');
// Set SGST and CGST
$('#sgst_rate').val(halfGst);
$('#cgst_rate').val(halfGst);
const halfGstAmount = (subtotal * halfGst) / 100;
$('#sgst_amount, #sgst_amount_display').val(halfGstAmount.toFixed(0));
$('#cgst_amount, #cgst_amount_display').val(halfGstAmount.toFixed(0));
} else {
// Reset SGST and CGST
$('#sgst_rate, #cgst_rate, #sgst_amount, #cgst_amount').val('');
$('#sgst_amount_display, #cgst_amount_display').val('');
// Set general GST
$('#gst_rate').val(gstRate);
const gstAmount = (subtotal * gstRate) / 100;
$('#gst_amount, #gst_amount_display').val(gstAmount.toFixed(0));
}
calculateTotal();
}
// Input event for each rate field to calculate the corresponding amount
$(document).on("input", ".rate", function () {
const rate = parseFloat($(this).val()) || 0;
const targetId = $(this).data("target");
const totalWeight = parseFloat($("#finalTotal").val()) || 0;
const amount = rate * totalWeight;
// Assign calculated amount to respective variables
if (targetId === "freight_amount") {
freight_amount = amount;
} else if (targetId === "cod_amount") {
cod_amount = amount;
} else if (targetId === "fov_amount") {
fov_amount = amount;
} else if (targetId === "cartage_amount") {
cartage_amount = amount;
} else if (targetId === "labour_amount") {
labour_amount = amount;
}
// Display the calculated amount
$("#" + targetId).val(amount.toFixed(0));
$("#" + targetId + "_display").val(amount.toFixed(0));
updateGSTFields();
calculateTotal();
});
// Handling "Other Amount"
$(document).on("input", "#other_amount_display", function () {
other_amount = parseFloat($(this).val()) || 0;
$('#other_amount').val(other_amount.toFixed(0));
calculateTotal();
});
// Calculate subtotal by adding the amounts of all the input fields
function calculateSubtotal() {
let subtotal = 0;
// Calculate subtotal from all amounts
subtotal += parseFloat(freight_amount) || 0;
subtotal += parseFloat(cod_amount) || 0;
subtotal += parseFloat(fov_amount) || 0;
subtotal += parseFloat(cartage_amount) || 0;
subtotal += parseFloat(labour_amount) || 0;
subtotal += parseFloat(other_amount) || 0;
// Document charge
const docVal = $("#doc_amount_display").val();
const doc = !isNaN(docVal) && docVal !== "" ? parseFloat(docVal) : 0;
$("#doc_amount").val(doc.toFixed(0));
subtotal += doc;
return subtotal;
}
// Handling document charge changes
$(document).on("change", "#doc_amount_display", function () {
const docVal = $(this).val();
const doc = !isNaN(docVal) && docVal !== "" ? parseFloat(docVal) : 0;
$("#doc_amount").val(doc.toFixed(0));
updateGSTFields();
calculateTotal();
});
// Calculate the total including GST, SGST, and CGST
function calculateTotal() {
let total = calculateSubtotal();
const gst = parseFloat($('#gst_amount').val()) || 0;
const sgst = parseFloat($('#sgst_amount').val()) || 0;
const cgst = parseFloat($('#cgst_amount').val()) || 0;
total += gst + sgst + cgst;
// Display total
$("#total_amount_display").val(total.toFixed(0));
$("#total_amount").val(total.toFixed(0));
}
// Initial call to update GST fields on page load
updateGSTFields();
});
</script>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Booking Date</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="booking_date" id="bookingDate" class="form-control" placeholder="Booking Date">
<!-- <input type="date" name="booking_date" class="form-control" placeholder="Booking Date"> -->
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
flatpickr("#bookingDate", {
dateFormat: "d-m-Y", // DD-MM-YYYY format
allowInput: true
});
</script>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Booking Time</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="time" name="booking_time" class="form-control" placeholder="Booking Time">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">No. Of Package</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="pkg_total" class="form-control" placeholder="No. Of Package">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Type Of Packing</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="pkg_type" class="form-control" placeholder="Type Of Packing">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Party Name</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="party_name" class="form-control" placeholder="Party Name">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Party Invoice No</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="party_invoice" class="form-control" placeholder="Party Invoice No">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Select State</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<select name="state" class="form-control" required>
<option value="">Select State</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Dadra and Nagar Haveli and Daman and Diu">Dadra and Nagar Haveli and Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Ladakh">Ladakh</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Puducherry">Puducherry</option>
</select>
</div>
</div>
</div>
<div class="container">
<h3 class="text-center">Dynamic Dimension Calculator</h3>
<form id="dimensionForm">
<div id="dimensionContainer">
<!-- First row for Dimensions -->
<div class="row dimension-row">
<div class="col-sm-2 form-group">
<label>Length (L)</label>
<input type="number" name="length[]" placeholder="Length" class="form-control length">
</div>
<div class="col-sm-2 form-group">
<label>Width (W)</label>
<input type="number" name="width[]" placeholder="Width" class="form-control width">
</div>
<div class="col-sm-2 form-group">
<label>Height (H)</label>
<input type="number" name="height[]" placeholder="Height" class="form-control height">
</div>
<div class="col-sm-2 form-group">
<label>Charge Weight</label>
<input type="number" name="charge_weight[]" placeholder="Charge Weight" class="form-control charge-weight">
</div>
<div class="col-sm-1 form-group">
<label>Qty</label>
<input type="number" name="demention_quantity[]" class="form-control quantity" value="0">
</div>
<div class="col-sm-2 form-group">
<label>Volume</label>
<input type="number" name="volume[]" placeholder="Volume" class="form-control volume" readonly>
</div>
<div class="col-sm-2 form-group">
<label>Weight</label>
<input type="number" name="total_weight[]" placeholder="Weight" class="form-control amount" readonly>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-danger remove-btn" style="display:none;">✖</button>
</div>
</div>
</div>
<button type="button" class="btn btn-primary add-btn">+ Add More</button>
<hr>
<!-- New Box Section -->
<h4>Box Weight Section</h4>
<div id="boxContainer">
<div class="row box-row">
<div class="col-sm-3 form-group">
<label>Box Weight (kg)</label>
<input type="number" name="box_weight[]" class="form-control box-weight">
</div>
<div class="col-sm-3 form-group">
<label>Box Quantity</label>
<input type="number" name="box_quantity[]" class="form-control box-quantity" value="0">
</div>
<div class="col-sm-3 form-group">
<label>Total Box Weight</label>
<input type="number" name="total_box_weight[]" class="form-control box-total-weight" readonly>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-danger remove-box-btn" style="display:none;">✖</button>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary add-box-btn">+ Add Box</button>
<hr>
<div class="total-container mb-4">
<label><strong>Total Charged Weight:</strong></label>
<input type="number" name="total_charged_weight" id="finalTotal" class="form-control" readonly>
</div>
</form>
</div>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<style>
.dimension-row, .box-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.dimension-row .form-group, .box-row .form-group { width: 150px; text-align: center; margin-bottom: 0; }
.remove-btn, .remove-box-btn { margin-top: 25px; }
.total-container { margin-top: 20px; }
.quantity{
width: 90px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.dimension-row, .box-row { flex-direction: column; align-items: flex-start; }
.dimension-row .form-group, .box-row .form-group { width: 100%; }
.quantity {
width: 338px;
}
}
</style>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Said to Content</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="saidtocontent" class="form-control" placeholder="Said to Content">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Quantity</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="quantity" class="form-control" placeholder="Quantity">
</div>
</div>
</div>
<!-- <div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Gross Weight</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="gross_weight" class="form-control" placeholder="Gross Weight">
</div>
</div> -->
<!-- </div> -->
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<th>Rate (Kg)</th>
<th>Amount</th>
</tr>
<tr>
<td>Freight</td>
<td><input type="text" class="form-control rate" name="freight_rate" data-target="freight_amount" placeholder="Rate (Kg)"></td>
<td>
<input type="number" class="form-control amount" id="freight_amount_display" placeholder="Amount" readonly>
<input type="hidden" name="freight_amount" id="freight_amount">
</td>
</tr>
<tr>
<td>C.O.D</td>
<td><input type="text" class="form-control rate" name="cod_rate" data-target="cod_amount" placeholder="Rate (Kg)"></td>
<td>
<input type="text" class="form-control amount" id="cod_amount_display" placeholder="Amount" readonly>
<input type="hidden" name="cod_amount" id="cod_amount">
</td>
</tr>
<tr>
<td>F.O.V</td>
<td><input type="text" class="form-control rate" name="fov_rate" data-target="fov_amount" placeholder="Rate (Kg)"></td>
<td>
<input type="number" class="form-control amount" id="fov_amount_display" placeholder="Amount" readonly>
<input type="hidden" name="fov_amount" id="fov_amount">
</td>
</tr>
<tr>
<td>Doc Charges</td>
<td>
<!-- You can leave the rate blank or remove it entirely if unused -->
<input type="text" class="form-control" name="doc_rate" placeholder="N/A" disabled>
</td>
<td>
<input type="text" class="form-control amount" id="doc_amount_display" placeholder="Amount">
<input type="hidden" name="doc_amount" id="doc_amount">
<!-- <select class="form-control" name="doc_amount_display" id="doc_amount_display">
<option value="">Select Amount</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="hidden" name="doc_amount" id="doc_amount"> -->
</td>
</tr>
<tr>
<td>Cartage</td>
<td><input type="text" class="form-control rate" name="cartage_rate" data-target="cartage_amount" placeholder="Rate (Kg)"></td>
<td>
<input type="number" class="form-control amount" id="cartage_amount_display" placeholder="Amount" readonly>
<input type="hidden" name="cartage_amount" id="cartage_amount">
</td>
</tr>
<tr>
<td>Labour Handling</td>
<td><input type="text" class="form-control rate" name="labour_rate" data-target="labour_amount" placeholder="Rate (Kg)"></td>
<td>
<input type="text" class="form-control amount" id="labour_amount_display" placeholder="Amount" readonly>
<input type="hidden" name="labour_amount" id="labour_amount">
</td>
</tr>
<tr>
<td>IGST @</td>
<td>
<input type="text" class="form-control rate" name="gst_rate" id="gst_rate" data-target="gst_amount" placeholder="Rate (%)" readonly>
</td>
<td>
<input type="number" class="form-control amount" id="gst_amount_display" placeholder="Amount" readonly>
<input type="hidden" name="gst_amount" id="gst_amount">
</td>
</tr>
<tr>
<td>SGST @</td>
<td>
<input type="text" class="form-control rate" name="sgst_rate" id="sgst_rate" data-target="sgst_amount" placeholder="Rate (%)" readonly>
</td>
<td>
<input type="number" class="form-control amount" id="sgst_amount_display" placeholder="Amount" readonly>
<input type="hidden" name="sgst_amount" id="sgst_amount">
</td>
</tr>
<tr>
<td>CGST @</td>
<td>
<input type="text" class="form-control rate" name="cgst_rate" id="cgst_rate" data-target="cgst_amount" placeholder="Rate (%)" readonly>
</td>
<td>
<input type="number" class="form-control amount" id="cgst_amount_display" placeholder="Amount" readonly>
<input type="hidden" name="cgst_amount" id="cgst_amount">
</td>
</tr>
<tr>
<td>Any Other Charges</td>
<td><input type="text" class="form-control" name="other_rate" placeholder="Rate (Manual)"></td>
<td>
<input type="number" class="form-control amount" id="other_amount_display" placeholder="Amount (Manual)" oninput="calculateTotal()">
<input type="hidden" name="other_amount" id="other_amount">
</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td colspan="2">
<input type="number" class="form-control" id="total_amount_display" placeholder="Total" readonly>
<input type="hidden" name="total_amount" id="total_amount">
</td>
</tr>
</table>
<!-- // doc Charges
// doc Charges -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
function calculateWeight(row) {
let length = parseFloat(row.find(".length").val()) || 0;
let width = parseFloat(row.find(".width").val()) || 0;
let height = parseFloat(row.find(".height").val()) || 0;
let chargeWeight = parseFloat(row.find(".charge-weight").val()) || 1;
let quantity = parseFloat(row.find(".quantity").val()) || 0;
let volume = length * width * height;
row.find(".volume").val(volume.toFixed(2));
let weight = (volume / chargeWeight) * quantity;
row.find(".amount").val(weight.toFixed(2));
calculateTotalWeight();
calculateTotalQuantity();
}
function calculateBoxWeight(row) {
let boxWeight = parseFloat(row.find(".box-weight").val()) || 0;
let boxQuantity = parseFloat(row.find(".box-quantity").val()) || 0;
let totalBoxWeight = boxWeight * boxQuantity;
row.find(".box-total-weight").val(totalBoxWeight.toFixed(2));
calculateTotalWeight();
calculateTotalQuantity();
}
function calculateTotalWeight() {
let totalWeight = 0;
$(".amount").each(function () {
totalWeight += parseFloat($(this).val()) || 0;
});
$(".box-total-weight").each(function () {
totalWeight += parseFloat($(this).val()) || 0;
});
$("#finalTotal").val(totalWeight.toFixed(0));
}
function calculateTotalQuantity() {
let totalQty = 0;
$(".quantity").each(function () {
totalQty += parseInt($(this).val()) || 0;
});
$(".box-quantity").each(function () {
totalQty += parseInt($(this).val()) || 0;
});
$("input[name='quantity']").val(totalQty);
}
$(document).on("input", ".length, .width, .height, .charge-weight, .quantity", function () {
let row = $(this).closest(".dimension-row");
calculateWeight(row);
});
$(document).on("input", ".box-weight, .box-quantity", function () {
let row = $(this).closest(".box-row");
calculateBoxWeight(row);
});
$(".add-btn").click(function () {
let newRow = $(".dimension-row:first").clone();
newRow.find("input").val("");
newRow.find(".volume, .amount").val("0");
newRow.find(".remove-btn").show();
$("#dimensionContainer").append(newRow);
calculateTotalQuantity();
});
$(".add-box-btn").click(function () {
let newBoxRow = $(".box-row:first").clone();
newBoxRow.find("input").val("");
newBoxRow.find(".box-total-weight").val("0");
newBoxRow.find(".remove-box-btn").show();
$("#boxContainer").append(newBoxRow);
calculateTotalQuantity();
});
$(document).on("click", ".remove-btn", function () {
$(this).closest(".dimension-row").remove();
calculateTotalWeight();
calculateTotalQuantity();
});
$(document).on("click", ".remove-box-btn", function () {
$(this).closest(".box-row").remove();
calculateTotalWeight();
calculateTotalQuantity();
});
});
</script>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Delivery Detail</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="delivery_detail" class="form-control" placeholder="Delivery Detail">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">E.T.A.</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="delivery_date" class="form-control" placeholder="Delivery Date">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">TBB at Origin / To Pay</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<select name="ttb_origin" class="form-control">
<option value="TTB Origin">TBB at Origin</option>
<option value="To Pay">To Pay</option>
</select>
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Paid</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="paid" class="form-control" placeholder="paid">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Declared Amount</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="text" name="amount" class="form-control" placeholder="Declared Amount">
</div>
</div>
</div>
<div class="col-12 col-sm-2 text-sm-right align-self-center">
<label class="redial-font-weight-600 mb-3">Attachment</label>
</div>
<div class="col-12 col-sm-10">
<div class="row">
<div class="col-12 col-sm-12 mb-3">
<input type="file" name="attachment" accept=".jpg,.jpeg,.png,.gif,.pdf">
<!-- <input type="file" name="attachment" class="form-control" placeholder="attachment"> -->
</div>
</div>
</div>
<input type="hidden" name="status" value="Pending">
<div class="btn-group mb-2" style="margin-left: 39%;">
<button type="submit" name="add_builty" class="btn btn-outline-success">Add </button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End main-content-->
<!-- Top To Bottom-->
<a href="#" class="scrollup text-center redial-bg-primary redial-rounded-circle-50">
<h4 class="text-white mb-0"><i class="icofont icofont-long-arrow-up"></i></h4>
</a>
<!-- End Top To Bottom-->
<!-- jQuery -->
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
input {
width: 100%;
padding: 6px;
box-sizing: border-box;
}
</style>
<script src="dist/js/plugins.min.js"></script>
<script src="dist/js/common.js"></script>
</body>
</html>