@extends('layouts.adminlte')
@section('bodyClass', 'hold-transition skin-blue sidebar-aside')

@push('css')
    <style>
        .drag-disabled + .note-editor .note-dropzone { opacity: 0 !important; }
    </style>
@endpush

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="box box-info" id="filedrag">
            <div class="box-header with-border">
                <h3 class="box-title">Create new post</h3>
            </div>
                <div class="box-body pad">
                    <form action="{{route('posts.store')}}" class="form-group" method="POST"  enctype="multipart/form-data" >
                        {{ csrf_field() }}
                        <div class="row">
                        <div class="col-md-8">
{{--                            <div class="media-loader-parent">--}}
{{--                                <div class="input-group ">--}}
{{--                                    <span class="input-group-addon"><i class="fa fa-upload"></i></span>--}}
{{--                                    <input multiple type="text " class="form-control media-loader" placeholder="Choose file" value="storage/public/2UpjoyvHAc2SuwZBRtpcTBJLFBKTM-UBJ32GPL0-342e949b8d6a-192%20-%20Copy.png">--}}
{{--                                </div>--}}
{{--                            </div>--}}
                            <label>Title &nbsp;<span style="color:#db4437;">*</span></label>
                            <input id="post-title" type="text"  name="title" class="form-control" placeholder="Enter title here" required/><br/>

                            <textarea class="contentEditor drag-disabled"   name="content" placeholder="Place your post content here"
                                    style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;" required>
                            </textarea>
                            <div class="form-group">
                                <label for="category_id" class="">Category</label><br/>

                                <input type="hidden" name="category_id"/>
                                <select class="select2 category_id" style="width: 100%;" name="category_id"  >
                                    <option value="">No Category</option>
                                    {!! $treeComboBox !!}
                                </select>
                            </div>
                            <div class="form-group">
                                <label class=" "> Tag</label><br/>
                                <select id="cbo-admins" class=" select2 tag_id" style="width: 100%;"  multiple="multiple" name="tag_id[]" style="width: 100%;" tabindex="-1" aria-hidden="true">
                                    @foreach($listTags as $item)
                                        <option  value={{$item->id}}>{{$item->tag_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <hr>
                            <div class="form-group" id="customField">
                                <label class=" "> Custom fields</label>
                            </div>
                            <div class="text-right">
                                <button type="button" class="btn btn-primary addMoreField" data-target="#customField"> <i class="fa fa-plus mr-1"></i> Add field</button>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group  ">
                                <label for="avatar" class="  control-label">Photo</label>
                                <div class="media-loader-parent">
                                    <div class="input-group ">
                                        <span class="input-group-addon"><i class="fa fa-upload"></i></span>
                                        <input autocomplete="off" multiple type="text " class="form-control media-loader" placeholder="Choose file" name="photo">
                                    </div>
                                </div>
                            </div>

                            @if($isPublisher)
                                <label>
                                    <input class="flat-red" name='is_publish' id="is_publish" style='vertical-align: top;' type="checkbox"> <span>Publish this post</span>
                                </label>
                                <br/>
                                <div id='pick-publish-date' >
                                    <label>Date publish</label>
                                    <div class="input-group date">
                                        <div class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <input type="text" name="date" class="form-control  pull-right datepicker" id="datepicker">
                                    </div><br/>
                                </div>
                            @endif
                        </div>
                        </div>

                        <div class="box-footer">

                            <div class="col-md-12">
                              <div class=" pull-right">
                                  <button class="btn btn-primary"><i class="fa fa-plus mr-1"></i> Add</button>
                              </div>
                            </div>
                        </div>
                    </form>
                </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')

  <script type="text/javascript">
      $(function () {
          $('.fileselect').customFileUpload({
              accepts: ['image/gif', 'image/jpeg', 'image/png']
          });

          $('.select2').select2();
          //bootstrap WYSIHTML5 - text editor
          $('.contentEditor').summernote({
              height: 150,   //set editable area's height

          });

          $(".datepicker").datepicker({
              'autoclose': true
          }).datepicker("setDate", new Date());

          $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
              checkboxClass: 'icheckbox_square-green'
          }).on('ifChanged', function(event){
              $("#pick-publish-date").toggle();
          });

            // $("#post-title").on('input',function(e){
            //     //console.log($(this).val());
            //     $("#post-slug").attr("placeholder", string_to_slug($(this).val()));
            // })

        });

  </script>
@endpush