EVOLUTION-NINJA

Edit File: assessment.php

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

</style>

<h3 style="padding-bottom:10px;border-bottom:2px dashed #ccc;margin-bottom:20px; font-weight: bold;">UPLOADED ASSESSMENTS</h3>
    <div class="col-md-2">

</div>
    <div class="col-md-8">
       <div class="form_div">
           <form id="form">
                <div class="form  row">
                    <div class="col-sm-3">
                        <label for="Chapter" class="form-label inpfieldname">Courses</label>
                        <select class="form-select form-control fieldsbox" id="course" name="course">
                        <?php
                      $login_id =session()->get('faculty_login_id');
                      
                    //   print_r($login_id);die();

echo '<option value="">Select Courses</option>';
                     if ($login_id == 357) { 
                    echo '<option value="1">Business Development Officer</option>';
                    } else if($login_id == 361){
                    echo '<option value="2">Cybersecurity</option>';
                    }
                  ?>
                            
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <label for="Chapter" class="form-label inpfieldname">Chapter Name</label>
                        <select class="form-select form-control fieldsbox" id="chapter" name="chapter">
                            
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <label for="Topic" class="form-label inpfieldname">topic Name</label>
                        <select class="form-select form-control fieldsbox" id="topic" name="topic">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <label for="Student" class="form-label inpfieldname">Student Name</label>
                        <input type="text" name="studentname" id="student" style="height: 32px;
                   border-radius: 5px; border:none;"> 
                      <input type="hidden" id="student_id" name="student_id"> 
                         
                        
                    </div>
                   
         
        
                </div>
                  <br>
                 <button type="submit" class="submit btn"  id="filterbutton"       style=" margin-block:10px">Get Assessment</button>
           </form>
       </div>
        <div id="assessment" class="tab-pane fade">
            <div class="row" id="assessment_uploads_div"></div>

<br><br>
<table id="uploaded_files_table" class="display">
    <thead>
        <tr>
            <th>#</th>
            <th>Chapter</th>
            <th>Topic</th>
            <th>Student</th>
            <th>File Name</th>
            <th>View</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="uploaded_files">
        
    </tbody>
</table>

</div>

$('#uploadForm').submit(function (e) {
        e.preventDefault();
        var formData = new FormData(this);

$.ajax({
            url: "<?php echo base_url('upload/assessment') ?>",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                if (response.status === 'success') {
                    alert('File uploaded successfully!');
                    fetchFiles();  
                    $('#uploadForm')[0].reset(); // Reset form after upload
                } else {
                    alert('Upload failed: ' + response.message);
                }
            },
            error: function () {
                alert('Error uploading file.');
            }
        });
    });

$(document).ready(function () {
 
    $('#uploaded_files_table').DataTable();

fetchFiles();

$(document).ready(function () {
    fetchFiles();
});

});
</script>

fetchFiles(); // Fetch files on page load

$('#form').submit(function (event) {
        event.preventDefault();
        fetchFiles();
    });

function fetchFiles() {
        var chapterId = $('#chapter').val() || ''; 
        var topicId = $('#topic').val() || ''; 
        var studentId = $('#student_id').val() || '';

$.ajax({
            url: "<?php echo base_url('fetch_ass'); ?>",
            type: 'POST',
            data: { chapter_id: chapterId, topic_id: topicId, student_id: studentId },
            dataType: 'json',
            success: function (response) {
                console.log(response); // Debugging: Check if data is coming

var filesHTML = '';
                if (response.files && response.files.length > 0) {
                    $.each(response.files, function (index, file) {
                        let approveButton = file.status === 'pending'
                            ? `<button class="approve-btn" data-id="${file.id}" 
                                 style="background: green; color: white; border: none; padding: 5px 10px; cursor: pointer;">
                                 Approve</button>`
                            : `<span style="color: green;">Approved</span>`;

filesHTML += `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${file.chapter_name}</td>
                                <td>${file.topic_name}</td>
                                <td>${file.student_name}</td>
                                <td>${file.file_name}</td>
                                <td style="text-align: center;">
                                    <a href="${file.file_path}" target="_blank">View</a>
                                </td>
                                <td style="text-align: center;">${approveButton}</td>
                            </tr>`;
                    });
                } else {
                    // filesHTML = `<tr><td colspan="7" style="text-align: center;">No files found.</td></tr>`;
                }

table.clear().destroy(); // Properly destroy old DataTable instance
                $('#uploaded_files').html(filesHTML); // Update table body
                table = $('#uploaded_files_table').DataTable({ // Reinitialize DataTable
                    destroy: true,
                    retrieve: true
                });
            },
            error: function () {
                alert('Error fetching files. Please try again.');
            }
        });
    }

// Event delegation to handle dynamically added "Approve" buttons
    $(document).on('click', '.approve-btn', function () {
        var fileId = $(this).data('id');
        approveFile(fileId);
    });

</script>

$('#course').change(function () {
        var course_id = $(this).val();
        $('#chapter').empty().append('<option value="">Select Chapter</option>'); // Clear previous chapters
        $('#topic').empty().append('<option value="">Select Topic</option>'); // Clear previous topics

if (course_id) {
            $.ajax({
                url: "<?php echo base_url('fetch-chapter'); ?>/" + course_id,
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    if (response.error) {
                        alert(response.error);
                        return;
                    }
                    $.each(response, function (index, chapter) {
                        $('#chapter').append(`<option value="${chapter.chapter_id}">${chapter.chapter_name}</option>`);
                    });
                },
                error: function () {
                    alert('Error fetching chapters.');
                }
            });
        }
    });

// Fetch Topics on Chapter Selection
    $('#chapter').change(function () {
        var chapter_id = $(this).val();
        $('#topic').empty().append('<option value="">Select Topic</option>'); // Clear previous topics

if (chapter_id) {
            $.ajax({
                url: "<?php echo base_url('fetch-topic'); ?>/" + chapter_id,
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    if (response.error) {
                        alert(response.error);
                        return;
                    }
                    $.each(response, function (index, topic) {
                        $('#topic').append(`<option value="${topic.topic_id}">${topic.topic_name}</option>`);
                    });
                },
                error: function () {
                    alert('Error fetching topics.');
                }
            });
        }
    });

});
</script>

// Get selected Student ID
    $("#student").on("blur", function () {
        var studentId = $("#student_id").val() || '';  
        console.log("Final Student ID: " + studentId);
    });
});
</script>

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

#page-wrapper{
    background-image: url(public/assets/website_assets/images/banner.png);
    background-size:cover;
}

#FrmGrid_list2 {
        width: 100% !important;
    }

.ui-jqdialog .ui-jqdialog-titlebar {
        height: 29px !important;
        background-color: #001a00;
        color: white;
        padding-left: 10px;
    }

.fm-button {
        height: 21px !important;
        padding: 1px;
        margin-right: 10px !important;
        height: 21px !important;
        width: 43%;
        margin-top: -7px !important;
    }

.ui-jqdialog-content td.navButton {
        padding-top: 12px !important;
    }

.ui-jqgrid .ui-jqgrid-titlebar {
        height: 27px !important;
        /*background:#1e7ad7 !important;*/
        color: white !important;
    }
.fade{
    opacity:1;
}
    .ui-jqgrid-bdiv {
        height: auto !important;

}

.ui-widget-overlay {
        z-index: 0 !important;
    }

/* .ui-widget-header
{
background: #1e7ad7 !important;
} */
    .ui-jqgrid-hdiv ui-state-default {
        /* width: 873px !important;  */
        cursor: default !important
    }

ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        border: 1px solid #fed22f;
        background: #ffe45c;
    }

.ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        font-weight: bold;
        color: black;
    }

/* .ui-jqgrid .ui-jqgrid-bdiv {
    overflow-y: scroll;
    overflow-x: scroll ;
}

.ui-jqgrid-htable{
    width: 100% !important;
}
#list2{
    width: 100% !important;
} */

.timepicker_wrap {
        top: 35px !important;
    }

#jaytab {
        width: 100% !important;
        overflow-x: scroll !important;
    }

@media only screen and (min-width:320px) and (max-width:640px) {
        #jaytab {
            width: 100% !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }

.ui-jqgrid {
            width: 100% !important;
        }
    }

@media only screen and (min-width:641px) and (max-width:991px) {
        #jaytab {
            width: auto !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 900px !important;
        }

.ui-jqgrid-view {
            width: 900px !important;
        }

.ui-jqgrid-hdiv {
            width: 900px !important;
        }

.ui-jqgrid-htable {
            width: 900px !important;
        }

.ui-jqgrid-bdiv {
            width: 900px !important;
        }

#list2 {
            width: 900px !important;
        }

#pager2 {
            width: 900px !important;
        }
    }

@media only screen and (min-width:992px) and (max-width:1258px) {
        #jaytab {
            width: 100% !important;
            overflow-x: scroll !important;
        }

.ui-jqgrid ui-widget ui-widget-content ui-corner-all {
            width: 100% !important;
        }

.ui-jqgrid-view {
            width: 100% !important;
        }

.ui-jqgrid-hdiv {
            width: 100% !important;
        }

.ui-jqgrid-htable {
            width: 100% !important;
        }

.ui-jqgrid-bdiv {
            width: 100% !important;
        }

#list2 {
            width: 100% !important;
        }

#pager2 {
            width: 100% !important;
        }
    }
</style>