@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
          <a class="btn btn-warning btn-xs pull-right" href="{{ route('LoggedIn.Attendance.AttendanceTime.Index') }}">
            <i class="fa fa-chevron-left"></i> Go Back
          </a>
        </strong>
      </div>
      <div class="panel-body">
        @include ('Layouts.FormValidationErrors')
        @include ('Layouts.ErrorSuccessAndWarninMessages')

        <form class="form-horizontal" method="POST" action="{{ route('LoggedIn.Attendance.AttendanceTime.store') }}">
          @csrf

          <div class="form-group form-group-sm">
            @include ('includes.branch_shift_version_names_block_column', ['fieldColWidth' => 4, 'required' => true])

            @include ('includes.class_names_block_column', ['fieldColWidth' => 4, 'required' => true])

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

            <label for="start_time" class="col-sm-1 control-label">Start Time </label>
            <div class="col-sm-2">
              <input  type="text" class="form-control" id="start_time" name="start_time" placeholder="Start Time" />
            </div>

            <label for="late_time" class="col-sm-1 control-label">Late Time </label>
            <div class="col-sm-2">
              <input  type="text" class="form-control" id="late_time" name="late_time" placeholder="Late Time" />
            </div>

            <label for="end_time" class="col-sm-1 control-label">End Time </label>
            <div class="col-sm-2">
              <input  type="text" class="form-control" id="end_time" name="end_time" placeholder="End Time" />
            </div>
          </div>
          <div class="form-group form-group-sm">
            <div class="col-sm-12">
              <button type="submit" id="section_submit" class="btn btn-success btn-block">
                <i class="fa fa-floppy-o" aria-hidden="true"></i> Save
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
  $("#branch_and_version").trigger('change');
  $('#start_time').timepicker();
  $('#late_time').timepicker();
  $('#end_time').timepicker();
});
</script>

@endsection