@extends('layouts.main')
@section('title','Add New Page')
@section('content')

<style>
  #js-thumnile {
    display: none;
  }
  #file-input-label {
    cursor: pointer;
    padding: 4px 31px;
    /*border: 1px solid #999;*/
    border-radius: 4px;
    margin-right: 20px;
    color: #fff;
  font-size: 14px;
  background: #0b6323;
  }
  #file-copy-label {
    padding: 4px 8px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    background: #0b6323;
  }
   #file-copy-label:hover {
   	background-color: #4d4d4d;
    color: white;
  }
  #file-input-label:hover {
   	background-color: #4d4d4d;
    color: white;
  }
 .tooltip {
  position: relative;
  display: inline-block;
  opacity: 1;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

</style>
<input type="hidden" name="previous_image_path" class="previous_image_path" id ="previous_image_path" value="" />
<div class="pcoded-content">
  <div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <div class="page-header">
          <div class="page-header-title">
            <h4>Add New Page</h4>
          </div>
        </div>

        <div class="page-body">
          @if($message = Session::get('success'))
                     <div class="alert alert-success background-success">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="icofont icofont-close-line-circled text-white"></i>
                      </button>
                      <strong>Success!</strong> {{ $message }}
                    </div>
                @elseif($message = Session::get('error'))
                <div class="alert alert-danger background-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <i class="icofont icofont-close-line-circled text-white"></i>
                    </button>
                    <strong>Error!</strong>{{ $message }}
                  </div>
                @endif
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8 col-xl-8">
              {!! Form::open(['route' =>'pagecmspost','method'=>'POST','name'=>'blogform','files' => true,'id'=>'js-pagecms-add']) !!}
                <div class="card-unborder card-block">
                          <div class="form-group row">
                            <label class="col-sm-12 col-form-label">Page Title <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12">
                            {!! Form::text('title',"",['class'=>'form-control','placeholder'=>'Enter Title','maxlength'=>'290','id'=>'media_title','onkeypress'=>'return allowOnlyLettersAndSpaceForTitle(event,this);'])!!}
                             @if ($errors->has('title'))
                                        <strong  class="help-block">{!! $errors->first('title') !!}</strong>
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="title-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('title') !!}" data-trigger="hover"></span>
                                     @endif
                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="col-sm-12 col-form-label">Alias/ URL <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12">
                            {!!Form::text('alias',"",['class'=>'form-control','placeholder'=>'Enter URL Without Any Space','maxlength'=>'290','id'=>'media_alias','onkeypress'=>'return allowOnlyLettersAndSpaceForAlias(event,this);'])!!}
                             @if ($errors->has('alias'))
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="title-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('alias') !!}" data-trigger="hover"></span>
                                     @endif

                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="col-sm-12 col-form-label">Meta Key :</label>
                            <div class="col-sm-12">
                            {!!Form::textarea('metakey',"",['class'=>'form-control','placeholder'=>'Enter Meta Key','maxlength'=>'500'])!!}
                             @if ($errors->has('metakey'))
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="title-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('metakey') !!}" data-trigger="hover"></span>
                                     @endif
                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="col-sm-12 col-form-label">Meta Key description :</label>
                            <div class="col-sm-12">
                            {!! Form::textarea('metadesc',"",['class'=>'form-control','placeholder'=>'Enter Meta Description'])!!}
                             @if($errors->has('metadesc'))
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="title-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('metadesc') !!}" data-trigger="hover"></span>
                                     @endif
                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="col-sm-12 col-form-label">File Name <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12">
                            {!! Form::text('filename',"",['class'=>'form-control','placeholder'=>'Enter File Name Only With Alphabets','maxlength'=>'150','id'=>'media_file_name','onkeypress'=>'return allowOnlyLetters(event,this);','onchange'=>'return removeSpecialChars(event,this.value);'])!!}
                             @if($errors->has('filename'))
                                        <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="title-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('filename') !!}" data-trigger="hover"></span>
                                     @endif
                            </div>
                          </div>

                          <div class="form-group row p-t-15 p-b-15">
                            <div class="col-sm-4 sub-header">
                    <h4 class="f-w-100 f-18 g-l-b">Define page Type :</h4>
                  </div>
             
                            <div class="col-sm-8">
                              <div class="form-radio">
                                          <div class="radio radio-inline">
                                              <label>
                                                  {{ Form::radio('type','blog',true ) }}
                                                  <i class="helper"></i>Blog
                                              </label>
                                          </div>
                                          <div class="radio radio-inline">
                                              <label>
                                                  {{ Form::radio('type','event') }}
                                                  <i class="helper"></i>Event
                                              </label>
                                          </div>
                                          <div class="radio radio-inline">
                                              <label>
                                                  {{ Form::radio('type','media-release') }}
                                                  <i class="helper"></i>Media Release
                                              </label>
                                          </div>
                                          <div class="radio radio-inline">
                                              <label>
                                                  {{ Form::radio('type','other_pages') }}
                                                  <i class="helper"></i>Other Pages
                                              </label>
                                          </div>
                                      </div>
                                  </div>
                          </div>

                          <div class="form-group row">
                            <div class="col-sm-4 sub-header">
                              <h4 class="f-w-100 f-18 g-l-b">Thumbnail Image <span style="color: #f0433a;">*</span> :</h4>
                            </div>
                            <div class="col-sm-2">
                              <input type="file" class="thumbnail_image" id="js-thumnile" name="thumbnail_img" />
                               <label id="file-input-label" for="js-thumnile">Upload</label>
                                  @if($errors->has('thumbnail_img'))
                                    <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="title-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('thumbnail_img') !!}" data-trigger="hover"></span>
                                  @endif
                            </div>
                            <div class="col-sm-6 m-t-5" style="font-size: 12px;padding-left: 5px;">
                              <label style="color: red;font-weight: bold;">(The file must not exceed 1MB and should have a unique name)</label>
                            </div>
                            <div class="col-sm-4"></div>
                            <div class="col-sm-6" style="padding-right: 0px;">
                              <span class="text-danger image_path" id="image_path" style="line-break:anywhere;"></span>
                            </div>
                            <div class="col-sm-2" id="file-copy-label_div" style="padding-left: 34px;">
                            	<div class="tooltip">
									<button type="button" id="file-copy-label" onmouseout="outFunc()">
									  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
									  	Copy text
									</button>
								</div>
                            </div>
                                    
                          </div>

                           <div class="form-group row">
                            <label class="col-sm-12 col-form-label">Page Content/ Description <span style="color: #f0433a;">*</span> :</label>
                            <div class="col-sm-12">
                            {!!Form::textarea('content',"",['class'=>'form-control summernote','placeholder'=>'Content','id'=>'content'])!!}
                            @if($errors->has('content'))
                              <span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="title-error-custom" data-toggle="tooltip" data-original-title="{!! $errors->first('content') !!}" data-trigger="hover"></span>
                            @endif
                            </div>
                          </div>

                          <div class="form-group row p-t-15 p-b-15">
                            <div class="col-sm-5 sub-header">
                    <h4 class="f-w-100 f-18 g-l-b">Page Status (Visibility) :</h4>
                  </div>
                  <div class="col-sm-7">
                    <div class="onoffswitch">
                                          <input type="checkbox" name="status" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                                            <label class="onoffswitch-label" for="myonoffswitch">
                                                <span class="onoffswitch-inner"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                        </div>
                  </div>
                  </div>
                       
                          <div class="form-group row">
                            <div class="col-md-12 text-left">
                            <button type="submit" class="btn btn-primary" id="js-pagecms-submit">Publish Page</button>
                            <a href="{{secure_url('blog-create')}}" class="p-l-40">Cancel</a>
                            </div>
                         </div>
                        
                         </div>
              {!! Form::close() !!}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection @section('footer')

<script type="text/javascript">

$(function(){
    $("#file-copy-label").on("click",function(){
      var temp=$("<input>");
      $('body').append(temp);
      temp.val($('#image_path').text()).select();
      document.execCommand("copy");

      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copied";
    });
});

    function outFunc() {
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copy to clipboard";
    }


$(document).on('change','.thumbnail_image',function(e){
  formData = new FormData();
  formData.append('thumbnail_img', $('input[type=file]')[0].files[0]);
  formData.append('page_type', $("input[type='radio'][name='type']:checked").val());
  formData.append('previous_image_path', $("#previous_image_path").val());
  formData.append('_token', "{{ csrf_token() }}");  
  $.ajax({
            url: "{{secure_url('local-drive-image-upload')}}",
            cache: false,
            contentType: false,
            processData: false,
            data: formData,
            type: "post",
            success: function (response) {
            if (response.status == 200) {
              $('.image_path').html(response.path).trigger('change');
              $('#previous_image_path').val(response.path);
              alertMessage("success","Image Uploaded Successfully","Success");
              $('#file-copy-label_div').removeClass('d-none');
            }else if(response.status == 501){
              swal({
                    html: true, 
                    title: '<span class="sweet-danger-text">Error</span>', 
                    text: response.message,
                    type: "error",
                    confirmButtonText: "OK",
                    closeOnConfirm: false,
                    confirmButtonColor: '#f0443a',
                  // },function(){
                  //   swal.close();
                  //   formData.append('image_overwrite', 1);
                  //   uploadImageAjax(formData);
                    });
            }else {
              swal({
                html: true, 
                title: '<span class="sweet-danger-text">Error</span>', 
                text: response.message,
                type: "error",
                showCancelButton: false,
                confirmButtonText: "OK",
                closeOnConfirm: false,
                confirmButtonColor: '#f0443a',
              });
            }
            $("#js-thumnile").val('');
          },
        });
});
function uploadImageAjax(formData){
  $.ajax({
        url: "{{secure_url('local-drive-image-upload')}}",
        cache: false,
        contentType: false,
        processData: false,
        data: formData,
        type: "post",
      success: function(data) {
        if(data.status ==200){           
         $('.image_path').html(data.path).trigger('change');
         $('#previous_image_path').val(data.path);
          alertMessage("success","Image Replaced Successfully","Success");
        }else{
          alertMessage("danger",data.message,"Error");
        }
      }
    });
}

// $('#media_title').bind("cut copy paste",function(e) {
//      e.preventDefault();
//  });
$('#media_alias').bind("cut copy paste",function(e) {
     // e.preventDefault();
 });
$('#media_file_name').bind("cut copy paste",function(e) {
     // e.preventDefault();
});
function removeSpecialChars(e,t){
  var special_chars_replaced = t.replace(/[^a-z]/gi, '');
  var number_replaced = special_chars_replaced.replace(/[0-9]/g, '');
     $('#media_file_name').val(number_replaced);
}

function allowOnlyLetters(e, t){
       if (window.event)    
       {    
          var charCode = window.event.keyCode;    
       }    
       else if (e)   
       {    
          var charCode = e.which;    
       }    
       else { return true; }    
       if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123)){
          return true;
       }else  
       {    
          return false;    
       }           
}
function allowOnlyLettersAndSpaceForTitle(e, t){
     var len = $('#media_title').val().length;
       if (window.event){    
          var charCode = window.event.keyCode;    
       }    
       else if (e){    
          var charCode = e.which;    
       }    
       else { return true; }
       if(len == 0){
        if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))    
           return true;
        else
          return false;  
       }else
          return true;    
}
function allowOnlyLettersAndSpaceForAlias(e, t){
     var len = $('#media_alias').val().length;
       if (window.event){    
          var charCode = window.event.keyCode;    
       }    
       else if (e){    
          var charCode = e.which;    
       }    
       else { return true; }
       if(charCode == 32)
        return false;
       if(len == 0){
        if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))    
           return true;
        else
          return false;  
       }else if((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 45))
          return true;
       else
          return false;      
}
$(document).ready(function() {
  $('.summernote').summernote({
    height: 250,
    width: 680,
    callbacks: {
    onImageUpload: function(images) {
     sendFile(images[0]);
    },
    onChange: function (content) {
            var html = content.trim();
            if (html.substring(0, 4) == '<br>' || html.substring(0, 11) == '<p><br></p>') {
                $(document).find('.summernote').summernote('code', '')
            }
        },
       onKeyup: function (e) {
          $('#js-pagecms-add').find('[name=content]').valid();
       }
  }
});

function sendFile(images,editor) {
        var data = new FormData();
        data.append("image", images);
        $.ajax({
            url: "{{secure_url('editorfileupload')}}",
            cache: false,
            contentType: false,
            processData: false,
            data: data,
            type: "post",
            success: function(response) {
                var image = $('<img>').attr('src', response.resources);
                $('.summernote').summernote("insertNode", image[0]);
            },
            error: function(data) {
            }
        });
    }
});

jQuery.validator.addMethod("specialCharacterValidation", function(value, element) {
  var value = $('#media_title').val();
    value1 = value.replace(/[^a-zA-Z0-9]/g, '');
    text = value1.replace(/[0-9]/g, '');
    if(text.length == 0){
      return false;
  }
    else{
      return true;
    }

}, "The title should not contain only special characters/numbers");
jQuery.validator.addMethod("startingSpecialCharacterValidation", function(value, element) {
  var value = $('#media_title').val();
   if(value.length > 0){
      charCode=value.codePointAt(0);
      if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123)){
        return true;
      }
      else{
        return false;
      }
  }
    else{
      return true;
    }

}, "The title should not start with special characters/numbers");

$('#js-pagecms-add').validate({
     errorElement: 'span',
     ignore: '.note-editor *',
  errorPlacement: function (error,element){
    var parent = $(element).parent();
    $('.tooltip').tooltip('hide');
    $("body").find('#'+error[0].id+'-custom').remove();
    parent.append('<span data-position="left" data-delay="0" class="js-tootletip icofont icofont-exclamation-circle text-danger tooltip-validate" id="'+error[0].id+'-custom" data-toggle="tooltip" data-original-title="'+error[0].innerText+'" data-trigger="hover"></span>');
    $('#'+error[0].id+'-custom').tooltip();
  },
  success: function (element){
  $("body").find('#'+element[0].id+'-custom').remove();
  $('#'+element[0].id+'-custom').tooltip('hide');
  $('.js-tooltip-validate').tooltip();
  },
  onfocusout: false,
    rules: {
        title: {
        required:true,
        maxlength:290,
        specialCharacterValidation:true,
        startingSpecialCharacterValidation:true,
      },
      alias: {
        required:true,
        maxlength:290,
        remote:{
                  url:"{{secure_url('pagecms/aliasnameunique')}}",
                  type:"get",
                  data:{
                    "elias_name":function(){
                      return $("#media_alias").val();
                    }                       
                  },
                }
      },
      filename: {
        required:true,
      },
      content: {
        required:true,
      },
      thumbnail_img: {
        required: {
                depends: function(element) {
                  if($('.image_path').text() == ""){
                       return true;                   
                  }else{
                    $('#js-thumnile-error-custom').remove();
                    return false;
                  }                 
                }
            },
      },
   },
  messages: {
     title: {
      required:"Please enter title",
      maxlength: "Title field accepts max 290 characters",
    },
     alias: {
      required:"Please enter alias",
      remote:"The Alias/URL already exists",
      maxlength: "Alias name accepts max 290 characters",
    },
     filename: {
      required:"Please enter a filename contains only letters without any spaces",
    },
      content: {
      required:"Please enter content",
    },
     thumbnail_img: {
      required:"Please upload thumbnail image",
    },
      
  },
    submitHandler:function(form){
    $("#js-pagecms-submit").text("Processing...").attr("disabled",true);
    // var form_data= $('#js-pagecms-add').serialize();
    var form = $('#js-pagecms-add')[0]; // You need to use standard javascript object herevar 
  formData = new FormData(form);
  formData.append('image_path', $('.image_path').text());
            $.ajax({
            url :"{{route('pagecmspost')}}",
            type:"post",
            processData: false,
            contentType: false,
            // enctype: 'multipart/form-data',
            data:formData,
            success: function(response){
              if(response.status == 200){
                       swal({
                      html: true, 
                      title: '<span class="sweet-success-text">Success</span>', 
                      text: response.message,
                      type: "success",
                      showCancelButton: false,
                      confirmButtonText: "OK",
                      closeOnConfirm: false,
                      confirmButtonColor: '#28e1bd',
                    },function(){ 
                      $(document).scrollTop(0);
                          window.location.reload();
                        });
                      } else{
                swal({
                  html: true, 
                  title: '<span class="sweet-danger-text">Error</span>', 
                  text: "Something Went Wrong. No records found, Sorry for the inconvenience.",
                  type: "error",
                  showCancelButton: false,
                  confirmButtonText: "OK",
                  closeOnConfirm: false,
                  confirmButtonColor: '#f0443a',
                });
              }
            }
          })
    
  }

 });


</script>
@endsection