EVOLUTION-NINJA

Edit File: drop_student.php

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

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

}
    #excelform{
        background: #A5DD9B;
        padding: 7px;
    }
    @media only screen and (max-width: 728px) {
    .Add-student {
        width: 100vw;
        display: block;
    }
}
#datatable thead tr {
    background-color: rgba(0, 72, 76, 1) !important;
    color: white;
}

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<main id="rightDiv">
    <div class="container-fluid">
        <div class="row">

<section class="fee-structure">
                <h3  style="color: rgba(0, 72, 76, 1);">Dropout Student List</h3>
                    <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                            aria-hidden="true"></i>&nbsp;Back</button>
                </section>
            </div>
        </div>
    </div>     
</script>

<div class="container-fluid">
                    <div class="row mt-3">
                        <div class="col-sm-12">

<table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>Admission No</th>
                            <th>Name</th>
                            <th>Mobile No</th>
                            <th>Header</th>
                            <th>Value Name</th>
                            <th>Admitted On</th>
                            <th>Total Fees</th>
                            <th>Paid </th>
                            <th>Dropout Students</th>
                            
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                </div>
                    </div>
                </div>
                <br />
                <div id="resultID"></div>
            </div>
        </div>
    </div>
    </section>
</main>
<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">Student Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

<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>Status : <span id="status"></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>
    </div>
</div>
    </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>
    
                   var role='<?php echo session()->get('role');?>'
 $(document).ready(function () {
    var table = $('#datatable').DataTable({
        pageLength: 20,
        ajax: {
            url: '<?php echo base_url("drop-student-list"); ?>',
            dataSrc: ''
        },
        columns: [
            { data: null },
            { data: 'id', visible: false },
            { data: 'admission_no' },
            { data: null, render: function(data, type, row) {
                    return row.first_name + ' ' + row.last_name;
                }
            },
            { data: 'mobile_no' },
            { data: 'header' },
            { data: 'value' },
            { data: 'created_at' },
            { data: 'total_fees' },
            { data: 'paid_fees' },
            { data: 'dropout', render: function(data, type, row) {
                    return `<input type="checkbox" class="dropout-checkbox" data-id="${row.id}" ${data == 1 ? 'checked' : ''}>`;
                }
            },
            {
                data: null,
                render: function (data, type, row) {
                    var access = '<div class="crud--buttons">';
                    if(role == 0) {
                        access += '<button class="v-e-d" id="view--details" onclick="viewstudent(' + row.id + ')">View Details</button>';
                        access += '<button class="btn edit--butt v-e-d" id="Edit--button" onclick="Editstudent(' + row.id + ')">Edit</button>';
                        access += '<button class="btn delete--butt v-e-d" id="delete--button" onclick="Deletestudent(' + row.id + ')">Delete</button>';
                    } else {
                        access += '<button class="v-e-d" id="view--details" onclick="viewstudent(' + row.id + ')">View Details</button>';
                    }
                    access += '</div>';
                    return access;
                }
            }
        ],
        rowCallback: function (row, data, index) {
            $('td:eq(0)', row).html(index + 1);
        },
        language: {
            emptyTable: "No data available"
        }
    });
    $('#datatable tbody').on('change', '.dropout-checkbox', function() {
        var id = $(this).data('id');
        var dropoutStatus = this.checked ? 1 : 0;
        updateDropoutStatus(id, dropoutStatus);
    });
});

function Editstudent(id) {
        window.location.href = '<?php echo base_url("student-edit");?>?id=' + id;
    }

function Deletestudent(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("student-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 () {
                                $('#datatable').DataTable().ajax.reload();
                            })
                        }
                    }
                })

}
        });
    }
    // view deltails
    function viewstudent(id) {
        $.ajax({
            type: 'post',
            url: '<?php echo base_url("student-details");?>?id=' + id,
            contentType: false,
            processData: false,
            success: function (response) {
                if (response.result == 1) {
                    var data=response.data;
                    $('#header_name').text(data.header);
                    $('#course').text(data.value);
                    $('#first').text(data.first_name);
                    $('#last').text(data.last_name);
                    $('#gender').text(data.gender);
                    $('#adno').text(data.admission_no);
                    $('#dob').text(data.dob);
                    $('#email').text(data.email);
                    $('#mobile').text(data.mobile_no);
                    $('#address').text(data.address);
                    $('#city').text(data.city);
                    $('#country').text(data.country);
                    $('#fees').text(data.total_fees);
                    $('#paid').text(data.paid_fees);
                    $('#counselor_name').text(data.counselor_name);
                    $('#adhaar_no').text(data.adhaar_no);
                    $('#status').text(data.status);
                    if(data.profile_image!==''){
                        $('#profile_image').attr('src', 'public/assets/studentimages/' + data.profile_image);
                    }else{
                        $('#profile_image').attr('src', 'public/assets/studentimages/default.jpg' );
                    }

$('#editModal').modal('show');
                }else{
                    Swal.fire({ icon: "question", title: response.message, showConfirmButton: false, timer: 3000 });
                }
            }
        });
    }

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

</script>

</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'); ?>