@extends('adminlte::page')

@section('title_postfix', ' - Editar Artigo')

@section('content_header')
<h1>Comentário</h1>
@stop

@section('content')

<div class="box box-primary" style="margin-top: 2em">
  <div class="box-header with-border">
    <h3 class="box-title">Editar Comentário</h3>
  </div>

  <div class="box-body">
 

    <form action="{{ env('APP_URL') }}/postcomment/{{$postcomment[0]->id }}/{{ $post->id }}" method="POST" enctype=multipart/form-data style="margin-top: 20px">
      @csrf
       <div id="" class="tab-pane fade in active">
        <div class="form-group">
          <label for="inputAuthor">Autor</label>
        <input class="form-control" value="{{$postcomment[0]->author}}" type="text" id="inputAuthor" name="author">
      </div>
          <div class="form-group">
          <label for="inputEmail">Email</label>
        <input class="form-control" type="text"  value="{{$postcomment[0]->email}}" id="inputEmail" name="email">
      </div>
    <div class="form-group">
          <label for="inputComment">Commentário</label>
        
       <textarea class="form-control summernote" id="inputComment" name="comment" required>{{$postcomment[0]->comment}}</textarea>
          
    </div>
             <div class="form-group">
            <input {{ $postcomment[0]->active == 1 ? 'checked' : ''}} type="radio" id="css" name="active" value="1">
  <label for="css">Ativar</label><br>
  <input {{ $postcomment[0]->active == 0 ? 'checked' : ''}}  type="radio" id="javascript" name="active" value="0">
  <label for="javascript">Inactivar</label>
      </div>  
           
   </div>
  
      


      <button type="submit" class="btn btn-success"><i class="fa fa-check"></i>&nbsp;Submeter</button>
    </form>
  </div>
</div>

@stop

@section('css')
@endsection

@section('js')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<script src="//cdn.ckeditor.com/4.10.1/full-all/ckeditor.js"></script>-->
<!--<script src="{{ asset('js/ckeditor.js') }}"></script>-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!--<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<!--<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>-->
<link href="{{ asset('js/summernote.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/summernote.min.js') }}"></script>


<script>
$(document).ready(function() {
   $('.limitedsummernote').summernote({
        fontSizes: ['8', '9', '10', '11', '12', '14','16', '18','20','22', '24','26', '28','30','32', '34', '36','38','40','42', '44','46', '48' , '50','64', '82', '150'],
         spellCheck: false,
         lang: 'en-US', // default: 'en-US'
         disableGrammar: false,
        toolbar: [
	// [groupName, [list of button]]
	['font', ['fontname']],
        ['font', ['fontsize', 'color','fontsizeunit']],
                ['style', ['style']],
	['font', ['bold', 'italic', 'underline','superscript','subscript', 'strikethrough','clear']],
	
	['table', ['table']],
	['para', ['ul','ol','paragraph','height']],
	['insert', ['link','image', 'doc','picture']], // image and doc are customized buttons
	['misc', ['codeview', 'fullscreen','undo','redo',]],
],
    placeholder: 'Pequena descrição',
    height: 400,
     tabsize: 2,
                callbacks: {
                    onKeydown: function (e) { 
                        var t = e.currentTarget.innerText; 
                        if (t.trim().length >= 400) {
                            //delete keys, arrow keys, copy, cut, select all
                            if (e.keyCode != 8 && !(e.keyCode >=37 && e.keyCode <=40) && e.keyCode != 46 && !(e.keyCode == 88 && e.ctrlKey) && !(e.keyCode == 67 && e.ctrlKey) && !(e.keyCode == 65 && e.ctrlKey))
                            e.preventDefault(); 
                        } 
                    },
                    onKeyup: function (e) {
                        var t = e.currentTarget.innerText;
                        $('#maxContentPost').text(400 - t.trim().length);
                    },
                    onPaste: function (e) {
                        var t = e.currentTarget.innerText;
                        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                        e.preventDefault();
                        var maxPaste = bufferText.length;
                        if(t.length + bufferText.length > 400){
                            maxPaste = 400 - t.length;
                        }
                        if(maxPaste > 0){
                            document.execCommand('insertText', false, bufferText.substring(0, maxPaste));
                        }
                        $('#maxContentPost').text(400 - t.length);
                    }
                }
            });
 
  $('.summernote').summernote({
      fontSizes: ['8', '9', '10', '11', '12', '14','16', '18','20','22', '24','26', '28','30','32', '34', '36','38','40','42', '44','46', '48' , '50','64', '82', '150'],
         spellCheck: false,
         lang: 'en-US', // default: 'en-US'
         disableGrammar: false,
        toolbar: [
	// [groupName, [list of button]]
	['font', ['fontname']],
        ['font', ['fontsize', 'color','fontsizeunit']],
                ['style', ['style']],
	['font', ['bold', 'italic', 'underline','superscript','subscript', 'strikethrough','clear']],
	
	['table', ['table']],
	['para', ['ul','ol','paragraph','height']],
	['insert', ['link','image', 'doc','picture']], // image and doc are customized buttons
	['misc', ['codeview', 'fullscreen','undo','redo',]]],
             height: 400,
        tabsize: 2
        });
}); 
     
</script>
@endsection