@extends('layouts.app')

@section('content')

    <div class="card">

        <div class="card-header bg-primary text-white">
            
            <h5  class="my-1 float-left">เพิ่ม Singlepage ใหม่</h5>

            <div class="btn-group btn-group-sm float-right" role="group">
                <a href="{{ route('singlepages.singlepage.index') }}" class="btn btn-primary" title="แสดง Singlepage ทั้งหมด">
                    <i class=" fas fa-fw fa-th-list" aria-hidden="true"></i>
                </a>
            </div>

        </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('singlepages.singlepage.store') }}" accept-charset="UTF-8" id="create_singlepage_form" name="create_singlepage_form" class="form-horizontal" enctype="multipart/form-data">
            {{ csrf_field() }}
            @include ('singlepages.form', [
                                        'singlepage' => 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('style')
 
<link href="{{asset('dpicker')}}/datepicker.css" rel="stylesheet" media="screen">
<link href="{{asset('dpicker')}}/prettify.css" rel="stylesheet">
@endsection 

@section('script')
<script src="{{asset('dpicker')}}/prettify.js"></script>
<script src="{{asset('dpicker')}}/bootstrap-datepicker.js?={{$version}}"></script>
<script src="{{asset('dpicker')}}/bootstrap-datepicker-thai.js"></script>
<script src="{{asset('dpicker')}}/bootstrap-datepicker.th.js"></script>
<script id="example_script" type="text/javascript">
      function demo() {
        $('.datepicker').datepicker();
      }
    </script>
<script type="text/javascript">
      $(function(){
        $('pre[data-source]').each(function(){
          var $this = $(this),
            $source = $($this.data('source'));

          var text = [];
          $source.each(function(){
            var $s = $(this);
            if ($s.attr('type') == 'text/javascript'){
              text.push($s.html().replace(/(\n)*/, ''));
            } else {
              text.push($s.clone().wrap('<div>').parent().html()
                .replace(/(\"(?=[[{]))/g,'\'')
                .replace(/\]\"/g,']\'').replace(/\}\"/g,'\'') // javascript not support lookbehind
                .replace(/\&quot\;/g,'"'));
            }
          });
          
          $this.text(text.join('\n\n').replace(/\t/g, '    '));
        });

        prettyPrint();
        demo();
      });
    </script> 
<script src="{{asset('ckeditor')}}/ckeditor.js"></script>
 
 
 <script>
var url = "{{url('ckupload')}}?_token={{csrf_token()}}";
CKEDITOR.replace(  'detail', {
filebrowserImageUploadUrl: url,
	filebrowserUploadMethod: "form",
filebrowserUploadUrl: url, 
 extraPlugins: 'uploadimage,image,youtube',
			height: 300,
			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	 
		}); 
 
 
</script>
@endsection