@extends('admin.layouts.contentLayoutMaster')

@section('title','Blog Create')
@section('pagelevelcss')
@stop
@section('content')
<div class="section">
    <div class="card">
        <div class="card-content">
            <div class="row">
              <!-- Form Advance -->
              <div class="col s12 m12 l12">
                  <div class="card-content">
                    <form action="{{route('blog.save')}}" method="post" name="create_blog_form" id="create_blog_form"  enctype="multipart/form-data">
                      {{ csrf_field() }}
                      <div class="row">
                        <div class="input-field col s12">
                            <select id="blog_category_id" name="blog_category_id" value="{{old('blog_category_id')}}">
                              <option value="">---Select Blog Category---</option>
                              @if(count($blog_category) > 0)
                                @foreach($blog_category as $value)
                                  <option value="{{$value->id}}">{{$value->name}}</option>
                                @endforeach
                              @endif
                            </select>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                            <input id="name" type="text" name="name" value="{{old('name')}}" maxlength="255">
                            <label for="name">Name<span class="red-text">*</span></label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                            <input id="created_by" type="text" name="created_by" value="{{old('created_by')}}" maxlength="255">
                            <label for="created_by">Created By<span class="red-text">*</span></label>
                        </div>
                      </div>
                      <div class="row">
                        <label for="description" class="ckeditor-lable">Description<span class="red-text">*</span></label>
                        <div class="input-field col s12">
                          <textarea class="materialize-textarea ckeditor" name="description" id="description">{{old('description')}}</textarea>
                          <span class="description-error ckeditor-error-msg"></span>
                        </div>
                      </div>
                      <div class="file-field input-field">
                        <div class="btn">
                          <span>Image</span>
                          <input type="file" name="image" id="image">
                        </div>
                        <div class="file-path-wrapper">
                          <input class="file-path validate" type="text">
                        </div>
                        <span class="blog-image-error" style="color: #FF4081;"></span>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                          <button class="btn waves-effect waves-light left" type="submit">Submit
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
              </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('pageleveljs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="{{asset('backend/js/ckeditor/ckeditor.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.ckeditor').ckeditor();
});
$(function(){
  $.validator.addMethod("ckeditor_validation", function (value, element) {  
      var idname = $(element).attr('id');
      var editor = CKEDITOR.instances[idname];
      var ckValue = GetTextFromHtml(editor.getData()).replace(/<[^>]*>/gi, '').trim();
      if (ckValue.length === 0) {
          $(element).val(ckValue);
      } else {
          $(element).val(editor.getData());
      }
      if ($(element).val().length == 0) {
        return false;
      } else {
        $('.description-error').text('');
        return true; 
      }
      // return $(element).val().length > 0;
  }, "");
  function GetTextFromHtml(html) {
      var dv = document.createElement("DIV");
      dv.innerHTML = html;
      return dv.textContent || dv.innerText || "";
  }
  $.validator.addMethod('filesize', function (value, element, param) {
      return this.optional(element) || (element.files[0].size <= param)
  }, 'Maximum file size to upload is 2MB.');
  $("#create_blog_form").validate({
      ignore: [],
      rules: {   
          blog_category_id:"required",
          name:"required",
          created_by:"required",
          description:{
            // required: true,
            ckeditor_validation: true,
          },
          image: {
            required: true,
            extension: "jpg,jpeg,png",
            filesize: 2097152,
          },
      },
      messages:{
          blog_category_id: {
              required: "Please select blog category.",
          },
          name: {
              required: "Please enter name.",
          },
          created_by: {
              required: "Please enter created by.",
          },
          description: {
              // required: "Please enter description.",
              ckeditor_validation: "Please enter description.",
          },
          image: {
              required: "Please upload image.",
              extension: "Only image type jpg/png/jpeg is allowed.",
              filesize: "Maximum file size to upload is 2MB.",
          },       
      },
      errorPlacement: function(error, element) {
        if (element.attr("name") == "description" ) {
            $(".description-error").text(error[0].innerText);
        } else if (element.attr("name") == "image" ) {
            $(".blog-image-error").text(error[0].innerText);
        } else {
            error.insertAfter(element);
        }
      },
      errorElement: 'span',
  });
});
</script>
@stop