@extends('layouts.app')
@section('title', __('customer.list'))

@section('css')
<link href="{{ asset('custom/css/custom-list.css') }}" rel="stylesheet">

@endsection
@section('content')
<!--start page wrapper -->
<div class="page-wrapper">
	<div class="page-content">
		<x-breadcrumb :langArray="[
											'certificate.certificate',
											'certificate.shortterm',
										]" />

		<div class="card">

			<div class="card-header px-4 py-3 d-flex justify-content-between">
				<!-- Other content on the left side -->
				<div>
					<h5 class="mb-0 text-uppercase"> Certificate Issue</h5>
				</div>

				@can('customer.create')
				<!-- Button pushed to the right side -->
				<x-anchor-tag href="{{ route('certificate.shortterm.create') }}" text="New Certificate Issue" class="btn btn-primary px-5" />
				@endcan

			</div>
			<div class="card-body">
				<div class="custom-list-wrapper">
					<div class="row action-row mb-3">
						<div class="col-12 col-search-box mt-2">
							<div class="search-box">
								<i class="fas fa-search" aria-hidden="true"></i>
								<input type="text" data-role="keyword" class="form-control search"
									placeholder="शब्द टाइप गर्नुहोस् र इन्टर थिच्नुहोस्"
									autocomplete="off">
							</div>
						</div>
						<div class="col col-lg col-right-buttons mt-3">
							<!-- Export Button -->
							<button type="button" data-toggle="tooltip" title="सबै विद्यार्थी एक्सेलमा निर्यात गर्नुहोस्"
							  onclick="exportStudents(this)" class="btn btn-sm btnExport button-excel-export mr-2">
							  <i class="bx bx-download"></i> Export <!-- Boxicons download icon -->
							</button>
						  
							<!-- Filter Button -->
							<button type="button" class="btn btn-sm btn-primary mr-2" data-toggle="modal" data-target="#filter-modal">
							  <i class="bx bx-filter-alt"></i> <!-- Boxicons filter icon -->
							</button>
						  </div>
						  
					</div>

					<div class="custom-list-main">
						<div id="custom-list-student" data-trigger-on-ready="1" data-callback="populateStudents"
							class="custom-list">
							<div class="list-head"></div>
							<div class="list-body"></div>
						</div>
					</div>

					<div class="list-pagination d-flex">
						<span class="rows-counter">Show<span class="rows-text"> Rows</span>:</span>
						<div class="form-group">
						  <select id="selectLimit" data-role="limit" class="form-select no-search">
							<option value="10">10</option>
							<option value="25">25</option>
							<option value="50">50</option>
							<option value="100">100</option>
							<option value="150">150</option>
						  </select>
						</div>
						<div class="pages-counter">1 - 10 of 10</div>
						<nav class="pagination-nav">
						  <ul class="pagination">
							<li class="page-item disabled">
							  <a class="page-link" data-role="first">
								<i class="bx bx-chevrons-left"></i> <!-- Boxicons First Page -->
							  </a>
							</li>
							<li class="page-item disabled">
							  <a class="page-link" data-role="prev">
								<i class="bx bx-chevron-left"></i> <!-- Boxicons Previous -->
							  </a>
							</li>
							<li class="page-item">
							  <a class="page-link" data-role="next">
								<i class="bx bx-chevron-right"></i> <!-- Boxicons Next -->
							  </a>
							</li>
							<li class="page-item">
							  <a class="page-link" data-role="last">
								<i class="bx bx-chevrons-right"></i> <!-- Boxicons Last Page -->
							  </a>
							</li>
						  </ul>
						</nav>
					  </div>
					  
					<!-- Filters -->
					<div class="modal fade right" id="filter-modal" tabindex="-1">
						<div class="modal-dialog modal-full-height modal-right">
							<div class="modal-content">
								<div class="modal-header">
									<h4 class="modal-title w-100" id="myModalLabel"><i class="material-icons">filter_alt</i>
										फिल्टर छनोट गर्नुहोस्
									</h4>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									</button>
								</div>
								<div class="modal-body">
									<p>डाटा फिल्टर गर्न चाहनुभएको विकल्पहरू चयन गर्नुहोस् र Apply Filter बटनमा क्लिक गर्नुहोस्।</p>
									<div class="row">
										<div class="col-md-12">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select select-year dropdown-primary"
													name="masterAcademicYearId" id="masterYear"
													onchange="populateBatches('#selectProgram')"
													required>
													<option value="" selected>सबै</option>
													<option value="283">2081-2084</option>
													<option value="295">2081-083</option>
													<option value="170">2080-2083</option>
													<option value="169">2079-2082</option>
													<option value="168">2078-2081</option>
													<option value="167">2077-2080</option>
													<option value="253">2076-2079</option>
												</select>
												<label for="masterYear">मास्टर वर्ष</label>
											</div>
										</div>

										<div class="col-12">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select dropdown-primary"
													name="grade_id" id="selectProgram"
													onchange="populateBatches(this)">
													<option value="" selected>सबै</option>
													<option value="483">सिभिल इन्जीनियरिङको प्रि-डिप्लोमा</option>
													<option value="293">कृषि-इन्जिनियरिङमा डिप्लोमा</option>
													<option value="290">पशु विज्ञानमा डिप्लोमा</option>
													<option value="291">सिभिल इन्जीनियरिङमा डिप्लोमा</option>
													<option value="292">वन विज्ञानमा डिप्लोमा</option>
													<option value="289">वनस्पति विज्ञानमा डिप्लोमा</option>
												</select>
												<label>कार्यक्रम</label>
											</div>
										</div>

										<div class="col-12 batchBlock" style="display: none;">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select academicYears dropdown-primary"
													id="selectBatchFirst" name="batchFirst"
													onchange="populateYearSemester(this, '#gradeYearSemesterId'), populateSection(false)">
													<option value="" selected>--- चयन गर्नुहोस् ---</option>
												</select>
												<label>बैच</label>
											</div>
										</div>

										<div class="col-12 yearSemesterBlock" style="display: none;">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select dropdown-primary"
													id="gradeYearSemesterId" name="gradeYearSemesterId"
													onchange="populateSection(false)">
													<option value="" selected>--- चयन गर्नुहोस् ---</option>
												</select>
												<label for="gradeYearSemesterId">वर्ष/सेमेस्टर</label>
											</div>
										</div>

										<div class="col-12">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select dropdown-primary select-section"
													name="sectionId" id="sectionId">
													<option value="" selected>--- चयन गर्नुहोस् ---</option>
												</select>
												<label for="sectionId">सेक्शन</label>
											</div>
										</div>

										<div class="col-6">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select dropdown-primary no-search"
													name="gender">
													<option selected>सबै</option>
													<option value="male">पुरुष</option>
													<option value="female">महिला</option>
													<option value="others">अरु</option>
												</select>
												<label>लिङ्ग</label>
											</div>
										</div>

										<div class="col-6">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select dropdown-primary select-fix disable-toggle-all"
													name="status" multiple>
													<option value="">सबै</option>
													<option value="active" selected>सक्रिय</option>
													<option value="in-active">निष्क्रिय</option>
													<option value="alumni">पुराना विद्यार्थी</option>
													<option value="dropout">ड्रपआउट</option>
												</select>
												<label>स्थिति</label>
											</div>
										</div>


										<div class="col-6">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select dropdown-primary no-search"
													name="yearSemesterStatus">
													<option value="" selected>सबै</option>
													<option value="active">सक्रिय</option>
													<option value="inactive">निष्क्रिय</option>
												</select>
												<label>वर्ष/सेमेस्टर स्थिति</label>
											</div>
										</div>

										<div class="col-12">
											<div class="select-outline">
												<select class="mdb-select md-form md-outline colorful-select dropdown-primary no-search"
													name="yearSemesterRunning">
													<option value="" selected>सबै</option>
													<option value="running">चलिरहेको</option>
													<option value="non-running">चलिरहेको छैन</option>
												</select>
												<label>वर्ष/सेमेस्टर स्थिति</label>
											</div>
										</div>

										<div class="col-12">
											<div class="form-check mt-3 pl-0">
												<input type="checkbox" class="form-check-input toggleStatus"
													param="groupByGrade" id="checkGroupByGrade" checked>
												<label class="form-check-label" for="checkGroupByGrade">
													कार्यक्रम अनुसार समूह बनाउनुहोस्
												</label>
											</div>
										</div>
									</div>
									<button type="button" data-role="filter"
										class="btn btn-sm btn-primary btn-filter mt-3">फिल्टर लागू गर्नुहोस्
									</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Filters -->

				</div>
			</div>
		</div>
	</div>
	<!-- Main layout -->
	<div class="modal fade" id="modelBirthday" tabindex="-1" role="dialog"
		aria-labelledby="modalEditDOBLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="modalEditDOBLabel">जन्म मिति अपडेट गर्नुहोस्</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					</button>
				</div>
				<form class="needs-validation" id="formDOB">
					<input type="hidden" name="id" value="">
					<div class="modal-body pt-1">

						<div class="md-form md-outline">
							<input type="text" name="dobAD" class="form-control datepicker" id="dobAD"
								onload="initDatePicker(this, 'en')"
								required>
							<label for="dobAD">ई.स.</label>
						</div>
						<div class="md-form md-outline">
							<input type="text" name="dobBS" class="form-control datepicker" id="dobBS"
								onload="initDatePicker(this, 'np')"
								required>
							<label for="dobBS">बि.स.</label>
						</div>
						<div id="txtDOBActualBlock" class="d-none mt-2">
							<strong>Actual:</strong> <span id="txtDOBActual"></span> बि.स.
							<i class="bi-info-circle text-danger" data-toggle="tooltip" title="Date of birth was compromised due to inaccurate conversions from apps like Hamro Patro and Nepali Patro."></i>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" onclick="updateDOB(this)" class="btn btn-success">
							<i class="material-icons">restore</i> Update
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</div>
<!--end row-->
</div>
</div>
@endsection
@section('js')

<script src="{{ asset('custom/js/common/common.js') }}"></script>
<script src="{{ asset('custom/js/alartconfig.js') }}"></script>
<script src="{{ asset('custom/js/custom-list.js') }}"></script>
<script src="{{ asset('custom/js/certificate/shortterm-list.js') }}"></script>
@endsection