@extends('admin.dashboard')

@section('Title', 'Create Topic')

@section('stylesheets')
  <link rel="stylesheet" href="/css/admin/dist/bootvalidation.css">
  <link rel="stylesheet" href="/css/admin/colorpicker/bootstrap-colorpicker.min.css">
@endsection

@section('content')

<div class="content-header">
   <h1>
    Dashboard
    <small>OPALESCE Version 1.0</small>
    </h1>
    {!! Breadcrumbs::render('addtopic') !!}
</div>

<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">Create Topic</h3>
      </div><!-- /.box-header -->
      @if (count($errors) > 0)
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      <!-- form start -->

      {!! Form::open(['route'=> 'admin.topics.store', 'method'=>'POST', 'class'=> 'form-horizontal', 'files'=> true ]) !!}
        <div class="box-body">

          <div class="form-group">
            {{ Form::label('name', 'Title', ['class'=>'col-sm-2 control-label', 'for'=>'validate-title']) }}
  					<div class="input-group col-sm-9" data-validate="length" data-length="5">
              {{ Form::text('name', null, array(
                'class' => 'form-control',
                'id' => 'validate-text',
                'placeholder' => 'Title...',
                'required'=> '',
                'maxlength'=>'255'))
              }}
  						<span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
  					</div>
				  </div>

          <div class="form-group">
            {{ Form::label('color', 'Topic Color:', ['class' => 'col-sm-2 control-label', 'for'=>'validate-text']) }}
            <div class="input-group col-sm-9">
              {{ Form::text('color', null, array(
                'class' => 'form-control my-colorpicker',
                'placeholder' => 'Pick Color...',
                'required'=> ''))
              }}
            </div>
          </div>

          <div class="form-group">
            {{ Form::label('description', 'Description', ['class'=>'col-sm-2 control-label', 'for'=>'validate-desc']) }}
            <div class="input-group col-xs-9">
               {{ Form::textarea('description', null, array('class' => 'form-control', 'placeholder' => 'Description...', 'rows'=> '5')) }}
            </div>
          </div>

          <div class="form-group">
            {{ Form::label('image', 'Upload Feature Image:', ['class' => 'col-sm-2 control-label']) }}
            <div class="col-sm-10">
              {{ Form::file('image') }}
            </div>
          </div>

          <div class="box-footer">
            <a href="{{url('admin/topics')}}" class="btn btn-danger pull-right">Cancel</a>
            <button type="submit" class="btn btn-success pull-right margin-right-btn">Add</button>
          </div><!-- /.box-footer -->

        </div>
      {!! Form::close() !!}

    </div>
  </div>
</div>
@endsection


@section('javascripts')
  <script src="/js/admin/dist/bootvalidation.js"></script>
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  <script src="/js/admin/colorpicker/bootstrap-colorpicker.min.js"></script>
  <script>

  tinymce.init({
    selector:'textarea',
    theme:'modern',
    plugins: 'code fullscreen',
    toolbar: 'undo redo |  insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'

  });

  //Colorpicker
  $(".my-colorpicker").colorpicker();

  </script>
@endsection