EVOLUTION-NINJA

Edit File: fee_collection.php

<?php echo view('includes/home_sidebar');?>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    /* --new---- */
    .new-function {
        background-color: #219F94;
        color: white;
        padding: 12px 10px;
        border-radius: 6px;
        font-size: 16px;
        margin-left: 0px;
    }

#main-div {
        display: none;
    }

.cou-det {
        font-family: poppins;
        font-weight: 600;
        color: #057137;
    }

.fee-modal label {
        font-size: 16px;
        font-weight: 600;
        color: #002600;
    }

.modal-content {
        background-color: #ebe7ee;
    }

.modal-header {
        border-bottom: 1px solid black;
    }

.modal-footer {
        border-top: 1px solid black;
    }

.btn-primary-color {
        background-color: #097358fa;
        color: white;
    }

.btn-secondary-color {
        color: white;
        background-color: #8a7348;
    }

.btn-primary-color:hover {
        background-color: #097358fa;
        color: white;
    }

.btn-secondary-color:hover {
        color: white;
        background-color: #8a7348;
    }

#leftDiv {
        height: 1160px !important;
    }

.cllt-rep {
        background-color: #C84B31;
        font-size: 12px;
        color: white;
    }

.cllt-rep:hover {
        background-color: #C84B31;
        font-size: 12px;
        color: white;
    }

</style>
<main id="rightDiv">
    <div class="container-fluid">
        <div class="row">

<section class="fee-collection">

<h5 class="fee-col-heading">Fee Collection</h5>
                    
                        
                        
                        
                    
                    <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left "
                            aria-hidden="true"></i>&nbsp;Back</button>

</section>
                
                <section id="fee-collection-details">
                    <div class="fee-collection-detail">

</div>
                    <div class="addHeader-detail b1">
                        <form id="searchform">
                            <div class="row">
                                <div class="col-sm-4"><label>Admission No</label><input type="text" placeholder=""
                                        id="admisson_np" name="admisson_no" class="inp-boxes-addHeader form-control" />
                                </div>
                                <div class="col-sm-4"><label>Name</label><input type="text" placeholder="" id="name"
                                        name="name" class="inp-boxes-addHeader form-control" /></div>
                                <div class="col-sm-4"><label>Phone Number</label><input type="text" placeholder=""
                                        id="phone_no" name="phone_no" class="inp-boxes-addHeader form-control" /></div>
                            </div>
                            <div class="addHeader-detail subm"><button type="submit" id='ad-btn'
                                    class="fee-collection-submit mt-3" id="fee-coll-subm">Submit</button>
                            </div>
                        </form>

</div>
                </section>

</div>

<section id="main-div">
                <div class="mt-4 FEEZ-BUTTON ">
                    <button class="collect-feez-btn btn" id='addfees'>Collect Fee</button>
                </div>
                <div class="row">
                    <h4>Student Details</h4>
                    <div class="col-sm-6">
                        <div class="row new-function">
                            <div class="col-sm-6">
                                <p>Course : <span id="header_name"></span></p>
                                <p>First Name : <span id="first"></span> </p>
                                <p>Gender : <span id="gender"></span> </p>
                                <p>DOB : <span id="dob"></span> </p>
                                <p>Aadhaar Number : <span id="adhaar_no">pending</span> </p>
                                <p>Address : <span id="address"></span> </p>
                                <p>Country : <span id="country"></span> </p>
                                <p>Paid : <span id="paid"></span> </p>
                                <p> </p>
                                <p> </p>
                            </div>
                            <div class="col-sm-6">

<p>Value : <span id="course">
                                    </span> </p>
                                <p>Last Name : <span id="last"></span> </p>
                                <p>Admission ID : <span id="adno"></span> </p>
                                <p>Email : <span id="email"></span> </p>
                                <p>Mobile : <span id="mobile"></span> </p>
                                <p>City : <span id="city"></span> </p>
                                <p>Total Fess : <span id="fees"></span> </p>
                                <p>Counselor Name : <span id="counselor_name"></span> </p>
                                <p><img src="" id="profile_image" style="height: 100px; width: 120px;" alt=""></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <h5 class="cou-det"> Course details</h5>
                        <dl>
                            <dt><span id="header">Software Engineer</span></dt>
                            <dd><span id="value"> &nbsp;&nbsp;&nbsp; fullstact Developer</span></dd>
                        </dl>
                        <h5 class="cou-det">Payment Details </h5>
                        <div class="row">
                            <div class="col-sm-3">
                                Total amount :
                            </div>
                            <div class="col-sm-4">
                                <b id="course-amount"></b>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                Balance Amount :
                            </div>
                            <div class="col-sm-4">
                                <b id="balance"></b>
                            </div>
                        </div>

</div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <h5 class="mt-3">Paid Payment Details </h5>
                        <table id="datatable" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SL no</th>
                                    <th>id</th>
                                    <th>Admission Number</th>
                                    <th>Recipt Number</th>
                                    <th>Payment ID</th>
                                    <th>Amount</th>
                                    <th>Payment Mode</th>
                                    <th>Collected By</th>
                                    <th>Paid date</th>
                                    <th>Recipt</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

</div>
    </div>
    </section>
    
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">COLLECT FEES</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form id="editFormheader">
                    <div class="modal-body fee-modal">
                        <label for="admison">Admission Number</label>
                        <input type="text" name="admission_no" id="admison" class="form-control" readonly><br>
                        <label for="am">Amount</label>
                        <input type="number" name="amount_paid" id="am" class="form-control" required><br>
                        <input type="hidden" name="sid" id="student_id" />
                        <label for="modepy">Mode Of Payment</label>
                        <select name="modeofpament" id="" class="form-control" required>
                            <option value="" selected>Select</option>
                            <option value="Cash">Cash</option>
                            <option value="Card">Card</option>
                            <option value="Online">Online</option>
                            <option value="QR code">QR code</option>
                        </select>
                        <br>
                        <label for="des">Description</label>
                        <textarea name="payment_description" rows="3" cols="20" class="form-control" id=""
                            required></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary-color" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id='collect-btn' class="btn btn-primary-color">Collect</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>

<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>
    $(document).ready(function () {
        var isToggled = false;

$('#searchform').submit(function (e) {
            e.preventDefault();
            var formData = new FormData($(this)[0]);

fetchStudentDetails(formData);

$.ajax({
                type: 'POST',
                url: '<?php echo base_url("fees-collection-individual"); ?>',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    if ($.fn.DataTable.isDataTable('#datatable')) {
                        $('#datatable').DataTable().clear().destroy();
                    }

$('#datatable').DataTable({
                        data: response,
                        columns: [
                            { data: null },
                            { data: 'id', visible: false },
                            { data: 'admission_no' },
                            { data: 'recipt_no' },
                            { data: 'payment_id' },
                            { data: 'amount' },
                            { data: 'mode_of_pament' },
                            { data: 'collected_by' },
                            { data: 'created_at' },
                            {
                                data: null,
                                render: function (data, type, row) {
                                    return `<div class="crud--buttons">
                                    <button class="btn cllt-rep" onclick=Recipt(${row.id})>Collect Recipt</button>
                                </div>`;
                                }
                            }
                        ],
                        rowCallback: function (row, data, index) {
                            $('td:eq(0)', row).html(index + 1);
                        },
                        language: {
                            emptyTable: "No data available"
                        }
                    });
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });

$(document).ready(function () {

//to reset
        $('#addfees').click(function () {
            $('#editModal').modal('show');
        });

$('#editFormheader').submit(function (e) {
            e.preventDefault();
            $('#collect-btn').text('Collecting...');
            $('#collect-btn').attr('disabled', 'disabled');
            var formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url("add-fees");?>',
                data: formData,
                success: function (response) {
                    if (response.result == 1) {
                        $('#editModal').modal('hide');
                        Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                        $('#datatable').DataTable().ajax.reload();
                        var admissionno = $('#admisson_np').val();
                        if (admissionno) {
                            fetchStudentDetails(admissionno);
                        } else {
                            console.log('ad is not found')
                        }
                        $('#editFormheader')[0].reset();
                        $('#collect-btn').removeAttr('disabled').text("Collect");
                    } else {
                        Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                        $('#collect-btn').removeAttr('disabled').text("Collect");
                        $('#editModal').modal('hide');

}

},
                error: function (xhr, textStatus, errorThrown) {
                    console.error(xhr.responseText);
                }
            });
        });

})

//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-fees-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 });
               
                },
                error: function (xhr, status, error) {
                
                    Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                }
            });
        });
    });

function Recipt(id) {
        window.location.href = '<?php echo base_url("receipt");?>?id=' + id;
    }

</script>

$('#admisson_np').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<?php echo base_url("autocomplete-admission-no"); ?>',
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        minLength: 2 
    });

$('#name').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<?php echo base_url("autocomplete-name"); ?>',
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        minLength: 2
    });

$('#phone_no').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<?php echo base_url("autocomplete-mobile-no"); ?>', 
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        minLength: 2
    });
});
</script>

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