EVOLUTION-NINJA

Edit File: payment_report.php

<?php echo view('includes/headerSidebar'); ?>

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

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<script src="<?php echo base_url('public/assets/toastr/toastr.min.js');?>"></script>
<link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css');?>">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

/* Style table */
#datatable {
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px; /* Adjust font size */
    background-color: #fff;
}

/* Header styling */
#datatable thead {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
}

/* Row styling */
#datatable tbody tr {
    border-bottom: 1px solid #ddd;
}

#datatable tbody tr:hover {
    background-color: #f9f9f9; /* Highlight on hover */
}

/* Action buttons */
.crud--buttons .btn {
    margin: 0 5px; /* Small spacing between buttons */
    font-size: 12px; /* Smaller font for buttons */
    padding: 5px 10px; /* Compact button size */
    border-radius: 3px;
}

/* Eye icon button */
.view--butt {
    color: #fff;
    background-color: #17a2b8; /* Bootstrap 'info' color */
    border: none;
}

/* Menu icon button */
.menu--butt {
    color: #fff;
    background-color: #6c757d; /* Bootstrap 'secondary' color */
    border: none;
}

/* Icon sizes */
.fas {
    font-size: 14px;
    vertical-align: middle;
}

/* Serial number column */
#datatable td:first-child {
    text-align: center;
    font-weight: bold;
}

.mainheading {
        padding: 8px 17px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        color: #15283C;
        font-size: 18px;
        font-weight: 500;

}
    
    
</style>

<div id="main" class="p-4">
    
<section class="home-section fullpage">
    <div class="home-content">
        <i class='bx bx-menu'></i>
        
    </div>

<br>

<div class="row m-0">
        <div class="col-sm-12">
             <div class="mainheading mb-3">Payment Reports</div>
            
        </div>
    </div>
<br>
    
    
   
<form id="dateFilterForm" class="ml-3">
    <div class="row">
        <div class="col-sm-3">
            <label for="scheme">SCHEME</label>
            <select class="form-control" id="scheme" name="scheme">
                
            </select>
        </div>
        
      <div class="col-sm-3">
          <label for="user">Select User</label>
          <input type="text" class="form-control" id="user" name="user" placeholder="Search by name">
         <input type="hidden" id="user_id" name="user_id">
      </div>
        <div class="col-sm-3">
            <label for="fromDate">From Date:</label>
            <input type="date" class="form-control" id="fromDate" name="fromDate">
        </div>
        <div class="col-sm-3">
            <label for="toDate">To Date:</label>
            <input type="date" class="form-control" id="toDate" name="toDate">
        </div>

<div class="col-sm-3" style="margin-top:35px">
            <button type="submit" id="filterBtn" class="btn btn-success">Filter</button>
            <button id="exportBtn" class="btn btn-success">Export to Excel</button>
        </div>
    </div>
</form>

<table id="datatable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>SL No</th>
            <th>ID</th>
            <th>Name</th>
            <th>User Id</th>
            <th>Scheme</th>
            <th>Amount</th>
            <th>Created At</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

var table = $('#datatable').DataTable({
        pageLength: 20,
        ajax: {
            url: '<?php echo base_url("get-payment-report"); ?>',
            data: function(d) {
                var fromDate = $('#fromDate').val();
                var toDate = $('#toDate').val();
                var scheme = $('#scheme').val();
                var user= $('#user').val();
                
                
                console.log(user);

if (fromDate) d.fromDate = fromDate;
                if (toDate) d.toDate = toDate;
                if (scheme) d.scheme = scheme;
                if (user) d.user = user;

},
            dataSrc: function(json) {
                return json.data;
            },
            error: function(xhr, status, error) {
                console.log("AJAX request failed:");
                console.log("Status: " + status);
                console.log("Error: " + error);
                console.log("Response: " + xhr.responseText);
            }
        },
        columns: [
            { data: null },  // Serial number
            { data: 'id', visible: false },  // Hidden ID column
            { data: 'name' },
            { data: 'user_id' },
            { data: 'scheme_name' },
            { data: 'amount' },
            {
                data: 'created_at',
                render: function(data) {
                    var date = new Date(data);
                    var day = ("0" + date.getDate()).slice(-2);
                    var month = ("0" + (date.getMonth() + 1)).slice(-2);
                    var year = date.getFullYear().toString();
                    var hours = ("0" + date.getHours()).slice(-2);
                    var minutes = ("0" + date.getMinutes()).slice(-2);
                    return day + '-' + month + '-' + year + ' ' + hours + ':' + minutes;
                }
            },
        ],
        rowCallback: function(row, data, index) {
            $('td:eq(0)', row).html(index + 1);  // Serial number column
        },
        language: {
            emptyTable: "No data available"
        }
    });

// Filter and reload the table when form is submitted
    $('#dateFilterForm').on('submit', function(e) {
        e.preventDefault();

// Get filter values
        var scheme = $('#scheme').val();
        var fromDate = $('#fromDate').val();
        var toDate = $('#toDate').val();
        var user = $('#user').val();

if (!scheme && !fromDate && !toDate) {
            table.clear().draw();  // Clear the table
            return;
        }

table.ajax.reload();
    });

$('#exportBtn').on('click', function() {
        var data = table.rows({ search: 'applied' }).data().toArray();
        var headers = ['SL No', 'Name', 'User Id', 'Scheme Name', 'Amount', 'Created At'];

var ws = XLSX.utils.aoa_to_sheet([headers].concat(data.map(function(row, index) {
            return [
                index + 1,
                row.name, 
                row.user_id, 
                row.scheme_name, 
                row.amount, 
                row.created_at
            ];
        })));

var wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Payment Report");
        XLSX.writeFile(wb, "payment_report.xlsx");
    });
});
</script>

$(document).ready(function () {
    $.ajax({
        url: '<?php echo base_url("fetch-scheme"); ?>', 
        method: 'GET',
        success: function (response) {
          
            if (response.length > 0) {
                var options = '<option value="">Select Scheme</option>'; 
               
                $.each(response, function (key, value) {
                    options += `<option value="${value.id}">${value.scheme}</option>`;
                });
                $('#scheme').html(options); 
            } else {
                // alert('No funds found');
            }
        },
        error: function (xhr, status, error) {
            console.error("Error fetching scheme:", error);
        }
    });
});
</script>

$("#user").val(ui.item.value);

$('#datatable').DataTable().ajax.reload();

return false;
        }
    });
});
</script>

</html>