@extends('layouts.main')
@section('title','Edit 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>
@php
	$page_name = '';
	if($module == 'blog'){
		$page_name = 'Blog';
	}elseif($module == 'event'){
		$page_name = 'Event';
	}elseif($module == 'media-release'){
		$page_name = 'Media Release';
	}
@endphp
<input type="hidden" name="page_type" id ="page_type" value="{{ $module }}" />
<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>Edit {{$page_name}} 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="hme-loading-mask">
						<div class="hme-loading-container">
							<div class="hme-dual-ring"></div>
							<div>Please wait, Loading...</div>
						</div>
						
					</div> -->
					<div class="row">
						<div class="col-xs-12 col-sm-12 col-md-8 col-xl-8">
							{!! Form::open(['route' =>'page_update','method'=>'POST','name'=>'blogform','files' => true,'id'=>'js-pagecms-add']) !!}
							{!!Form::hidden('blogid',$id)!!}
							{!!Form::hidden('filename',$filename)!!}
							{!!Form::hidden('type',$module)!!}
							{!!Form::hidden('alias',$alias)!!}
								<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',$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',$alias,['class'=>'form-control','placeholder'=>'Enter URL Without Any Space','maxlength'=>'290', 'disabled'=>'true', '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',$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',$meta_desc,['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-3 col-form-label">Thumbnail Image <span style="color: #f0433a;">*</span> :</label>
				                    <div class="row col-sm-9 p-r-0">
				                      <div class="col-sm-3 m-t-5">  
                                          <input type="file" class="thumbnail_image" id="js-thumnile" name="thumbnail_img" />
    									  <label id="file-input-label" for="js-thumnile">Upload</label>
                                      </div>
                                      	<div class="col-sm-9 m-t-10 p-l-0" style="font-size: 12px;">
			                              <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-10 p-r-0">
                                        	<span class="text-danger image_path" id="thumbnail_image_url" style="line-break:anywhere;">{{$thumbnail_images ?? ''}}</span>
                                    	</div>
                                    	<div class="col-sm-2 p-r-0  @if(empty($thumbnail_images)) d-none @endif" id="file-copy-label_div">
			                            	<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 class="col-sm-12 pt-2" id="thumbnail_image_url" style="line-break:anywhere;">{{$thumbnail_images ?? ''}}</div>-->
				                     @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>

				                   <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',html_entity_decode(htmlspecialchars_decode($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">
				                    <div class="col-md-12 text-left">
				                    <button type="submit" class="btn btn-primary" id="js-pagecms-submit">Update Page</button>
				                    </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', $("#page_type").val());previous_image_path
	formData.append('previous_image_path', $("#previous_image_path").val());
	formData.append('existing_image_path', $('.image_path').text());
	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");
            }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_alias').bind("cut copy paste",function(e) {
     // e.preventDefault();
 });

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('page_update')}}",
            type:"post",
            processData: false,
            contentType: false,
            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(){ 
		                	 // window.location.href="{{ secure_url('media-release')}}";
		                	 window.history.go(-1);
                      	});
                      } 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