@extends('layouts.app') 
@section('title', $pageInfo->page_title) 
@section('content')
 <script src="https://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
<section class="content">
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <div class="box">
                    <div class="box-body">
						<div class="inner-head-section">                            
						    <div class="row align-items-center">                                
						        <div class="col-md-6 col-xs-12 text-left">                                    
						            <div class="inner-title"> <span>{{$pageInfo->page_title}}</span> </div> </div>
    						            <div class="col-md-6 col-xs-12 text-right">                                    
        						            <div class="all-vol-btn">                                         
        						            <a href="{{url($pageInfo->home_url)}}"><button type="button">Back</button></a>
        						            </div>                                
    						            </div>                            
						            </div>                        
						          </div>
                        <div class="card-box-area">
                            <div class="card-box-area-inner">
	                            <div class="row justify-content-center">
	                                <div class="col-md-12">
					        			
										<form action="{{url($pageInfo->save_url)}}" method="post" enctype="multipart/form-data">
                                         {{ csrf_field() }}
										 
										@if (session('error'))
										<div class="alert alert-danger">
											{{ session('error') }}
										</div>
										@endif 
										@if (session('success'))
										<div class="alert alert-success">
											{{ session('success') }}
										</div>
										@endif
										<input type="hidden" name="id" value="">																				
						     			<div class="form-role-area">
											<div class="control-group info">
												<div class="row align-items-center">
	                                                <div class="col-md-3">
														<label class="span2">{{$pageInfo->page_single_title}} Title</label>
													</div>
													<div class="col-md-9">
	                                                    <input class="form-control" type="text" placeholder="Title"  maxlength="50" name="title" value="{{isset($data->title) ? $data->title :old('title')}}">
														@error('title')
														<label class="text-danger mt-3">{{$message}}</label>
														@enderror
	                                                </div>
												</div>
											</div>
											
											
											
							<div class="row align-items-center">
	                                                <div class="col-md-3">
														<label class="span2">Image</label>
													</div>
													<div class="col-md-9">
	    
                     <div class="controls">
	                <div style="margin-bottom:15px;">
																																												<input name="old_image" value="" type="hidden">
					</div>
													    <div class="image-info">
															<span>
															Allowed image type  : <b> (jpg, png, gif)</b>
															</span>
															<!--<br>
															<span>
															Allowed image size maximum  : <b> (1Mb)</b>
															</span>
															<br>
															<!--<span>
															Allowed image in only  dimensions(WXH) 1920pxX428px
															</span>-->
														
															<div class="entry input-group col-xs-3" style="margin-bottom:15px;">
															
		<img id="fileUpload-Image" src="{{url('images/no-image.png')}}" alt="preview image" width="100" height="80"/>													
		<input class="btn btn-primary" name="image" type="file" accept="image/x-png,image/gif,image/jpeg,,image/jpg" id="upload" onchange="Upload('upload')"/>
														</div>
															
														</div>
                                              
                                              											
														@error('image')
			<label class="text-danger mt-3">{{$message}}</label>
														@enderror
	                                                </div>
												</div>
											</div>	
							
											<div class="form-role-area">
											<div class="control-group info">				
											<div class="next-step-btn">
												<div class="universal-border-sitecolor-btn">
								                    <a href="{{url($pageInfo->home_url)}}"><button type="button">Back</button></a>
								                </div>
								                <div class="universal-sitecolor-btn">
								                    <button type="submit">Submit</button>
								                </div>
								            </div>
	 									</div>
	 								</form>
							</div>
						</div>
					</div>
				</div><!-- /.box -->         
			</div><!-- /.col-->
		</div><!-- ./row -->
	</section><!-- /.content -->			
</section>
<script>

function Upload(imageId) {
	
      var fileUpload = document.getElementById(imageId);
      //Check whether the file is valid Image.
      var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|jpge|.png|.gif)$");
      if (regex.test(fileUpload.value.toLowerCase())) {
          if (typeof (fileUpload.files) != "undefined") {
              //Initiate the FileReader object.
              var reader = new FileReader();
              //Read the contents of Image File.
              reader.readAsDataURL(fileUpload.files[0]);
              reader.onload = function (e) {
              //Initiate the JavaScript Image object.
              var image = new Image();
              //Set the Base64 string return from FileReader as source.
                image.src = e.target.result;
				$("#fileUpload-Image").attr('src', e.target.result);
              //Validate the File Height and Width.
                image.onload = function () {

                    var height = this.height;
                    var width = this.width;
    			    var imagesize=fileUpload.files[0].size;
    			
    			    /*if (height  =< 400 || width !=1920) {
    				document.getElementById(imageId).value='';
    				$("#MsgModal .modal-body").html('<span style="color:red"> Allowed image in only  dimensions(WXH) 1920pxX428px</b></span>');
    			    $("#MsgModal").modal('show');
                          return false;
                    }*/
					
                  };

              }
          }
        }
    }
 CKEDITOR.replace('content', {
    height: 300,
    filebrowserUploadUrl: "upload.php",
    allowedContent:true,
    extraAllowedContent: 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}',
 });
 CKEDITOR.dtd.$removeEmpty.i = 0;
</script>

@endsection