{% extends 'partials/base.html' %}
{% load static %}

{% block content %}
    <!-- Page Wrapper -->
		<div class="page-wrapper">
			<div class="content">

				<!-- Page Header -->
				<div class="d-md-flex d-block align-items-center justify-content-between mb-3">
                    {% block title %}
                    {% include "partials/title.html" with title="Class Report" text="Dashboard" textone="Report" texttwo="Class Report" %}
                    {% endblock title %}
					<div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
						<div class="pe-1 mb-2">
							<a href="#" class="btn btn-outline-light bg-white btn-icon me-1" data-bs-toggle="tooltip"
								data-bs-placement="top" aria-label="Refresh" data-bs-original-title="Refresh">
								<i class="ti ti-refresh"></i>
							</a>
						</div>
						<div class="pe-1 mb-2">
							<button type="button" class="btn btn-outline-light bg-white btn-icon me-1"
								data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Print"
								data-bs-original-title="Print">
								<i class="ti ti-printer"></i>
							</button>
						</div>
						<div class="dropdown me-2 mb-2">
							<a href="javascript:void(0);"
								class="dropdown-toggle btn btn-light fw-medium d-inline-flex align-items-center"
								data-bs-toggle="dropdown">
								<i class="ti ti-file-export me-2"></i>Export
							</a>
							<ul class="dropdown-menu  dropdown-menu-end p-3">
								<li>
									<a href="javascript:void(0);" class="dropdown-item rounded-1"><i
											class="ti ti-file-type-pdf me-1"></i>Export as PDF</a>
								</li>
								<li>
									<a href="javascript:void(0);" class="dropdown-item rounded-1"><i
											class="ti ti-file-type-xls me-1"></i>Export as Excel </a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- /Page Header -->

				<!-- Student List -->
				<div class="card">
					<div class="card-header d-flex align-items-center justify-content-between flex-wrap pb-0">
						<h4 class="mb-3">Class Report List</h4>
						<div class="d-flex align-items-center flex-wrap">
							<div class="input-icon-start mb-3 me-2 position-relative">
								<span class="icon-addon">
									<i class="ti ti-calendar"></i>
								</span>
								<input type="text" class="form-control date-range bookingrange" placeholder="Select"
								value="Academic Year : 2024 / 2025">
							</div>
							<div class="dropdown mb-3 me-2">
								<a href="javascript:void(0);" class="btn btn-outline-light bg-white dropdown-toggle"
									data-bs-toggle="dropdown" data-bs-auto-close="outside"><i
										class="ti ti-filter me-2"></i>Filter</a>
								<div class="dropdown-menu drop-width">
									<form action="class-report">
										<div class="d-flex align-items-center border-bottom p-3">
											<h4>Filter</h4>
										</div>
										<div class="p-3 border-bottom">
											<div class="row">
												<div class="col-md-6">
													<div class="mb-3">
														<label class="form-label">Class</label>
														<select class="select">
															<option>Select</option>
															<option>I</option>
															<option>II</option>
															<option>III</option>
														</select>
													</div>
												</div>
												<div class="col-md-6">
													<div class="mb-3">
														<label class="form-label">Section</label>
														<select class="select">
															<option>Select</option>
															<option>A</option>
															<option>B</option>
															<option>C</option>
														</select>
													</div>
												</div>
												<div class="col-md-12">
													<div class="mb-0">
														<label class="form-label">No Of Students</label>
														<select class="select">
															<option>Select</option>
															<option>30</option>
															<option>35</option>
															<option>40</option>
														</select>
													</div>
												</div>
											</div>
										</div>
										<div class="p-3 d-flex align-items-center justify-content-end">
											<a href="#" class="btn btn-light me-3">Reset</a>
											<button type="submit" class="btn btn-primary">Apply</button>
										</div>
									</form>
								</div>
							</div>
							<div class="dropdown mb-3">
								<a href="javascript:void(0);" class="btn btn-outline-light bg-white dropdown-toggle"
									data-bs-toggle="dropdown"><i class="ti ti-sort-ascending-2 me-2"></i>Sort by A-Z
								</a>
								<ul class="dropdown-menu p-3">
									<li>
										<a href="javascript:void(0);" class="dropdown-item rounded-1 active">
											Ascending
										</a>
									</li>
									<li>
										<a href="javascript:void(0);" class="dropdown-item rounded-1">
											Descending
										</a>
									</li>
									<li>
										<a href="javascript:void(0);" class="dropdown-item rounded-1">
											Recently Viewed
										</a>
									</li>
									<li>
										<a href="javascript:void(0);" class="dropdown-item rounded-1">
											Recently Added
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="card-body p-0 py-3">
						<!-- Student List -->
						<div class="custom-datatable-filter table-responsive">
							<table class="table datatable">
								<thead class="thead-light">
									<tr>
										<th class="no-sort">
											<label class="checkboxs"><input type="checkbox" id="select-all"><span
													class="checkmarks"></span></label>
										</th>
										<th>ID</th>
										<th>Class</th>
										<th>Section</th>
										<th>No of Students</th>
										<th>Action</th>
									</tr>
								</thead>
								<tbody>
                                    {% for record in class_report %}
									<tr>
										<td>
											<label class="checkboxs">
												<input type="checkbox">
												<span class="checkmarks"></span>
											</label>
										</td>
										<td><a href="#" class="link-primary">{{record.ID}}</a></td>
										<td>{{record.Class}}</td>
										<td>{{record.Section}}</td>
										<td>{{record.Students}}</td>
										<td>
											<a href="#" class="btn btn-light view details" data-bs-toggle="modal"
												data-bs-target="#view_class_report">View Details</a>
										</td>
									</tr>
                                    {% endfor %}
								</tbody>
							</table>
						</div>
						<!-- /Student List -->
					</div>
				</div>
				<!-- /Student List -->

			</div>
		</div>
		<!-- /Page Wrapper -->

		<!-- Add Expenses Category -->
		<div class="modal fade" id="view_class_report">
			<div class="modal-dialog modal-dialog-centered  modal-xl">
				<div class="modal-content">
					<div class="modal-wrapper">
						<div class="modal-body">

							<!-- Student List -->
							<div class="table-responsive">
								<table class="table datatable">
									<thead class="thead-light">
										<tr>
											<th class="no-sort">
												<label class="checkboxs"><input type="checkbox" id="select-all2"><span
														class="checkmarks"></span></label>
											</th>
											<th>Admission No</th>
											<th>Roll No</th>
											<th>Name</th>
											<th>Class </th>
											<th>Section</th>
											<th>Gender</th>
											<th>Parent Name</th>
											<th>DOB</th>
											<th>Status</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892434</a></td>
											<td>35013</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-01.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Janet</a></p>
													</div>
												</div>
											</td>
											<td>III</td>
											<td>A</td>
											<td>Female</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-01.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="javascript:void(0);">Thomas</a></p>
													</div>
												</div>
											</td>
											<td>10 Jan 2015</td>
											<td>
												<span
													class="badge badge-soft-success d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Active</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892433</a></td>
											<td>35013</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-02.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Joann</a></p>
													</div>
												</div>
											</td>
											<td>IV</td>
											<td>B</td>
											<td>Male</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-02.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="javascript:void(0);">Marquita</a></p>
													</div>
												</div>
											</td>
											<td>19 Aug 2014</td>
											<td>
												<span
													class="badge badge-soft-success d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Active</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892432</a></td>
											<td>35011</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-03.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Kathleen</a></p>
													</div>
												</div>
											</td>
											<td>II</td>
											<td>A</td>
											<td>Female</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-03.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a href="javascript:void(0);">
																Johnson</a></p>
													</div>
												</div>
											</td>
											<td>05 Dec 2017</td>
											<td>
												<span
													class="badge badge-soft-success d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Active</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892431</a></td>
											<td>35010</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-04.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Gifford</a></p>
													</div>
												</div>
											</td>
											<td>I</td>
											<td>B</td>
											<td>Male</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-04.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="javascript:void(0);">Claudia</a></p>
													</div>
												</div>
											</td>
											<td>22 Mar 2018</td>
											<td>
												<span
													class="badge badge-soft-success d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Active</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892430</a></td>
											<td>35009</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-05.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Lisa</a></p>
													</div>
												</div>
											</td>
											<td>II</td>
											<td>B</td>
											<td>Female</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-05.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a href="javascript:void(0);">Arthur
															</a></p>
													</div>
												</div>
											</td>
											<td>13 May 2017</td>
											<td>
												<span
													class="badge badge-soft-danger d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Inactive</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892429</a></td>
											<td>35008</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-06.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Ralph</a></p>
													</div>
												</div>
											</td>
											<td>III</td>
											<td>B</td>
											<td>Male</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-06.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="javascript:void(0);">Colleen</a></p>
													</div>
												</div>
											</td>
											<td>20 Jun 2015</td>
											<td>
												<span
													class="badge badge-soft-success d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Active</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892428</a></td>
											<td>35007</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-07.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Julie</a></p>
													</div>
												</div>
											</td>
											<td>V</td>
											<td>A</td>
											<td>Female</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-07.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a href="javascript:void(0);">Robert
															</a></p>
													</div>
												</div>
											</td>
											<td>18 Sep 2013</td>
											<td>
												<span
													class="badge badge-soft-success d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Active</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892427</a></td>
											<td>35006</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-06.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Ryan</a></p>
													</div>
												</div>
											</td>
											<td>VI</td>
											<td>A</td>
											<td>Male</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-08.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a href="javascript:void(0);">Jessie
															</a></p>
													</div>
												</div>
											</td>
											<td>26 Nov 2012</td>
											<td>
												<span
													class="badge badge-soft-success d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-2"></i>Active</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892426</a></td>
											<td>35005</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-09.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Susan</a></p>
													</div>
												</div>
											</td>
											<td>VIII</td>
											<td>B</td>
											<td>Female</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-09.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a href="javascript:void(0);">Michael
															</a></p>
													</div>
												</div>
											</td>
											<td>26 May 2010</td>
											<td>
												<span
													class="badge badge-soft-danger d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Inactive</span>
											</td>
										</tr>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><a href="#" class="link-primary">AD9892425</a></td>
											<td>35004</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="{% url 'student_details' %}" class="avatar avatar-md"><img
															src="{% static 'assets/img/students/student-10.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a
																href="{% url 'student_details' %}">Richard</a></p>
													</div>
												</div>
											</td>
											<td>VII</td>
											<td>B</td>
											<td>Male</td>
											<td>
												<div class="d-flex align-items-center">
													<a href="javascript:void(0);" class="avatar avatar-md"><img
															src="{% static 'assets/img/parents/parent-10.jpg' %}"
															class="img-fluid rounded-circle" alt="img"></a>
													<div class="ms-2">
														<p class="text-dark mb-0"><a href="javascript:void(0);">Mary</a>
														</p>
													</div>
												</div>
											</td>
											<td>06 Oct 2011</td>
											<td>
												<span
													class="badge badge-soft-success d-inline-flex align-items-center"><i
														class="ti ti-circle-filled fs-5 me-1"></i>Active</span>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<!-- /Student List -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Add Expenses Category -->
{% endblock content %}