101 lines
3.2 KiB
HTML
101 lines
3.2 KiB
HTML
<!-- Attendance Modal -->
|
|
<div class="modal fade" id="attendanceModal" tabindex="-1" aria-labelledby="attendanceModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title" id="attendanceModalLabel">
|
|
<i class="fas fa-clipboard-check me-2"></i>Take Attendance
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="attendanceForm">
|
|
<input type="hidden" name="routine_id" id="routineId">
|
|
<div class="mb-4">
|
|
<h6 class="mb-3">Class Information</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="mb-1"><strong>Subject:</strong> <span id="subjectName"></span></p>
|
|
<p class="mb-1"><strong>Course:</strong> <span id="courseName"></span></p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p class="mb-1"><strong>Time:</strong> <span id="classTime"></span></p>
|
|
<p class="mb-1"><strong>Date:</strong> <span id="classDate"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h6 class="mb-3">Students List</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Student ID</th>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th>Remarks</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="studentsList">
|
|
<!-- Students will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="remarks" class="form-label">General Remarks</label>
|
|
<textarea class="form-control" id="remarks" name="remarks" rows="2" placeholder="Add any general remarks about the class"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="saveAttendance">
|
|
<i class="fas fa-save me-2"></i>Save Attendance
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#attendanceModal .modal-content {
|
|
border: none;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
#attendanceModal .modal-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
#attendanceModal .modal-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
#attendanceModal .table th {
|
|
background-color: var(--light);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#attendanceModal .table td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#attendanceModal .btn {
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#attendanceModal .form-control {
|
|
border-radius: var(--border-radius-md);
|
|
}
|
|
|
|
#attendanceModal .form-control:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
</style> |