EVOLUTION-NINJA

Edit File: followUpReport.php

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

<main id="rightdiv">
    <div class="container-fluid">
        <div class="row">
                <div class="row fee-structure">
                
                <div class="col-sm-8 fee-ri-rpt">
                    <h2 style="color: #005054;">Follow-Up Report</h2>
                </div>
                <div class="col-sm-1">

</div>
                <div class="col-sm-2">
                    <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                            aria-hidden="true"></i>&nbsp;Back</button>
                </div>
            </div>  
            <div class="col-sm-12">
                <section class="spec-main last_body">
                    <div class="row">
                        <div class="col-sm-12 ">
                            
                            <div id="jaytablist33" >
                                <div class="grid_div"></div>
                                <div id="list2">
                                    <div class="mb-4 strtser">
                                        <div class="row date_input">
                                            
                                        <div class="row mt-4 date_input">
                                            <div class="col-sm-3 st_dat">
                                                <label for="start_date" class="start "><b>Start Date:</b></label>
                                                <input type="text" id="start_date" class="form-control" name="start_date">
                                            </div>
                                            <div class="col-sm-3">
                                                <label for="end_date" class="end"><b>End Date:</b></label>
                                                <input type="text" id="end_date" class="form-control"  name="end_date">
                                                
                                            </div>
                                            <div class="col-sm-2 mt-4">
                                            <button id="apply_date_filters" class="apply_filter  ml-2 ">Search by Date</button>
                                            <span id="clear_filters" class="ml-2"><i class="fa fa-window-close clear" aria-hidden="true"></i></span><br />
                                            </div>
                                            <div class="col-sm-3 mt-4">
                                            <button class="apply_filter ml-2" onclick="exportToPdf()">Export to PDF</button>
                                        </div>
                                        </div>
                                    </div>

<table id="followUpTable" class="table table-striped">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th class="th-dark">SL</th>
                                                <th class="th-dark">Follow-up ID</th>
                                                <th class="th-dark">Lead ID</th>
                                                <th class="th-dark">Today's Date</th>
                                                <th class="th-dark">Today's Time</th>
                                                <th class="th-dark">Follow-Up Date</th>
                                                <th class="th-dark">Follow Up Remarks</th>
                                                <th class="th-dark">Followed Up By</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                           
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="pager3"></div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <div id="leadsPieChartContainer">
        <div>
            <canvas id="leadsPieChart"></canvas>
        </div>
    </div>
</main>
</section>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid.css'); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid-bootstrap.css'); ?>" />
<script src="<?php echo base_url('public/assets/js/jquery-ui.js'); ?>" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>

$(document).ready(function() {
    $("#start_date, #end_date").datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
    });

fetchFollowUpGraph(); 
            },
            error: function(error) {
                console.error('Error fetching data:', error);
            }
        });
    }

var leadsPieChart;

function fetchFollowUpGraph() {
        $.ajax({
            url: '<?php echo base_url("followup-graph"); ?>',
            method: 'GET',
            data: {
                start_date: $("#start_date").val(),
                end_date: $("#end_date").val(),
                case_id: $("#case_id").val()  // Include case_id in the data
            },
            success: function(data) {
                var labels = [];
                var counts = [];

data.forEach(function(item) {
                    labels.push('Lead ID: ' + item.leads_id);
                    counts.push(item.count);
                });

var ctx = document.getElementById('leadsPieChart').getContext('2d');

if (leadsPieChart) {
                    leadsPieChart.destroy();
                }

leadsPieChart = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Leads Count',
                            data: counts,
                            backgroundColor: [
                                'rgba(31, 119, 180, 0.6)',
                                'rgba(255, 127, 14, 0.6)',
                                'rgba(44, 160, 44, 0.6)',
                                'rgba(214, 39, 40, 0.6)',
                                'rgba(148, 103, 189, 0.6)',
                                'rgba(140, 86, 75, 0.6)'
                            ],
                            borderColor: [
                                'rgba(31, 119, 180, 1)',
                                'rgba(255, 127, 14, 1)',
                                'rgba(44, 160, 44, 1)',
                                'rgba(214, 39, 40, 1)',
                                'rgba(148, 103, 189, 1)',
                                'rgba(140, 86, 75, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Leads Count Pie Chart'
                            }
                        }
                    }
                });
            },
            error: function(error) {
                console.error('Error fetching data:', error);
            }
        });
    }

$("#apply_date_filters, #apply_case_id_filter").click(function () {
        fetchFollowUpData();
    });

$("#clear_filters").click(function () {
        $("#start_date").val('');
        $("#end_date").val('');
        $("#case_id").val('');
        fetchFollowUpData();
    });

fetchFollowUpData();
});

// ========= export pdf ===========//
    async function exportToPdf() {
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF('p', 'mm', 'a4');
            var graphElement = document.getElementById('leadsPieChart');
            const graphCanvas = await html2canvas(graphElement, {
                scale: 2,
                useCORS: true
            });
            var imgData = graphCanvas.toDataURL('image/png');
            var imgWidth = graphElement.offsetWidth * 0.264583; 
            var imgHeight = graphElement.offsetHeight * 0.264583;
            doc.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
            var tableYPosition = imgHeight + 20;
            doc.autoTable({
                html: '#followUpTable',
                startY: tableYPosition,
                theme: 'striped',
                styles: {
                    overflow: 'linebreak',
                }
            });
            doc.save('Follow-Up Report.pdf');
        }
</script>

<script>
    function goBack() {
        window.location.href = "<?php echo base_url('report-page');?>";
    }
</script>

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }

th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

th {
        background-color: #f2f2f2;
    }

.apply_filter {
        background-color: rgba(0, 72, 76, 1);
        cursor: pointer;
        color: #fff;
        border: 0;
        padding: 5px 12px;
        border-radius: 8px;
    }

.apply_filter:hover {
        background-color: #45a049;
    }

.clear {
        cursor: pointer;
        color: red;
    }

#followUpTable {
        margin-top: 20px;
    }

.back-butt {
        color: black;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }

#leadsPieChartContainer{
        width:350px;
        height:350px;
        /* margin-left:500px; */
    }
</style>