@extends('master')

@section('title')
    Event
@stop

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/nav.css') }}">
    <link rel="stylesheet" href="{{ asset('css/timePicker.css') }}">
@stop

@section('content')

    <div class="row fullWidth">
        <div class="autoplay">
            <div><img class="" src="{{ asset('img/home/osizweni-test-header.jpg') }}"></div>
            <div><img class="" src="{{ asset('img/home/osizweni-header-blue.jpg') }}"></div>
            <div><img class="" src="{{ asset('img/home/osizweni-header-green.jpg') }}"></div>
        </div>
        @include('partials.dashboard-nav')
    </div>

    <div class="row fullWidth">
        <div class="bannerPage">

        <h1 style="text-align: left">ADD <span style="font-weight: 500; color: #003961;">EVENT ON CALENDAR</span></h1>

        {{ Form::open(['files' => true]) }}

          <div class="row">
            <div class="large-6 columns">
                <label>Event Name</label>
                {{ Form::text('event') }}
            </div>
            <div class="large-6 columns">
                <label>All Day?</label>
                {{ Form::radio('all_day', 1, true) }}
                       <span class="pLabel">Yes</span>
                {{ Form::radio('all_day', 0, false) }}
                       <span class="pLabel">No</span>
            </div>
          </div>

          <div class="row">
            <div class="large-6 columns">
                <label>Start Date</label>
                <input type="date" name="startDate" id="startDate" />
            </div>
            <div class="large-6 columns">
                <label>End Date</label>
                <input type="date" name="endDate" id="endDate" />
            </div>
          </div>

          <div class="row">
            <div class="large-6 columns">
                <label>Start Time</label>
                <input class="time-picker" type="text" name="startTime" id="startTime" />
            </div>
            <div class="large-6 columns">
                    <label>End Time</label>
                    <input class="time-picker" type="text" name="endTime" id="endTime" />
            </div>
          </div>

          <div class="row">
            <div class="large-6 columns">
            <label>Invite Everyone?</label>
                  {{ Form::radio('invite_all', 1, true) }}
                         <span class="pLabel">Yes</span>
                  {{ Form::radio('invite_all', 0, false) }}
                         <span class="pLabel">No</span>
            </div>
            <div class="large-6 columns">
                <label>Location (Optional)</label>
                {{Form::text('location')}}
            </div>

            </div>


            <div class="row">
                <div class="large-12 columns">
                        <label>Description (Optional)</label>
                        {{ Form::textarea('description', null, ['class' => 'content']) }}
                    </div>
            </div>

            <div class="row">
                <div class="large-12 columns">
                    <label>Attachment</label>
                    {{ Form::file('attachment') }}
                </div>
            </div>

          <button style="margin-left: 0;" type="submit" class="">Submit</button>


          {{ Form::close() }}
        </div>
        <hr class="hrBooking">
    </div>
@include('partials.footer')

@stop

@section('scripts')
    <script src="{{ asset('js/scripts.js') }}"></script>
    <script type="text/javascript" src="js/jquery-timepicker.js"></script>
    <link rel="stylesheet" href="{{asset("redactor2/redactor.css")}}" />
      <script src="{{asset("redactor2/redactor.js")}}"></script>
      <script src="{{asset("js/redactor/plugins/scriptbuttons.js")}}"></script>
      <script type="text/javascript">
      $(document).ready(
      $(function()
      {
          $('.content').redactor({
                                    focus: true,
                                    imageUpload: '/redactorUpload',
                                    plugins: ['table', 'video','imagemanager','fontcolor','fontsize','fullscreen','scriptbuttons']

          });
      }));
      </script>
      <script>
      	$().ready(function(e) {

      		$('#timePicker').hunterTimePicker({
      			callback: function(e){
      				alert(e.val());
      			}
      		});

      		$(".time-picker").hunterTimePicker();
      	});
      </script>
@stop