@extends ('Layouts.Application')

@section ('MainContent')

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">
					Student Attendance
					<span style="float: right;">Total Student :
						<span id="totalStudent" style="color: #337AB7; font-weight: bold;"></span>
						| Present : <span id="totalPresent" style="color: #5CB85C; font-weight: bold;"></span>
						| Late : <span id="totalLate" style="color: #f0ad4e; font-weight: bold;"></span>
						| Absent : <span id="totalAbsent" style="color: #D9534F; font-weight: bold;"></span>
					</span>
				</h3>
			</div>

			<div class="panel-body">
				<form class="form-horizontal">
					@csrf

					<div class="form-group form-group-sm">
						@include (
							'includes.branch_shift_version_names',
							['labelColWidth' => 1, 'fieldColWidth' => 2, 'required' => true]
						)

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

						@include ('includes.group_names', ['labelColWidth' => 1, 'fieldColWidth' => 2])

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

						<label for="date" class="col-sm-1 control-label">Date</label>
						<div class="col-sm-2">
							<input type="text" class="form-control datepicker" id="date" name="date">
						</div>
					</div>

					<div class="form-group form-group-sm">
						<div class="col-sm-12">
							<button class="btn btn-primary btn-block" type="button" id="show-students-button">
								<i class="fa fa-list"></i> View Students
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div id="get-student-list"></div>
	</div>
</div>

<script>
$(document).ready(function () {
	$('#branch_and_version').trigger('change');

	$(document).on('click', '#show-students-button', function () {
		$('#totalStudent').text('');
		$('#totalPresent').text('');
		$('#totalAbsent').text('');

		var branch_and_version = $('#branch_and_version').val() || 0;
		var class_id = $('#class_name').val() || 0;
		var group_id = $('#group_name').val() || 0;
		var section_id = $('#section_name').val() || 0;
		var academic_year = $('#academic_year').val() || 0;
		var date = $('#date').val();
		var route_parameters = branch_and_version + '/' + class_id + '/' + group_id + '/' + section_id + '/' + academic_year + '/' + date;

		if (branch_and_version && class_id && group_id && section_id && academic_year) {
			$.ajax({
				type: 'GET',
				url: baseURL + '/!/Attendance/Student/get_students/' + route_parameters,
				success: function (response) {
					$('#get-student-list').html(response);

					if ($("#count").length == 0) {
						total = $('#count1').val();
						$('#totalStudent').text(total);
						$('#totalPresent').text('');
						$('#totalAbsent').text('');
					} else if ($("#count").length > 0) {
						total = $('#count').val();
						$('#totalStudent').text(total);
						$('#totalPresent').text(total);
						$('#totalAbsent').text(0);
					}
				}
			});
		}
	});

	function calculate_student_status() {
		var total_students = $("#total_students").val();
		var present = $('#get-student-list-table tbody tr').find('.present:checked').length;
		var late = $('#get-student-list-table tbody tr').find('.late:checked').length;
		var absent = $('#get-student-list-table tbody tr').find('.absent:checked').length;

		$('#totalStudent').text(total_students);
		$('#totalPresent').text(present);
		$('#totalLate').text(late);
		$('#totalAbsent').text(absent);
	}

	$('#get-student-list').on('change', '.attendance_type', function () {
			$(".student_attendance").each(function(index, field) {
				 $(field).removeAttr('checked');
			});

			$("." + $(this).val()).each(function(index, field) {
				 $(field).attr('checked', true);
			});

			calculate_student_status();
	});

	$(document).on('submit', 'form', function () {
		$.ajax({
			type: 'POST',
			url: baseURL + '/!/Attendance/Student/save_attendance',
			data: $(this).serialize(),
			success: function (response) {
				$('#get-student-list').html(response);
			}
		});
		return false;
	});

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

	$(document).on('click', '.student_attendance', function () {
		calculate_student_status();
	});
});
</script>

@endsection