@extends ('Layouts.Application')

@section ('MainContent')

<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h6 class="panel-title">Create Event</h6>
      </div>
      <div class="panel-body">
        @include ('Layouts.FormValidationErrors')
        @include ('Layouts.ErrorSuccessAndWarninMessages')

        <form class="form-horizontal" method="post" action="{{ route('LoggedIn.Task.AcademicCalendarNew.store') }}" enctype="multipart/form-data">
          @csrf

          <div class="form-group form-group-sm">
            <div class="col-sm-6">
              <label>Event Name</label>
              <input type="text" name="title" class="form-control">
            </div>
            <div class="col-sm-6">
              <label>Start Event Date</label>
              <input type="text" name="dateevent" class="form-control datepicker">
            </div>
            <div class="col-sm-6">
              <label>End Event Date</label>
              <input type="text" name="enddateevent" class="form-control datepicker">
            </div>
            <div class="col-sm-6">
              <label>Event Colour</label>
              <select type="text"  name="event_color" class="form-control">
                <option hidden="" value="">SELECT ONE</option>
                @foreach ($colors as $key => $value)
                  <option style="background-color: #{{ $value }}" value="{{ $value }}">{{ $key }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="form-group form-group-sm">
            <div class="col-sm-12" style="">
              <textarea class="form-control" name="EventDescription" placeholder="Event Description..."></textarea>
            </div>
          </div>
          <div class="col-sm-12">
            <button type="submit" class="btn btn-block btn-success">Add Event</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

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

@endsection