@extends('admin.layouts.contentLayoutMaster')

@section('title','Banner 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('homepage.banner.save')}}" method="post" name="create_banner_form" id="create_banner_form"  enctype="multipart/form-data">
                      {{ csrf_field() }}
                      <div class="row">
                        <div class="input-field col s12">
                            <input id="title" type="text" name="title" value="{{old('title')}}" maxlength="255">
                            <label for="title">Title<span class="red-text">*</span></label>
                        </div>
                      </div>
                      <div class="row">
                        <div class="input-field col s12">
                            <input id="button_label" type="text" name="button_label" value="{{old('button_label')}}">
                            <label for="button_label">Button Lable</label>
                        </div>
                      </div>
                      <label>Type<span class="red-text">*</span></label>
                      <div class="row">                      
                        <div class="input-field col">
                          <p>
                            <label>
                              <input name="type" type="radio" value="mobile" {{old('type') == 'mobile' ? 'checked' : ''}}/>
                              <span>Mobile</span>
                            </label>
                          </p>
                        </div>
                        <div class="input-field col">
                          <p>
                            <label>
                              <input name="type" type="radio" value="url" {{old('type') == 'url' ? 'checked' : ''}} {{old('type') != 'mobile' ? 'checked' : ''}}/>
                              <span>URL</span>
                            </label>
                          </p>
                        </div>
                      </div>
                      <div class="row button-url-hide">
                        <div class="input-field col s12">
                            <input id="button_url" type="text" name="button_url" value="{{old('button_url')}}">
                            <label for="button_url">Button URL</label>
                        </div>
                      </div>
                      <div class="row mobile-hide" style="display:none;">
                        <div class="input-field col s12">
                            <input id="mobile" type="text" name="mobile" value="{{old('mobile')}}">
                            <label for="mobile">Button Mobile</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(){
 $("input[name$='type']").click(function() {
      var type = $(this).val();
      if (type == 'url') {
        $(".mobile-hide").hide();
        $("#mobile").val('');
        $(".button-url-hide").show();
      } else {
        $(".button-url-hide").hide();
        $("#button_url").val('');
        $(".mobile-hide").show();
      }
  });

  $.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.');
  jQuery.validator.addMethod("mobile", function(value, element) {
      return this.optional(element) || /^([0-9\-\+\(\)]*)$/.test(value);
  }, "Please enter valid mobile number");
  $("#create_banner_form").validate({
      ignore: [],
      rules: {   
          title:"required",
          button_url: {
            url: true
          },
          mobile: {
            mobile: true
          },
          description:{
            // required: true,
            ckeditor_validation: true,
          },
          image: {
            required: true,
            extension: "jpg,jpeg,png",
            filesize: 2097152,
          },
      },
      messages:{
          title: {
              required: "Please enter title.",
          },
          mobile: {
              mobile: "Please enter valid mobile number.",
          },
          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