ria/app/Views/gasCylinderPending.php
2025-04-04 17:19:25 +05:30

801 lines
22 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 Pending </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>
<!-- basic details -->
<th>Full Cylinder Date</th>
<th>IGR No</th>
<th>Supplier</th>
<th>Bill/Invoice No</th>
<th>Cylinder Name</th>
<!-- cylinderdetails -->
<th>Cylinder No</th>
<th>Gross Weight</th>
<th>Actual Weight</th>
<!-- least details -->
<th>Bill Date</th>
<th>Driver Name</th>
<th>Vehicle No</th>
<th>Cylinder Count</th>
<th>Gas Details</th>
<th style="display: none;">id</th>
</tr>
</thead>
<tbody>
<?php if(empty($gasCylinderPendingList)){?>
<p align="center" > No Gas Cylinder Pending in the Given Dates..!!</p>
<?php }else{ ?>
<?php foreach($gasCylinderPendingList as $index => $gasCylinder):
$gasCylinder['MaterialRcvdDate'] = date('d-m-Y',strtotime($gasCylinder['MaterialRcvdDate']));
$gasCylinder['DeliveryChellanDate'] = date('d-m-Y',strtotime($gasCylinder['DeliveryChellanDate']));
?>
<tr>
<!-- basic details -->
<!-- td:eq(0) -->
<td><?=$gasCylinder['MaterialRcvdDate']?></td>
<!-- td:eq(1) -->
<td><?=$gasCylinder['IGRNO-']?></td>
<!-- td:eq(2) -->
<td><?=$gasCylinder['SupplierName']?></td>
<!-- td:eq(3) -->
<td><?=$gasCylinder['DeliveryChellanOrInvoiceNo']?></td>
<!-- td:eq(4) -->
<td><?=$gasCylinder['MaterialName']?></td>
<!-- cylinder details -->
<!-- td:eq(5) -->
<td><?=$gasCylinder['cylinderNo']?></td>
<!-- td:eq(6) -->
<td><?=$gasCylinder['grossWeight']?></td>
<!-- td:eq(7) -->
<td><?=$gasCylinder['actualWeight']?></td>
<!-- least details -->
<!-- td:eq(8) -->
<td><?=$gasCylinder['DeliveryChellanDate']?></td>
<!-- td:eq(9) -->
<td><?=$gasCylinder['DriverName']?></td>
<!-- td:eq(10) -->
<td><?=$gasCylinder['VehicleNo']?></td>
<!-- td:eq(11) -->
<td><?=$gasCylinder['gasCylinderCount']?></td>
<!-- td:eq(12) -->
<td style="display: none;"><?=$gasCylinder['id']?></td>
<!-- #gasPendingDetails modal will open when clicking this button -->
<td>
<a href="#">
<i class="fa fa-edit gas-pending-details" ></i>
</a>
</td>
</tr>
<?php endforeach ?>
<?php } ?>
</tbody>
</table>
</div> <!-- end card body-->
</div> <!-- end card -->
</div><!-- end col-->
</div>
</div>
</div> <!-- container -->
</div> <!-- content -->
</div>
<!-- box closed here -->
<!-- gas Entered modal -->
<div id="gasPendingDetails" data-form="add" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-xl">
<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">Gas Cylinder Details </h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<div class="modal-body p-4">
<form action="#">
<!-- first row -->
<div class="form-group row">
<div class="col-md-4">
<label for="fullCylinderDate"> Full Cylinder Date</label>
<input type="date" class="form-control" id="fullCylinderDate" name="fullCylinderDate" value="" readonly>
</div>
<div class="col-md-4">
<label for="IGRNO"> IGRNO</label>
<input type="text" class="form-control" id="IGRNO" name="IGRNO" value="" readonly>
</div>
<div class="col-md-4">
<label for="emptyCylinderDate"> Empty Cylinder Date</label>
<input type="date" class="form-control" id="emptyCylinderDate" name="emptyCylinderDate" value="" readonly>
</div>
</div>
<!-- second row -->
<div class="form-group row">
<div class="col-md-4">
<label for="supplierName"> Supplier Name</label>
<input type="text" class="form-control" id="supplierName" name="supplierName" value="" readonly>
</div>
<div class="col-md-4">
<label for="invoiceNo"> Bill No/Invoice No </label>
<input type="text" class="form-control" id="invoiceNo" name="invoiceNo" value="" readonly>
</div>
<div class="col-md-4">
<label for="billDate"> Bill Date</label>
<input type="date" class="form-control" id="billDate" name="billDate" value="" readonly>
</div>
</div>
<!-- third row -->
<div class="form-group row">
<div class="col-md-4">
<label for="driverName"> Driver Name</label>
<input type="text" class="form-control" id="driverName" name="driverName" value="" readonly>
</div>
<div class="col-md-4">
<label for="vehicleNo"> Vehicle No</label>
<input type="text" class="form-control" id="vehicleNo" name="vehicleNo" value="" readonly>
</div>
<div class="col-md-4">
<label for="cylinderCount"> Cylinder Name </label>
<input type="text" class="form-control" id="cylinderName" name="cylinderName" value="" readonly>
</div>
</div>
<hr>
<!-- fourth row -->
<div class="form-group row">
<div class="col-md-4">
<label for="cylinderNo"> Cylinder Number </label>
<input type="text" class="form-control" id="cylinderNo" name="cylinderNo" value="" readonly>
</div>
<div class="col-md-4">
<label for="grossWeight"> Gross Weight </label>
<input type="text" class="form-control" id="grossWeight" name="grossWeight" value="" readonly>
</div>
<div class="col-md-4">
<label for="tareWeight"> Tare Weight </label>
<input type="text" class="form-control" id="tareWeight" name="tareWeight" value="" >
</div>
</div>
<!-- fifth row -->
<div class="form-group row">
<div class="col-md-4">
<label for="netWeight"> Net Weight (Gross-Tare) </label>
<input type="text" class="form-control" id="netWeight" name="netWeight" value="" readonly>
</div>
<div class="col-md-4">
<label for="actualWeight"> ActualWeight </label>
<input type="text" class="form-control" id="actualWeight" name="actualWeight" value="" readonly>
</div>
<div class="col-md-4">
<label for="shortage"> Shortage (Net-Actual) </label>
<input type="text" class="form-control" id="shortage" name="shortage" value="" readonly>
</div>
</div>
<span>* shortage value in positive indicates shortage And negative indicates excess </span>
<!-- hidden fields -->
<input type="hidden" name="id" id="id" >
</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="gasCylinderPending"
});
// 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>
<!-- while Opening gasPendingDetails modal -->
<script>
$(document).on('click', '.gas-pending-details', function() {
let row = $(this).closest("tr");
let fullCylinderDate = row.find("td:eq(0)").text().trim();
let IGRNO = row.find("td:eq(1)").text().trim();
let supplierName = row.find("td:eq(2)").text().trim();
let invoiceNo = row.find("td:eq(3)").text().trim();
let cylinderName = row.find("td:eq(4)").text().trim();
let cylinderNo = row.find("td:eq(5)").text().trim();
let grossWeight = row.find("td:eq(6)").text().trim();
let actualWeight = row.find("td:eq(7)").text().trim();
let billDate = row.find("td:eq(8)").text().trim();
let driverName = row.find("td:eq(9)").text().trim();
let vehicleNo = row.find("td:eq(10)").text().trim();
let cylinderCount = row.find("td:eq(11)").text().trim();
let id = row.find("td:eq(12)").text().trim();
let emptyCylinderDate = new Date().toISOString().slice(0, 10);
// Convert fullCylinderDate to YYYY-MM-DD
if (fullCylinderDate) {
let dateParts = fullCylinderDate.split("-");
fullCylinderDate = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
}
// Convert billDate to YYYY-MM-DD
if (billDate) {
let dateParts = billDate.split("-");
billDate = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
}
// Assign values to modal inputs
$('#fullCylinderDate').val(fullCylinderDate);
$('#IGRNO').val(IGRNO);
$('#emptyCylinderDate').val(emptyCylinderDate);
$('#supplierName').val(supplierName);
$('#invoiceNo').val(invoiceNo);
$('#cylinderName').val(cylinderName);
$('#cylinderNo').val(cylinderNo);
$('#grossWeight').val(grossWeight);
$('#actualWeight').val(actualWeight);
$('#billDate').val(billDate);
$('#driverName').val(driverName);
$('#vehicleNo').val(vehicleNo);
$('#cylinderCount').val(cylinderCount);
$('#id').val(id);
// Show the modal
$('#gasPendingDetails').modal('show');
});
</script>
<script>
$(document).on('change','#tareWeight',function(){
let tareWeight = $('#tareWeight').val();
let grossWeight = $('#grossWeight').val();
let netWeight = $('#netWeight').val();
let actualWeight= $('#actualWeight').val();
let shortage = $('#shortage').val();
netWeight = Number(grossWeight) - Number(tareWeight) ;
shortage = Number(netWeight) - Number(actualWeight) ;
$('#netWeight').val(netWeight);
$('#shortage').val(shortage);
})
</script>
<!-- while closing gasPendingDetails modal -->
<script>
$(document).ready(function(){
$('#gasPendingDetails').on("hide.bs.modal", function(e){
$('#fullCylinderDate').val(" ");
$('#IGRNO').val(" ");
$('#emptyCylinderDate').val(" ");
$('#supplierName').val(" ");
$('#invoiceNo').val(" ");
$('#cylinderName').val(" ");
$('#cylinderNo').val(" ");
$('#grossWeight').val(" ");
$('#actualWeight').val(" ");
$('#billDate').val(" ");
$('#driverName').val(" ");
$('#vehicleNo').val(" ");
$('#cylinderCount').val(" ");
$('#id').val(" ");
});
});
</script>
<!-- ajax call for gas Shortage -->
<script>
$(document).ready(function () {
$("#gasPendingDetails form").submit(function (event) {
event.preventDefault(); // Prevent form reload
let method = $("#gasPendingDetails").data("form"); // Get form type
// Collecting form data
let formData = {
fullCylinderDate: $('#fullCylinderDate').val(),
IGRNO: $('#IGRNO').val(),
emptyCylinderDate: $('#emptyCylinderDate').val(),
supplierName: $('#supplierName').val(),
invoiceNo: $('#invoiceNo').val(),
cylinderName: $('#cylinderName').val(),
cylinderNo: $('#cylinderNo').val(),
grossWeight: $('#grossWeight').val(),
tareWeight: $('#tareWeight').val(),
netWeight: $('#netWeight').val(),
actualWeight: $('#actualWeight').val(),
shortage: $('#shortage').val(),
id: $('#id').val(),
};
console.log(formData); // Debugging - Check if data is correct
$('#loader').show(); // Show loader
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/updateGasShortage", // Adjust endpoint as needed
data: JSON.stringify(formData), // Send data as JSON
contentType: "application/json",
dataType: "json",
success: function (response) {
if (response.status === "success") {
alert("Gas Shortage Data Updated Successfully!");
$('#gasPendingDetails').modal('hide'); // Close modal
window.location.reload();
} 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 request completed.");
$('#loader').hide();
}
});
});
});
</script>