gcc_office_dump_project_files/frontend/cdwastecollect/reports.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}">

</head>
<style>

</style>
<body>
	<div class="wrapper">

		<!-- header top menu Start -->
		<header th:replace="~{fragments/modules/base/header :: header}"></header>
		<!-- header top menu end -->
		<div class="page-wrap">
			<!--=============== Left Menu side Start ================-->
			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
			<!--=============== Left side End ================-->


			<div class="main-content">
				<div class="container-fluid">
					<div class="page-header mb-2">
						<div class="row align-items-end">
							<div class="col-lg-8">
								<div class="page-header-title">
									<i class="fa fa-list-alt bg-blue"></i>
									<div class="d-inline">
										<h5>Reports</h5>
										<span>C&D Waste Collections Reports</span>
									</div>
								</div>
							</div>
							<div class="col-lg-4">
								<nav class="breadcrumb-container" aria-label="breadcrumb">
									<ol class="breadcrumb">
										<li class="breadcrumb-item"><a href="/gcc/index"><i
												class="ik ik-home"></i></a></li>
										<li class="breadcrumb-item" aria-current="page">C&D Waste Collections Reports</li>
										<li class="breadcrumb-item active" aria-current="page"> Reports</li>
									</ol>
								</nav>
							</div>
						</div>
					</div>
					
					
					<div class="row mt-4">
						<div class="col-12">
							<div class="card">
								<div class="card-header">
									<span style="font-size: medium;font-weight: bold;">Reports Filters</span>
								</div>
								<div class="card-body">
									<div class="row">
									
									<div class="col-sm-2 mb-2">
										<label for="startDate" class="form-label">From Date:<span class="text-danger">*</span></label>
					                    <input type="date" id="startDate" class="form-control">
									</div>
										
									<div class="col-sm-2 mb-2">
										<label for="endDate" class="form-label" >To Date:<span class="text-danger">*</span></label>
					                    <input type="date" id="endDate" class="form-control">
									</div>
										
									<div class="col-sm-2 mb-2 ">
										<label for="wastequantity" class="form-label">Select weight quantity<span class="text-danger">*</span>
										</label> <select id="wastequantity" class="form-control">
												
											<!-- dynamically get the quantities -->
										</select>
									</div>
						
									<div class="col-sm-2 mb-2">
										
										<label for="zoneDropdown" class="form-label"> Select
											Zone <span class="text-danger">*</span>
										</label> <select id="zoneDropdown" class="form-control">
											<option value="">Select Zone</option>
											<!-- Zones will be loaded dynamically -->
										</select>
										
									</div>
				
									<div class="row mt-4">
										<div class="col-md-12 mb-2 d-flex justify-content-center">
											<button type="submit" id="searchBtn" 
												class="btn btn-primary mx-2">Search</button>

											<button class="btn btn-danger mx-2" id="resetBtn" name="reset" type="button">Reset</button>

										</div>
									</div>
									
								</div>
							</div>
						</div>
					</div>
			
			         <div class="col-md-12">
							<div class="card">
							<div class="card-header">
								<span style="font-size: medium;font-weight: bold;">Reports List</span>
							</div>
							<div class="card-body">
								<div class="table-responsive" >

									<table id="ReportDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
										<thead class="thead-dark">
											<tr role="row">

												<th class="text-center no-sort">S.No</th>
												<th class="text-center">Request ID</th>
												<th class="text-center">Request Date</th>
												<th class="text-center">Name</th>
												<th class="text-center">Mobile Number</th>
												<th class="text-center">Area</th>
												<th class="text-center">Zone</th>
												<th class="text-center">Weight Quantity</th>
												<th class="text-center">Waste Type</th>
												<th class="text-center">Dumping Location</th>
												<th class="text-center">Actual Weight</th>																														
												<th class="text-center">Payment Status</th>
												<th class="text-center">Total Amount</th>
												
												
											</tr>
										</thead>
										<tbody>

										</tbody>
									</table>
								</div>
							</div>
						 </div>
						</div>
			
				</div>

			</div>

			<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
				            <span class="sr-only">Loading...</span>
				        </div>
				        <!-- Add the 'Please wait' text below the spinner -->
				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
				    </div>
				</div>
		</div>


			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
	
	</div>
</div>


	<!-- in the code use to show the download different type microsoft -->

	<!-- Include jQuery and Bootstrap JavaScript -->

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

	<script th:replace="~{fragments/modules/base/script :: script}"></script>
	<!--  sweet alert -->
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	<script type="text/javascript">
	
	
	
	 $(document).ready(function() {

     	var table = $('#ReportDatatable').DataTable({
             dom: 'Bftip',
             columnDefs: [
                 { targets: 'no-sort', orderable: false }
             ],
             lengthMenu: [
                 [50, 100, 200, 500, -1],
                 ['50 rows', '100 rows', '200 rows', 'Show all']
             ],
             scrollY: '80vh',
             scrollX: true,
             
             buttons: [
                 {
                     extend: 'pageLength',
                     className: 'btn btn-warning'
                 },
                 {
                     title: 'Data export',
                     extend: 'copyHtml5',
                     text: 'Copy',
                     className: 'btn btn-secondary',
                     id: 'copyBtn'
                 },
                 {
                     extend: 'excelHtml5',
                     text: 'Excel',
                     className: 'btn btn-secondary',
                     id: 'excelBtn'
                 },
                 {
                     extend: 'csvHtml5',
                     text: 'CSV',
                     className: 'btn btn-secondary',
                     id: 'csvBtn'
                 },
                 {
                     extend: 'pdfHtml5',
                     text: 'PDF',
                     className: 'btn btn-secondary',
                     id: 'pdfBtn'
                 }
             ],
             fixedHeader: true,
             autoWidth: false,
             scrollX: true, 
             responsive: false,
             paging:true,
             searching: true,
             select: false,
             processing: false
         });
     	
     // Event listener for From Date selection
     
     $(document).ready(function () {
    const today = new Date();
    const formattedToday = today.toISOString().split('T')[0];

    // Get date 30 days ago
    const pastDate = new Date();
    pastDate.setDate(today.getDate() - 30);
    const formattedPast = pastDate.toISOString().split('T')[0];

    // Set default values and limits
    $("#startDate").val(formattedPast);
    $("#startDate").attr("max", formattedToday);
    $("#endDate").val(formattedToday);
    $("#endDate").attr("min", formattedPast);
    $("#endDate").attr("max", formattedToday);

    // Load quantities
    $.ajax({
        url: "/gcc/api/dumpregistration/getquantity",
        type: "GET",
        success: function (data) {
            let quantityDropdown = $("#wastequantity");
            quantityDropdown.empty().append("<option value=''>Select Quantity</option>");
            $.each(data, function (index, item) {
                quantityDropdown.append(`<option value="${item.quantity}">${item.quantity}</option>`);
            });
        },
        error: function (xhr, status, error) {
            console.error("Error fetching quantities:", error);
        }
    });

    // Function to fetch and load data
    function loadReportData() {
        let startDate = $('#startDate').val();
        let endDate = $('#endDate').val();
        let zone = $('#zoneDropdown').val();
        let wasteQuantity = $('#wastequantity').val();

        const params = new URLSearchParams({
            fromDate: startDate,
            toDate: endDate
        });

        if (zone) {
            params.append("zone", zone);
        }

        if (wasteQuantity) {
            params.append("wastequantity", wasteQuantity);
        }

        $('#pageLoader').show();

        $.ajax({
            type: "GET",
            url: `/gcc/api/dumpregistration/getAllDetails?${params.toString()}`,
            contentType: "application/json",
            success: function (response) {
                $('#pageLoader').hide();

                if (Array.isArray(response) && response.length > 0) {
                    $('#ReportDatatable').DataTable({
                    	destroy: true,
                        searching: true,
                        paging: true,
                        info: true,
                        autoWidth: true, // IMPORTANT: let you control column width
                        scrollX: true,     // Enables horizontal scroll
                        responsive: true, // Disable built-in responsive which hides columns
                        data: response,
                        columns: [
                            { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
                            { data: 'refid', defaultContent: '-', className: 'text-center' },
                            { data: 'request_date', defaultContent: '-', className: 'text-center' },
                            { data: 'name', defaultContent: '-', className: 'text-center' },
                            { data: 'mobile_no', defaultContent: '-', className: 'text-center' },
                            { data: 'area', defaultContent: '-', className: 'text-center' },
                            { data: 'zone', defaultContent: '-', className: 'text-center' },
                            { data: 'quantity', defaultContent: '-', className: 'text-center' },
                            { data: 'waste_type', defaultContent: '-', className: 'text-center' },
                            { data: 'location', defaultContent: '-', className: 'text-center' },
                            { data: 'actual_weight', defaultContent: '-', className: 'text-center' },
                            { data: 'payment_status', defaultContent: '-', className: 'text-center' },
                            { data: 'total_charge', defaultContent: '-', className: 'text-center' }
                            
                        ],
                        dom: 'Bfrtip',
                        buttons: [
                            { extend: 'pageLength', className: 'btn btn-warning' },
                            { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
                            { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
                            { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
                            { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
                        ],
                        columnDefs: [{ targets: 'no-sort', orderable: false }],
                        lengthMenu: [
                            [50, 100, 200, 500, -1],
                            ['50 rows', '100 rows', '200 rows', 'Show all']
                        ],
                        scrollY: '80vh',
                        scrollX: true,
                        responsive: true
                    });
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No Data',
                        text: 'No data available for the selected criteria.'
                    });
                }
            },
            error: function () {
                $('#pageLoader').hide();
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Something went wrong while fetching the data.'
                });
            }
        });
    }

    // Bind search button to loadReportData
    $('#searchBtn').on('click', function (e) {
        e.preventDefault();

        let startDate = $('#startDate').val();
        let endDate = $('#endDate').val();

        if (!startDate || !endDate) {
            Swal.fire({
                icon: 'warning',
                title: 'Error',
                text: 'Please Select Both From Date and To Date',
                showConfirmButton: true,
                timer: 3000
            });
            return;
        }

        loadReportData();
    });

    // Load data for the last 30 days on page load
    loadReportData();
});
	
});
	 
	 $('#resetBtn').click(function () {
		    location.reload();
		});


	   
	 // Load all zones
	    $(document).ready(function () {
	        $.ajax({
	            url: '/gcc/api/dumpregistration/getzones',
	            type: 'GET',
	            success: function (zones) {
	            	
	  	                $.each(zones, function (index, zone) {
	                    $('#zoneDropdown').append('<option value="' + zone.id + '">' + zone.zone_name + '</option>');
	                });
	            },
	            error: function () {
	                alert('Failed to load zones.');
	            }
	        });
	    });
	 
	 
	 
	</script>

</body>
</html>