EVOLUTION-NINJA

Edit File: add_batch.php

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

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

.add-batch-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
    }

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

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

.star-mad {
        color: #c83434;
        font-size: 20px;
        position: relative;
        top: 2px;
    }

.inp-boxes-addbatch {
        border: none;
        box-shadow: 0px 0px 3px #ccc;
        background-color: white !important;
    }

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

.can-sub-button {
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

.crud--buttons {
        display: grid;
        grid-template-columns: repeat(2, 105px);
        grid-auto-rows: auto;
        gap: 5px;
    }

.edit--butt,
    .delete--butt,
    .add--value {
        font-size: 10px;
        font-weight: 500;
        background-color: #E44A24;
        color: #F2F6FF;
        padding: 3px 0px;
    }

.add--value {
        background-color: #0065A3 !important;

}

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

.add-batch-block,
        .add-batch {
            width: 97vw;
        }

.can-sub-button {
            margin-top: 15px;
        }

.view-submit-button {
            color: white;
            width: 60%;
            margin-top: 15px;
        }
    }

#datatable thead tr {
        /* background-color: #9191a1 !important; */
        background-color: rgba(0, 72, 76, 1) !important;
        color: white;
    }
    .tb-batstd{
        background-color: #B0EBB4 !important;
        /* color: white !important; */
    }
    .thead-std{
        background-color: #A8DF65 !important;
        /* color: white !important; */
    }
</style>

<main id="rightDiv">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                
                <section class="fee-structure">
                    <h3 style="color: rgba(0, 72, 76, 1);">Add Batch</h3>
                    <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                            aria-hidden="true"></i>&nbsp;Back</button>
                </section>
                <section>
                    <form id="addbatch">
                        <div class="add-batch">
                            <div class="row">
                                <div class="col-sm-3">
                                    <label for="">Header<span class="star-mad">*</span></label></br>
                                    <select class="form-select inp-boxes-addbatch" id="header" name="header" required>

</select>
                                </div>
                                <div class="col-sm-3">
                                    <label for="">Value<span class="star-mad">*</span></label></br>
                                    <select class="form-select inp-boxes-addbatch" id="description" name="value"
                                        required>

</select>
                                </div>
                                <div class="col-sm-3">
                                    <label for="">Trainer<span class="star-mad">*</span></label></br>
                                    <select class="form-select inp-boxes-addbatch" name="trainer" id="trainer" required>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                </div>

</div>
                            <div class="row">
                                <div class="col-sm-3">
                                    <label for="batch-startdate">Batch Start Date <span
                                            class="star-mad">*</span></label><input type="date" placeholder=""
                                        name="start_date" id="startdate" class="form-control inp-boxes-attendance"
                                        required />
                                </div>
                                <div class="col-sm-3">
                                    <label for="batch-enddate">Batch End Date<span
                                            class="star-mad">*</span></label><input type="date" placeholder=""
                                        name="end_date" id="enddate" class="form-control inp-boxes-attendance"
                                        required />
                                </div>

<div class="col-sm-3 can-sub-button">
                                    <button type="submit" class="submit-student-form view-submit-button mx-3"
                                        id="app-btn">Add Batch</button>
                                    
                                </div>
                                <div class="col-sm-3"> </div>
                              
                       
                            </div>
                        </div>
                    </form>
                </section>
                <div class="table-div">
                    <br>
                 <br>
                <div class="col-sm-3">
                            <label for="course">Batch<span class="star-mad">*</span></label></br>
                             <select class="form-select inp-boxes-addbatch" id="course-filter">
                             <option value="">Select Batch From The List </option>
                             <option value="39">English</option>
                             <option value="37">Software Engineering</option>
                           </select>
                             </div>
                             <br>
                             <br>
                    <h4>Batch list</h4>
                    <table id="datatable" class="display mt-3" style="width:100%">
                        <thead>
                            <tr>
                                <th>SL no</th>
                                <th>ID</th>
                                <th>Batch No</th>
                                <th>Header</th>
                                <th>Value</th>
                                
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

</div>
    </div>

</div>

</main>
</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">Batch Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table" style="border: 1px solid;">
                    <thead class="thead-dark" >
                        <tr>
                            <th class="tb-batstd">Batch Number</th>
                            <th class="tb-batstd">Trainer</th>
                            <th class="tb-batstd">Total Students</th>
                            <th class="tb-batstd">Start Date</th>
                            <th class="tb-batstd">End Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span id="batch_no"></span></td>
                            <td><span id="trainer_name"></td>
                            <td><span id="total_students"></span></td>
                            <td><span id="b_start"></span></td>
                            <td><span id="b_end"></span></td>
                        </tr>
                    </tbody>
                </table>
                
                <h5>Student List</h5>
                    
                
                <table class="table     table-report  mt-3" style="border: 1px solid;">
                    
                    <thead>
                        <tr>
                            <th class="thead-std">Student Name</th>
                            <th class="thead-std">Admission Number</th>
                        </tr>
                    </thead>
                    
                    <tbody id="report-body">

</tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<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 table = $('#datatable').DataTable({
            ajax: {
                url: '<?php echo base_url("batches-list"); ?>',
                dataSrc: '',
                data: function(d) {
                    d.course = $('#course-filter').val();
                }
            },
            columns: [
                { data: null },
                { data: 'id', visible: false },
                { data: 'batch_no' },
                { data: 'header_name' },
                { data: 'value_name' },
                { data: 'start_date' },
                { data: 'end_date' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `<div class="crud--buttons">
                            <button class="btn add--value toggle-sub-row" onclick="addstudentsbatch(${row.id})">Add Students + </button>
                            <button class="btn add--value toggle-sub-row" onclick="removestudentsbatch(${row.id})">Remove Students - </button>
                            <button class="btn edit--butt" onclick='Edit(${row.id})'>Edit</button>
                            <button class="btn delete--butt" onclick='View(${row.id})'>View Details</button>
                        </div>`;
                    }
                }
            ],
            rowCallback: function (row, data, index) {
                $('td:eq(0)', row).html(index + 1);
            },
            language: {
                emptyTable: "No data available"
            }
        });

$('#course-filter').change(function() {
            table.ajax.reload();  
        });
    });
    function addstudentsbatch(id) {
        window.location.href = '<?php echo base_url("add-student-batch");?>?id=' + id;
    }
    function removestudentsbatch(id) {
        window.location.href = '<?php echo base_url("remove-student-batch");?>?id=' + id;
    }
    function Edit(id) {
        window.location.href = '<?php echo base_url("edit-batch");?>?id=' + id;
    }

function View(id) {
        $.ajax({
            type: 'post',
            url: '<?php echo base_url("batch-details");?>?id=' + id,
            contentType: false,
            processData: false,
            success: function (response) {
                if (response.result == 1) {
                    var data = response.data;
                    var tdata = response.table;
                    $('#batch_no').text(data.batch_no);
                    $('#trainer_name').text(data.trainer_name);
                    $('#total_students').text(data.count);
                    $('#b_start').text(data.start_date);
                    $('#b_end').text(data.end_date);
                    var tbody = $('#report-body');
                    tbody.empty();
                    $.each(tdata, function (students, studentsdata) {
                        var row = '<tr>' +
                            '<td>' + studentsdata.first_name +' '+ studentsdata.last_name+ '</td>' +
                            '<td>' + studentsdata.admission_no + '</td>' +
                            '</tr>';
                        tbody.append(row);
                    });
                    $('#editModal').modal('show');

} else {
                    console.log('failed to fetch batch details');
                }
            }
        });
    }

// Application form 
    $(document).ready(function () {
        $('#addbatch').submit(function (e) {
            e.preventDefault();

})

$(document).ready(function(){
        $.ajax({
            type: 'GET',
            url: '<?php echo base_url("get-trainer");?>',
            dataType: 'json',
            success: function (response) {
                if (response.result == 1) {
                    var options = response.data;
                    var selectElement = $('#trainer');
                    selectElement.empty();
                    $('#trainer').html('<option value="" selected >Select Trainer</option>');
                    $.each(options, function (index, option) {
                        selectElement.append($('<option>', {
                            value: option.id,
                            text: option.first_name
                        }));
                    });
                } else {
                    $('#trainer').html('<option value="">Employees Not Found</option>');
                }
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    })
</script>

const rightDivHeight = rightDiv.offsetHeight;

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

</script>

<script>
    function goBack() {
        window.location.href = 'dashboard';
    }
</script>

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