EVOLUTION-NINJA

Edit File: fee_reoprt.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'>

.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: 3090px !important;
}
@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;">Fee 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-7 pl-3 fee-ri-rpt">
            
            
            <form id="fee-report">

<div class="row">
                    <div class="col-sm-3">
                    <label>From</label>  
                    <input type="text" name="fromdate" id="fromdate" class="form-control" autocomplete="off" />
                    </div>
                    <div class="col-sm-3 ml-1">
                    <label>To</label> 
                    <input type="text" name="todate" id="todate" class="form-control" autocomplete="off" />
                    </div>
                       <div class="col-sm-3 ml-1  class="form-group"">
                        <br>
                        <select name="header" id="headerSelect" class="form-control w-100"></select>
                    </div>
                    <div class="col-sm-3 mt-4">
                    <button type="submit" class="btn btn-report">Get Report</button>
                     
                    </div>
               
                </div>
                <div class="alert alert-warning mt-3" id='warning' role="alert">
                  Default last 3 month Report
                </div>
                
                
               
            </form>
            <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>Admission Number</th>
                            <th>Name</th>
                            <th>Recipt Number</th>
                            <th>Paid On</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <br />
                <div id="resultID"></div>
            </div>
 
        </div>
        <div class="col-sm-4 overal-fee">
            <div class="main-box">
                <div class="total-div">
                    <h4>Overall Fees Report</h4>
                    <div class="row">
                        <div class="col-sm-4">
                            <h6>Total Fees </h6>
                        </div>
                        <div class="col-sm-3"><span id="total_amount_overall"></span></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <h6>Collected Fees </h6>
                        </div>
                        <div class="col-sm-3"><span id="collected_amount_overall"></span></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <h6>Drop Out Fees </h6>
                        </div>
                        <div class="col-sm-3"><span id="dropout_amount_overall"></span></div>
                    </div>
                    
                    <div class="row">
                        <div class="col-sm-4">
                            <h6>Balance </h6>
                        </div>
                        <div class="col-sm-3"><span id="overallbalace"></span></div>
                    </div>
                </div>
            </div>
            <div id="chart"></div>
            <br>
            <br>
             <br>
            <br>
                       <table class="table" style="border: 2px solid black;">
                <thead>
                    <tr>
                        <th>From </th>
                        <th>To</th>
                        
                        <th>Total Fees Collected</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="from"></td>
                        <td id="to"></td>
                        
                        <td id="collected" style="font-weight: 500;"></td>
                        
                    </tr>

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

</main>
</section>

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

var data = response.data;
                        console.log(data)
                        if(data!=undefined){
                             // Populate summary data
                        $('#from').text(data.from);
                        $('#to').text(data.to);
                        // $('#total').text(data.total_amount);
                        $('#collected').text(data.collected_amount);
                        // $('#balance').text(data.balance);
                        $('#total_amount_overall').text(data.total_amount_overall);
                        $('#collected_amount_overall').text(data.collected_amount_overall);
                        $('#dropout_amount_overall').text(data.drop_amount);
                        
                        $('#overallbalace').text(data.overallbalace);

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

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

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

}
</script>

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

const rightDivHeight = rightDiv.offsetHeight;

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

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