@extends ('Layouts.Application')

@section ('MainContent')

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-default">
			<div class="panel-heading"><strong>Attendance Time Edit </strong></div>
			<div class="panel-body">
				@include ('Layouts.FormValidationErrors')
				@include ('Layouts.ErrorSuccessAndWarninMessages')

				<form class="form-horizontal" method="POST"
					action="{{ route('LoggedIn.Attendance.AttendanceTime.update', array('attendance' => $attendanceTime->id)) }}"
				>
					@csrf
					{{ method_field('put') }}

					<div class="form-group form-group-sm">
						<label for="start_time" class="col-sm-2 control-label">Start Time</label>
						<div class="col-sm-2">
							<input type="text" class="form-control" id="start_time" name="start_time"
								value="{{ date('h:i A', strtotime($attendanceTime->start_time)) }}"
							/>
						</div>

						<label for="late_time" class="col-sm-2 control-label">Late Time</label>
						<div class="col-sm-2">
							<input type="text" class="form-control" id="late_time" name="late_time"
								value="{{ date('h:i A', strtotime($attendanceTime->late_time)) }}"
							/>
						</div>

						<label for="end_time" class="col-sm-2 control-label">End Time</label>
						<div class="col-sm-2">
							<input type="text" class="form-control" id="end_time" name="end_time"
								value="{{ date('h:i A', strtotime($attendanceTime->end_time)) }}"
							/>
						</div>
					</div>

					<div class="form-group form-group-sm">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="submit" class="btn btn-success btn-sm">
								<i class="fa fa-floppy-o" aria-hidden="true"></i> Save
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function () {
	$('#start_time').timepicker();
	$('#late_time').timepicker();
	$('#end_time').timepicker();
});
</script>

@endsection