EVOLUTION-NINJA

Edit File: view_attendance.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'>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
    /* uplaod image styles------  */
    .div-img--contents {
        width: 180px;
        height: 180px;
    }

.img-wrapper {
        width: 100%;
        height: 100%;
        border: 0.5px solid #ccc;
        position: relative;

}

.img-wrapper .img--upload {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;

}

.img-wrapper .img--upload #up-img {
        width: 180PX;
        height: 180PX;
        /* object-fit: contain; */

}

.custom-btn {
        background-color: #0065A3;
        color: white;
        border: none;
        outline: none;
        width: 100%;
        padding: 4px 10px;
        margin: 0;
        margin-top: 8px;

}

.custom-btn:hover {
        background-color: #0065A3;
        color: white;

}

#leftDiv {
        height: 960px !important;
    }

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

.div-img--contents {
            width: 157px;
            height: 157px;
            margin-bottom: 57PX;
        }
    }

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

#leftDiv {
        height: 1100px !important;
    }

#add-more-file {
        position: absolute;
        right: -13px;
        top: 35px !important;
        font-size: 24px;
    }

.add-timetable-button {
        color: white;
        width: 15%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;
        float: inline-end;
        position: absolute;
        bottom: -30px;
        right: 0;
    }

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

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

.add-timetable-button {
            width: 50%;
            right: auto;
        }
    }

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

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

.checkmark {
        display: block;
        width: 30px;
        height: 30px;
        background-color: #ddd;
        border-radius: 10px;
        position: relative;
        transition: background-color 0.4s;
        overflow: hidden;
        cursor: pointer;
    }

.check:checked~.checkmark {
        background-color: #08bb68;
    }

.checkmark::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 10px;
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%) rotateZ(40deg) scale(10);
        opacity: 0;
        transition: all 0.4s;
    }

.check:checked~.checkmark::after {
        opacity: 1;
        transform: translate(-50%, -50%) rotateZ(40deg) scale(1);
    }

#main-div {
        display: none;
    }
    .fee-ri-rpt {
    margin-left: 70px;
    margin-top: 10px;
}
    #leftDiv {
    height: 1030px !important;
}
@media only screen and (max-width: 600px) {
    #fee-report{
        padding:13px
    } 
    .fee-ri-rpt {
    margin-left: 0px; 
     margin-top: 3px; 
    
}     
}
#attendance-table th{
    background-color: #25705b;
    color: white;
}
.btn-report{
    background-color: #ffa70087;
    color: black;
}
.btn-report:hover{
    background-color: #ffa70087;
    color: black;
}
</style>
<main id="rightDiv">
    <section class="Add-student row">

<div class="col-sm-4">
            <h3 style="color: rgba(0, 72, 76, 1);">View Attendance</h3>
        </div>
        <div class="col-sm-7"></div>
        <div class="col-sm-1">
            <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                    aria-hidden="true"></i>&nbsp;Back</button>
        </div>
   
    </section>
    <section>
        <form id="attendance-report">
            <div class="container">
            <div class="row mt-3">
                <div class="col-sm-4">
                    <label for="selectbatch">Select Batch<span class="star-mad">*</span></label></br>
                    <select class="form-select inp-boxes-addtimetable" name="batch_id" id="selectbatch" required>
        
                    </select>
                </div>
            </div>
            
            <div class="row mt-3">
                <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 mt-4">
             
                </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 7 Days Report
            </div>
            </div>
        </form>
    </section>
    <section id="main-div">
        <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
                <table class="table table-bordered  table-report mt-3" id="attendance-table">

</table>

</div>
        </div>
    </section>

</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>
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: '<?php echo base_url("get-batch-attendance");?>',
            dataType: 'json',
            success: function (response) {
                if (response.result == 1) {
                    var options = response.data;
                    var selectElement = $('#selectbatch');
                    selectElement.empty();
                    $('#selectbatch').html('<option value="" selected >Select Batch</option>');
                    $.each(options, function (index, option) {
                        selectElement.append($('<option>', {
                            value: option.id,
                            text: option.batch_no
                        }));
                    });
                } else {
                    $('#selectbatch').html('<option value="" disabled selected hidden>Select Batch</option>');
                }
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });

</script>
<script>
    $(document).ready(function () {
        $("#fromdate").datepicker({ dateFormat: 'yy-mm-dd' });
        $("#todate").datepicker({ dateFormat: 'yy-mm-dd' });

// setTimeout(() => {
        //     $('#warning').hide();
        // }, 3000);

var isToggled = false;

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

$('#selectbatch').change(function () {
            $('#attendance-report').submit();
        });

function report(formData) {
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url("get-students-table-attendance");?>',
                dataType: 'json',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.result == 1) {
                        var data = response.data;
                        var table = $('#attendance-table');
                        var thead = $('<thead>');
                        var tbody = $('<tbody>');

var headerRow = '<tr><th>Student</th>';
                        var dates = Object.keys(data[0].attendance).sort().reverse();
                        dates.forEach(function (date) {
                            headerRow += '<th>' + date + '</th>';
                        });
                        headerRow += '</tr>';
                        thead.append(headerRow);

data.forEach(function (student) {
                            var row = '<tr>';
                            row += '<td>' + student.student_id + '</td>';
                            dates.forEach(function (date) {
                                row += '<td>' + student.attendance[date] + '</td>';
                            });
                            row += '</tr>';
                            tbody.append(row);
                        });

table.empty().append(thead).append(tbody);

if (!isToggled) {
                            $('#main-div').slideDown('slow');
                            isToggled = true;
                        }
                    } else {
                        $('#description').html('No data found');
                        if (isToggled) {
                            $('#main-div').slideUp('slow');
                            isToggled = false;
                        }
                    }
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }

});

</script>

<script>
    function goBack() {
        window.location.href = "<?php echo base_url("mark-attendance"); ?>";
    }
</script>

input[type="checkbox"].switch_1:after {
        position: absolute;
        content: "";
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        background: #fff;
        -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
        box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
        -webkit-transform: scale(.7);
        transform: scale(.7);
        left: 0;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

input[type="checkbox"].switch_1:checked {
        background: #0ebeff;
    }

input[type="checkbox"].switch_1:checked:after {
        left: calc(100% - 1.5em);
    }
</style>
<?php echo view('includes/footer'); ?>