@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">Attendance Report</h3>
			</div>
			<div class="panel-body">
				<form class="form-horizontal">
					@csrf

					<div class="form-group form-group-sm">
						@include (
							'includes.branch_shift_version_names_radio_box',
							['branchVersionString' => $branchVersionString, 'required' => true]
						)
					</div>

					<div class="form-group form-group-sm">
						<label for="date_from" class="col-sm-1 control-label text-danger">From</label>
						<div class="col-sm-3">
							<input type="text" class="form-control datepicker" id="date_from" name="date_from">
						</div>
						<label for="date_to" class="col-sm-1 control-label text-danger">To</label>
						<div class="col-sm-3">
							<input type="text" class="form-control datepicker" id="date_to" name="date_to">
						</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-report-button">
								<i class="fa fa-list"></i> View Reports
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

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

<script>
$(document).ready(function () {
	$(document).on('click', '#show-report-button', function () {
		var branch_and_version = $('input:radio[name=branch_and_version]:checked').val() || 0;
		var date_from = $('#date_from').val() || '00-00-0000';
		var date_to = $('#date_to').val() || '00-00-0000';

		if (branch_and_version) {
			$.ajax({
				type: 'GET',
				url: baseURL + '/!/Attendance/AttendanceReport/get_report/' + branch_and_version + '/' + date_from + '/' + date_to,
				success: function (response) {
					$('#get-report').html(response);
				}
			});
		}
	});

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

@endsection