EVOLUTION-NINJA

Edit File: expence_list.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'>
<style>
    #leftDiv {
        height: 2700px !important;
    }

.expense_list_block {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-bottom: 3px solid #8D8D8D;
    }

.expense_list-heading {
        margin: 0;
        padding: 3px;
        align-self: center;
        color: #003352;
        font-size: 20px;
        font-weight: 600;

}

.back-butt {
        color: #606060;
        font-size: 21px;
        font-weight: 500;
        outline: none;
        border: none
    }

.expense_list {
        background-color: #EFF3FC;
        padding: 15px 25px;
    }

.expense_list label {
        padding: 5px 10px;
        font-size: 15px;
        margin-block: 4px;
        font-weight: 500;
        color: #606060;
    }

.expense-list-submit-button {
        color: white;
        width: 40%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;
    }

@media screen and (max-width:728px) {

.expense_list,
        .expense_list_block {
            width: 97vw;
        }

.expense-list-submit-button {
            width: 80%;
            margin-top: 15px;
        }
    }

.v-e-d {
        font-size: 13px;
        font-weight: 600;
        border: none;
        outline: none;
        padding: 3px 8px;
        border-radius: 5px;
        min-width: 48px;
        color: white;
        margin-left: 10px;
    }

#view--details {
        background-color: #0065A3;
    }

#Edit--button {
        background-color: chocolate;
    }

#delete--button {
        background-color: #034c5f;
    }

/* -----------STUDENT OVERALL DETAILS-student-------------- */
    .overall-details-student {
        padding: 6px;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        height: auto;
        gap: 15px;
    }

.overall-details-student>div {
        padding: 4px 7px;
    }

.overall-details-student>div h5 {
        color: #123053;
        font-size: 17px;
        font-weight: 600;
    }

/* ------------STUDENT INFORMATION---------- */
    .student-information1 {
        height: auto;
        background-color: #219F94;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 7px 4px;
        position: relative;
        padding: 7px;
        border-radius: 4px;
    }

.student-information1 .stud-detail-model {
        padding: 3px 8px;
        color: white;
        font-size: 15px;
        font-weight: 400;

}

.student-information1 .stud-detail-model:last-child {
        position: relative;
        left: 30px;
    }

/* new function */
    .new-function {
        background-color: #219F94;
        color: white;
        padding: 12px 10px;
        border-radius: 6px;
        font-size: 16px;
        margin-left: 0px;
    }

.modal-dialog .modal-content {
        width: 113% !important;
        padding-right: 10px;

}

.crud--buttons {
        display: flex;
    }

.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;

}
    table.dataTable.no-footer {
    border-bottom: 1px solid #111;
    /* font-size: small; */
}
#datatable thead tr { 
    background-color: rgba(0, 72, 76, 1) !important;
    color: white;
}
.ex-rpt{
    background-color: #CDE8E5;
    border-radius: 10px;
    padding: 15px 20px;
}
.table-report .thead-std {
        background-color: #005054 !important;
        color: white;
    }

.table-report tbody tr td:nth-child(1) {
        background-color: #E2ECFF;
        color: black;
    }

.table-report tbody tr td:nth-child(2) {

color: black;
    }

.table-report tbody tr td:nth-child(3) {

color: black;
    }
</style>
<main id="rightDiv">
    <div class="container-fluid">
        <div class="row">

<section class="expense_list_block">

<h5 class="expense_list-heading">Expense List</h5>
                    
                    
                    
                    
                    <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                            aria-hidden="true"></i>&nbsp;Back</button>
                </section>

<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>
                                <div class="alert alert-warning mt-3" id='warning' role="alert">
                                    Default last 3 month Report
                                </div>
                            </form>
                        </section>
                        <table id="datatable" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SL no</th>
                                    <th>ID</th>
                                    <th>Expense Amount</th>
                                    <th>Expense Type</th>
                                    <th>Expense Towards Account</th>
                                    <th style="width: 90px;">Date </th>
                                    <th>Reference Number</th>
                                    <th>Payment By</th>
                                    <th>Payment Mode</th>
                                    
                                    <th>Vendor Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

<br />
                        <div id="resultID"></div>
                    </div>
                    
                </div>
                <div class="row">
                    <div class="col-sm-1"></div>
                <div class="col-sm-10 mt-3 ex-rpt">
                    <div class="row">
                        <div class="col-sm-6">
                        <h5 class="expense_list-heading">Expense Report</h5>
                        <h6 class="mt-2">Total Expense : <span id="totalexpense"></span></h6>
                        <table class="table table-bordered text-center table-report mt-3">
                            
                            <thead>
                                <tr>
                                    <th class="thead-std">Expense Type</th>
                                    <th class="thead-std">Amount</th>
                                    <th class="thead-std">Percentage</th>
                                </tr>
                            </thead>
                            
                            <tbody id="report-body">

</tbody>
                        </table>
                        </div>
                        <div class="col-sm-6" style="padding-top: 110px;">
                        
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-sm-12">
                        <div id="chart"></div>
                        </div>
                    </div>
                        
                        <div id="chart"></div>
                    </div>
                    </div>
            </div>
        </div>

</div>

</main>

</section>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/jquery.table2excel.js'); ?>"></script>
<script>
    // 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);
        });

function report(formData) {
            $.ajax({
                type: 'post',
                url: "<?php echo base_url('expense-list-data');?>",
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.result == 1) {
                        var data = response.data;
                        var expenseData = data.expense;
                        var totalexpense = data.total_expense;
                        // // Populate summary data
                        $('#totalexpense').text(data.total_expense);
                        var tbody = $('#report-body');
                        tbody.empty();
                        $.each(expenseData, function (header, count) {
                            if (header !== 'totalstudnets') {
                                var percentage = (totalexpense > 0) ? ((count / totalexpense) * 100).toFixed(2) : 0;
                                var row = '<tr>' +
                                    '<td>' + header + '</td>' +
                                    '<td>' + count + '</td>' +
                                    '<td>' + percentage + '%</td>' +
                                    '</tr>';
                                tbody.append(row);
                            }
                        });
                        var totalRow = '<tr>' +
                            '<td><strong>Total</strong></td>' +
                            '<td><strong>' + totalexpense + '</strong></td>' +
                            '<td><strong>100%</strong></td>' +
                            '</tr>';
                        tbody.append(totalRow);

var series = [];
                        var labels = [];

$.each(expenseData, function (header, count) {
                            series.push(count);
                            labels.push(header);
                        });
                        piechart(series, labels);

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: 'expence_amount' },
                                { data: 'expense_name' },
                                { data: 'expence_towards_account' },
                                { data: 'date' },
                                { data: 'reference_number' },
                                { data: 'payment_by' },
                                { data: 'payment_mode' },
                                { data: 'vendor_name' },
                                {
                                    data: null,
                                    render: function (data, type, row) {
                                        return `<div class="crud--buttons" >
                                                    <button class="btn edit--butt v-e-d"  id="Edit--button"  onclick='EditExpense(${row.id})' > <i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
                                                    <button class="btn delete--butt v-e-d" id="delete--button" onclick='DeleteExpense(${row.id})'> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
                                                </div>`;
                                    }
                                }
                            ],
                            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
                    });
                }
            });
        }
        let chartInstance;

function piechart(series, labels) {
            var chartElement = document.querySelector("#chart");

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

var options = {
                series: series,
                chart: {
                    width: 700,
                    type: 'pie',
                },
                labels: labels,
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

chartInstance = new ApexCharts(chartElement, options);
            chartInstance.render();
        }

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

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

}
    function DeleteExpense(id) {
        // console.log(id)
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: 'post',
                    url: '<?php echo base_url("expense-delete");?>?id=' + id,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.result == 1) {
                            Swal.fire({
                                title: "Deleted!",
                                text: "Data has been deleted.",
                                icon: "success",
                            }).then(function () {
                                $('#fee-report').submit();
                            })
                        }
                    }
                })

}
        });
    }

//excel 
        $(document).ready(function() {
    $('#excelform').submit(function(e) {
        e.preventDefault();
        
        var formData = new FormData($(this)[0]);
        
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url("import-expense-from-excel");?>',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                // Handle success response
                // console.log(response);
                Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                // $('#datatable').DataTable().ajax.reload();
            },
            error: function(xhr, status, error) {
                // Handle error response
                Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
            }
        });
    });
});

</script>

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

const rightDivHeight = rightDiv.offsetHeight;

leftDiv.style.height = rightDivHeight + 'px';
    };

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