@extends('layouts.app')

@section('content')

    <div class="card"> <div class="card-header bg-success text-white">
            
            <h5  class="my-1 float-left">เพิ่ม พรรณไม้ ใหม่<div class="btn-group btn-group-sm float-right" role="group">
                <a href="{{ route('floras.flora.index') }}" class="btn btn-primary" title="แสดง พรรณไม้ ทั้งหมด">
                    <i class=" fas fa-fw fa-th-list" aria-hidden="true"></i>
                </a>
            </div></h5>

            

        </div>

        <div class="card-body">
        
            @if ($errors->any())
                <ul class="alert alert-danger">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            @endif

            <form method="POST" action="{{ route('floras.flora.store') }}" accept-charset="UTF-8" id="create_flora_form" name="create_flora_form" class="form-horizontal" enctype="multipart/form-data">
            {{ csrf_field() }}
            @include ('floras.form', [
                                        'flora' => null,
                                      ])

                <div class="form-group">                     
						<div align="center">
						  <button class="btn btn-primary" type="submit">
						  <i class="fas fa-fw fa-save"></i> บันทึก</button>
						  <button class="btn btn-light" type="reset" onclick="history.back();"> 
						  <i class="fas fa-fw fa-redo" aria-hidden="true"></i> ยกเลิก</button>
						</div>
                </div>

            </form>

        </div>
    </div>

@endsection


@section('script')

<script src="{{asset('ckeditor/ckeditor.js')}}"></script>
<script>
var url = "{{url('ckupload')}}?_token={{csrf_token()}}";
CKEDITOR.replace('detail', {
filebrowserImageUploadUrl: url,
filebrowserUploadUrl: url, 
 extraPlugins: 'uploadimage,image,youtube',
			height: 400,
			uploadUrl: "{{url('fastupload')}}?command=QuickUpload&type=Files&responseType=json&_token={{csrf_token()}}",
			stylesSet: [
				{ name: 'Narrow image', type: 'widget', widget: 'image', attributes: { 'class': 'image-narrow' } },
				{ name: 'Wide image', type: 'widget', widget: 'image', attributes: { 'class': 'image-wide' } }
			],	
			contentsCss: [ CKEDITOR.basePath + 'contents.css', 'http://sdk.ckeditor.com/samples/assets/css/widgetstyles.css' ],
			image2_alignClasses: [ 'image-align-left', 'image-align-center', 'image-align-right' ],
			image2_disableResizer: true ,
			removePlugins: 'elementspath',
    resize_enabled: true	 
		}); 
 
CKEDITOR.addCss(".cke_editable{border-color: #FF0000;}");  
$('img').css('max-width','100%');
$('img').css('height','');
</script>
@endsection