EVOLUTION-NINJA

Edit File: Initial_pins_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">Initial Pins Report</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="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>
 
<br><br>

<br><br>
 
<table id="datatable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>SL No</th>
            <th>Month</th>
             <th>Scheme</th>
             <th>Repayment Pins</th>
            
            
        </tr>
    </thead>
    <tbody></tbody>
</table>

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

$('#exportBtn').on('click', function (e) {
            e.preventDefault();
            var data = table.rows({ search: 'applied' }).data().toArray();
            var headers = ['SL No', 'MONTH', 'Scheme Name', 'Repayment Pins'];

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

var wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Repayment Pins Report");
            XLSX.writeFile(wb, "Repayment_pins_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>

</html>