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

735 lines
20 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 Entered </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 -->
<!-- least details -->
<th>Bill Date</th>
<th>Driver Name</th>
<th>Vehicle No</th>
<th>Cylinder Count</th>
<th>Gas Details</th>
</tr>
</thead>
<tbody>
<?php if(empty($gasCylinderEnteredList)){?>
<p align="center"> No Gas Cylinder Entered in the Given Dates..!!</p>
<?php }else{ ?>
<?php foreach($gasCylinderEnteredList 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>
<!-- cylinderdetails -->
<!-- least details -->
<!-- td:eq(5) -->
<td><?=$gasCylinder['DeliveryChellanDate']?></td>
<!-- td:eq(6) -->
<td><?=$gasCylinder['DriverName']?></td>
<!-- td:eq(7) -->
<td><?=$gasCylinder['VehicleNo']?></td>
<!-- td:eq(8) -->
<td><?=$gasCylinder['gasCylinderCount']?></td>
<!-- #gasEnteredDetails modal will open when clicking this button -->
<td>
<a href="#">
<i class="fa fa-edit gas-entered-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="gasEnteredDetails" 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="supplierName"> Supplier Name</label>
<input type="text" class="form-control" id="supplierName" name="supplierName" value="" readonly>
</div>
</div>
<!-- second row -->
<div class="form-group row">
<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 class="col-md-4">
<label for="driverName"> Driver Name</label>
<input type="text" class="form-control" id="driverName" name="driverName" value="" readonly>
</div>
</div>
<!-- third row -->
<div class="form-group row">
<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 class="col-md-4">
<label for="cylinderCount"> Cylinder Count </label>
<input type="text" class="form-control" id="cylinderCount" name="cylinderCount" value="" readonly>
</div>
</div>
<hr>
<!-- fourth row -->
<div id="cylinderDiv">
</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 -->
<!-- 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="gasCylinderEntered"
});
// 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 gasEnteredDetails modal -->
<script>
$(document).on('click', '.gas-entered-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 billDate = row.find("td:eq(5)").text().trim();
let driverName = row.find("td:eq(6)").text().trim();
let vehicleNo = row.find("td:eq(7)").text().trim();
let cylinderCount = parseInt(row.find("td:eq(8)").text().trim(), 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);
$('#supplierName').val(supplierName);
$('#invoiceNo').val(invoiceNo);
$('#billDate').val(billDate);
$('#driverName').val(driverName);
$('#vehicleNo').val(vehicleNo);
$('#cylinderName').val(cylinderName);
$('#cylinderCount').val(cylinderCount);
// Clear previous cylinder inputs
$('#cylinderDiv').html("");
// Generate cylinder input fields dynamically
if (cylinderCount > 0) {
let inputFields = `
<div class="form-group row">
<div class="col-md-4"><label>Cylinder Number</label> <span class="text-danger">*</span> </div>
<div class="col-md-4"><label>Gross Weight</label> <span class="text-danger">*</span> </div>
<div class="col-md-4"><label>Actual Weight</label> <span class="text-danger">*</span> </div>
</div>`;
for (let i = 1; i <= cylinderCount; i++) {
inputFields += `
<div class="form-group row dynamicField">
<div class="col-md-4">
<input type="text" class="form-control" name="cylinderNumber[]" placeholder="Cylinder ${i}" required>
</div>
<div class="col-md-4">
<input type="number" class="form-control" name="grossWeight[]" placeholder="Gross Weight ${i}" required>
</div>
<div class="col-md-4">
<input type="number" class="form-control" name="actualWeight[]" placeholder="Actual Weight ${i}" required>
</div>
</div>`;
}
$('#cylinderDiv').html(inputFields);
}
// Show the modal
$('#gasEnteredDetails').modal('show');
});
</script>
<!-- while closing gasEnteredDetails modal -->
<script>
$(document).ready(function(){
$('#gasEnteredDetails').on("hide.bs.modal", function(e){
$('#fullCylinderDate').val(" ");
$('#IGRNO').val(" ");
$('#supplierName').val(" ");
$('#invoiceNo').val(" ");
$('#billDate').val(" ");
$('#driverName').val(" ");
$('#vehicleNo').val(" ");
$('#cylinderName').val(" ");
$('#cylinderCount').val(" ");
$('#cylinderDiv').html("");
});
});
</script>
<!-- end of add gas shortage calculator -->
<!-- ajax call for gas Shortage -->
<script>
$(document).ready(function () {
$("#gasEnteredDetails form").submit(function (event) {
event.preventDefault(); // Prevent form reload
let method = $("#gasEnteredDetails").data("form"); // Get form type
// Collecting form data
let formData = {
fullCylinderDate: $("#fullCylinderDate").val(),
IGRNO: $("#IGRNO").val(),
supplierName: $("#supplierName").val(),
invoiceNo: $("#invoiceNo").val(),
billDate: $("#billDate").val(),
driverName: $("#driverName").val(),
vehicleNo: $("#vehicleNo").val(),
cylinderName: $('#cylinderName').val(),
cylinderCount: $("#cylinderCount").val(),
cylinders: [] // Array to store cylinder details
};
// Loop through dynamically generated cylinder inputs
$("#cylinderDiv .form-group.row.dynamicField").each(function () {
let cylinderData = {
cylinderNo : $(this).find("input[name='cylinderNumber[]']").val(),
grossWeight : $(this).find("input[name='grossWeight[]']").val(),
actualWeight: $(this).find("input[name='actualWeight[]']").val(),
};
formData.cylinders.push(cylinderData);
});
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 Saved Successfully!");
$('#gasEnteredDetails').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>