EVOLUTION-NINJA

Edit File: leadsreport.php

<?php echo view('includes/home_sidebar');?>
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>

.btn-fee {
        background-color: #005054;
        color: white;
    }

.btn-fee:hover {
        background-color: #005054;
        color: white;
    }

.btn-report {
        background-color: #6fa60b;
        color: white;
        float: right;
    }

.btn-report:hover {
        background-color: #6fa60b;
        color: white;

}

.datatable thead th {
        border-bottom: 3px solid #B5C9F2 !important;
    }

.dataTable .no-footer {
        border-bottom: 3px solid #B5C9F2 !important;
    }

.dataTable .odd {
        border-bottom: 3px solid #B5C9F2 !important;
    }

.dataTable.no-footer {
        border-bottom: 3px solid #B5C9F2 !important;
    }

.dataTable.display tbody tr.odd {
        background-color: #E2ECFF !important;
    }

.sub-table {
        padding: 10px 0px !important;
    }

#DataTables_Table_0 tr.odd>.sorting_1,
    td {
        background-color: #F6F9FF !important;
    }

#datatable thead tr {
        background-color: white !important;
    }

#datatable thead tr {
        /* background-color: #9191a1 !important; */
        background-color: rgba(0, 72, 76, 1) !important;
        color: white;
    }

/* .fee-ri-rpt {
    margin-left: 70px;
    margin-top: 10px;
} */
    #leftDiv {
        height: 1160px !important;
    }
    .led-rpview{
        background-color: #E2ECFF;
    padding: 20px 20px 0px 20px;
    border-radius: 10px;
    height: 400px;
    margin-left: 20px;
    margin-bottom: 30px;
    }
    @media only screen and (max-width: 600px) {
    #fee-report{
        padding:13px
    } 
    .fee-ri-rpt {
    margin-left: 0px; 
     margin-top: 3px; 
    
}    
}
</style>
<main id="rightDiv">
    <div class="row fee-structure">
        
        <div class="col-sm-8 fee-ri-rpt">
            <h2 style="color: #005054;">Leads 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="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-10  fee-ri-rpt">
            <div class="alert alert-warning mt-3" id='warning' role="alert">
                Default last 3 month Report
            </div>

<div class="col-sm-3 mt-4">
                        <button type="submit" class="btn btn-report">Get Report</button>
                        
                    </div>
                    <div class="col-sm-3 mt-4">
                        
                        <button id="export-to-excel-btn" class="btn btn-fee" onclick="exportToExcel()">Export to
                            Excel</button>
                    </div>
                </div>

</form>
            <div class="row mt-3">
                <!-- <div class="col-sm-8">

</div> -->
                <div class="col-sm-4">
                    <button id="converted-btn" class="btn btn-fee">Covnerted List</button>
                    <button id="unconverted-btn" class="btn btn-fee">Unconverted
                        List</button>
                </div>
            </div>
            <div class="tablediv">
                <h5 class="mt-4 mb-4">Fees Collection data</h5>
                <table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Date</th>
                            <th>Email</th>
                            <th>Mobile Number</th>
                            <th>Qualification</th>
                            <th>Gender</th>
                            <th>City</th>
                            <th>Converted</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <br />
                <div id="resultID"></div>
                <div class="row">
                    <div class="col-sm-4 led-rpview">
                    <div class="chart-div">
                    <h4>Total Leads <span id="total"></span></h4>
                    <h5>Unconverted Leads <span id="converted"></span></h5>
                    <h5> Converted Leads <span id="unconverted"></span></h5>
                    <h3></h3>
                    <h3></h3>
                    <div id='chart'></div>
                </div>
                    </div>
                </div>

</div>
        </div>
        <div class="col-sm-1"></div>
    </div>

</main>
</section>

// setTimeout(() => {
    //     $('#warning').hide();
    // }, 3000);
    $(document).ready(function () {
        $("#fromdate").datepicker({ dateFormat: 'yy-mm-dd' });
        $("#todate").datepicker({ dateFormat: 'yy-mm-dd' });

$('#fee-report').submit(function (e) {
            e.preventDefault();
            var formData = new FormData($(this)[0]);
            // $('#warning').hide();
            report(formData);
        });

$('#converted-btn').click(function () {
            var formData = new FormData($('#fee-report')[0]);
            formData.append('converted', 1);
            report(formData);
        });

$('#unconverted-btn').click(function () {
            var formData = new FormData($('#fee-report')[0]);
            formData.append('converted', 0);
            report(formData);
        });

function report(formData) {
            $.ajax({
                type: 'post',
                url: "<?php echo base_url('leads-report');?>",
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.result == 1) {
                        var existingChart = document.querySelector("#chart");
                        if (existingChart) {
                            if (existingChart.chart) {
                                existingChart.chart.destroy();
                            }
                            existingChart.innerHTML = '';
                        }
                        var data = response.data;

$('#total').text(data.total);
                        $('#unconverted').text(data.unconverted);
                        $('#converted').text(data.converted);
                        // console.log(data.total)
                        piechart(data.converted, data.unconverted);

if ($.fn.DataTable.isDataTable('#datatable')) {
                            $('#datatable').DataTable().clear().destroy();
                        }
                        // Populate DataTable
                        var tableData = response.table;
                        var table = $('#datatable').DataTable({
                            data: tableData,
                            columns: [
                                { data: null },
                                { data: 'id', visible: false },
                                { data: 'first_name' },
                                { data: 'last_name' },
                                { data: 'Date' },
                                { data: 'email' },
                                { data: 'mobile_no' },
                                { data: 'qualification' },
                                { data: 'gender' },
                                { data: 'city' },
                                {
                                    data: 'converted',
                                    render: function (data, type, row) {
                                        if (row.converted == 1) {
                                            return '<b>Yes</b>'
                                        } else {
                                            return '<b>No</b>'
                                        }
                                    }
                                }

rowCallback: function (row, data, index) {
                                $('td:eq(0)', row).html(index + 1);
                            },
                            language: {
                                emptyTable: "No data available"
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1000
                        });
                    }
                },
                error: function (xhr, status, error) {
                    Swal.fire({
                        icon: "error",
                        title: "An error occurred",
                        text: error,
                        showConfirmButton: false,
                        timer: 2000
                    });
                }
            });
        }
        function piechart(a, b) {
            var options = {
                series: [a, b],
                chart: {
                    width: 380,
                    type: 'pie',
                },
                labels: ['Total', 'Converted'],
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

var chart = new ApexCharts(document.querySelector("#chart"), options);
            chart.render();
        }

$('#fee-report').submit();
    });

function exportToExcel() {
        $(".datatable").table2excel({
            exclude: ".noExl",
            name: "Excel Document Name",
            filename: "Leads Report",
            fileext: ".xls",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });

}
</script>

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