EVOLUTION-NINJA

Edit File: customer_report.php

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

/* 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">Customer Reports</div>
            
        </div>
    </div>
<br>
    
    
   
<form id="dateFilterForm" class="ml-3">
<div class="row">
       <div class="col-sm-3">
   <label for="">SCHEME</label>
         <select class="form-control" id="scheme" name="scheme">
  </select>
    </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"> <br><br>
    </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>Card Number</th>
            <th>Partner Name</th>
            <th>Mobile No</th>
            <th>Created At</th>
           
        </tr>
    </thead>
    <tbody></tbody>
</table>

</section>

</div>
</body>

$('#dateFilterForm').on('submit', function(e) {
        e.preventDefault(); 
        table.ajax.reload();
    });

$('#exportBtn').on('click', function () {
    // Get the data from the DataTable
    var data = table.rows({ search: 'applied' }).data().toArray();

var headers = ['SL No', 'Name', 'User Id', 'Scheme', 'Card Number', 'Promoter Name', 'Created At'];

var ws = XLSX.utils.aoa_to_sheet([headers].concat(data.map(function(row, index) {
        return [
            index + 1, // Serial number column
            row.name, 
            row.user_id, 
            row.scheme, 
            row.card_no, 
            row.promoter_name, 
            row.created_at
        ];
    })));

var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Customer Data");

XLSX.writeFile(wb, "customer_data.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>

</html>