@extends ('Layouts.Application')

@section ('MainContent')

<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading"><strong> Class Room </strong>
        @if (\App\Models\Permission::checkLinkPermission('ClassRoomController', 'Task', 'create'))
          <a href="{{ url('!/Task/ClassRoom/Create') }}" class="pull-right btn btn-primary btn-xs" title="Create Homework">
            <i class="fa fa-plus-circle"></i> Create Class Room
          </a>
        @endif
      </div>

      <div class="panel-body">
        @include ('Layouts.FormValidationErrors')
        @include ('Layouts.ErrorSuccessAndWarninMessages')

        <form class="form-horizontal" id="classroom-form" role="form" onsubmit="return false;">
          @csrf

          <div class="form-group form-group-sm">
            <label for="inputdate" class="col-sm-1 control-label">Date </label>
            <div class="col-sm-2">
              <input type="text" name="class_date" class="form-control class_date" autocomplete="off" placeholder="DD-MM-YYYY">
            </div>

            <div class="col-sm-2">
              <button type="button" class="btn btn-primary btn-sm btn-block" id="view-classroom-btn">
                <i class="fa fa-search" aria-hidden="true"></i> View Class Rooms
              </button>
            </div>
          </div>
        </form>
      </div>
      <div id="view-classsroom-table"></div>
    </div>
  </div>
</div>

<script type="text/javascript">
$('.class_date').datepicker({
  format: 'dd-mm-yyyy',
  autoclose: true,
  todayHighlight: true
});

$("#view-classroom-btn").on('click', function() {
  var class_date = $(".class_date").val();

  if (class_date) {
    $.ajax({
      type: 'POST',
      url: baseURL + '/!/Task/ClassRoom/View',
      data: $("#classroom-form").serialize(),
      success: function(response) {
        $("#view-classsroom-table").html(response);
      }
    });
  } else {
    alert('Please select a date first!');
  }
});
</script>

@endsection