@extends ('Layouts.Application')

@section ('MainContent')

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-body">
				@include ('Layouts.FormValidationErrors')
				@include ('Layouts.ErrorSuccessAndWarninMessages')

				<form class="form-horizontal" id="ShowAttendanceReportForm">
					@csrf

					<div class="form-group form-group-sm">
						@include ('includes.branch_names', ['label_col_width' => 1, 'fieldColWidth' => 2])

						@include ('includes.branch_shift_version_names', ['label_col_width' => 1, 'fieldColWidth' => 2])

						@include ('includes.class_names', ['label_col_width' => 1, 'fieldColWidth' => 2])

						@include ('includes.group_names', ['label_col_width' => 1, 'fieldColWidth' => 2])
					</div>

					<div class="form-group form-group-sm">
						@include ('includes.section_names', ['label_col_width' => 1, 'fieldColWidth' => 2])

						@include ('includes.subject_names', ['label_col_width' => 1, 'fieldColWidth' => 2])

						@include ('includes.academic_years', ['label_col_width' => 1, 'fieldColWidth' => 2])

						<label for="report_type" class="col-sm-1 control-label text-danger">Report Type</label>
						<div class="col-sm-2">
							<select class="form-control" id="report_type" name="report_type">
								<option value="1">Subject Wise Attendance Count</option>
								<option value="2">Student Wise Attendance Report</option>
								<option value="3">Individual Teacher Report</option>
								<option value="4" disabled>Individual Student Report</option>
								<option value="5">Initiate Date Wise Report</option>
								@if(auth()->user()->role_id == 4)
										<option value="6">Delete Attendance</option>
										<option value="7">Force Attendance</option>
								@endif
							</select>
						</div>
					</div>

					<div class="form-group form-group-sm">
						<label for="AttendanceDateFrom" class="col-sm-1 control-label text-danger">From</label>
						<div class="col-sm-2">
							<input type="text" class="form-control datepicker" id="AttendanceDateFrom"  name="AttendanceDateFrom">
						</div>
						<label for="AttendanceDateTo" class="col-sm-1 control-label text-danger">To</label>
						<div class="col-sm-2">
							<input type="text" class="form-control datepicker" id="AttendanceDateTo"  name="AttendanceDateTo">
						</div>
					</div>

					<div class="form-group form-group-sm" id="extra_input"></div>

					<div class="form-group form-group-sm">
						<div class="col-sm-12">
							<button type="button" class="btn btn-primary btn-block" id="ShowAttendanceReportBtn">
								<i class="fa fa-braille"></i> Show Students
							</button>
						</div>
					</div>
				</form>

				<form action="send.php" method="post" id="attendanceForm">
					<div id="ShowAttendanceReportContainer"></div>
				</form>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

$(document).ready(function () {
	$('.datepicker').datepicker({
		format: 'yyyy-mm-dd',
		autoclose: true,
		todayHighlight : true
	});

	$(document).on('click', '#ShowAttendanceReportBtn', function () {
		$.ajax({
			type: "POST",
			url: baseURL + '/!/Attendance/subject-wise-attendance/search',
			data: $('#ShowAttendanceReportForm').serialize(),
			success: function (response) {
				$('#ShowAttendanceReportContainer').html(response);
			}
		});
		return false;
	});

	$("#report_type").change(function(){
		let type = $(this).val();

		if (type == 3) {
			$('#extra_input').html(
				`<label class="col-sm-1 control-label text-danger">Teacher ID : </label>
				<div class="col-sm-11">
				<input type="text" placeholder="Teacher id" class="form-control"  name="teacher_id">
				</div>`
			);
		} else if (type == 4) {
			$('#extra_input').html(
				`<label class="col-sm-1 control-label text-danger">Student ID : </label>
				<div class="col-sm-11">
				<input type="text" placeholder="Student id" class="form-control"  name="student_id">
				</div>`
			);
		} else if (type == 5) {
			$('#extra_input').html(
				`<label class="col-sm-1 control-label text-danger">Initiate Date : </label>
				<div class="col-sm-11">
				<input type="text" class="form-control datepicker"  name="initiate_date" id="initiate_date">
				</div>`
			);

			$('#initiate_date').datepicker({
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayHighlight : true
			});
		} else if (type == 6) {
			$('#extra_input').html(
				`<label class="col-sm-1 control-label text-danger">Attendance Date : </label>
				<div class="col-sm-11">
				<input type="text" class="form-control datepicker"  name="attendance_date" id="attendance_date">
				</div>
				<label class="col-sm-1 control-label text-danger">Teacher ID : </label>
				<div class="col-sm-11">
				<input type="text" placeholder="Teacher id" class="form-control"  name="teacher_id">
				</div>`
			);

			$('#attendance_date').datepicker({
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayHighlight : true
			});
		} else if (type == 7) {
			$('#extra_input').html(
				`<label class="col-sm-1 control-label text-danger">Attendance Date : </label>
				<div class="col-sm-11">
				<input type="text" class="form-control datepicker"  name="attendance_date" id="attendance_date">
				</div>
				<label class="col-sm-1 control-label text-danger">Teacher ID : </label>
				<div class="col-sm-11">
				<input type="text" placeholder="Teacher id" class="form-control"  name="teacher_id">
				</div>`
			);

			$('#attendance_date').datepicker({
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayHighlight : true
			});
		} else {
			$('#extra_input').html(``);
		}
	});

	$(document).on('click', '#delete_attendance_btn', function (event) {
		event.preventDefault();
		let attendance_id = [];

		for (let input of document.querySelectorAll('input[name="attendance_id[]"]')) {
			if (input.checked) {
				attendance_id.push(Number(input.value));
			}
		}

		if (attendance_id.length < 1) {
			alert('No attendance is selected!');
		} else {
			$.ajax({
				type: "POST",
				url: baseURL + '/!/Attendance/subject-wise-attendance/delete',
				data: {'attendance_id' : attendance_id},
				success: function (response) {
					if (response.status === 'failed') {
						$('#ShowAttendanceReportContainer').html(
							`<h4 class="alert alert-danger text-center">${response.message}</h4>`
						);
					}

					if (response.status === 'success') {
						$('#ShowAttendanceReportContainer').html(
							`<h4 class="alert alert-success text-center">${response.message}</h4>`
						);
					}
				}
			});
		}
		return false;
	});
});
</script>

@endsection