ria/app/Views/gasCylinderReturned.php
2025-04-02 18:34:33 +05:30

1110 lines
31 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<style>
.num {
text-align: right;
}
#Inwardgateregistertable1 thead tr th{
width: 150px;
word-wrap: break-word;
white-space: normal;
}
th {
white-space: nowrap;
}
.Date-filter-form {
display: flex;
align-items: center;
gap: 10px;
/* Adjust the gap as needed */
}
.Date-filter-form input,
.Date-filter-form button {
padding: 5px;
font-size: 14px;
}
.Date-filter-form button {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
.Date-filter-form button:hover {
background-color: #0056b3;
}
.icon-button {
background: none;
border: none;
cursor: pointer;
color: #007bff;
font-size: 18px;
}
.icon-button:hover {
color: #0056b3;
}
</style>
<style>
th,
td {
white-space: nowrap;
}
</style>
<style>
.dataTables_wrapper .top {
display: flex;
justify-content: space-between;
align-items: center;
}
.dataTables_wrapper .dataTables_length {
float: left;
}
.footer-textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.send-btn {
padding: 10px 20px;
background-color: #2ecc71; /* Green color */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.send-btn:hover {
background-color: #27ae60; /* Darker green on hover */
}
</style>
<script>
$(function() {
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
var SIAStartYear = year - 2015;
var mindt = year - 70;
var maxdt = year - 15;
});
</script>
<style>
.autocomplete-suggestion {
cursor: pointer;
background-color: skyblue;
/* background-color: darkgrey; */
outline: 1px solid slategrey;
}
.igr-remarks{
position: relative;
}
.igr-remarks i{
font-size: 14px;
}
.igr-remarks span{
position: absolute;
top: -5px;
right: -6px;
background-color: transparent;
border-radius: 50px!important;
font-weight: 600;
width: 14px;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
color:#35462c;
}
</style>
<script type="text/javascript" src="<?php echo base_url(); ?>public/assets/Autocomplete/jquery.autocomplete.js"></script>
<div class="content-page">
<div class="content">
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div>
<div class="row">
<div class="col-12">
<div class="page-title-box page-title-box-alt">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Inward</a></li>
<li class="breadcrumb-item active">
<h4 class="page-title">Gas Cylinder Returned </h4>
</li>
</ol>
</div>
</div>
</div>
</div>
<?php if (session()->getFlashdata('message')): ?>
<div class="alert alert-warning" role="alert">
<?= esc(session()->getFlashdata('message')); ?>
</div>
<?php endif; ?>
<div class="row">
<div class="col-12">
<div class="card">
<div class="row">
<div class="col-md-8">
<form class="Date-filter-form" style="margin-top: 14px;margin-bottom: -11px;margin-left: 33px;" method="post" action="<?= base_url('ViewIGR'); ?>">
<label for="fromDate">From:</label>
<input class="form-control date_range form-date-search"
value=""
id="fromDate" name="fromDate" placeholder="Select From Date" autocomplete="off" required>
<label for="toDate">To:</label>
<input class="form-control date_range to-date-search"
value=""
id="toDate" name="toDate" placeholder="Select To Date" autocomplete="off" required>
<button type="submit" class="range_search_button" >
<i class="fe-search" aria-hidden="true" class="icon-button" title="Search"></i>
</button>
<i class="fe-rotate-cw range_reset_button"
style="cursor:pointer;"
aria-hidden="true" class="icon-button" id="resetButton" title="Reset"></i>
<div class="error" id="error"></div>
</form>
</div>
<!-- <div class="col-md-4">
<button id="downloadExcel" class="btn btn-primary" style="margin-top: 14px;margin-bottom: -11px;margin-right: 25px;float: right;">Download Excel</button>
</div> -->
</div>
<div class="card-body" style="overflow-x:scroll;">
<table id="view_inward_gate_register" class="table table-bordered table-hover">
<thead>
<tr>
<th>Full Cylinder Date</th>
<th>IGR No</th>
<th>Supplier</th>
<th>Cylinder No</th>
<th>Gross Weight</th>
<th>Empty Cylinder Date</th>
<th>Tare Weight</th>
<th>Net Weight</th>
<th>Actual Weight</th>
<th>shortage</th>
<th>Bill/Invoice No</th>
<th>Bill Date</th>
<th>Driver Name</th>
<th>Vehicle No</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> <!-- end card body-->
</div> <!-- end card -->
</div><!-- end col-->
</div>
</div>
</div> <!-- container -->
</div> <!-- content -->
</div>
<!-- box closed here -->
<!-- gas shortage list gasShortageList-->
<!-- Modal -->
<div id="gasShortageList" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gasShortageListLabel" aria-hidden="true">
<div class="modal-dialog modal-xl " role="document">
<div class="modal-content" style="border: 1px solid #ddd; margin-top: 73px; box-shadow: 0 0 40px rgb(0 0 0 / 43%);">
<div class="modal-header">
<h5 class="modal-title" id="gasShortageListLabel" align="center">List of Gas Shortages</h5>
<button type="button" class="btn btn-primary btn-sm" id="exportGasShortage" style="margin-left: 10px;">
Export &nbsp;
<i class="fa fa-download" style="color:white;"></i>
</button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" >
<table id="gasShortageTable" class="table table-bordered table-hover">
<thead>
<tr>
<th>Full Cylinder Date</th>
<th>Empty Cylinder Date</th>
<th>Invoice No</th>
<th>Cylinder No</th>
<th>Gross Weight</th>
<th>Tare Weight</th>
<th>Net Weight</th>
<th>Actual Weight</th>
<th>Shortage</th>
<th style="display:none">ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end of gas shortage list -->
<!-- gas Shortage Calculator modal addGasShortageCalculator -->
<div id="gasShortageCalculator" data-form="add" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-large">
<div class="modal-content" style="border: 1px solid #ddd; margin-top: 73px; box-shadow: 0 0 40px rgb(0 0 0 / 43%);">
<div class="modal-header">
<h4 class="modal-title">Add Gas Shortage </h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<div class="modal-body p-4">
<form action="#">
<!-- first row full cylinder date and empty cylinder date -->
<div class="form-group row">
<div class="col-md-6">
<label for="fullCylinderDateId"> Full Cylinder Date</label>
<input type="date" class="form-control" id="fullCylinderDateId" name="fullCylinderDate" value="" required>
</div>
<div class="col-md-6">
<label for="emptyCylinderDateId"> Empty Cylinder Date</label>
<input type="date" class="form-control" id="emptyCylinderDateId" name="emptyCylinderDate" value="" required>
</div>
</div>
<!-- second row cylinder no and Invoice No-->
<div class="form-group row">
<div class="col-md-6">
<label for="invoiceNoId"> Invoice No / Bill No</label>
<input type="text" class="form-control" id="invoiceNoId" name="invoiceNo" value="" readonly>
</div>
<div class="col-md-6">
<label for="cylinderNoId"> Cylinder No </label>
<input type="text" class="form-control" id="cylinderNoId" name="cylinderNo" value="" required>
</div>
</div>
<!-- third row gross weight and tare weight -->
<div class="form-group row">
<div class="col-md-6">
<label for="grossWeightId"> Gross Weight </label>
<input type="text" class="form-control" id="grossWeightId" name="grossWeight" value="" required>
</div>
<div class="col-md-6">
<label for="tareWeightId"> Tare Weight </label>
<input type="text" class="form-control" id="tareWeightId" name="tareWeight" value="" required>
</div>
</div>
<!-- fourth row NetWeight and actual weight -->
<div class="form-group row">
<div class="col-md-6">
<label for="actualWeightId"> Actual Weight </label>
<input type="text" class="form-control" id="actualWeightId" name="actualWeight" value="" required>
</div>
<div class="col-md-6">
<label for="netWeightId"> Net Weight (Gross-Tare)</label>
<input type="text" class="form-control" id="netWeightId" name="netWeight" value="" readonly>
</div>
</div>
<!-- fifth row Gas Shortage -->
<div class="form-group row">
<div class="col-md-6">
<label for="shortageId"> Gas Shortage(Actual-Net)</label>
<input type="text" class="form-control" id="shortageId" name="shortage" value="" readonly>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect"
data-dismiss="modal" value="Cancel">Cancel</button>
<button type="submit"
class="btn btn-info waves-effect waves-light" >Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- end gas shortage calculator modal -->
<!-- Edit gas Shortage Calculator modal editgasShortageCalculator -->
<div id="editGasShortageCalculator" data-form="edit" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-large">
<div class="modal-content" style="border: 1px solid #ddd; margin-top: 73px; box-shadow: 0 0 40px rgb(0 0 0 / 43%);">
<div class="modal-header">
<h4 class="modal-title">Update Gas Shortage </h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<form action="#">
<div class="modal-body p-4">
<!-- first row full cylinder date and empty cylinder date -->
<div class="form-group row">
<div class="col-md-6">
<label for="editFullCylinderDateId"> Full Cylinder Date</label>
<input type="date" class="form-control" id="editFullCylinderDateId" name="fullCylinderDate" value="" required>
</div>
<div class="col-md-6">
<label for="editEmptyCylinderDateId"> Empty Cylinder Date</label>
<input type="date" class="form-control" id="editEmptyCylinderDateId" name="emptyCylinderDate" value="" required>
</div>
</div>
<!-- second row cylinder no and Invoice No-->
<div class="form-group row">
<div class="col-md-6">
<label for="editInvoiceNoId"> Invoice No / Bill No</label>
<input type="text" class="form-control" id="editInvoiceNoId" name="invoiceNo" value="" readonly>
</div>
<div class="col-md-6">
<label for="editCylinderNoId"> Cylinder No </label>
<input type="text" class="form-control" id="editCylinderNoId" name="cylinderNo" value="" required>
</div>
</div>
<!-- third row gross weight and tare weight -->
<div class="form-group row">
<div class="col-md-6">
<label for="editGrossWeightId"> Gross Weight </label>
<input type="text" class="form-control" id="editGrossWeightId" name="grossWeight" value="" required>
</div>
<div class="col-md-6">
<label for="editTareWeightId"> Tare Weight </label>
<input type="text" class="form-control" id="editTareWeightId" name="tareWeight" value="" required>
</div>
</div>
<!-- fourth row NetWeight and actual weight -->
<div class="form-group row">
<div class="col-md-6">
<label for="editActualWeightId"> Actual Weight </label>
<input type="text" class="form-control" id="editActualWeightId" name="actualWeight" value="" required>
</div>
<div class="col-md-6">
<label for="editNetWeightId"> Net Weight (Gross-Tare)</label>
<input type="text" class="form-control" id="editNetWeightId" name="netWeight" value="" readonly>
</div>
</div>
<!-- fifth row Gas Shortage -->
<div class="form-group row">
<div class="col-md-6">
<label for="editShortageId"> Gas Shortage(Actual-Net)</label>
<input type="text" class="form-control" id="editShortageId" name="shortage" value="" readonly>
</div>
</div>
<!-- hidden fields -->
<input type="hidden" id="editId" name="id" value="" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect"
data-dismiss="modal" value="Cancel">Cancel</button>
<button type="submit"
class="btn btn-info waves-effect waves-light" >Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- end gas shortage calculator modal -->
<!-- format date time helper -->
<script>
function formatDateTime(dateString, flag) {
// Note 1 means DATE only
// 2 means DATE and Time
// Check if the date string is null or empty
if (!dateString || dateString == 'null' || dateString === '0000-00-00 00:00:00') {
return '';
} else {
console.log("Received date string:", dateString);
// Split the date string into date and time components
var dateTimeParts = dateString.split(' ');
var dateParts = dateTimeParts[0].split('-');
var timeParts = dateTimeParts[1].split(':');
// Extract individual components
var year = parseInt(dateParts[0], 10);
var month = parseInt(dateParts[1], 10) - 1; // Months are zero-based in JavaScript
var day = parseInt(dateParts[2], 10);
var hours = parseInt(timeParts[0], 10);
var minutes = parseInt(timeParts[1], 10);
var seconds = parseInt(timeParts[2], 10);
// Create a new Date object
var date = new Date(year, month, day, hours, minutes, seconds);
// Extract date components
var day = date.getDate().toString().padStart(2, '0');
var month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based
var year = date.getFullYear();
// Extract time components
var hours = date.getHours().toString().padStart(2, '0');
var minutes = date.getMinutes().toString().padStart(2, '0');
var seconds = date.getSeconds().toString().padStart(2, '0');
var formattedDate = '';
// Format the date and time in DD-MM-YYYY HH:MM:SS format
if (flag == 1) {
formattedDate = `${day}-${month}-${year}`;
} else if (flag == 2) {
formattedDate = `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;
}
return formattedDate;
}
}
</script>
<!-- number validation -->
<script>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 &&
(charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<!-- data table related initialization -->
<script>
$(document).ready(function() {
// this code for table date filed ordering
$.fn.dataTable.ext.type.order['date-dd-mm-yyyy-pre'] = function(date) {
if (!date) return 0;
var parts = date.split('-'); // Split the date into parts (DD, MM, YYYY)
return new Date(parts[2], parts[1] - 1, parts[0]).getTime(); // Convert to timestamp
};
var orderColumnIndex = <?php echo (session()->get('roleText') == 'Auditor') ? 6 : 0; ?>;
table = $('#view_inward_gate_register').DataTable({
dom: 'Blfrtip',
buttons: [
{
extend: 'excel',
text: 'Excel',
exportOptions: {
columns: ':not(:last-child)' // Exclude the last column
}
}
],
pageLength: 10,
lengthMenu: [
[10, 20, 30, 50, -1],
[10, 20, 30, 50, "All"]
],
responsive: false,
ordering: true,
columnDefs: [
{ targets: parseInt(orderColumnIndex), type: 'date-dd-mm-yyyy' } // Apply custom sorting
],
order: [[parseInt(orderColumnIndex), 'desc']],
language: {
paginate: {
next: '<i class="fas fa-angle-right"></i>', // Next button icon
previous: '<i class="fas fa-angle-left"></i>' // Previous button icon
}
}
});
// Reset button functionality
$("#resetButton").click(function() {
$("#fromDate").val('');
$("#toDate").val('');
window.location="ViewIGR"
});
// Automatically focus and open the To Date picker when From Date is selected
document.getElementById('fromDate').addEventListener('change', function() {
var fromDate = this.value;
var toDateInput = document.getElementById('toDate');
// Set the min attribute of the To Date input to the selected From Date
toDateInput.min = fromDate;
// Optionally reset the To Date input if the current value is before the new min date
if (toDateInput.value < fromDate) {
toDateInput.value = fromDate;
}
});
});
</script>
<!-- data table related date filter -->
<script>
$(document).ready(function() {
$('#fromDate , #toDate').change(function() {
let fromDate = $('#fromDate').val();
let toDate = $('#toDate').val();
let fromDateObj = new Date(fromDate.split('-').reverse().join('-'));
let toDateObj = new Date(toDate.split('-').reverse().join('-'));
if (fromDateObj > toDateObj) {
alert('Incorrect Date Applied For Filter..!!');
$('#toDate').attr('min', fromDate);
$('#toDate').val('');
}
});
});
</script>
<!-- 02-04-2025 new gas shortage calculator -->
<!-- add gas shortage calculator -->
<script>
$('#grossWeightId, #tareWeightId,#actualWeightId').change(function() {
console.log("fine here ");
let grossWeightVal = $('#grossWeightId').val().trim();
let tareWeightVal = $('#tareWeightId').val().trim();
// Ensure both fields have values before calculation
if (grossWeightVal === '' || tareWeightVal === '') {
return;
}
let grossWeight = validateNumber(grossWeightVal);
let tareWeight = validateNumber(tareWeightVal);
let netWeight = grossWeight - tareWeight;
$('#netWeightId').val(netWeight);
let actualWeightVal = $('#actualWeightId').val().trim();
// Ensure both fields have values before calculation
if (actualWeightVal === '' || netWeight === '') {
return;
}
let actualWeight = validateNumber(actualWeightVal);
let shortage = actualWeight - netWeight;
$('#shortageId').val(shortage);
});
function validateNumber(givenValue) {
givenValue = givenValue.trim();
if (/^\d+$/.test(givenValue)) {
return parseInt(givenValue, 10); // Convert string to number
} else {
alert('Please Enter a Valid Number..!!');
return 0; // Invalid number
}
}
</script>
<!-- while opening add gas shortage modal -->
<script>
$(document).ready(function(){
$('#gasShortageCalculator').on("shown.bs.modal", function(e){
//invoice needed to store it in the shortage table ,
// coz based on this we can limit the addition of shortage must not exceed than given qty
let invoiceNo = $('#Invoice_No').val();
let materialReceivedDate = $('#MaterialRcvdDate').val().split("-");
//converting it to y-m-d format;
console.log(`${materialReceivedDate[2]}-${materialReceivedDate[1]}-${materialReceivedDate[0]}`);
$('#invoiceNoId').val(invoiceNo);
$('#fullCylinderDateId').val(`${materialReceivedDate[2]}-${materialReceivedDate[1]}-${materialReceivedDate[0]}`);
});
});
</script>
<!-- while closing add gas shortage modal -->
<script>
$(document).ready(function(){
$('#gasShortageCalculator').on("hide.bs.modal", function(e){
$('#invoiceNoId').val(' ');
$('#fullCylinderDateId').val(" ");
$('#emptyCylinderDateId').val(" ");
$('#cylinderNoId').val(" ");
$('#grossWeightId').val(" ");
$('#tareWeightId').val(" ");
$('#actualWeightId').val(" ");
$('#netWeightId').val(" ");
$('#shortageId').val(" ");
});
});
</script>
<!-- end of add gas shortage calculator -->
<!-- edit gasShortageCalculator -->
<script>
$('#editGrossWeightId,#editTareWeightId,#editActualWeightId').change(function() {
let grossWeightVal = $('#editGrossWeightId').val().trim();
let tareWeightVal = $('#editTareWeightId').val().trim();
// Ensure both fields have values before calculation
if (grossWeightVal === '' || tareWeightVal === '') {
return;
}
let grossWeight = validateNumber(grossWeightVal);
let tareWeight = validateNumber(tareWeightVal);
let netWeight = grossWeight - tareWeight;
$('#editNetWeightId').val(netWeight);
let actualWeightVal = $('#editActualWeightId').val().trim();
// Ensure both fields have values before calculation
if (actualWeightVal === '' || netWeight === '') {
return;
}
let actualWeight = validateNumber(actualWeightVal);
let shortage = actualWeight - netWeight;
$('#editShortageId').val(shortage);
});
</script>
<!-- while opening edit gas shortage modal -->
<script>
$(document).ready(function(){
$('#editGasShortageCalculator').on("shown.bs.modal", function(e){
//invoice needed to store it in the shortage table ,
// coz based on this we can limit the addition of shortage must not exceed than given qty
let invoiceNo = $('#Invoice_No').val();
let materialReceivedDate = $('#MaterialRcvdDate').val().split("-");
//converting it to y-m-d format;
console.log(`${materialReceivedDate[2]}-${materialReceivedDate[1]}-${materialReceivedDate[0]}`);
$('#editInvoiceNoId').val(invoiceNo);
$('#editFullCylinderDateId').val(`${materialReceivedDate[2]}-${materialReceivedDate[1]}-${materialReceivedDate[0]}`);
});
});
</script>
<!-- while closing edit gas shortage modal -->
<script>
$(document).ready(function(){
$('#editGasShortageCalculator').on("hide.bs.modal", function(e){
$('#editInvoiceNoId').val(' ');
$('#editFullCylinderDateId').val(" ");
$('#editEmptyCylinderDateId').val(" ");
$('#editCylinderNoId').val(" ");
$('#editGrossWeightId').val(" ");
$('#editTareWeightId').val(" ");
$('#editActualWeightId').val(" ");
$('#editNetWeightId').val(" ");
$('#editShortageId').val(" ");
});
});
</script>
<!-- end of edit gasShortageCalculator -->
<!-- while opening gasShortageList -->
<script>
$(document).ready(function(){
$('#gasShortageList').on("shown.bs.modal",function(e){
let invoiceNo = $('#Invoice_No').val();
console.log("invoice no", invoiceNo);
$('#loader').show();
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/gasShortageList", // 🔹 Change this to your actual backend endpoint
data: {invoiceNo},
dataType: "json",
success: function (response) {
if (response.status === "success") {
let data = response.data ;
let tableData = '';
data.forEach((val) => {
let fullCylinderDate = val.fullCylinderDate.split("-").reverse().join("-");
let emptyCylinderDate = val.emptyCylinderDate.split("-").reverse().join('-');
tableData += `
<tr>
<td>${fullCylinderDate}</td>
<td>${emptyCylinderDate}</td>
<td>${val.invoiceNo}</td>
<td>${val.cylinderNo}</td>
<td>${val.grossWeight}</td>
<td>${val.tareWeight}</td>
<td>${val.netWeight}</td>
<td>${val.actualWeight}</td>
<td>${val.shortage}</td>
<td style="display:none">${val.id}</td>
<td style="width: 25px; cursor: pointer;">
<i class="fa fa-solid fa-edit btnEditGasShortageCalculator"
style="text-align: center;"
data-toggle="modal"
data-target="#editGasShortageCalculator"
data-id="${val.id}"
title="Edit Gas Shortage List">
</i>
</td>
</tr>`;
});
// Assuming you have a table with ID "gasShortageTable"
$("#gasShortageTable tbody").html(tableData);
} else {
alert("Error: " + response.message);
}
},
error: function (xhr, status, error) {
console.log(xhr.responseText);
alert("Something went wrong! Please try again.");
},
complete:function(){
console.log("ajax call is completed..!!");
$('#loader').hide();
}
});
})
})
</script>
<!-- while closing gasShortageList -->
<script>
$(document).ready(function(){
$('#gasShortageList').on("hide.bs.modal",function(){
$("#gasShortageTable tbody").html(" ");
})
})
</script>
<!-- ajax call for gas Shortage -->
<script>
$("#gasShortageCalculator, #editGasShortageCalculator").submit(function (event) {
event.preventDefault(); // Prevent form reload
let formData;
let method = $(this).closest(".modal").data("form");
// Prepare form data
let addFormData = {
fullCylinderDate: $('#fullCylinderDateId').val(),
emptyCylinderDate: $('#emptyCylinderDateId').val(),
invoiceNo: $('#invoiceNoId').val(),
cylinderNo: $('#cylinderNoId').val(),
grossWeight: $('#grossWeightId').val(),
tareWeight: $('#tareWeightId').val(),
actualWeight: $('#actualWeightId').val(),
netWeight: $('#netWeightId').val(),
shortage: $('#shortageId').val()
};
let editFormData = {
fullCylinderDate: $('#editFullCylinderDateId').val(),
emptyCylinderDate: $('#editEmptyCylinderDateId').val(),
invoiceNo: $('#editInvoiceNoId').val(),
cylinderNo: $('#editCylinderNoId').val(),
grossWeight: $('#editGrossWeightId').val(),
tareWeight: $('#editTareWeightId').val(),
actualWeight: $('#editActualWeightId').val(),
netWeight: $('#editNetWeightId').val(),
shortage: $('#editShortageId').val(),
id : $('#editId').val()
};
if(method == "add"){ formData = addFormData ;}
if(method == "edit"){ formData = editFormData ;}
$('#loader').show();
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/updateGasShortage", // 🔹 Change this to your actual backend endpoint
data: formData,
dataType: "json",
success: function (response) {
if (response.status === "success") {
alert("Gas Shortage Data Saved Successfully!");
$('#gasShortageCalculator').modal('hide'); // Close modal
$('#editGasShortageCalculator').modal('hide');
} else {
alert("Error: " + response.message);
}
},
error: function (xhr, status, error) {
console.log(xhr.responseText);
alert("Something went wrong! Please try again.");
},
complete:function(){
console.log("ajax call is completed..!!");
$('#loader').hide();
}
});
});
</script>
<!-- when edit modal of #editGasShortageCalculator clicked..!!-->
<script>
$(document).on("click", ".btnEditGasShortageCalculator", function () {
console.log("Edit modal opening place");
let id = $(this).data("id");
console.log("Editing ID:", id);
// Smooth transition: First hide, then show after 300ms
$("#gasShortageList").modal("hide");
setTimeout(() => {
$("#editGasShortageCalculator").modal("show");
}, 300);
$('#loader').show();
// AJAX request to fetch data
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/getGasShortageDetail",
data: { id: id },
dataType: "json",
success: function (response) {
if (response.status === "success") {
let data = response.data;
console.log(data);
if(data.length > 0){
data = data[0];
console.log(data);
// Populate the modal fields
$("#editFullCylinderDateId").val(data.fullCylinderDate);
$("#editEmptyCylinderDateId").val(data.emptyCylinderDate);
$("#editInvoiceNoId").val(data.invoiceNo);
$("#editCylinderNoId").val(data.cylinderNo);
$("#editGrossWeightId").val(data.grossWeight);
$("#editTareWeightId").val(data.tareWeight);
$("#editNetWeightId").val(data.netWeight);
$("#editActualWeightId").val(data.actualWeight);
$("#editShortageId").val(data.shortage);
$("#editId").val(data.id); // Hidden field for ID
}
} else {
alert("Error: " + response.message);
}
},
error: function (xhr, status, error) {
console.log(xhr.responseText);
alert("Something went wrong! Please try again.");
},
complete:function(){
console.log("ajax call is completed..!!");
$('#loader').hide();
}
});
});
</script>
<!-- this script is to export the shortage list in excel format -->
<script>
$(document).ready(function(){
function exportTableToExcel(tableID, filename = '') {
let table = document.getElementById(tableID);
let cloneTable = table.cloneNode(true); // Clone the table to modify
// Remove hidden rows
$(cloneTable).find('tr').filter(function () {
return $(this).css('display') === 'none';
}).remove();
// Remove hidden columns
$(cloneTable).find('th, td').each(function () {
if ($(this).css('display') === 'none') {
$(this).remove();
}
});
let ws = XLSX.utils.table_to_sheet(cloneTable); // Convert modified table to sheet
let wb = XLSX.utils.book_new(); // Create a new workbook
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // Append sheet to workbook
XLSX.writeFile(wb, filename || 'export.xlsx'); // Save the file
}
let tableId = 'gasShortageTable';
document.getElementById('exportGasShortage').addEventListener('click',function(){
exportTableToExcel(tableId, 'gas_shortage.xlsx');
})
})
</script>